@hilum/ui 3.8.6 → 3.10.0

package/src/components/date-picker.tsx

@@ -1,55 +1,164 @@
 "use client";
 
 import * as React from "react";
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon, X } from "lucide-react";
+import type { DateRange as DayPickerDateRange, Matcher } from "react-day-picker";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Calendar } from "./calendar";
 import { Button } from "./button";
 import { cn } from "../lib/utils";
+import { formatDate, formatDateRange, useFormatter } from "../lib/format";
 
-const formatDate = (date: Date) =>
-  date.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
+type DateRange = { from: Date | undefined; to?: Date | undefined };
 
-interface DatePickerProps {
-  value?: Date | undefined;
-  onChange?: (date: Date | undefined) => void;
+interface DatePickerBaseProps {
   placeholder?: string;
   disabled?: boolean;
+  /** Earliest selectable day. */
+  minDate?: Date;
+  /** Latest selectable day. */
+  maxDate?: Date;
+  /** Show a clear (×) button when a value is set. */
+  clearable?: boolean;
+  /** BCP-47 locale for the trigger label. Defaults to FormatProvider. */
+  locale?: string;
+  /**
+   * Stretch the trigger to its container (default, like Input). Pass `false`
+   * for an inline 15rem trigger, or size it with `containerClassName`.
+   */
+  fullWidth?: boolean;
+  /** Classes for the trigger wrapper (width, margins). `className` targets the button. */
+  containerClassName?: string;
+  id?: string;
+  name?: string;
+  "aria-label"?: string;
+  "aria-invalid"?: boolean;
   className?: string;
 }
 
+interface DatePickerProps extends DatePickerBaseProps {
+  value?: Date | undefined;
+  onChange?: (date: Date | undefined) => void;
+}
+
+function disabledMatchers(minDate?: Date, maxDate?: Date): Matcher[] | undefined {
+  const matchers: Matcher[] = [];
+  if (minDate) matchers.push({ before: minDate });
+  if (maxDate) matchers.push({ after: maxDate });
+  return matchers.length ? matchers : undefined;
+}
+
+interface TriggerProps extends DatePickerBaseProps {
+  label: React.ReactNode;
+  empty: boolean;
+  onClear: () => void;
+}
+
+const DatePickerTrigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
+  (
+    {
+      label,
+      empty,
+      onClear,
+      clearable,
+      disabled,
+      fullWidth = true,
+      containerClassName,
+      className,
+      id,
+      "aria-label": ariaLabel,
+      "aria-invalid": ariaInvalid,
+      ...rest
+    },
+    ref,
+  ) => (
+    <div
+      className={cn(
+        "relative inline-flex",
+        fullWidth ? "w-full" : "w-60 max-w-full",
+        containerClassName,
+      )}
+    >
+      <Button
+        ref={ref}
+        type="button"
+        variant="outline"
+        id={id}
+        aria-label={ariaLabel}
+        aria-invalid={ariaInvalid}
+        className={cn(
+          "w-full justify-start gap-2 text-left font-normal",
+          empty && "text-muted-foreground",
+          clearable && !empty && "pr-8",
+          ariaInvalid && "border-destructive",
+          className,
+        )}
+        disabled={disabled}
+        {...rest}
+      >
+        <CalendarIcon size={14} className="shrink-0 text-muted-foreground" aria-hidden="true" />
+        <span className="min-w-0 truncate">{label}</span>
+      </Button>
+      {clearable && !empty && !disabled && (
+        <button
+          type="button"
+          aria-label="Clear date"
+          onClick={(event) => {
+            event.stopPropagation();
+            onClear();
+          }}
+          className="absolute top-1/2 right-1.5 flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <X size={12} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  ),
+);
+DatePickerTrigger.displayName = "DatePickerTrigger";
+
+/**
+ * Single-date picker — a button trigger + calendar popover. Replaces native
+ * `<input type="date">` so dates look and localise the same everywhere.
+ * Pair with `toISODate()` / `toDate()` when your API speaks "YYYY-MM-DD".
+ */
 function DatePicker({
   value,
   onChange,
   placeholder = "Pick a date",
-  disabled,
-  className,
+  minDate,
+  maxDate,
+  locale,
+  ...rest
 }: DatePickerProps) {
+  const fmt = useFormatter();
+  const [open, setOpen] = React.useState(false);
+  const resolvedLocale = locale ?? fmt.locale;
+  const label = value
+    ? formatDate(value, { style: "long", ...(resolvedLocale ? { locale: resolvedLocale } : {}) })
+    : placeholder;
+  const disabledDays = disabledMatchers(minDate, maxDate);
+
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn(
-            "w-[240px] justify-start gap-2 text-left font-normal",
-            !value && "text-muted-foreground",
-            className,
-          )}
-          disabled={disabled}
-        >
-          <CalendarIcon size={14} className="text-muted-foreground shrink-0" />
-          {value ? formatDate(value) : <span>{placeholder}</span>}
-        </Button>
+        <DatePickerTrigger
+          {...rest}
+          label={label}
+          empty={!value}
+          onClear={() => onChange?.(undefined)}
+        />
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0 shadow-elevated" align="start">
         <Calendar
           mode="single"
-          {...(value !== undefined && { selected: value })}
-          {...(onChange !== undefined && { onSelect: onChange })}
+          {...(value !== undefined && { selected: value, defaultMonth: value })}
+          {...(disabledDays && { disabled: disabledDays })}
+          onSelect={(date: Date | undefined) => {
+            onChange?.(date);
+            if (date) setOpen(false);
+          }}
+          // eslint-disable-next-line jsx-a11y/no-autofocus -- moves focus into the calendar when the popover opens (dialog focus management)
           autoFocus
         />
       </PopoverContent>
@@ -58,4 +167,142 @@ function DatePicker({
 }
 DatePicker.displayName = "DatePicker";
 
-export { DatePicker, formatDate };
+interface DateRangePreset {
+  label: string;
+  range: () => DateRange;
+}
+
+function daysAgo(days: number) {
+  const d = new Date();
+  d.setHours(0, 0, 0, 0);
+  d.setDate(d.getDate() - days);
+  return d;
+}
+
+function today() {
+  const d = new Date();
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+/** Common analytics / reporting presets. */
+const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[] = [
+  { label: "Today", range: () => ({ from: today(), to: today() }) },
+  { label: "Last 7 days", range: () => ({ from: daysAgo(6), to: today() }) },
+  { label: "Last 30 days", range: () => ({ from: daysAgo(29), to: today() }) },
+  { label: "Last 90 days", range: () => ({ from: daysAgo(89), to: today() }) },
+  {
+    label: "Month to date",
+    range: () => {
+      const t = today();
+      return { from: new Date(t.getFullYear(), t.getMonth(), 1), to: t };
+    },
+  },
+  {
+    label: "Year to date",
+    range: () => {
+      const t = today();
+      return { from: new Date(t.getFullYear(), 0, 1), to: t };
+    },
+  },
+];
+
+interface DateRangePickerProps extends DatePickerBaseProps {
+  value?: DateRange | undefined;
+  /** Shorthand for `value={{ from, to }}`. Ignored when `value` is set. */
+  from?: Date | undefined;
+  /** Shorthand for `value={{ from, to }}`. Ignored when `value` is set. */
+  to?: Date | undefined;
+  onChange?: (range: DateRange | undefined) => void;
+  /** Quick ranges shown beside the calendar. Pass `[]` to hide. */
+  presets?: DateRangePreset[];
+  /** Months shown side-by-side from `sm` up. Default: 2. */
+  numberOfMonths?: number;
+}
+
+/**
+ * Date-range picker with optional presets ("Last 30 days") — for analytics
+ * filters, reports and exports. Replaces pairs of native date inputs.
+ */
+function DateRangePicker({
+  value: valueProp,
+  from,
+  to,
+  onChange,
+  placeholder = "Pick a date range",
+  minDate,
+  maxDate,
+  locale,
+  presets = DEFAULT_DATE_RANGE_PRESETS,
+  numberOfMonths = 2,
+  ...rest
+}: DateRangePickerProps) {
+  const fmt = useFormatter();
+  const [open, setOpen] = React.useState(false);
+  const value = valueProp ?? (from || to ? { from, to } : undefined);
+  const resolvedLocale = locale ?? fmt.locale;
+  const label = value?.from
+    ? formatDateRange(value.from, value.to ?? value.from, {
+        ...(resolvedLocale ? { locale: resolvedLocale } : {}),
+      })
+    : placeholder;
+  const disabledDays = disabledMatchers(minDate, maxDate);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <DatePickerTrigger
+          {...rest}
+          label={label}
+          empty={!value?.from}
+          onClear={() => onChange?.(undefined)}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="w-auto max-w-[calc(100vw-2rem)] p-0 shadow-elevated" align="start">
+        <div className="flex flex-col sm:flex-row">
+          {presets.length > 0 && (
+            <div
+              role="group"
+              aria-label="Preset ranges"
+              className="flex gap-1 overflow-x-auto border-b border-border p-2 [scrollbar-width:none] sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0"
+            >
+              {presets.map((preset) => (
+                <Button
+                  key={preset.label}
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  className="shrink-0 justify-start"
+                  onClick={() => {
+                    onChange?.(preset.range());
+                    setOpen(false);
+                  }}
+                >
+                  {preset.label}
+                </Button>
+              ))}
+            </div>
+          )}
+          <Calendar
+            mode="range"
+            numberOfMonths={numberOfMonths}
+            {...(value?.from && {
+              selected: value as DayPickerDateRange,
+              defaultMonth: value.from,
+            })}
+            {...(disabledDays && { disabled: disabledDays })}
+            onSelect={(range: DayPickerDateRange | undefined) =>
+              onChange?.(range ? { from: range.from, to: range.to } : undefined)
+            }
+            // eslint-disable-next-line jsx-a11y/no-autofocus -- moves focus into the calendar when the popover opens (dialog focus management)
+            autoFocus
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+DateRangePicker.displayName = "DateRangePicker";
+
+export { DatePicker, DateRangePicker, DEFAULT_DATE_RANGE_PRESETS };
+export type { DatePickerProps, DateRangePickerProps, DateRange, DateRangePreset };

package/src/components/date-text.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import {
+  formatDate,
+  formatRelativeTime,
+  toDate,
+  useFormatter,
+  type DateFormatStyle,
+  type DateInput,
+} from "../lib/format";
+
+interface DateTextProps extends Omit<React.HTMLAttributes<HTMLTimeElement>, "children"> {
+  /** Date, ISO string, or epoch ms. Empty/invalid renders `fallback`. */
+  value: DateInput;
+  /**
+   * Preset. `date`/`short` → "Sep 26, 2026" (default), `datetime` → "Sep 26,
+   * 2026, 3:04 PM", `monthDay` → "Sep 26", `long`, `month`, `time`, `iso`, or
+   * `relative` → "3 hours ago".
+   */
+  format?: DateFormatStyle | "relative";
+  locale?: string;
+  timeZone?: string;
+  /** Shown when `value` is empty or invalid. Default: "—". */
+  fallback?: string;
+}
+
+/**
+ * Renders a semantic `<time>` with a consistent, locale-aware format and the
+ * full date-time as a hover title. Use it for every date in tables, detail
+ * sidebars and timelines instead of `toLocaleDateString()` or raw ISO strings.
+ */
+function DateText({
+  value,
+  format = "date",
+  locale,
+  timeZone,
+  fallback = "—",
+  className,
+  title,
+  ...props
+}: DateTextProps) {
+  const fmt = useFormatter();
+  const date = toDate(value);
+  const opts = {
+    ...(locale ?? fmt.locale ? { locale: locale ?? fmt.locale } : {}),
+    ...(timeZone ?? fmt.timeZone ? { timeZone: timeZone ?? fmt.timeZone } : {}),
+  };
+  if (!date) {
+    return <span className={cn("text-muted-foreground", className)}>{fallback}</span>;
+  }
+  const text =
+    format === "relative"
+      ? formatRelativeTime(date, opts)
+      : formatDate(date, { ...opts, style: format });
+  return (
+    <time
+      dateTime={date.toISOString()}
+      title={title ?? formatDate(date, { ...opts, style: "datetime" })}
+      className={cn("tabular-nums", className)}
+      {...props}
+    >
+      {text}
+    </time>
+  );
+}
+
+DateText.displayName = "DateText";
+
+interface RelativeTimeProps extends Omit<DateTextProps, "format"> {
+  /** Re-render on an interval so "just now" ages. Default: 60s. `0` disables. */
+  updateInterval?: number;
+}
+
+/** "5 minutes ago" that keeps itself fresh; falls back to a date after 7 days. */
+function RelativeTime({ updateInterval = 60_000, ...props }: RelativeTimeProps) {
+  const [, force] = React.useReducer((n: number) => n + 1, 0);
+  React.useEffect(() => {
+    if (!updateInterval) return;
+    const id = window.setInterval(force, updateInterval);
+    return () => window.clearInterval(id);
+  }, [updateInterval]);
+  return <DateText {...props} format="relative" />;
+}
+
+RelativeTime.displayName = "RelativeTime";
+
+export { DateText, RelativeTime };
+export type { DateTextProps, RelativeTimeProps };

package/src/components/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { DropdownMenu } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../lib/utils";
+import { useDensityAttributes } from "../lib/density-context";
 import {
   menuItemActiveClasses,
   menuItemClasses,
@@ -32,6 +33,7 @@ const DropdownMenuContent = React.forwardRef<
     <style>{mobilePopperSheetStyle}</style>
     <DropdownMenu.Portal>
       <DropdownMenu.Content
+        {...useDensityAttributes()}
         ref={ref}
         data-hilum-mobile-sheet="true"
         sideOffset={sideOffset}
@@ -70,10 +72,10 @@ const DropdownMenuItem = React.forwardRef<
       pressClasses,
       destructive
         ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
-        : "text-muted-foreground focus:bg-muted focus:text-foreground",
+        : "text-foreground focus:bg-active",
       !destructive && menuItemActiveClasses,
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "pl-8 compact:pl-7",
       className,
     )}
     {...props}
@@ -90,7 +92,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     className={cn(
       menuItemClasses,
       menuItemActiveClasses,
-      "py-2 pl-8 pr-2.5 text-muted-foreground",
+      "py-2 pl-8 pr-2.5 text-foreground compact:pl-7 compact:pr-2",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -115,7 +117,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     className={cn(
       menuItemClasses,
       menuItemActiveClasses,
-      "py-2 pl-8 pr-2.5 text-muted-foreground",
+      "py-2 pl-8 pr-2.5 text-foreground compact:pl-7 compact:pr-2",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -139,7 +141,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenu.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-muted-foreground compact:px-2 compact:text-[11px]", inset && "pl-8 compact:pl-7", className)}
     {...props}
   />
 ));
@@ -151,7 +153,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenu.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
 ));
@@ -168,8 +170,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       menuItemClasses,
       menuItemActiveClasses,
-      "text-muted-foreground data-[state=open]:bg-muted",
-      inset && "pl-8",
+      "text-foreground data-[state=open]:bg-active",
+      inset && "pl-8 compact:pl-7",
       className,
     )}
     {...props}
@@ -187,6 +189,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <>
     <style>{mobilePopperSheetStyle}</style>
     <DropdownMenu.SubContent
+        {...useDensityAttributes()}
       ref={ref}
       data-hilum-mobile-sheet="true"
       className={cn(

package/src/components/dropdown.tsx

@@ -29,6 +29,9 @@ interface DropdownContextValue {
   checkedIndex?: number;
 }
 
+// Every menu-item flavour participates in arrow-key navigation.
+const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]';
+
 const DropdownContext = createContext<DropdownContextValue | null>(null);
 
 export function useDropdown() {
@@ -101,7 +104,7 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
           }}
           onKeyDown={(e) => {
             const items = Array.from(
-              containerRef.current?.querySelectorAll('[role="menuitemradio"]') ?? [],
+              containerRef.current?.querySelectorAll(MENU_ITEM_SELECTOR) ?? [],
             ) as HTMLElement[];
             const currentIdx = items.indexOf(e.target as HTMLElement);
             if (currentIdx === -1) return;
@@ -182,7 +185,7 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
           <AnimatePresence>
             {focusRect && (
               <motion.div
-                className={`absolute ${shape.focusRing} pointer-events-none z-20 border border-[#6B97FF]`}
+                className={`absolute ${shape.focusRing} pointer-events-none z-20 border-2 border-ring`}
                 initial={false}
                 animate={{
                   left: focusRect.left - 2,
@@ -233,7 +236,7 @@ const DropdownSeparator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
     <div
       ref={ref}
       role="separator"
-      className={cn("my-1 -mx-1 h-px bg-border/60", className)}
+      className={cn("my-1 -mx-1 h-px bg-border", className)}
       {...props}
     />
   ),

package/src/components/empty-state.tsx

@@ -2,42 +2,106 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 
+interface EmptyStateAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  /** Optional leading icon. */
+  icon?: React.ReactNode;
+}
+
 interface EmptyStateProps {
   icon?: React.ReactNode;
   title: string;
-  description?: string;
-  action?: {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-  };
+  description?: React.ReactNode;
+  /**
+   * Primary call to action — every first-run empty state should have one
+   * ("Add product", "Create discount"). Pass an element for router links.
+   */
+  action?: EmptyStateAction | React.ReactElement;
+  /** Secondary, lower-emphasis action (e.g. "Import CSV", "Learn more"). */
+  secondaryAction?: EmptyStateAction | React.ReactElement;
+  /**
+   * `plain` (default) — sits inside an existing card/table.
+   * `card` — standalone bordered surface for a whole page section.
+   */
+  variant?: "plain" | "card";
+  /** `sm` for inline table/list bodies, `md` (default) for page sections. */
+  size?: "sm" | "md";
+  /** Extra content below the actions (e.g. a help link or illustration). */
+  children?: React.ReactNode;
   className?: string;
 }
 
-function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+function renderAction(
+  action: EmptyStateAction | React.ReactElement,
+  variant: "primary" | "outline",
+) {
+  if (React.isValidElement(action)) return action;
+  const { label, href, onClick, icon } = action as EmptyStateAction;
+  const content = (
+    <>
+      {icon && (
+        <span className="inline-flex shrink-0 [&_svg]:size-3.5" aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {label}
+    </>
+  );
+  return href ? (
+    <Button size="sm" variant={variant} asChild>
+      <a href={href}>{content}</a>
+    </Button>
+  ) : (
+    <Button size="sm" variant={variant} onClick={onClick}>
+      {content}
+    </Button>
+  );
+}
+
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  variant = "plain",
+  size = "md",
+  children,
+  className,
+}: EmptyStateProps) {
   return (
-    <div className={cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className)}>
+    <div
+      data-slot="empty-state"
+      className={cn(
+        "flex flex-col items-center gap-4 text-center",
+        size === "sm" ? "px-4 py-8" : "px-6 py-14",
+        variant === "card" && "rounded-xl border border-dashed border-border bg-card",
+        className,
+      )}
+    >
       {icon && (
-        <div className="flex size-9 items-center justify-center rounded-md bg-brand-secondary/20 text-muted-foreground">
+        <div
+          className="flex size-9 items-center justify-center rounded-md bg-brand-secondary/20 text-muted-foreground"
+          aria-hidden="true"
+        >
           {icon}
         </div>
       )}
       <div className="flex flex-col gap-1.5">
         <p className="body text-balance font-semibold text-foreground">{title}</p>
         {description && (
-          <p className="body max-w-xs text-pretty text-muted-foreground">{description}</p>
+          <p className="body max-w-sm text-pretty text-muted-foreground">{description}</p>
         )}
       </div>
-      {action &&
-        (action.href ? (
-          <Button size="sm" asChild>
-            <a href={action.href}>{action.label}</a>
-          </Button>
-        ) : (
-          <Button size="sm" onClick={action.onClick}>
-            {action.label}
-          </Button>
-        ))}
+      {(action || secondaryAction) && (
+        <div className="flex flex-wrap items-center justify-center gap-2">
+          {action && renderAction(action, "primary")}
+          {secondaryAction && renderAction(secondaryAction, "outline")}
+        </div>
+      )}
+      {children}
     </div>
   );
 }
@@ -45,3 +109,4 @@ function EmptyState({ icon, title, description, action, className }: EmptyStateP
 EmptyState.displayName = "EmptyState";
 
 export { EmptyState };
+export type { EmptyStateProps, EmptyStateAction };

package/src/components/file-dropzone.tsx

@@ -83,6 +83,7 @@ function FileDropzone({
   return (
     <label
       htmlFor={resolvedId}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role -- label for the hidden file input, made a focusable button with Enter/Space handling (onKeyDown) so it also works as a drop target
       role="button"
       tabIndex={isUnavailable ? -1 : (tabIndex ?? 0)}
       aria-disabled={isUnavailable || undefined}
@@ -91,7 +92,7 @@ function FileDropzone({
         "group flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-card p-6 text-center shadow-natural",
         "transition-[background-color,border-color,box-shadow,scale] duration-150",
         "hover:border-brand-primary/50 hover:bg-muted/40 active:scale-[0.96]",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "data-[dragging=true]:border-brand-primary data-[dragging=true]:bg-brand-secondary/25",
         isUnavailable && "pointer-events-none cursor-not-allowed opacity-60 active:scale-100",
         className,