@sewadah/selaras 0.1.1

package/dist/runtime/theme/date-picker.js

@@ -0,0 +1,75 @@
+import { tv } from "tailwind-variants";
+export const datePickerTheme = tv({
+  slots: {
+    root: "relative inline-block",
+    // Same ring/bg/radius/hover/focus-within language as Input's own `base`
+    // (theme/input.ts) - this is an Input-look box wrapping real interactive
+    // children (segments + trigger button) rather than a single <input>, so
+    // the focus ring keys off :focus-within instead of :focus.
+    // not-focus-within: on the hover ring - see input-number.ts's own root
+    // slot for why (same fix, same reasoning: hovering while focused is
+    // unavoidable here, and would otherwise let the plain gray hover ring
+    // beat the primary focus-within ring).
+    field: "inline-flex w-full items-center gap-1 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] ring-1 ring-inset ring-[var(--ui-border)] transition-[color,background-color,box-shadow] not-focus-within:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus-within:ring-2 focus-within:ring-[var(--ui-primary)] has-[[data-disabled]]:opacity-50 has-[[data-disabled]]:pointer-events-none",
+    // rounded-sm + tabular-nums keeps digit width stable as a segment's
+    // value changes; the segment itself is the contenteditable element
+    // Reka renders, so focus state is real :focus, not a data-attribute.
+    segment: "rounded-[var(--ui-radius-sm)] px-0.5 text-[var(--ui-text)] tabular-nums outline-none focus:bg-[var(--ui-primary)]/15 data-[reka-date-field-segment=literal]:px-0 data-[reka-date-field-segment=literal]:text-[var(--ui-text-muted)]",
+    // Between the two segment groups in range mode - a plain en dash, not an
+    // arrow glyph, so there's nothing directional to mirror under RTL.
+    separator: "px-0.5 text-[var(--ui-text-muted)]",
+    // Copied from theme/dropdown.ts's `content` - the more complete of this
+    // library's two floating-panel precedents (directional slide-in, not
+    // just fade/zoom).
+    content: "z-[var(--ui-z-dropdown)] rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-3 shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+    // The `mobileModal` path's own content wrapper - none of `content`'s
+    // own popover chrome (ring/shadow/rounded/animate-in/slide-in, all
+    // tied to a data-[side=] this never gets since it isn't Floating-UI
+    // positioned) applies here, since Modal's own card already provides
+    // that surface. `p-3` alone carries over - the calendar grid still
+    // wants the same breathing room it gets in the popover.
+    mobileContent: "p-3",
+    header: "mb-2 flex items-center justify-between gap-2",
+    heading: "text-sm font-medium text-[var(--ui-text)]",
+    // Wraps one <table> per visible month (numberOfMonths>1, e.g. range
+    // mode's default of 2) - without it, multiple month tables just stack
+    // vertically (block-level default), not side by side.
+    grids: "flex flex-col gap-4 sm:flex-row",
+    grid: "w-full border-collapse",
+    gridHead: "",
+    headCell: "size-8 text-xs font-medium text-[var(--ui-text-muted)]",
+    // The <td> wrapper - just spacing, not the day's own look (that's the
+    // nested Button inside it, styled directly in DatePicker.vue via a
+    // plain :ui override string, same as Pagination's page buttons - no
+    // separate theme slot for it, since Button already owns variant/size).
+    cell: "p-0.5 text-center",
+    // Month/year drill-down grids (view mode) - a fixed 3-column layout for
+    // both the 12-month and 12-year grids, reusing the same Button
+    // composition pattern as day cells.
+    viewGrid: "grid grid-cols-3 gap-1",
+    // Hour/minute granularity only - sits below the day grid, separated by
+    // a divider so it doesn't read as part of the grid itself.
+    timeSection: "mt-3 flex items-center justify-center gap-1.5 border-t border-[var(--ui-border)] pt-3",
+    arrow: "fill-[var(--ui-bg)] stroke-[var(--ui-border)] stroke-1"
+  },
+  variants: {
+    size: {
+      sm: { field: "h-8 px-2.5 text-sm" },
+      md: { field: "h-10 px-3 text-sm" },
+      lg: { field: "h-11 px-3.5 text-base" }
+    },
+    invalid: {
+      true: { field: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)]" }
+    },
+    // Range mode's day cells butt up against each other with no horizontal
+    // gap, so a highlighted run of days reads as one continuous connected
+    // bar instead of separate dashes - single-date mode keeps its own
+    // centered p-0.5 spacing untouched.
+    range: {
+      true: { cell: "p-0 py-0.5" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

package/dist/runtime/theme/drawer.d.ts

@@ -0,0 +1,95 @@
+export declare const drawerTheme: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    header: string;
+    title: string;
+    description: string;
+    close: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    side: {
+        top: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    header: string;
+    title: string;
+    description: string;
+    close: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    side: {
+        top: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    header: string;
+    title: string;
+    description: string;
+    close: string;
+    body: string;
+    footer: string;
+}>>;
+export type DrawerThemeSlots = keyof (typeof drawerTheme)['slots'];

package/dist/runtime/theme/drawer.js

@@ -0,0 +1,57 @@
+import { tv } from "tailwind-variants";
+export const drawerTheme = tv({
+  slots: {
+    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50",
+    content: "fixed z-[var(--ui-z-modal)] flex flex-col bg-[var(--ui-bg)] shadow-[var(--ui-shadow-lg)] focus:outline-none",
+    // A small rounded grip bar - purely visual, signals "draggable" the
+    // same way a real bottom sheet's handle does. Centered via the
+    // header's own flex row would fight the header's title/close layout,
+    // so it gets its own row above everything else instead.
+    handle: "mx-auto my-2 h-1.5 w-12 shrink-0 rounded-full bg-[var(--ui-border)]",
+    header: "flex items-start justify-between gap-4 p-4 sm:px-6",
+    title: "text-base font-semibold text-[var(--ui-text)]",
+    description: "mt-1 text-sm text-[var(--ui-text-muted)]",
+    close: "shrink-0 rounded-full",
+    body: "flex-1 overflow-y-auto p-4 sm:px-6",
+    footer: "flex items-center justify-end gap-2 p-4 sm:px-6"
+  },
+  variants: {
+    // Same reasoning as slideover.ts's own comment: no explicit h-full/
+    // w-full here for any side - inset-x-*/inset-y-* below supply both
+    // edges and let the browser derive the size implicitly.
+    //
+    // Unlike Slideover, every side always gets a rounded corner on its
+    // own inner edge (not conditional on a prop) - a drawer's own visual
+    // identity, distinct from Slideover's flush-by-default/optional-
+    // floating-inset treatment.
+    side: {
+      top: { content: "rounded-b-[var(--ui-radius-lg)]" },
+      bottom: { content: "rounded-t-[var(--ui-radius-lg)]" },
+      left: { content: "max-w-md rounded-e-[var(--ui-radius-lg)]" },
+      right: { content: "max-w-md rounded-s-[var(--ui-radius-lg)]" }
+    },
+    // See slideover.ts for why this lives entirely in the variant (and
+    // compoundVariants below), not the base slot strings - tailwind-merge
+    // doesn't recognize animate-in/animate-none as a conflicting pair.
+    transition: {
+      true: { overlay: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0" },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    { side: "top", class: { content: "inset-x-0 top-0 max-h-full" } },
+    { side: "bottom", class: { content: "inset-x-0 bottom-0 max-h-full" } },
+    { side: "left", class: { content: "inset-y-0 left-0 w-full" } },
+    { side: "right", class: { content: "inset-y-0 right-0 w-full" } },
+    { side: "top", transition: true, class: { content: "data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top-full" } },
+    { side: "bottom", transition: true, class: { content: "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-full data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-full" } },
+    { side: "left", transition: true, class: { content: "data-[state=open]:animate-in data-[state=open]:slide-in-from-left-full data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left-full" } },
+    { side: "right", transition: true, class: { content: "data-[state=open]:animate-in data-[state=open]:slide-in-from-right-full data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-full" } }
+  ],
+  defaultVariants: {
+    // Bottom sheets are the classic drawer use case - unlike Slideover's
+    // own 'right' default.
+    side: "bottom",
+    transition: true
+  }
+});

package/dist/runtime/theme/dropdown.d.ts

@@ -0,0 +1,41 @@
+export declare const dropdownTheme: import("tailwind-variants").TVReturnType<{
+    destructive: {
+        true: {
+            item: string;
+            icon: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    separator: string;
+    arrow: string;
+}, undefined, {
+    destructive: {
+        true: {
+            item: string;
+            icon: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    separator: string;
+    arrow: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    destructive: {
+        true: {
+            item: string;
+            icon: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    separator: string;
+    arrow: string;
+}>>;
+export type DropdownThemeSlots = keyof (typeof dropdownTheme)['slots'];

package/dist/runtime/theme/dropdown.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+export const dropdownTheme = tv({
+  slots: {
+    content: "z-[var(--ui-z-dropdown)] min-w-40 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-1 shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+    item: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-1.5 text-sm text-[var(--ui-text)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    icon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
+    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    arrow: "fill-[var(--ui-bg)] stroke-[var(--ui-border)] stroke-1"
+  },
+  variants: {
+    // For a delete/remove-style action - deliberately just this one flag
+    // rather than the full 7-color palette Badge/Chip expose, since a menu
+    // item realistically only ever needs this one special case.
+    destructive: {
+      true: {
+        item: "text-[var(--ui-danger)] data-[highlighted]:bg-[var(--ui-danger-soft)]",
+        icon: "text-[var(--ui-danger)]"
+      }
+    }
+  }
+});

package/dist/runtime/theme/file-tree.d.ts

@@ -0,0 +1,56 @@
+export declare const fileTreeTheme: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            row: string;
+        };
+    };
+    isNested: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    row: string;
+    icon: string;
+    label: string;
+}, undefined, {
+    selected: {
+        true: {
+            row: string;
+        };
+    };
+    isNested: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    row: string;
+    icon: string;
+    label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    selected: {
+        true: {
+            row: string;
+        };
+    };
+    isNested: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    row: string;
+    icon: string;
+    label: string;
+}>>;
+export type FileTreeThemeSlots = keyof (typeof fileTreeTheme)['slots'];

package/dist/runtime/theme/file-tree.js

@@ -0,0 +1,33 @@
+import { tv } from "tailwind-variants";
+export const fileTreeTheme = tv({
+  slots: {
+    // The outer box - only the top-level call renders this (see
+    // FileTree.vue's own `isNested`); a recursive call for a directory's
+    // children renders `list` directly instead, no extra wrapping element.
+    root: "flex flex-col gap-0.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] bg-[var(--ui-bg)] p-2 font-mono text-sm",
+    // Real indentation, not a border/padding trick - each recursive level
+    // renders its own nested <FileTree>, so depth accumulates naturally
+    // via this same left padding stacking once per level. `ps-4` also
+    // reserves the gutter a nested row's own tree-connector rail (see
+    // the `isNested` variant below) reaches back into.
+    list: "flex flex-col gap-0.5 ps-4 font-mono text-sm ms-3",
+    item: "flex flex-col",
+    row: "flex w-full items-center gap-1.5 rounded-[var(--ui-radius-sm)] px-1.5 py-1 text-start text-[var(--ui-text-muted)] transition-colors hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)]",
+    icon: "size-4 shrink-0",
+    label: "truncate"
+  },
+  variants: {
+    selected: {
+      true: { row: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)] hover:bg-[var(--ui-primary-soft)] hover:text-[var(--ui-primary)]" }
+    },
+    // FileTree.vue recurses into itself for every directory's own
+    // children, reusing this exact same `item` slot at every depth -
+    // mirrors ContentNavigation's own `isNested` variant exactly (same
+    // reasoning: a root-level entry has no parent trunk to its left to
+    // branch off of, so the tree-connector rail - see theme.css's own
+    // `.selaras-nav-elbow` comment - only applies once nested).
+    isNested: {
+      true: { item: "selaras-nav-elbow selaras-nav-elbow--file-tree" }
+    }
+  }
+});

package/dist/runtime/theme/file-upload.d.ts

@@ -0,0 +1,233 @@
+export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+        md: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+        lg: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+    };
+    color: {
+        primary: {
+            icon: string;
+            dropzone: string;
+        };
+        neutral: {
+            icon: string;
+            dropzone: string;
+        };
+        secondary: {
+            icon: string;
+            dropzone: string;
+        };
+        success: {
+            icon: string;
+            dropzone: string;
+        };
+        danger: {
+            icon: string;
+            dropzone: string;
+        };
+        info: {
+            icon: string;
+            dropzone: string;
+        };
+        warning: {
+            icon: string;
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    dropzone: string;
+    icon: string;
+    label: string;
+    description: string;
+    input: string;
+    fileList: string;
+    file: string;
+    fileThumbnail: string;
+    fileIcon: string;
+    fileInfo: string;
+    fileName: string;
+    fileSize: string;
+    fileRemove: string;
+}, undefined, {
+    size: {
+        sm: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+        md: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+        lg: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+    };
+    color: {
+        primary: {
+            icon: string;
+            dropzone: string;
+        };
+        neutral: {
+            icon: string;
+            dropzone: string;
+        };
+        secondary: {
+            icon: string;
+            dropzone: string;
+        };
+        success: {
+            icon: string;
+            dropzone: string;
+        };
+        danger: {
+            icon: string;
+            dropzone: string;
+        };
+        info: {
+            icon: string;
+            dropzone: string;
+        };
+        warning: {
+            icon: string;
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    dropzone: string;
+    icon: string;
+    label: string;
+    description: string;
+    input: string;
+    fileList: string;
+    file: string;
+    fileThumbnail: string;
+    fileIcon: string;
+    fileInfo: string;
+    fileName: string;
+    fileSize: string;
+    fileRemove: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+        md: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+        lg: {
+            dropzone: string;
+            icon: string;
+            fileThumbnail: string;
+            fileIcon: string;
+            fileName: string;
+            fileSize: string;
+        };
+    };
+    color: {
+        primary: {
+            icon: string;
+            dropzone: string;
+        };
+        neutral: {
+            icon: string;
+            dropzone: string;
+        };
+        secondary: {
+            icon: string;
+            dropzone: string;
+        };
+        success: {
+            icon: string;
+            dropzone: string;
+        };
+        danger: {
+            icon: string;
+            dropzone: string;
+        };
+        info: {
+            icon: string;
+            dropzone: string;
+        };
+        warning: {
+            icon: string;
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    dropzone: string;
+    icon: string;
+    label: string;
+    description: string;
+    input: string;
+    fileList: string;
+    file: string;
+    fileThumbnail: string;
+    fileIcon: string;
+    fileInfo: string;
+    fileName: string;
+    fileSize: string;
+    fileRemove: string;
+}>>;
+export type FileUploadThemeSlots = keyof (typeof fileUploadTheme)['slots'];

package/dist/runtime/theme/file-upload.js

@@ -0,0 +1,63 @@
+import { tv } from "tailwind-variants";
+export const fileUploadTheme = tv({
+  slots: {
+    root: "flex w-full flex-col gap-3",
+    // The real drop target and click-to-browse trigger - a <button>,
+    // not a <div>, so keyboard focus/activation (Enter/Space) comes free
+    // instead of needing hand-rolled keydown handling. dragging (a
+    // component-set data attribute, not a native one) recolors it
+    // toward `color` - see the color variant below.
+    dropzone: "flex w-full flex-col items-center justify-center gap-2 rounded-[var(--ui-radius-md)] border-2 border-dashed border-[var(--ui-border)] p-6 text-center transition-colors hover:border-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus-visible:outline-none focus-visible:ring-2 disabled:opacity-50 disabled:pointer-events-none",
+    icon: "text-[var(--ui-text-muted)]",
+    label: "font-medium text-[var(--ui-text)]",
+    description: "text-[var(--ui-text-muted)]",
+    // Purely an implementation detail - visually hidden and (via
+    // tabindex="-1" in FileUpload.vue) not independently tab-reachable
+    // either.
+    // The dropzone <button> wrapping it is the real focusable, Enter/
+    // Space-activatable control (free native semantics); this input just
+    // gets programmatically .click()'d to open the OS file dialog.
+    input: "sr-only",
+    fileList: "flex w-full flex-col gap-2",
+    file: "flex items-center gap-3 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] p-2",
+    fileThumbnail: "size-8 shrink-0 rounded-[var(--ui-radius-sm)] object-cover",
+    fileIcon: "size-8 shrink-0 text-[var(--ui-text-muted)]",
+    fileInfo: "flex min-w-0 flex-1 flex-col",
+    fileName: "truncate text-[var(--ui-text)]",
+    fileSize: "text-[var(--ui-text-muted)]",
+    fileRemove: "shrink-0"
+  },
+  variants: {
+    size: {
+      sm: { dropzone: "p-4 text-xs", icon: "size-6", fileThumbnail: "size-7", fileIcon: "size-7", fileName: "text-xs", fileSize: "text-xs" },
+      md: { dropzone: "p-6 text-sm", icon: "size-8", fileThumbnail: "size-8", fileIcon: "size-8", fileName: "text-sm", fileSize: "text-xs" },
+      lg: { dropzone: "p-8 text-base", icon: "size-10", fileThumbnail: "size-10", fileIcon: "size-10", fileName: "text-base", fileSize: "text-sm" }
+    },
+    // Unlike Input/PinInput's own `color` (focus-ring only, resting
+    // stays neutral), FileUpload also tints the icon at rest - a
+    // dropzone has no "typing" affordance to make a focus-only color
+    // legible in practice, and a Color example that only ever shows 7
+    // identical-looking boxes until you interact with each one isn't
+    // actually demonstrating anything - confirmed as a real problem via
+    // direct user feedback, not just a style preference.
+    color: {
+      primary: { icon: "text-[var(--ui-primary)]", dropzone: "focus-visible:ring-[var(--ui-primary)] data-[dragging]:border-[var(--ui-primary)] data-[dragging]:bg-[var(--ui-primary-soft)]" },
+      neutral: { icon: "text-[var(--ui-bg-inverted)]", dropzone: "focus-visible:ring-[var(--ui-bg-inverted)] data-[dragging]:border-[var(--ui-bg-inverted)] data-[dragging]:bg-[var(--ui-bg-elevated)]" },
+      secondary: { icon: "text-[var(--ui-secondary)]", dropzone: "focus-visible:ring-[var(--ui-secondary)] data-[dragging]:border-[var(--ui-secondary)] data-[dragging]:bg-[var(--ui-secondary-soft)]" },
+      success: { icon: "text-[var(--ui-success)]", dropzone: "focus-visible:ring-[var(--ui-success)] data-[dragging]:border-[var(--ui-success)] data-[dragging]:bg-[var(--ui-success-soft)]" },
+      danger: { icon: "text-[var(--ui-danger)]", dropzone: "focus-visible:ring-[var(--ui-danger)] data-[dragging]:border-[var(--ui-danger)] data-[dragging]:bg-[var(--ui-danger-soft)]" },
+      info: { icon: "text-[var(--ui-info)]", dropzone: "focus-visible:ring-[var(--ui-info)] data-[dragging]:border-[var(--ui-info)] data-[dragging]:bg-[var(--ui-info-soft)]" },
+      warning: { icon: "text-[var(--ui-warning)]", dropzone: "focus-visible:ring-[var(--ui-warning)] data-[dragging]:border-[var(--ui-warning)] data-[dragging]:bg-[var(--ui-warning-soft)]" }
+    },
+    // Declared last (after color) so tailwind-merge lets its own border
+    // override win over color's - matches Input's own documented
+    // reasoning for this order.
+    invalid: {
+      true: { dropzone: "border-[var(--ui-danger)] focus-visible:ring-[var(--ui-danger)]" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});