Fix Select/ComboBox outline and margin (#172)

.changeset/clean-scissors-dress.md

@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": patch
+---
+
+Fixed Select/ComboBox component outline offset.

.changeset/nasty-melons-beg.md

@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": patch
+---
+
+Removed top margin from Select button.

packages/ui/src/components/combo-box/combo-box.tsx

@@ -85,7 +85,7 @@ export const ComboBoxInput = forwardRef<
   ComponentPropsWithoutRef<typeof InputPrimitive> & { className?: string | undefined }
 >(({ className, ...properties }, reference) => {
   const mergedClassName = cx(
-    "theme-galapago::group-disabled:bg-neutral-a-3 group inline-flex h-9 w-full select-none rounded-lg border border-transparent bg-white-a-3 pe-2 ps-3.5 text-base leading-none text-neutral-12 shadow outline outline-offset-0 outline-neutral-a-7 placeholder:text-neutral-10 entering:outline-2 entering:outline-primary-a-8 group-invalid:outline-x-negative-a-7 focus-visible:outline-primary-a-8 group-disabled:pointer-events-none group-disabled:bg-neutral-a-3 group-disabled:outline-neutral-a-6 group-invalid:group-disabled:outline-x-negative-a-6 theme-dfs:bg-canvas-1 theme-dfs:group-disabled:bg-neutral-a-3 theme-forerunner:group-disabled:bg-neutral-a-3 theme-galapago:bg-white theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm",
+    "theme-galapago::group-disabled:bg-neutral-a-3 group inline-flex h-9 w-full select-none rounded-lg border border-transparent bg-white-a-3 pe-2 ps-3.5 text-base leading-none text-neutral-12 shadow outline -outline-offset-1 outline-neutral-a-7 placeholder:text-neutral-10 entering:outline-2 entering:outline-primary-a-8 group-invalid:outline-x-negative-a-7 focus-visible:outline-primary-a-8 group-disabled:pointer-events-none group-disabled:bg-neutral-a-3 group-disabled:outline-neutral-a-6 group-invalid:group-disabled:outline-x-negative-a-6 theme-dfs:bg-canvas-1 theme-dfs:group-disabled:bg-neutral-a-3 theme-forerunner:group-disabled:bg-neutral-a-3 theme-galapago:bg-white theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm",
     className,
   );
   return <InputPrimitive className={mergedClassName} {...properties} ref={reference} />;

packages/ui/src/components/select/select.stories.tsx

@@ -8,6 +8,7 @@ import {
   Select,
   SelectButton,
   SelectDefaultListBoxItem,
+  SelectDescription,
   SelectFieldError,
   SelectIcon,
   SelectLabel,
@@ -84,12 +85,12 @@ const PreviewSelect = (properties: {
             </SelectLabel>
           ) : null}
           {hasLabel && hasLabelDescription ? (
-            <p className="mt-1 text-base/6 text-neutral-11 group-disabled:text-neutral-9 sm:text-sm/6">
+            <SelectDescription>
               {intl.formatMessage({
                 defaultMessage: "A mechanical device sensitive to sound.",
                 id: "2YVoI/",
               })}
-            </p>
+            </SelectDescription>
           ) : null}
           <SelectButton>
             <SelectValue />

packages/ui/src/components/select/select.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { CaretSortIcon } from "@radix-ui/react-icons";
-import { cx } from "classix";
 import React, { forwardRef, HTMLAttributes } from "react";
 import {
   Button as ButtonPrimitive,
@@ -12,6 +11,7 @@ import {
   Select as SelectPrimitive,
   SelectValue as SelectValuePrimitive,
 } from "react-aria-components";
+import { cx } from "@/helpers/cx";
 
 export const Select = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive>,
@@ -38,7 +38,7 @@ export const SelectLabel = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof LabelPrimitive> & { className?: string | undefined }
 >(({ className, ...properties }, reference) => {
   const mergedClassName = cx(
-    "block select-none text-base/6 text-neutral-12 group-disabled:text-neutral-11 sm:text-sm/6",
+    "mb-2 block select-none text-base/6 text-neutral-12 group-disabled:text-neutral-11 sm:text-sm/6",
     className,
   );
   return <LabelPrimitive className={mergedClassName} {...properties} ref={reference} />;
@@ -51,7 +51,7 @@ export const SelectDescription = forwardRef<
   HTMLAttributes<HTMLParagraphElement> & { className?: string | undefined }
 >(({ className, ...properties }, reference) => {
   const mergedClassName = cx(
-    "mt-1 text-base/6 text-neutral-11 group-disabled:text-neutral-9 sm:text-sm/6",
+    "-mt-1 mb-2 text-base/6 text-neutral-11 group-disabled:text-neutral-9 sm:text-sm/6",
     className,
   );
   return <p className={mergedClassName} {...properties} ref={reference} />;
@@ -78,7 +78,7 @@ export const SelectButton = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ButtonPrimitive> & { className?: string | undefined }
 >(({ className, ...properties }, reference) => {
   const mergedClassName = cx(
-    "group mt-2 inline-flex h-9 w-full cursor-default select-none items-center justify-between gap-1 rounded-lg border border-transparent bg-white-a-3 pe-2 ps-3.5 text-base leading-none shadow outline outline-offset-0 outline-neutral-a-7 entering:outline-2 entering:outline-primary-a-8 group-invalid:outline-x-negative-a-7 focus-visible:outline-primary-a-8 group-disabled:pointer-events-none group-disabled:bg-neutral-a-3 group-disabled:outline-neutral-a-6 group-invalid:group-disabled:outline-x-negative-a-6 theme-dfs:bg-canvas-1 theme-dfs:group-disabled:bg-neutral-a-3 theme-forerunner:group-disabled:bg-neutral-a-3 theme-galapago:bg-white theme-galapago:group-disabled:bg-neutral-a-3 theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm",
+    "group inline-flex h-9 w-full cursor-default select-none items-center justify-between gap-1 rounded-lg border border-transparent bg-white-a-3 pe-2 ps-3.5 text-base leading-none shadow outline -outline-offset-1 outline-neutral-a-7 entering:outline-2 entering:outline-primary-a-8 group-invalid:outline-x-negative-a-7 focus-visible:outline-primary-a-8 group-disabled:pointer-events-none group-disabled:bg-neutral-a-3 group-disabled:outline-neutral-a-6 group-invalid:group-disabled:outline-x-negative-a-6 theme-dfs:bg-canvas-1 theme-dfs:group-disabled:bg-neutral-a-3 theme-forerunner:group-disabled:bg-neutral-a-3 theme-galapago:bg-white theme-galapago:group-disabled:bg-neutral-a-3 theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm",
     className,
   );
   return <ButtonPrimitive className={mergedClassName} {...properties} ref={reference} />;