tera-system-ui 0.1.75 → 0.2.1

package/dist/components/command/Command.recipe.d.ts

@@ -0,0 +1,92 @@
+import { type VariantProps } from "tailwind-variants";
+/**
+ * Command recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Command): the recipe is slotted by role
+ * — root / list / item / linkItem / group / groupHeading / separator / shortcut /
+ * empty — so an app can restyle any part independently. Most of the visual
+ * treatment for the list surface, items, groups and empty state lives in the
+ * companion `command.scss` (data-cmdk-* attribute selectors); these slots carry
+ * the Tailwind utility strings that were previously inlined per sub-component.
+ *
+ * Primary customization surface: extend with `tv({ extend: commandRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-command-radius)
+ * lets a theme retune the list/menu surface corner radius with no code change;
+ * it defaults to 0 (square — the prior look) via an inline fallback. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export declare const commandRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            group?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            empty?: import("tailwind-merge").ClassNameValue;
+            linkItem?: import("tailwind-merge").ClassNameValue;
+            groupHeading?: import("tailwind-merge").ClassNameValue;
+            shortcut?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            group?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            empty?: import("tailwind-merge").ClassNameValue;
+            linkItem?: import("tailwind-merge").ClassNameValue;
+            groupHeading?: import("tailwind-merge").ClassNameValue;
+            shortcut?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    item: string;
+    linkItem: string;
+    group: string;
+    groupHeading: string;
+    separator: string;
+    shortcut: string;
+    empty: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            group?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            empty?: import("tailwind-merge").ClassNameValue;
+            linkItem?: import("tailwind-merge").ClassNameValue;
+            groupHeading?: import("tailwind-merge").ClassNameValue;
+            shortcut?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    item: string;
+    linkItem: string;
+    group: string;
+    groupHeading: string;
+    separator: string;
+    shortcut: string;
+    empty: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    list: string;
+    item: string;
+    linkItem: string;
+    group: string;
+    groupHeading: string;
+    separator: string;
+    shortcut: string;
+    empty: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CommandRecipeProps = VariantProps<typeof commandRecipe>;

package/dist/components/command/Command.recipe.js

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants";
+/**
+ * Command recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Command): the recipe is slotted by role
+ * — root / list / item / linkItem / group / groupHeading / separator / shortcut /
+ * empty — so an app can restyle any part independently. Most of the visual
+ * treatment for the list surface, items, groups and empty state lives in the
+ * companion `command.scss` (data-cmdk-* attribute selectors); these slots carry
+ * the Tailwind utility strings that were previously inlined per sub-component.
+ *
+ * Primary customization surface: extend with `tv({ extend: commandRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-command-radius)
+ * lets a theme retune the list/menu surface corner radius with no code change;
+ * it defaults to 0 (square — the prior look) via an inline fallback. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export const commandRecipe = tv({
+    slots: {
+        root: 'flex w-full flex-col overflow-hidden',
+        list: 'rounded-[var(--tera-command-radius,0)]',
+        item: '',
+        linkItem: "aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        group: 'overflow-hidden',
+        groupHeading: '',
+        separator: 'bg-border mx-1 h-px',
+        shortcut: 'text-muted-foreground ml-auto text-xs tracking-widest',
+        empty: '',
+    },
+});

package/dist/components/command/components/command-empty.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { commandRecipe } from "../Command.recipe";
 let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.Empty
         bind:ref
         data-slot="command-empty"
         data-cmdk-empty=""
-        class={cn("", className)}
+        class={commandRecipe().empty({class: className})}
         {...restProps}
 />

package/dist/components/command/components/command-group.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">import { Command as CommandPrimitive, useId } from "bits-ui";
-import { cn } from "../../../utils";
+import { commandRecipe } from "../Command.recipe";
 let { ref = $bindable(null), class: className, children, heading, value, ...restProps } = $props();
+const r = commandRecipe();
 </script>
 <CommandPrimitive.Group
         bind:ref
         data-slot="command-group"
-        class={cn("overflow-hidden", className)}
+        class={r.group({class: className})}
         value={value ?? heading ?? `----${useId()}`}
         {...restProps}
 >
     {#if heading}
         <CommandPrimitive.GroupHeading
                 data-cmdk-group-heading=""
-                class=""
+                class={r.groupHeading()}
         >
             {heading}
         </CommandPrimitive.GroupHeading>

package/dist/components/command/components/command-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
 import { cn } from "../../../utils";
-import { IconSearch } from "../../..";
-import { styles } from "../../input/Input.js";
+import { IconSearch } from "../../../internal/icons";
+import { inputRecipe } from "../../input";
 let { autofocus = undefined, ref = $bindable(null), class: className, value = $bindable(""), ...restProps } = $props();
 </script>
 <div class="flex items-center border-b px-3" data-slot="command-input-wrapper">
@@ -9,11 +9,7 @@ let { autofocus = undefined, ref = $bindable(null), class: className, value = $b
     <CommandPrimitive.Input
             autofocus={autofocus}
             data-slot="command-input"
-            class={styles({
-            variant: 'borderless',
-            size: 'lg',
-            class: className + 'rounded-none text-sm',
-        })}
+            class={inputRecipe({ variant: 'borderless', size: 'lg' }).field({ class: cn('rounded-none text-sm', className) })}
 
             bind:ref
             {...restProps}

package/dist/components/command/components/command-item.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { commandRecipe } from "../Command.recipe";
 let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.Item
         bind:ref
         data-slot="command-item"
         data-cmdk-item=""
-        class={cn(
-    "",
-    className
-  )}
+        class={commandRecipe().item({class: className})}
         {...restProps}
 />

package/dist/components/command/components/command-link-item.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { commandRecipe } from "../Command.recipe";
 let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.LinkItem
         bind:ref
         data-slot="command-item"
-        class={cn(
-    "aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-    className
-  )}
+        class={commandRecipe().linkItem({class: className})}
         {...restProps}
 />

package/dist/components/command/components/command-list.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { commandRecipe } from "../Command.recipe";
 let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.List
         bind:ref
         data-slot="command-list"
         data-cmdk-list=""
-        class={cn("", className)}
+        class={commandRecipe().list({class: className})}
         {...restProps}
 />

package/dist/components/command/components/command-separator.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { commandRecipe } from "../Command.recipe";
 let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.Separator
         bind:ref
         data-slot="command-separator"
-        class={cn("bg-border mx-1 h-px", className)}
+        class={commandRecipe().separator({class: className})}
         {...restProps}
 />

package/dist/components/command/components/command-shortcut.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">import { cn } from "../../../utils";
+<script lang="ts">import { commandRecipe } from "../Command.recipe";
 let { ref = $bindable(null), class: className, children, ...restProps } = $props();
 </script>
 <span
         bind:this={ref}
         data-slot="command-shortcut"
-        class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+        class={commandRecipe().shortcut({class: className})}
         {...restProps}
 >
   {@render children?.()}

package/dist/components/command/components/command-shortcut.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type WithElementRef } from "../../../utils";
+import type { WithElementRef } from "../../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 declare const CommandShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 type CommandShortcut = ReturnType<typeof CommandShortcut>;

package/dist/components/command/components/command.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { commandRecipe } from "../Command.recipe";
 import "../command.scss";
 let { ref = $bindable(null), value = $bindable(""), command = $bindable(), class: className, selectedIndex, ...restProps } = $props();
 $effect(() => {
@@ -33,9 +33,6 @@ $effect(() => {
         bind:ref
         bind:this={command}
         data-slot="command"
-        class={cn(
-    "flex w-full flex-col overflow-hidden",
-    className
-  )}
+        class={commandRecipe().root({class: className})}
         {...restProps}
 />

package/dist/components/command/index.d.ts

@@ -11,3 +11,5 @@ import LinkItem from "./components/command-link-item.svelte";
 declare const Loading: import("svelte").Component<CommandPrimitive.LoadingProps, {}, "ref">;
 export { //
 Root as Command, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };
+export { commandRecipe } from "./Command.recipe";
+export type { CommandRecipeProps } from "./Command.recipe";

package/dist/components/command/index.js

@@ -11,3 +11,4 @@ import LinkItem from "./components/command-link-item.svelte";
 const Loading = CommandPrimitive.Loading;
 export { //
 Root as Command, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };
+export { commandRecipe } from "./Command.recipe";

package/dist/components/date-range-picker/DateRangePicker.recipe.d.ts

@@ -0,0 +1,220 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { CalendarDate } from "@internationalized/date";
+/**
+ * DateRangePicker recipe — the canonical styled layer for the base design language.
+ *
+ * Composite component (built on bits-ui RangeCalendar + Popover + DateRangeField,
+ * with the mobile branch wrapped in the Tera Dialog). The recipe is slotted by
+ * role so an app can restyle any region independently:
+ *   trigger / field / segment / iconBtn — the input row;
+ *   panel — the popover surface;
+ *   navBtn / monthLabel / weekday / cell / day — the calendar grid;
+ *   presetSidebar / presetHeading / presetItem / presetPill — quick-select;
+ *   timeBar / timeLabel / timeArrow / timeInput — the optional time pickers;
+ *   footer / footerReset / footerApply — the action row;
+ *   dialogHeader / dialogTitle / pillBar — the mobile sheet chrome.
+ *
+ * The hardcoded glyphs are exposed as snippet seams on the component
+ * (calendarIcon / clearIcon / prevIcon / nextIcon / closeIcon).
+ *
+ * Primary customization surface: extend with `tv({ extend: dateRangePickerRecipe,
+ * ... })` in typed code. Lighter rung: the per-component CSS vars
+ * (--tera-date-range-picker-radius on the trigger, --tera-date-range-picker-panel-radius
+ * on the panel) let a theme retune corner radius with no code change; they default
+ * to global axis tokens via inline fallbacks. See docs/ARCHITECTURE.md for worked
+ * examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export declare const dateRangePickerRecipe: import("tailwind-variants").TVReturnType<{
+    presetActive: {
+        true: {
+            presetItem: string;
+        };
+        false: {
+            presetItem: string;
+        };
+    };
+    pillActive: {
+        true: {
+            presetPill: string;
+        };
+        false: {
+            presetPill: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    field: string;
+    segment: string;
+    iconBtn: string;
+    panel: string;
+    navBtn: string;
+    monthLabel: string;
+    weekday: string;
+    cell: string;
+    day: string;
+    presetSidebar: string;
+    presetHeading: string;
+    presetItem: string;
+    presetPill: string;
+    timeBar: string;
+    timeLabelStart: string;
+    timeLabelEnd: string;
+    timeArrow: string;
+    timeInput: string;
+    footer: string;
+    footerReset: string;
+    footerApply: string;
+    dialogHeader: string;
+    dialogTitle: string;
+    pillBar: string;
+}, undefined, {
+    presetActive: {
+        true: {
+            presetItem: string;
+        };
+        false: {
+            presetItem: string;
+        };
+    };
+    pillActive: {
+        true: {
+            presetPill: string;
+        };
+        false: {
+            presetPill: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    field: string;
+    segment: string;
+    iconBtn: string;
+    panel: string;
+    navBtn: string;
+    monthLabel: string;
+    weekday: string;
+    cell: string;
+    day: string;
+    presetSidebar: string;
+    presetHeading: string;
+    presetItem: string;
+    presetPill: string;
+    timeBar: string;
+    timeLabelStart: string;
+    timeLabelEnd: string;
+    timeArrow: string;
+    timeInput: string;
+    footer: string;
+    footerReset: string;
+    footerApply: string;
+    dialogHeader: string;
+    dialogTitle: string;
+    pillBar: string;
+}, import("tailwind-variants").TVReturnType<{
+    presetActive: {
+        true: {
+            presetItem: string;
+        };
+        false: {
+            presetItem: string;
+        };
+    };
+    pillActive: {
+        true: {
+            presetPill: string;
+        };
+        false: {
+            presetPill: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    field: string;
+    segment: string;
+    iconBtn: string;
+    panel: string;
+    navBtn: string;
+    monthLabel: string;
+    weekday: string;
+    cell: string;
+    day: string;
+    presetSidebar: string;
+    presetHeading: string;
+    presetItem: string;
+    presetPill: string;
+    timeBar: string;
+    timeLabelStart: string;
+    timeLabelEnd: string;
+    timeArrow: string;
+    timeInput: string;
+    footer: string;
+    footerReset: string;
+    footerApply: string;
+    dialogHeader: string;
+    dialogTitle: string;
+    pillBar: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DateRangePickerRecipeProps = VariantProps<typeof dateRangePickerRecipe>;
+/**
+ * @component DateRangePicker - Date range picker with quick-select presets, optional time support, and popover/drawer UI.
+ * Built on BitsUI RangeCalendar and Popover primitives.
+ */
+export interface DateRangePickerProps {
+    /** The currently selected date range as a two-element array [start, end]. Bindable. */
+    dateRange?: Date[];
+    /** Called when the user applies a new date range. */
+    onchange?: (date: Date[]) => void;
+    /** When true, shows hour and minute pickers alongside the calendar. */
+    enableTime?: boolean;
+    /** Placeholder text shown in the trigger when no range is selected. */
+    placeholder?: string;
+    /** Prevents all interaction. */
+    disabled?: boolean;
+    /** Additional CSS classes for the trigger button. */
+    class?: string;
+    /**
+     * Earliest selectable date.
+     * Use `import { CalendarDate } from '@internationalized/date'` to construct values.
+     */
+    minValue?: CalendarDate;
+    /**
+     * Latest selectable date.
+     * Use `import { CalendarDate } from '@internationalized/date'` to construct values.
+     */
+    maxValue?: CalendarDate;
+    /** Returns true for dates that should be shown as disabled and unselectable. */
+    isDateDisabled?: (date: CalendarDate) => boolean;
+    /** Number of calendar months shown side-by-side (desktop only). Defaults to 2. */
+    numberOfMonths?: 1 | 2;
+    /**
+     * Day of the week the calendar grid starts on.
+     * 0 = Sunday, 1 = Monday, … 6 = Saturday.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Replace the calendar (trigger) icon with custom markup (structural seam). */
+    calendarIcon?: Snippet;
+    /** Replace the clear (×) icon with custom markup (structural seam). */
+    clearIcon?: Snippet;
+    /** Replace the previous-month chevron with custom markup (structural seam). */
+    prevIcon?: Snippet;
+    /** Replace the next-month chevron with custom markup (structural seam). */
+    nextIcon?: Snippet;
+    /** Replace the mobile dialog close (×) icon with custom markup (structural seam). */
+    closeIcon?: Snippet;
+}

package/dist/components/date-range-picker/DateRangePicker.recipe.js

@@ -0,0 +1,113 @@
+import { tv } from "tailwind-variants";
+/**
+ * DateRangePicker recipe — the canonical styled layer for the base design language.
+ *
+ * Composite component (built on bits-ui RangeCalendar + Popover + DateRangeField,
+ * with the mobile branch wrapped in the Tera Dialog). The recipe is slotted by
+ * role so an app can restyle any region independently:
+ *   trigger / field / segment / iconBtn — the input row;
+ *   panel — the popover surface;
+ *   navBtn / monthLabel / weekday / cell / day — the calendar grid;
+ *   presetSidebar / presetHeading / presetItem / presetPill — quick-select;
+ *   timeBar / timeLabel / timeArrow / timeInput — the optional time pickers;
+ *   footer / footerReset / footerApply — the action row;
+ *   dialogHeader / dialogTitle / pillBar — the mobile sheet chrome.
+ *
+ * The hardcoded glyphs are exposed as snippet seams on the component
+ * (calendarIcon / clearIcon / prevIcon / nextIcon / closeIcon).
+ *
+ * Primary customization surface: extend with `tv({ extend: dateRangePickerRecipe,
+ * ... })` in typed code. Lighter rung: the per-component CSS vars
+ * (--tera-date-range-picker-radius on the trigger, --tera-date-range-picker-panel-radius
+ * on the panel) let a theme retune corner radius with no code change; they default
+ * to global axis tokens via inline fallbacks. See docs/ARCHITECTURE.md for worked
+ * examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export const dateRangePickerRecipe = tv({
+    slots: {
+        // ── Trigger (input row) ───────────────────────────────────────────
+        trigger: `inline-flex items-center gap-2 h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)] rounded-[var(--tera-date-range-picker-radius,var(--tera-radius-base))] text-sm w-full
+                border border-border-default bg-surface-control
+                focus-within:border-interactive-hover focus-within:shadow-focus
+                data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus
+                transition-[border-color,box-shadow] ease-ui duration-[var(--tera-duration-fast)]
+                cursor-text`,
+        field: 'drp-field flex items-center gap-0.5 min-w-0 flex-1',
+        segment: `inline-block rounded-sm px-0.5 text-sm tabular-nums caret-transparent select-none outline-none
+                text-text-primary
+                data-[placeholder]:text-text-tertiary
+                focus:bg-interactive-subtle focus:text-interactive-text`,
+        iconBtn: `inline-flex items-center justify-center size-6 rounded shrink-0 cursor-pointer
+                text-text-tertiary hover:bg-surface-hover hover:text-text-primary
+                transition-colors ease-ui duration-[var(--tera-duration-micro)]`,
+        // ── Panel (popover surface) ───────────────────────────────────────
+        panel: `z-50 overflow-hidden bg-surface rounded-[var(--tera-date-range-picker-panel-radius,var(--border-radius-container))] border border-border-default shadow-lg
+                animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)]
+                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,
+        // ── Calendar grid ─────────────────────────────────────────────────
+        navBtn: `inline-flex items-center justify-center size-7 rounded-md text-text-tertiary
+                hover:bg-surface-hover hover:text-text-primary
+                transition-colors ease-ui duration-[var(--tera-duration-micro)]
+                disabled:opacity-30 disabled:pointer-events-none`,
+        monthLabel: 'text-sm font-medium text-text-primary whitespace-nowrap',
+        weekday: 'w-9 h-8 text-xs font-medium text-text-tertiary flex items-center justify-center',
+        cell: 'relative size-9 p-0 text-center',
+        day: `inline-flex items-center justify-center size-full rounded-md text-sm cursor-pointer select-none
+                transition-colors ease-ui duration-[var(--tera-duration-micro)]
+                hover:bg-surface-hover text-text-primary
+                data-[outside-month]:opacity-0 data-[outside-month]:pointer-events-none
+                data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-border-default
+                data-[selected]:bg-primary-600 data-[selected]:text-white data-[selected]:hover:bg-primary-500 data-[selected]:ring-0
+                data-[range-middle]:bg-interactive-subtle data-[range-middle]:text-interactive-text data-[range-middle]:rounded-none data-[range-middle]:hover:bg-interactive-border
+                data-[range-start]:rounded-r-none
+                data-[range-end]:rounded-l-none
+                data-[disabled]:opacity-30 data-[disabled]:pointer-events-none
+                data-[unavailable]:opacity-30 data-[unavailable]:pointer-events-none`,
+        // ── Quick-select presets ──────────────────────────────────────────
+        presetSidebar: 'border-r border-border-default p-2 flex flex-col gap-0.5 w-36 shrink-0',
+        presetHeading: 'px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary',
+        presetItem: `w-full text-left px-2 py-1.5 rounded text-sm cursor-pointer
+                transition-colors ease-ui duration-[var(--tera-duration-micro)]`,
+        presetPill: `shrink-0 px-2.5 py-1 rounded-full text-xs border cursor-pointer whitespace-nowrap
+                transition-colors ease-ui duration-[var(--tera-duration-micro)]`,
+        // ── Time pickers ──────────────────────────────────────────────────
+        timeBar: 'border-t border-border-default px-4 py-3 flex items-center gap-2',
+        timeLabelStart: 'text-xs font-medium text-text-tertiary w-9 shrink-0',
+        timeLabelEnd: 'text-xs font-medium text-text-tertiary w-6 shrink-0',
+        timeArrow: 'text-text-tertiary mx-1 shrink-0',
+        timeInput: `h-7 px-2 text-sm text-text-primary border border-border-default rounded-md bg-surface-control
+                focus:border-interactive-hover focus:shadow-focus outline-none
+                transition-[border-color,box-shadow] ease-ui duration-[var(--tera-duration-fast)]`,
+        // ── Footer (action row) ───────────────────────────────────────────
+        footer: 'border-t border-border-default px-4 py-3 flex items-center justify-between gap-3',
+        footerReset: `inline-flex items-center h-8 px-3 text-sm rounded-md cursor-pointer shadow-xs
+                border border-border-default bg-surface-control text-text-primary
+                hover:bg-surface-raised hover:border-border-strong active:bg-surface-sunken
+                transition-[background-color,border-color,color] ease-ui duration-[var(--tera-duration-fast)]`,
+        footerApply: `inline-flex items-center h-8 px-4 text-sm rounded-md cursor-pointer
+                bg-primary-600 text-white border border-primary-600
+                hover:bg-primary-500 hover:border-primary-500
+                disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none
+                transition-[background-color,border-color,opacity] ease-ui duration-[var(--tera-duration-fast)]`,
+        // ── Mobile sheet chrome ───────────────────────────────────────────
+        dialogHeader: 'flex items-center justify-between px-4 py-3 border-b border-border-default shrink-0',
+        dialogTitle: 'text-sm font-semibold text-text-primary',
+        pillBar: 'flex gap-1.5 px-3 py-2.5 overflow-x-auto border-b border-border-default shrink-0',
+    },
+    variants: {
+        // Toggles the active highlight on a quick-select sidebar entry.
+        presetActive: {
+            true: { presetItem: 'bg-interactive/10 text-interactive font-medium' },
+            false: { presetItem: 'text-text-primary hover:bg-surface-hover' },
+        },
+        // Toggles the active highlight on a mobile quick-select pill.
+        pillActive: {
+            true: { presetPill: 'bg-interactive/10 text-interactive border-interactive font-medium' },
+            false: { presetPill: 'border-border-default text-text-secondary hover:border-interactive hover:text-interactive' },
+        },
+        // Disabled state on the trigger row.
+        disabled: {
+            true: { trigger: 'opacity-50 pointer-events-none' },
+        },
+    },
+});