@maestro-js/components 1.0.0-alpha.18 → 1.0.0-alpha.2

package/src/components/menu.tsx

@@ -7,7 +7,6 @@ import {
   Pressable,
   Separator as AriaSeparator
 } from 'react-aria-components'
-import { Link, useHref, type RelativeRoutingType, type To } from 'react-router'
 import { AnimatedPopover } from './helpers/animated-popover'
 import { tw } from '../utils/tw'
 
@@ -19,26 +18,20 @@ export type MenuProps = {
   children?: React.ReactNode
   className?: string
   containerClassName?: string
-  placement?: 'bottom' | 'bottom start' | 'bottom end' | 'top' | 'top start' | 'top end' | 'left' | 'right'
+  placement?: 'bottom' | 'bottom start' | 'bottom end' | 'top' | 'top start' | 'top end'
 }
 
 export type MenuItemProps = {
   children?: React.ReactNode
   className?: string
   isDisabled?: boolean
+  onAction?: () => void
   id?: string
   textValue?: string
-  type?: 'button' | 'submit'
-  onAction?: () => void
-  onClick?: ((e: React.MouseEvent<Element & HTMLOrSVGElement, MouseEvent>) => void) | undefined
-  form?: string
-  name?: string
-  value?: string
 }
 
 export type MenuLinkItemProps = {
-  to: To
-  relative?: RelativeRoutingType
+  href: string
   children?: React.ReactNode
   className?: string
   isDisabled?: boolean
@@ -52,17 +45,6 @@ export type MenuGroupProps = {
   children?: React.ReactNode
 }
 
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function itemClassName({ isFocused, isDisabled }: { isFocused: boolean; isDisabled: boolean }, className?: string) {
-  return tw(
-    isFocused ? 'bg-neutral-50 text-neutral-900' : 'text-neutral-700',
-    'group flex w-full items-center px-4 py-2 text-sm gap-2 outline-none',
-    isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
-    className
-  )
-}
-
 // ── MenuMain ──────────────────────────────────────────────────────────────────
 
 function MenuMain({ Button: ButtonProp, children, className, containerClassName, placement = 'bottom end' }: MenuProps) {
@@ -85,7 +67,7 @@ function MenuMain({ Button: ButtonProp, children, className, containerClassName,
         <AnimatedPopover placement={placement} offset={8}>
           <AriaMenu
             className={tw(
-              'overflow-hidden min-w-56 w-max rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none',
+              'overflow-hidden min-w-56 w-max rounded bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none',
               className
             )}
             autoFocus="first"
@@ -102,62 +84,46 @@ MenuMain.displayName = 'Menu'
 
 // ── MenuItem ──────────────────────────────────────────────────────────────────
 
-function Item({
-  children,
-  className,
-  isDisabled,
-  id,
-  textValue,
-  type,
-  onAction,
-  onClick,
-  form,
-  name,
-  value
-}: MenuItemProps) {
-  const itemRef = React.useRef<HTMLDivElement>(null)
-  const isSubmit = type === 'submit'
-
+function Item({ children, className, isDisabled, onAction, id, textValue }: MenuItemProps) {
   return (
     <AriaMenuItem
       id={id}
-      ref={isSubmit ? itemRef : undefined}
-      onClick={onClick}
       textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
-      onAction={
-        isSubmit
-          ? () => {
-              onAction?.()
-              const targetForm = form
-                ? (document.getElementById(form) as HTMLFormElement | null)
-                : (itemRef.current?.closest('form') ?? null)
-              if (!targetForm) return
-              targetForm.requestSubmit()
-            }
-          : onAction
-      }
+      onAction={onAction}
       isDisabled={isDisabled}
-      className={(renderProps) => itemClassName(renderProps, className)}
+      className={({ isFocused, isDisabled }) =>
+        tw(
+          isFocused ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-700',
+          'group flex w-full items-center px-4 py-2 text-sm outline-none',
+          isDisabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : 'cursor-pointer',
+          className
+        )
+      }
     >
       {children}
-      {isSubmit && <input type="submit" className="sr-only" name={name} value={value ?? ''} form={form} />}
     </AriaMenuItem>
   )
 }
 
 // ── LinkItem ──────────────────────────────────────────────────────────────────
 
-function LinkItem({ to, children, className, relative, isDisabled, target, rel, id, textValue }: MenuLinkItemProps) {
+function LinkItem({ href, children, className, isDisabled, target, rel, id, textValue }: MenuLinkItemProps) {
   return (
     <AriaMenuItem
       id={id}
-      href={useHref(to, { relative })}
+      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
+      href={href}
       target={target}
       rel={rel}
-      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
       isDisabled={isDisabled}
-      className={(renderProps) => itemClassName(renderProps, className)}
-      render={(props) => <Link {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)} relative={relative} to={to} />}
+      className={({ isFocused, isDisabled }) =>
+        tw(
+          isFocused ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-700',
+          'group flex items-center px-4 py-2 text-sm gap-2 outline-none',
+          isDisabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : 'cursor-pointer',
+          className
+        )
+      }
     >
       {children}
     </AriaMenuItem>
@@ -173,7 +139,7 @@ function Group({ children }: MenuGroupProps) {
 // ── Separator ─────────────────────────────────────────────────────────────────
 
 function MenuSeparator() {
-  return <AriaSeparator className="border-t border-neutral-950/5" />
+  return <AriaSeparator className="border-t border-neutral-100" />
 }
 
 // ── Export ─────────────────────────────────────────────────────────────────────

package/src/components/month-day-input.tsx

@@ -165,8 +165,7 @@ export function MonthDayInput(props: MonthDayInputProps) {
 function parseMonthDay(monthDay: Iso.MonthDay): CalendarDate | null {
   if (!monthDayFns.isValid(monthDay)) return null
   // Use a leap-year placeholder so Feb 29 is valid
-  const { month, day } = monthDayFns.getFields(monthDay)
-  return new CalendarDate(1972, month, day)
+  return new CalendarDate(1972, monthDayFns.getMonth(monthDay), monthDayFns.getDay(monthDay))
 }
 
 function formatMonthDay(date: CalendarDate | null): Iso.MonthDay | null {

package/src/components/multiselect.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { ListBox, ListBoxItem } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
 import type { Selection } from 'react-aria-components'
 import { HeadlessForm } from '@maestro-js/form'
 import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
@@ -57,7 +58,6 @@ export type MultiselectProps<T extends MultiselectOption = MultiselectOption> =
 export function Multiselect<T extends MultiselectOption = MultiselectOption>(props: MultiselectProps<T>) {
   const hiddenInputRef = React.useRef<HTMLInputElement>(null)
   const buttonRef = React.useRef<HTMLButtonElement>(null)
-  const popoverContentRef = React.useRef<HTMLDivElement>(null)
   const [containerRef, setContainerRef] = React.useState<HTMLButtonElement | null>(null)
   const helpTextId = React.useId()
   const labelId = React.useId()
@@ -89,19 +89,6 @@ export function Multiselect<T extends MultiselectOption = MultiselectOption>(pro
     hiddenInputRef
   )
 
-  // Close dropdown on outside click
-  React.useEffect(() => {
-    if (!isOpen) return
-    const handlePointerDown = (e: PointerEvent) => {
-      const target = e.target as Node
-      if (popoverContentRef.current?.contains(target) || buttonRef.current?.contains(target)) return
-      setIsOpen(false)
-      commitValidation()
-    }
-    document.addEventListener('pointerdown', handlePointerDown)
-    return () => document.removeEventListener('pointerdown', handlePointerDown)
-  })
-
   const isInvalid = props.isInvalid || validationInvalid
   const hasWarning = Boolean(props.warningMessage) && !isInvalid
 
@@ -248,73 +235,82 @@ export function Multiselect<T extends MultiselectOption = MultiselectOption>(pro
       </button>
 
       {/* Options dropdown */}
-      {isOpen && !props.isDisabled && (
-        <div
-          ref={popoverContentRef}
-          className={tw(
-            'absolute z-50 mt-1 overflow-hidden rounded bg-white border border-neutral-200 shadow-lg text-sm w-full focus:outline-none'
-          )}
-          style={{ width: containerSize.width, minWidth: containerSize.width }}
-        >
-          {props.showSelectAll && (
-            <button
-              type="button"
-              onClick={handleSelectAll}
-              className="w-full px-3 py-2 text-left hover:bg-neutral-50 border-b border-neutral-100 text-sm font-medium"
-            >
-              {selectedValues.length === props.options.filter((o) => !o.isDisabled).length ? 'Deselect All' : 'Select All'}
-            </button>
-          )}
-          <ListBox
-            aria-label={props.label ? String(props.label) : 'Multiselect'}
-            selectionMode="multiple"
-            selectedKeys={selectedKeys}
-            onSelectionChange={handleSelectionChange}
-            className="max-h-60 overflow-y-auto focus:outline-none"
-            items={props.options.map((option, index) => ({ ...option, index, id: String(option.value) }))}
-            renderEmptyState={() => <div className="px-3 py-2 text-neutral-500 text-sm">No options available</div>}
+      <AnimatedPopover
+        triggerRef={buttonRef}
+        isNonModal
+        isOpen={isOpen && !props.isDisabled}
+        onOpenChange={(open) => {
+          setIsOpen(open)
+          if (!open) commitValidation()
+        }}
+        placement="bottom start"
+        offset={4}
+        style={{ width: containerSize.width, minWidth: containerSize.width }}
+      >
+          <div
+            className={tw(
+              'overflow-hidden rounded bg-white border border-neutral-200 shadow-lg text-sm w-full focus:outline-none'
+            )}
           >
-            {(item) => {
-              const option = item as T & { index: number; id: string }
-              const color = props.colored ? getColor(stringToNumber(String(option.value))) : null
+            {props.showSelectAll && (
+              <button
+                type="button"
+                onClick={handleSelectAll}
+                className="w-full px-3 py-2 text-left hover:bg-neutral-50 border-b border-neutral-100 text-sm font-medium"
+              >
+                {selectedValues.length === props.options.filter((o) => !o.isDisabled).length ? 'Deselect All' : 'Select All'}
+              </button>
+            )}
+            <ListBox
+              aria-label={props.label ? String(props.label) : 'Multiselect'}
+              selectionMode="multiple"
+              selectedKeys={selectedKeys}
+              onSelectionChange={handleSelectionChange}
+              className="max-h-60 overflow-y-auto focus:outline-none"
+              items={props.options.map((option, index) => ({ ...option, index, id: String(option.value) }))}
+              renderEmptyState={() => <div className="px-3 py-2 text-neutral-500 text-sm">No options available</div>}
+            >
+              {(item) => {
+                const option = item as T & { index: number; id: string }
+                const color = props.colored ? getColor(stringToNumber(String(option.value))) : null
+
+                if (props.renderOption) {
+                  return (
+                    <ListBoxItem
+                      id={option.id}
+                      textValue={option.label}
+                      isDisabled={option.isDisabled}
+                      className="outline-none"
+                    >
+                      {({ isSelected }) => (
+                        <>
+                          {props.renderOption!({
+                            option,
+                            selected: isSelected,
+                            colored: props.colored ?? false,
+                            index: option.index
+                          })}
+                        </>
+                      )}
+                    </ListBoxItem>
+                  )
+                }
 
-              if (props.renderOption) {
                 return (
-                  <ListBoxItem
+                  <FormFieldComponents.DropdownItem
                     id={option.id}
                     textValue={option.label}
+                    label={option.label}
+                    secondary={option.secondary}
                     isDisabled={option.isDisabled}
-                    className="outline-none"
-                  >
-                    {({ isSelected }) => (
-                      <>
-                        {props.renderOption!({
-                          option,
-                          selected: isSelected,
-                          colored: props.colored ?? false,
-                          index: option.index
-                        })}
-                      </>
-                    )}
-                  </ListBoxItem>
+                    color={color}
+                    className="px-3"
+                  />
                 )
-              }
-
-              return (
-                <FormFieldComponents.DropdownItem
-                  id={option.id}
-                  textValue={option.label}
-                  label={option.label}
-                  secondary={option.secondary}
-                  isDisabled={option.isDisabled}
-                  color={color}
-                  className="px-3"
-                />
-              )
-            }}
-          </ListBox>
-        </div>
-      )}
+              }}
+            </ListBox>
+          </div>
+      </AnimatedPopover>
 
       <FormFieldComponents.FormFieldHelpText
         id={helpTextId}

package/src/components/radio.tsx

@@ -25,7 +25,7 @@ export function PlainRadio(props: PlainRadioProps) {
       value={props.value}
       isDisabled={props.isDisabled}
       aria-label={props['aria-label']}
-      className="group inline-flex items-center cursor-pointer data-[disabled]:cursor-not-allowed focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+      className="group inline-flex items-center cursor-pointer data-[disabled]:cursor-not-allowed focus:outline-none [&>div]:focus-visible:ring-2 [&>div]:focus-visible:ring-primary-500/20 [&>div]:focus-visible:ring-offset-2"
     >
       {({ isSelected, isDisabled }) => <RadioCircle isSelected={isSelected} isDisabled={isDisabled} />}
     </AriaRadio>
@@ -41,11 +41,11 @@ export function LabeledRadio(props: LabeledRadioProps) {
     <AriaRadio
       value={props.value}
       isDisabled={props.isDisabled}
-      className="group flex items-start gap-3 cursor-pointer data-[disabled]:cursor-not-allowed select-none focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+      className="group flex items-start gap-3 cursor-pointer data-[disabled]:cursor-not-allowed select-none focus:outline-none [&>div:first-child>div]:focus-visible:ring-2 [&>div:first-child>div]:focus-visible:ring-primary-500/20 [&>div:first-child>div]:focus-visible:ring-offset-2"
     >
       {({ isSelected, isDisabled }) => (
         <>
-          <div className="shrink-0">
+          <div className="flex-shrink-0">
             <RadioCircle isSelected={isSelected} isDisabled={isDisabled} />
           </div>
           {props.label && (
@@ -74,16 +74,16 @@ function RadioCircle({ isSelected, isDisabled }: { isSelected: boolean; isDisabl
   return (
     <div
       className={tw(
-        'size-5 rounded-full border-2 transition-colors duration-200 flex items-center justify-center',
-        isSelected ? 'border-primary-600 bg-primary-600' : 'border-neutral-300 bg-white',
+        'h-5 w-5 rounded-full border-2 transition-all duration-50 flex items-center justify-center',
+        isSelected ? 'border-primary-500 bg-primary-500' : 'border-neutral-300 bg-white',
         !isDisabled && !isSelected && 'group-hovered:border-neutral-400',
-        isDisabled && 'cursor-not-allowed border-neutral-300 bg-neutral-100'
+        isDisabled && 'opacity-50 cursor-not-allowed'
       )}
     >
       <div
         className={tw(
-          'size-2 rounded-full bg-white transition-transform duration-200',
-          isSelected ? 'scale-100' : 'scale-0'
+          'h-2 w-2 rounded-full bg-white transition-all duration-50',
+          isSelected ? 'scale-100 opacity-100' : 'scale-0 opacity-0'
         )}
       />
     </div>

package/src/components/select.tsx

@@ -114,19 +114,18 @@ export function Select<T extends SelectOption = SelectOption>(props: SelectProps
         <Button
           ref={buttonRef}
           className={tw(
-            'relative overflow-hidden ring-1 shadow-sm transition-all duration-200 max-w-96',
+            'relative overflow-hidden border transition-all duration-200 max-w-96',
             props.shape === 'oval' ? 'rounded-full' : 'rounded',
-            'focus:outline-2 focus:-outline-offset-1',
-            (props.isDisabled || props.isReadonly) &&
-              'ring-neutral-200 bg-neutral-50 text-neutral-400 shadow-none cursor-not-allowed',
-            isInvalid && 'ring-negative-300 bg-negative-50 focus:outline-negative-500',
-            hasWarning && 'ring-notice-300 bg-notice-50 focus:outline-notice-500',
+            'focus:outline-none focus:ring-1',
+            (props.isDisabled || props.isReadonly) && 'border-neutral-100 bg-neutral-50 text-neutral-400 cursor-not-allowed',
+            isInvalid && 'border-negative-200 bg-negative-50 focus:border-negative-500 focus:ring-negative-500/20',
+            hasWarning && 'border-notice-200 bg-notice-50 focus:border-notice-500 focus:ring-notice-500/20',
             !isInvalid &&
               !hasWarning &&
               !props.isDisabled &&
               !props.isReadonly &&
-              'ring-black/10 hover:ring-black/20 focus:outline-primary-500',
-            'w-full cursor-default py-2 pl-3 pr-10 text-left text-sm max-sm:text-base placeholder:text-neutral-400'
+              'border-neutral-200 hover:border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20',
+            'w-full cursor-default py-2 pl-3 pr-10 text-left placeholder:text-neutral-400'
           )}
           aria-invalid={isInvalid || undefined}
           aria-describedby={helpTextId}
@@ -140,7 +139,7 @@ export function Select<T extends SelectOption = SelectOption>(props: SelectProps
           {selectedOption ? (
             <span className="block truncate text-sm min-h-5">{selectedOption.label}</span>
           ) : (
-            <span className="block truncate text-sm min-h-5 text-neutral-400 italic">
+            <span className="block truncate text-sm min-h-5 text-neutral-300 italic">
               {props.placeholder ?? 'Select an option'}
             </span>
           )}

package/src/components/stepper.tsx

@@ -100,12 +100,12 @@ function Step({
         <div className={tw('flex flex-row items-start flex-1 relative', className)}>
           {index !== 0 ? (
             <div className="flex flex-1 items-center pt-4 w-1/2 absolute left-0">
-              <div className={tw('h-0.5 w-full transition-colors', firstConnectorColor)} />
+              <div className={tw('h-[2px] w-full transition-colors', firstConnectorColor)} />
             </div>
           ) : null}
           {!isLast ? (
             <div className="flex flex-1 items-center pt-4 w-1/2 absolute right-0">
-              <div className={tw('h-0.5 w-full transition-colors', lastConnectorColor)} />
+              <div className={tw('h-[2px] w-full transition-colors', lastConnectorColor)} />
             </div>
           ) : null}
           <div className="flex flex-col items-center w-full relative">{children}</div>
@@ -119,12 +119,12 @@ function Step({
       <div className={tw('relative flex flex-col min-h-10', className)}>
         {index !== 0 ? (
           <div className="flex flex-1 justify-center pl-4 h-1/2 absolute top-0">
-            <div className={tw('w-0.5 h-full transition-colors', firstConnectorColor)} />
+            <div className={tw('w-[2px] h-full transition-colors', firstConnectorColor)} />
           </div>
         ) : null}
         {!isLast ? (
           <div className="flex flex-1 items-center pl-4 h-1/2 absolute bottom-0">
-            <div className={tw('w-0.5 h-full transition-colors', lastConnectorColor)} />
+            <div className={tw('w-[2px] h-full transition-colors', lastConnectorColor)} />
           </div>
         ) : null}
         <div className="flex flex-row w-full relative">{children}</div>
@@ -154,11 +154,11 @@ function StepLabel({ children, className }: StepLabelProps) {
   return (
     <div className={tw('flex items-center', orientation === 'horizontal' ? 'flex-col text-center' : 'gap-3', className)}>
       <div
-        className={tw('flex size-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors', iconBg)}
+        className={tw('flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors', iconBg)}
         aria-current={active ? 'step' : undefined}
       >
         {completed ? (
-          <Icon name="check" className="size-4" aria-hidden="true" />
+          <Icon name="check" className="h-4 w-4" aria-hidden="true" />
         ) : (
           <span className="text-sm font-semibold">{index + 1}</span>
         )}

package/src/components/switch.tsx

@@ -56,7 +56,7 @@ export function PlainSwitch(props: PlainSwitchProps) {
       onChange={setValue}
       isDisabled={props.isDisabled}
       aria-label={props['aria-label']}
-      className="group inline-flex items-center cursor-pointer data-[disabled]:cursor-not-allowed focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+      className="group inline-flex items-center cursor-pointer data-[disabled]:cursor-not-allowed focus:outline-none [&>div]:focus-visible:ring-2 [&>div]:focus-visible:ring-primary-500/20 [&>div]:focus-visible:ring-offset-2 [&>div]:focus-visible:rounded-full"
     >
       {({ isSelected, isDisabled }) => (
         <>
@@ -128,7 +128,7 @@ export function LabeledSwitch(props: LabeledSwitchProps) {
         }}
         isDisabled={props.isDisabled}
         aria-describedby={helpTextId}
-        className="group flex items-center gap-3 cursor-pointer data-[disabled]:cursor-not-allowed select-none focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+        className="group flex items-center gap-3 cursor-pointer data-[disabled]:cursor-not-allowed select-none focus:outline-none [&>div:first-child>div]:focus-visible:ring-2 [&>div:first-child>div]:focus-visible:ring-primary-500/20 [&>div:first-child>div]:focus-visible:ring-offset-2 [&>div:first-child>div]:focus-visible:rounded-full"
       >
         {({ isSelected, isDisabled }) => (
           <>
@@ -141,7 +141,7 @@ export function LabeledSwitch(props: LabeledSwitchProps) {
               />
             )}
             {labelPosition === 'left' && labelElement}
-            <div className="shrink-0 flex items-center">
+            <div className="flex-shrink-0 flex items-center">
               <SwitchTrack isSelected={isSelected} isDisabled={isDisabled} />
             </div>
             {labelPosition === 'right' && labelElement}
@@ -170,14 +170,14 @@ function SwitchTrack({ isSelected, isDisabled }: { isSelected: boolean; isDisabl
   return (
     <div
       className={tw(
-        'relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200',
-        isSelected ? 'bg-primary-600' : 'bg-neutral-200',
-        isDisabled && 'cursor-not-allowed bg-neutral-300'
+        'relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
+        isSelected ? 'bg-primary-500' : 'bg-neutral-200',
+        isDisabled && 'opacity-50 cursor-not-allowed'
       )}
     >
       <span
         className={tw(
-          'pointer-events-none inline-block size-5 rounded-full bg-white shadow-sm ring-1 ring-black/5 transition-transform duration-200',
+          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
           isSelected ? 'translate-x-5' : 'translate-x-0'
         )}
       />

package/src/components/tabs.tsx

@@ -96,7 +96,7 @@ TabList.displayName = 'TabList'
 function TabItem({ children, className, ...props }: TabProps) {
   const { color, variant } = React.useContext(TabListContext)
   const colors = tabColorMap[color]
-  const focusClasses = `outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:${colors.outline}`
+  const focusClasses = `outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:${colors.outline}`
 
   return (
     <AriaTab

package/src/components/tag-field.tsx

@@ -226,7 +226,7 @@ function Tag({
   return (
     <span
       className={tw(
-        'inline-flex items-center rounded-full pl-2 pr-1.5 py-0.5 text-xs font-normal bg-primary-500/10 text-primary-500',
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-normal bg-primary-500/10 text-primary-500',
         isDisabled && 'opacity-50'
       )}
     >
@@ -238,11 +238,11 @@ function Tag({
             e.stopPropagation()
             onRemove()
           }}
-          className="inline-flex items-center justify-center size-4 -m-0.5 p-0.5 rounded-full translate-x-1 hover:bg-neutral-950/10"
+          className="inline-flex items-center justify-center h-4 w-4 -m-0.5 p-0.5 rounded-full translate-x-1 hover:bg-black/10"
           aria-label="Remove"
           tabIndex={-1}
         >
-          <Icon name="x-mark" className="size-2" aria-hidden="true" />
+          <Icon name="x-mark" className="h-2 w-2" aria-hidden="true" />
         </button>
       )}
     </span>

package/src/components/text-area.tsx

@@ -113,7 +113,7 @@ export function TextArea(props: TextAreaProps) {
           ref={textAreaRef}
           id={textAreaId}
           className={tw(
-            'w-full bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm max-sm:text-base text-neutral-900 placeholder:text-neutral-400',
+            'w-full bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm text-neutral-900 placeholder:text-neutral-400',
             autoResize && 'resize-none overflow-hidden col-span-full row-span-full',
             (props.isDisabled || props.isReadonly) && 'cursor-not-allowed',
             !autoResize && props.resize === 'none' && 'resize-none',

package/src/components/text-field.tsx

@@ -47,8 +47,6 @@ export type TextFieldProps = {
 
 export function TextField(props: TextFieldProps) {
   const inputRef = React.useRef<HTMLInputElement>(null)
-  const visibleRef = React.useRef<HTMLInputElement>(null)
-
   const helpTextId = React.useId()
   const inputId = React.useId()
 
@@ -68,7 +66,7 @@ export function TextField(props: TextFieldProps) {
       isRequired: props.isRequired,
       form: props.form,
       focus() {
-        visibleRef.current?.focus()
+        inputRef.current?.focus()
       }
     },
     inputRef
@@ -115,7 +113,6 @@ export function TextField(props: TextFieldProps) {
           inputMode={props.inputMode}
           aria-invalid={isInvalid || undefined}
           aria-describedby={helpTextId}
-          ref={visibleRef}
         />
         {props.trailingInlineAddon}
       </FormFieldComponents.FieldGroup>

package/src/components/toast.tsx

@@ -99,7 +99,7 @@ function ToastItem({ toast }: { toast: { content: Toast; key: string } }) {
       style={{ viewTransitionName: toast.key } as React.CSSProperties}
       className={tw(
         'pointer-events-auto',
-        'flex gap-3 rounded-lg px-4 py-3 shadow-lg',
+        'flex gap-3 rounded-md border px-4 py-3 shadow-lg',
         'min-w-[300px] max-w-md',
         '[view-transition-class:toast]',
         hasDescription ? 'items-start' : 'items-center',
@@ -152,11 +152,11 @@ function DeclaredToast({
 // --- Variant Maps ---
 
 const variantClasses = {
-  info: 'bg-info-50 text-info-800 ring-1 ring-info-200',
-  positive: 'bg-positive-50 text-positive-800 ring-1 ring-positive-200',
-  warning: 'bg-notice-50 text-notice-800 ring-1 ring-notice-200',
-  negative: 'bg-negative-50 text-negative-800 ring-1 ring-negative-200',
-  notice: 'bg-neutral-50 text-neutral-700 ring-1 ring-neutral-200'
+  info: 'bg-info-500/10 text-info-500 border-info-500/20',
+  positive: 'bg-positive-50 text-positive-800 border-positive-200',
+  warning: 'bg-notice-50 text-notice-800 border-notice-200',
+  negative: 'bg-negative-50 text-negative-800 border-negative-200',
+  notice: 'bg-neutral-100 text-neutral-700 border-neutral-200'
 }
 
 const variantIconNames = {

package/src/components/toggle-button-group.tsx

@@ -82,12 +82,12 @@ function getToggleButtonClasses({ size = 'md', isSelected }: { size?: ButtonSize
     // Unselected
     !isSelected && 'bg-white ring-1 ring-inset ring-neutral-300',
     !isSelected && 'data-[hovered]:bg-neutral-50 data-[hovered]:ring-neutral-400',
-    !isSelected && 'text-neutral-700 data-[focus-visible]:outline-primary-600',
+    !isSelected && 'text-neutral-700 data-[focus-visible]:outline-neutral-400',
 
     // Selected
     isSelected && 'bg-primary-500 text-white ring-1 ring-inset ring-primary-700',
     isSelected && 'data-[hovered]:bg-primary-600 data-[hovered]:ring-primary-700',
-    isSelected && 'data-[focus-visible]:outline-primary-600',
+    isSelected && 'data-[focus-visible]:outline-primary-500',
 
     'inline-flex justify-center items-center gap-x-2'
   )

package/src/utils/icons.d.ts

@@ -13,8 +13,7 @@ declare module '~/icons/types' {
     'chevron-down',
     'exclamation-triangle',
     'minus',
-    'arrow-path',
-    'magnifying-glass'
+    'arrow-path'
   ] as const
 
   export type IconName = (typeof iconNames)[number]