@spree/dashboard-ui 0.13.1 → 1.0.0-beta.1

package/src/ui/date-range-picker.tsx

@@ -1,10 +1,16 @@
-import { format, startOfMonth, startOfYear, subDays } from 'date-fns'
-import { CalendarIcon, ChevronDownIcon } from 'lucide-react'
-import { useState } from 'react'
+import { format } from 'date-fns'
+import { useMemo, useState } from 'react'
 import type { DateRange as DayPickerDateRange } from 'react-day-picker'
 import { useTranslation } from 'react-i18next'
 import { activeDateLocale } from '../lib/date-locale'
+import {
+  DATE_RANGE_PRESET_KEYS,
+  type DateRangePresetKey,
+  matchDateRangePreset,
+  resolveDateRangePreset,
+} from '../lib/date-range-presets'
 import { cn } from '../lib/utils'
+import { CalendarIcon, ChevronDownIcon } from '../spree/icons'
 import { Button } from './button'
 import { Calendar } from './calendar'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
@@ -14,79 +20,58 @@ export interface DateRange {
   to: Date
 }
 
-type PresetKey = '7d' | '14d' | '30d' | '90d' | 'this_month' | 'ytd' | 'custom'
-
-interface Preset {
-  key: PresetKey
-  labelKey: string
-  value: () => DateRange
+const PRESET_LABEL_KEYS: Record<Exclude<DateRangePresetKey, 'custom'>, string> = {
+  '7d': 'admin.components.date_range_picker.presets.last_7_days',
+  '14d': 'admin.components.date_range_picker.presets.last_14_days',
+  '30d': 'admin.components.date_range_picker.presets.last_30_days',
+  '90d': 'admin.components.date_range_picker.presets.last_90_days',
+  this_month: 'admin.components.date_range_picker.presets.this_month',
+  ytd: 'admin.components.date_range_picker.presets.year_to_date',
 }
 
-const presets: Preset[] = [
-  {
-    key: '7d',
-    labelKey: 'admin.components.date_range_picker.presets.last_7_days',
-    value: () => ({ from: subDays(new Date(), 7), to: new Date() }),
-  },
-  {
-    key: '14d',
-    labelKey: 'admin.components.date_range_picker.presets.last_14_days',
-    value: () => ({ from: subDays(new Date(), 14), to: new Date() }),
-  },
-  {
-    key: '30d',
-    labelKey: 'admin.components.date_range_picker.presets.last_30_days',
-    value: () => ({ from: subDays(new Date(), 30), to: new Date() }),
-  },
-  {
-    key: '90d',
-    labelKey: 'admin.components.date_range_picker.presets.last_90_days',
-    value: () => ({ from: subDays(new Date(), 90), to: new Date() }),
-  },
-  {
-    key: 'this_month',
-    labelKey: 'admin.components.date_range_picker.presets.this_month',
-    value: () => ({ from: startOfMonth(new Date()), to: new Date() }),
-  },
-  {
-    key: 'ytd',
-    labelKey: 'admin.components.date_range_picker.presets.year_to_date',
-    value: () => ({ from: startOfYear(new Date()), to: new Date() }),
-  },
-]
-
-interface DateRangePickerProps {
+export interface DateRangePickerProps {
   value: DateRange
   onChange: (range: DateRange) => void
+  /**
+   * IANA timezone used to resolve relative presets ("last 30 days").
+   * Defaults to the browser zone. Pass the store timezone on admin
+   * surfaces so every merchant sees the same span.
+   */
+  timezone?: string
 }
 
-export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
+export function DateRangePicker({ value, onChange, timezone }: DateRangePickerProps) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const [activePreset, setActivePreset] = useState<PresetKey>('30d')
   const [calendarRange, setCalendarRange] = useState<DayPickerDateRange | undefined>()
+  const [month, setMonth] = useState<Date>(value.from)
 
-  const activePresetLabelKey =
-    presets.find((p) => p.key === activePreset)?.labelKey ??
-    'admin.components.date_range_picker.presets.last_30_days'
+  const zone = useMemo(
+    () => timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC',
+    [timezone],
+  )
+  // Derived from `value` so a remount — or a range written by the parent —
+  // keeps the trigger and the highlighted preset in sync. A second piece of
+  // preset state is what made "Last 90 days" revert to "Last 30 days"
+  // after the dashboard swapped the picker for a skeleton.
+  const activePreset = matchDateRangePreset(value, zone)
 
   const dateLocale = activeDateLocale()
   const triggerLabel =
     activePreset === 'custom'
       ? `${format(value.from, 'MMM d', { locale: dateLocale })} – ${format(value.to, 'MMM d', { locale: dateLocale })}`
-      : t(activePresetLabelKey)
+      : t(PRESET_LABEL_KEYS[activePreset])
 
-  function selectPreset(preset: Preset) {
-    const range = preset.value()
-    setActivePreset(preset.key)
+  function selectPreset(key: Exclude<DateRangePresetKey, 'custom'>) {
+    const range = resolveDateRangePreset(key, zone)
     setCalendarRange({ from: range.from, to: range.to })
+    setMonth(range.from)
     onChange(range)
     setOpen(false)
   }
 
   function applyCustomRange() {
     if (calendarRange?.from && calendarRange?.to) {
-      setActivePreset('custom')
       onChange({ from: calendarRange.from, to: calendarRange.to })
       setOpen(false)
     }
@@ -101,6 +86,7 @@ export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
         setOpen(nextOpen)
         if (nextOpen) {
           setCalendarRange({ from: value.from, to: value.to })
+          setMonth(value.from)
         }
       }}
     >
@@ -114,25 +100,26 @@ export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
       <PopoverContent align="end" className="w-auto p-0">
         <div className="flex">
           <div className="flex flex-col border-r py-2">
-            {presets.map((preset) => (
+            {DATE_RANGE_PRESET_KEYS.map((key) => (
               <button
-                key={preset.key}
+                key={key}
                 type="button"
-                onClick={() => selectPreset(preset)}
+                onClick={() => selectPreset(key)}
                 className={cn(
                   'whitespace-nowrap px-4 py-1.5 text-left text-sm transition-colors hover:bg-accent',
-                  activePreset === preset.key && 'font-medium text-foreground',
-                  activePreset !== preset.key && 'text-muted-foreground',
+                  activePreset === key && 'font-medium text-foreground',
+                  activePreset !== key && 'text-muted-foreground',
                 )}
               >
-                {t(preset.labelKey)}
+                {t(PRESET_LABEL_KEYS[key])}
               </button>
             ))}
           </div>
           <div className="flex flex-col p-3">
             <Calendar
               mode="range"
-              defaultMonth={calendarRange?.from}
+              month={month}
+              onMonthChange={setMonth}
               selected={calendarRange}
               onSelect={setCalendarRange}
               numberOfMonths={2}

package/src/ui/dialog.tsx

@@ -1,8 +1,8 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import i18n from 'i18next'
-import { XIcon } from 'lucide-react'
 import * as React from 'react'
 import { cn } from '../lib/utils'
+import { XIcon } from '../spree/icons'
 import { Button } from './button'
 
 function Dialog({
@@ -83,7 +83,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        'fixed inset-0 isolate z-50 bg-gray-100/75 dark:bg-black/60 duration-100 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity',
+        'fixed inset-0 isolate z-50 bg-background/60 dark:bg-black/60 duration-100 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity',
         className,
       )}
       {...props}
@@ -105,7 +105,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          'fixed top-1/2 left-1/2 z-50 flex w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card text-foreground text-sm shadow-lg duration-100 outline-none sm:max-w-[500px] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+          'fixed top-1/2 left-1/2 z-50 flex w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card text-foreground text-sm shadow-lg duration-100 outline-none sm:max-w-[min(500px,calc(100%-2rem))] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
           className,
         )}
         style={{ maxHeight: '90vh' }}
@@ -132,7 +132,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-1.5 border-b p-4', className)}
+      className={cn('flex flex-col gap-1.5 border-b border-border-subtle p-4', className)}
       {...props}
     />
   )
@@ -160,7 +160,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        'flex flex-col-reverse gap-2 border-t border-border-subtle bg-muted/50 p-4 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}
@@ -177,7 +177,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-base leading-none font-medium', className)}
+      className={cn('text-lg font-medium', className)}
       {...props}
     />
   )

package/src/ui/dropdown-menu.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { Menu as MenuPrimitive } from '@base-ui/react/menu'
-import { CheckIcon, ChevronRightIcon } from 'lucide-react'
 import * as React from 'react'
 import { cn } from '../lib/utils'
+import { CheckIcon, ChevronRightIcon } from '../spree/icons'
 
 function DropdownMenu({
   children,
@@ -81,7 +81,9 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            'z-50 max-h-[var(--available-height)] min-w-40 max-w-80 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            // `origin-(--transform-origin)` so the menu grows out of its
+            // trigger rather than its own centre.
+            'z-50 max-h-[var(--available-height)] min-w-40 max-w-80 overflow-x-hidden overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-lg origin-(--transform-origin) duration-100 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
             className,
           )}
           {...props}
@@ -117,7 +119,7 @@ function DropdownMenuItem({
         data-variant={variant}
         render={children}
         className={cn(
-          "group/dropdown-menu-item relative flex cursor-default items-center gap-3 rounded-xl px-2.5 py-2 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
@@ -131,7 +133,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-3 rounded-xl px-2.5 py-2 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -158,7 +160,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-3 rounded-xl py-2 pr-8 pl-2.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-3 rounded-lg py-1.5 pr-8 pl-2.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -197,7 +199,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-3 rounded-xl py-2 pr-8 pl-2.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-3 rounded-lg py-1.5 pr-8 pl-2.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -228,7 +230,7 @@ function DropdownMenuLabel({
         data-slot="dropdown-menu-label"
         data-inset={inset}
         className={cn(
-          'px-2.5 py-2 text-sm font-normal text-muted-foreground data-inset:pl-7',
+          'px-2 py-1.5 text-sm font-normal text-muted-foreground data-inset:pl-7',
           className,
         )}
         {...props}
@@ -244,7 +246,7 @@ function DropdownMenuSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      className={cn('mx-1 my-1 h-px bg-border-subtle', className)}
       {...props}
     />
   )
@@ -280,22 +282,25 @@ function DropdownMenuSubTrigger({
   className,
   inset,
   children,
+  hideChevron,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
   inset?: boolean
+  /** Suppress the default trailing chevron when the trigger renders its own affordance. */
+  hideChevron?: boolean
 }) {
   return (
     <MenuPrimitive.SubmenuTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-3 rounded-xl px-2.5 py-2 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      {!hideChevron && <ChevronRightIcon className="ml-auto" />}
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -314,7 +319,9 @@ function DropdownMenuSubContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-sub-content"
           className={cn(
-            'z-50 min-w-[96px] overflow-hidden rounded-2xl border border-border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            // `origin-(--transform-origin)` so the submenu grows out of its
+            // parent item rather than its own centre.
+            'z-50 min-w-[96px] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-lg origin-(--transform-origin) duration-100 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
             className,
           )}
           {...props}

package/src/ui/field.tsx

@@ -9,7 +9,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
     <fieldset
       data-slot="field-set"
       className={cn(
-        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 rounded-md p-3 border border-border-subtle shadow-xs bg-card',
         className,
       )}
       {...props}
@@ -27,7 +27,7 @@ function FieldLegend({
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
-        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        'mb-1.5 font-semibold data-[variant=label]:text-sm data-[variant=legend]:text-base',
         className,
       )}
       {...props}
@@ -95,6 +95,14 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
       data-slot="field-label"
       className={cn(
         'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-blue-500/30 has-data-checked:bg-blue-500/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-blue-500/20 dark:has-data-checked:bg-blue-500/10',
+        // Card-shaped labels (the ones wrapping a whole `Field`) are clickable
+        // targets, so they need the affordance a bare text label doesn't:
+        // a pointer and a hover tint. Scoped by `has-[>[data-slot=field]]` so
+        // plain field labels keep their default cursor, and excluded on the
+        // checked card by `not-has-data-checked` — a competing hover rule of
+        // equal specificity would just race the selected tint and win.
+        'has-[>[data-slot=field]]:cursor-pointer has-[>[data-slot=field]]:transition-colors',
+        'has-[>[data-slot=field]]:not-has-data-checked:hover:border-border has-[>[data-slot=field]]:not-has-data-checked:hover:bg-accent/60',
         'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
         className,
       )}

package/src/ui/input-group.tsx

@@ -11,7 +11,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="input-group"
       role="group"
       className={cn(
-        'group/input-group relative flex w-full min-w-0 items-center rounded-lg border border-border bg-card text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:shadow-none has-disabled:bg-muted has-disabled:border-border has-disabled:opacity-50 has-disabled:shadow-none has-[[data-slot=input-group-control]:focus-visible]:border-blue-500 has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        'group/input-group relative flex w-full min-w-0 items-center rounded-md border border-border bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:shadow-none has-disabled:bg-muted has-disabled:cursor-not-allowed has-disabled:text-muted-foreground has-[[data-slot=input-group-control]:focus-visible]:border-blue-500 has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
         className,
       )}
       {...props}

package/src/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'block w-full min-w-0 min-h-8 rounded-lg border border-border bg-card py-1.5 px-2.5 text-base font-normal leading-normal text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:border-border disabled:text-muted-foreground disabled:shadow-none aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        'block w-full min-w-0 min-h-8 rounded-md border border-border bg-card py-1.5 px-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
         className,
       )}
       {...props}