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

package/src/components/helpers/get-button-classes.ts

@@ -6,19 +6,19 @@ export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type ButtonShape = 'rectangle' | 'circle' | 'oval'
 
 const base =
-  'relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-all cursor-default select-none [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 data-[disabled]:cursor-not-allowed'
+  'relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-150 cursor-default select-none [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 data-[disabled]:cursor-not-allowed'
 
 const sizeClasses: Record<ButtonSize, string> = {
-  xs: 'h-7 min-w-14 px-2.5 text-xs',
-  sm: 'h-8 min-w-16 px-3 text-sm',
-  md: 'h-9 min-w-20 px-4 text-sm',
-  lg: 'h-10 min-w-24 px-5 text-base',
-  xl: 'h-12 min-w-28 px-6 text-base'
+  xs: 'h-7 min-w-14 px-2 text-xs',
+  sm: 'h-8 min-w-16 px-2.5 text-sm',
+  md: 'h-9 min-w-20 px-3 text-sm',
+  lg: 'h-10 min-w-24 px-4 text-base',
+  xl: 'h-12 min-w-28 px-5 text-base'
 }
 
 const shapeClasses: Record<ButtonShape, string> = {
   rectangle: 'rounded',
-  circle: 'rounded-full aspect-square px-0',
+  circle: 'rounded-full aspect-square px-0 min-w-0',
   oval: 'rounded-full'
 }
 
@@ -37,39 +37,39 @@ const variantColorClasses: Record<ButtonVariant, Record<ButtonColor, string>> =
   },
   outlined: {
     primary:
-      'bg-white ring-1 ring-inset ring-primary-300 text-primary-700 data-[hovered]:bg-primary-50 data-[hovered]:ring-primary-400 data-[pressed]:bg-primary-100 data-[pressed]:ring-primary-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+      'bg-white ring-1 ring-inset ring-primary-300 text-primary-700 data-[hovered]:bg-primary-50 data-[hovered]:ring-primary-400 data-[pressed]:bg-primary-100 data-[pressed]:ring-primary-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
     negative:
-      'bg-white ring-1 ring-inset ring-negative-300 text-negative-700 data-[hovered]:bg-negative-50 data-[hovered]:ring-negative-400 data-[pressed]:bg-negative-100 data-[pressed]:ring-negative-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+      'bg-white ring-1 ring-inset ring-negative-300 text-negative-700 data-[hovered]:bg-negative-50 data-[hovered]:ring-negative-400 data-[pressed]:bg-negative-100 data-[pressed]:ring-negative-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
     positive:
-      'bg-white ring-1 ring-inset ring-positive-300 text-positive-700 data-[hovered]:bg-positive-50 data-[hovered]:ring-positive-400 data-[pressed]:bg-positive-100 data-[pressed]:ring-positive-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+      'bg-white ring-1 ring-inset ring-positive-300 text-positive-700 data-[hovered]:bg-positive-50 data-[hovered]:ring-positive-400 data-[pressed]:bg-positive-100 data-[pressed]:ring-positive-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
     notice:
-      'bg-white ring-1 ring-inset ring-notice-300 text-notice-700 data-[hovered]:bg-notice-50 data-[hovered]:ring-notice-400 data-[pressed]:bg-notice-100 data-[pressed]:ring-notice-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+      'bg-white ring-1 ring-inset ring-notice-300 text-notice-700 data-[hovered]:bg-notice-50 data-[hovered]:ring-notice-400 data-[pressed]:bg-notice-100 data-[pressed]:ring-notice-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent',
     neutral:
-      'bg-white ring-1 ring-inset ring-neutral-300 text-neutral-700 data-[hovered]:bg-neutral-50 data-[hovered]:ring-neutral-400 data-[pressed]:bg-neutral-100 data-[pressed]:ring-neutral-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none'
+      'bg-white ring-1 ring-inset ring-neutral-300 text-neutral-700 data-[hovered]:bg-neutral-50 data-[hovered]:ring-neutral-400 data-[pressed]:bg-neutral-100 data-[pressed]:ring-neutral-500 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent'
   },
   soft: {
     primary:
-      'bg-primary-100 text-primary-800 data-[hovered]:bg-primary-200 data-[pressed]:bg-primary-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+      'bg-primary-100 text-primary-800 data-[hovered]:bg-primary-200 data-[pressed]:bg-primary-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     negative:
-      'bg-negative-100 text-negative-800 data-[hovered]:bg-negative-200 data-[pressed]:bg-negative-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+      'bg-negative-100 text-negative-800 data-[hovered]:bg-negative-200 data-[pressed]:bg-negative-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     positive:
-      'bg-positive-100 text-positive-800 data-[hovered]:bg-positive-200 data-[pressed]:bg-positive-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+      'bg-positive-100 text-positive-800 data-[hovered]:bg-positive-200 data-[pressed]:bg-positive-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     notice:
-      'bg-notice-100 text-notice-800 data-[hovered]:bg-notice-200 data-[pressed]:bg-notice-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+      'bg-notice-100 text-notice-800 data-[hovered]:bg-notice-200 data-[pressed]:bg-notice-300 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     neutral:
-      'bg-neutral-200 text-neutral-800 data-[hovered]:bg-neutral-300 data-[pressed]:bg-neutral-400 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400'
+      'bg-neutral-200 text-neutral-800 data-[hovered]:bg-neutral-300 data-[pressed]:bg-neutral-400 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400'
   },
   plain: {
     primary:
-      'bg-transparent text-primary-700 data-[hovered]:bg-primary-50 data-[pressed]:bg-primary-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+      'bg-transparent text-primary-700 data-[hovered]:bg-primary-50 data-[pressed]:bg-primary-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     negative:
-      'bg-transparent text-negative-700 data-[hovered]:bg-negative-50 data-[pressed]:bg-negative-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+      'bg-transparent text-negative-700 data-[hovered]:bg-negative-50 data-[pressed]:bg-negative-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     positive:
-      'bg-transparent text-positive-700 data-[hovered]:bg-positive-50 data-[pressed]:bg-positive-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+      'bg-transparent text-positive-700 data-[hovered]:bg-positive-50 data-[pressed]:bg-positive-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     notice:
-      'bg-transparent text-notice-700 data-[hovered]:bg-notice-50 data-[pressed]:bg-notice-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+      'bg-transparent text-notice-700 data-[hovered]:bg-notice-50 data-[pressed]:bg-notice-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400',
     neutral:
-      'bg-transparent text-neutral-700 data-[hovered]:bg-neutral-50 data-[pressed]:bg-neutral-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400'
+      'bg-transparent text-neutral-700 data-[hovered]:bg-neutral-50 data-[pressed]:bg-neutral-100 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400'
   }
 }
 
@@ -105,7 +105,7 @@ const toggledVariantColorClasses: Record<ButtonVariant, Record<ButtonColor, stri
 }
 
 const focusClasses =
-  'data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-primary-600'
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-primary-600'
 
 export function getButtonClasses({
   variant = 'contained',

package/src/components/helpers/headless-button.tsx

@@ -27,7 +27,7 @@ export const HeadlessButton = React.forwardRef<
       {...props}
       {...(props.disabled || props['data-disabled'] ? { ['data-disabled']: true } : {})}
       {...((isPressed && !props.disabled) || props['data-pressed'] ? { ['data-pressed']: true } : {})}
-      aria-pressed={isPressed && !props.disabled}
+      aria-pressed={props['aria-pressed'] ?? (isPressed && !props.disabled)}
       ref={ref}
     />
   )

package/src/components/inline-alert.tsx

@@ -13,11 +13,11 @@ export type InlineAlertProps = {
 }
 
 const variantClasses = {
-  info: 'bg-info-500/10 text-info-500 border-info-500/20',
+  info: 'bg-info-50 text-info-800 border-info-200',
   positive: 'bg-positive-50 text-positive-800 border-positive-200',
   notice: 'bg-notice-50 text-notice-800 border-notice-200',
   negative: 'bg-negative-50 text-negative-800 border-negative-200',
-  neutral: 'bg-neutral-100 text-neutral-700 border-neutral-200'
+  neutral: 'bg-neutral-50 text-neutral-700 border-neutral-200'
 }
 
 const defaultIconNames = {
@@ -34,7 +34,7 @@ export function InlineAlert({ children, actions, variant, icon, className, title
   return (
     <div
       className={tw(
-        'rounded-md border px-4 py-3 flex gap-3 items-start justify-between text-left',
+        'rounded-lg border px-4 py-3 flex gap-3 items-start justify-between text-left',
         variantClasses[variant],
         className
       )}

package/src/components/labeled-value.tsx

@@ -158,7 +158,7 @@ export const LabeledValue = React.forwardRef<HTMLDivElement, LabeledValueProps>(
         <LabeledValueLabel
           id={actualLabelId}
           className={tw(
-            orientation === 'horizontal' ? 'flex-shrink-0' : 'mb-1',
+            orientation === 'horizontal' ? 'shrink-0' : 'mb-1',
             labelAlign === 'end' && 'text-right',
             labelClassName
           )}
@@ -474,7 +474,7 @@ export function LabeledValueLabel(props: React.ComponentProps<'label'>) {
   return (
     <label
       {...props}
-      className={tw('block uppercase text-xs tracking-widest font-normal text-neutral-400', props.className)}
+      className={tw('block uppercase text-xs tracking-wider font-medium text-neutral-500', props.className)}
     />
   )
 }

package/src/components/menu.tsx

@@ -7,6 +7,7 @@ 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'
 
@@ -18,20 +19,26 @@ export type MenuProps = {
   children?: React.ReactNode
   className?: string
   containerClassName?: string
-  placement?: 'bottom' | 'bottom start' | 'bottom end' | 'top' | 'top start' | 'top end'
+  placement?: 'bottom' | 'bottom start' | 'bottom end' | 'top' | 'top start' | 'top end' | 'left' | 'right'
 }
 
 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 = {
-  href: string
+  to: To
+  relative?: RelativeRoutingType
   children?: React.ReactNode
   className?: string
   isDisabled?: boolean
@@ -45,6 +52,17 @@ 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) {
@@ -67,7 +85,7 @@ function MenuMain({ Button: ButtonProp, children, className, containerClassName,
         <AnimatedPopover placement={placement} offset={8}>
           <AriaMenu
             className={tw(
-              'overflow-hidden min-w-56 w-max rounded bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none',
+              'overflow-hidden min-w-56 w-max rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none',
               className
             )}
             autoFocus="first"
@@ -84,46 +102,62 @@ MenuMain.displayName = 'Menu'
 
 // ── MenuItem ──────────────────────────────────────────────────────────────────
 
-function Item({ children, className, isDisabled, onAction, id, textValue }: MenuItemProps) {
+function Item({
+  children,
+  className,
+  isDisabled,
+  id,
+  textValue,
+  type,
+  onAction,
+  onClick,
+  form,
+  name,
+  value
+}: MenuItemProps) {
+  const itemRef = React.useRef<HTMLDivElement>(null)
+  const isSubmit = type === 'submit'
+
   return (
     <AriaMenuItem
       id={id}
+      ref={isSubmit ? itemRef : undefined}
+      onClick={onClick}
       textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
-      onAction={onAction}
-      isDisabled={isDisabled}
-      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
-        )
+      onAction={
+        isSubmit
+          ? () => {
+              onAction?.()
+              const targetForm = form
+                ? (document.getElementById(form) as HTMLFormElement | null)
+                : (itemRef.current?.closest('form') ?? null)
+              if (!targetForm) return
+              targetForm.requestSubmit()
+            }
+          : onAction
       }
+      isDisabled={isDisabled}
+      className={(renderProps) => itemClassName(renderProps, className)}
     >
       {children}
+      {isSubmit && <input type="submit" className="sr-only" name={name} value={value ?? ''} form={form} />}
     </AriaMenuItem>
   )
 }
 
 // ── LinkItem ──────────────────────────────────────────────────────────────────
 
-function LinkItem({ href, children, className, isDisabled, target, rel, id, textValue }: MenuLinkItemProps) {
+function LinkItem({ to, children, className, relative, isDisabled, target, rel, id, textValue }: MenuLinkItemProps) {
   return (
     <AriaMenuItem
       id={id}
-      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
-      href={href}
+      href={useHref(to, { relative })}
       target={target}
       rel={rel}
+      textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
       isDisabled={isDisabled}
-      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
-        )
-      }
+      className={(renderProps) => itemClassName(renderProps, className)}
+      render={(props) => <Link {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)} relative={relative} to={to} />}
     >
       {children}
     </AriaMenuItem>
@@ -139,7 +173,7 @@ function Group({ children }: MenuGroupProps) {
 // ── Separator ─────────────────────────────────────────────────────────────────
 
 function MenuSeparator() {
-  return <AriaSeparator className="border-t border-neutral-100" />
+  return <AriaSeparator className="border-t border-neutral-950/5" />
 }
 
 // ── Export ─────────────────────────────────────────────────────────────────────

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

@@ -165,7 +165,8 @@ 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
-  return new CalendarDate(1972, monthDayFns.getMonth(monthDay), monthDayFns.getDay(monthDay))
+  const { month, day } = monthDayFns.getFields(monthDay)
+  return new CalendarDate(1972, month, day)
 }
 
 function formatMonthDay(date: CalendarDate | null): Iso.MonthDay | null {

package/src/components/multiselect.tsx

@@ -1,6 +1,5 @@
 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'
@@ -58,6 +57,7 @@ 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,6 +89,19 @@ 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
 
@@ -235,82 +248,73 @@ export function Multiselect<T extends MultiselectOption = MultiselectOption>(pro
       </button>
 
       {/* Options dropdown */}
-      <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'
-            )}
-          >
-            {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>}
+      {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"
             >
-              {(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>
-                  )
-                }
+              {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 (
-                  <FormFieldComponents.DropdownItem
+                  <ListBoxItem
                     id={option.id}
                     textValue={option.label}
-                    label={option.label}
-                    secondary={option.secondary}
                     isDisabled={option.isDisabled}
-                    color={color}
-                    className="px-3"
-                  />
+                    className="outline-none"
+                  >
+                    {({ isSelected }) => (
+                      <>
+                        {props.renderOption!({
+                          option,
+                          selected: isSelected,
+                          colored: props.colored ?? false,
+                          index: option.index
+                        })}
+                      </>
+                    )}
+                  </ListBoxItem>
                 )
-              }}
-            </ListBox>
-          </div>
-      </AnimatedPopover>
+              }
+
+              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>
+      )}
 
       <FormFieldComponents.FormFieldHelpText
         id={helpTextId}

package/src/components/optional-link.tsx

@@ -0,0 +1,15 @@
+import { type LinkProps, Link } from 'react-router'
+import React from 'react'
+
+export type OptionalLinkProps = Omit<LinkProps, 'to'> & { to?: LinkProps['to']; disabled?: boolean }
+
+export const OptionalLink = React.forwardRef<HTMLAnchorElement, OptionalLinkProps>(
+  ({ to, onClick, disabled, ...props }, ref) => {
+    if (to && !disabled) {
+      return <Link to={to} onClick={onClick} {...props} ref={ref} />
+    } else {
+      return <span {...props} ref={ref} />
+    }
+  }
+)
+OptionalLink.displayName = 'OptionalLink'

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 [&>div]:focus-visible:ring-2 [&>div]:focus-visible:ring-primary-500/20 [&>div]:focus-visible:ring-offset-2"
+      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"
     >
       {({ 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 [&>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"
+      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"
     >
       {({ isSelected, isDisabled }) => (
         <>
-          <div className="flex-shrink-0">
+          <div className="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(
-        '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',
+        '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',
         !isDisabled && !isSelected && 'group-hovered:border-neutral-400',
-        isDisabled && 'opacity-50 cursor-not-allowed'
+        isDisabled && 'cursor-not-allowed border-neutral-300 bg-neutral-100'
       )}
     >
       <div
         className={tw(
-          'h-2 w-2 rounded-full bg-white transition-all duration-50',
-          isSelected ? 'scale-100 opacity-100' : 'scale-0 opacity-0'
+          'size-2 rounded-full bg-white transition-transform duration-200',
+          isSelected ? 'scale-100' : 'scale-0'
         )}
       />
     </div>

package/src/components/select.tsx

@@ -114,18 +114,19 @@ export function Select<T extends SelectOption = SelectOption>(props: SelectProps
         <Button
           ref={buttonRef}
           className={tw(
-            'relative overflow-hidden border transition-all duration-200 max-w-96',
+            'relative overflow-hidden ring-1 shadow-sm transition-all duration-200 max-w-96',
             props.shape === 'oval' ? 'rounded-full' : 'rounded',
-            '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',
+            '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',
             !isInvalid &&
               !hasWarning &&
               !props.isDisabled &&
               !props.isReadonly &&
-              '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'
+              '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'
           )}
           aria-invalid={isInvalid || undefined}
           aria-describedby={helpTextId}
@@ -139,7 +140,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-300 italic">
+            <span className="block truncate text-sm min-h-5 text-neutral-400 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-[2px] w-full transition-colors', firstConnectorColor)} />
+              <div className={tw('h-0.5 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-[2px] w-full transition-colors', lastConnectorColor)} />
+              <div className={tw('h-0.5 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-[2px] h-full transition-colors', firstConnectorColor)} />
+            <div className={tw('w-0.5 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-[2px] h-full transition-colors', lastConnectorColor)} />
+            <div className={tw('w-0.5 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 h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors', iconBg)}
+        className={tw('flex size-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors', iconBg)}
         aria-current={active ? 'step' : undefined}
       >
         {completed ? (
-          <Icon name="check" className="h-4 w-4" aria-hidden="true" />
+          <Icon name="check" className="size-4" aria-hidden="true" />
         ) : (
           <span className="text-sm font-semibold">{index + 1}</span>
         )}