@sewadah/selaras 0.1.1

package/dist/runtime/theme/stepper.js

@@ -0,0 +1,106 @@
+import { tv } from "tailwind-variants";
+export const stepperTheme = tv({
+  slots: {
+    root: "flex w-full items-start",
+    // flex-1 (not sized to its own content) - items sit edge-to-edge with
+    // no gap between them so the separator living inside the *current*
+    // item's own connector (see below - Reka's StepperSeparator injects
+    // that item's own context, so it can't be a root-level sibling) can
+    // visually reach all the way to the next item's indicator.
+    item: "flex flex-1 flex-col items-center gap-2 text-center",
+    // Anchors the indicator at the item's own true center (`justify-center`,
+    // horizontal mode) - `labels` below centers within this same `item`
+    // column, so both need the *same* horizontal anchor to line up. Also
+    // the positioning context for the separator, which is taken out of
+    // flow entirely (see its own comment) rather than laid out as a flex
+    // sibling here, precisely so it can't push the indicator off-center.
+    connector: "relative flex items-center",
+    trigger: "shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] disabled:opacity-50 disabled:pointer-events-none",
+    indicator: "relative z-10 flex shrink-0 items-center justify-center rounded-full bg-[var(--ui-bg)] font-medium text-[var(--ui-text-muted)] ring-2 ring-[var(--ui-border)] transition-colors",
+    icon: "shrink-0",
+    labels: "flex flex-col",
+    title: "text-sm font-medium text-[var(--ui-text)]",
+    description: "text-xs text-[var(--ui-text-muted)]",
+    // bg-border by default, switching to the color's own solid shade via
+    // data-[state=completed] (set by Reka from the *preceding* item's own
+    // state) - that's what makes the line "fill in" as steps complete.
+    separator: "absolute bg-[var(--ui-border)] transition-colors"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-row",
+        connector: "w-full justify-center",
+        // Every item is an equal-width flex-1 column, so a line starting
+        // at *this* item's own center (start-1/2, matching connector's own
+        // justify-center anchor above) and spanning one more full item-
+        // width (w-full, relative to this same connector) lands exactly
+        // on the *next* item's center - reaching a correctly-centered
+        // indicator there regardless of either item's own label width.
+        // A logical `start` (not physical `left`) so it still reaches
+        // forward - not backward - once flex-row's own item order flips
+        // under `dir="rtl"`.
+        separator: "start-1/2 top-1/2 h-0.5 w-full -translate-y-1/2"
+      },
+      vertical: {
+        // No items-start here (default align-items: stretch) - connector
+        // and labels are the item's only two children, and connector
+        // needs to stretch to the item's full row height for the
+        // separator below to have real height to grow into. labels opts
+        // back out of that stretch itself (self-start below).
+        root: "flex-col",
+        item: "w-full flex-row gap-3 text-start",
+        connector: "w-auto flex-col",
+        // Extra bottom padding gives the connecting line a decent
+        // minimum length even for a single short line of title text.
+        labels: "shrink-0 self-start pb-6",
+        // Items can differ in height (description length varies), so
+        // horizontal's own "reaches exactly the next center" trick
+        // doesn't transfer - a real in-flow flex-1 line stretching to
+        // fill whatever height the (stretched) connector column has is
+        // the more robust fit here.
+        separator: "relative w-0.5 min-h-6 flex-1"
+      }
+    },
+    size: {
+      sm: { indicator: "size-6 text-xs", title: "text-xs", description: "text-xs" },
+      md: { indicator: "size-8 text-sm", title: "text-sm", description: "text-xs" },
+      lg: { indicator: "size-10 text-base", title: "text-base", description: "text-sm" }
+    },
+    color: {
+      primary: {
+        indicator: "data-[state=active]:ring-[var(--ui-primary)] data-[state=active]:text-[var(--ui-primary)] data-[state=completed]:bg-[var(--ui-primary)] data-[state=completed]:ring-[var(--ui-primary)] data-[state=completed]:text-[var(--ui-primary-foreground)]",
+        separator: "data-[state=completed]:bg-[var(--ui-primary)]"
+      },
+      neutral: {
+        indicator: "data-[state=active]:ring-[var(--ui-bg-inverted)] data-[state=active]:text-[var(--ui-text)] data-[state=completed]:bg-[var(--ui-bg-inverted)] data-[state=completed]:ring-[var(--ui-bg-inverted)] data-[state=completed]:text-[var(--ui-text-inverted)]",
+        separator: "data-[state=completed]:bg-[var(--ui-bg-inverted)]"
+      },
+      secondary: {
+        indicator: "data-[state=active]:ring-[var(--ui-secondary)] data-[state=active]:text-[var(--ui-secondary)] data-[state=completed]:bg-[var(--ui-secondary)] data-[state=completed]:ring-[var(--ui-secondary)] data-[state=completed]:text-[var(--ui-secondary-foreground)]",
+        separator: "data-[state=completed]:bg-[var(--ui-secondary)]"
+      },
+      success: {
+        indicator: "data-[state=active]:ring-[var(--ui-success)] data-[state=active]:text-[var(--ui-success)] data-[state=completed]:bg-[var(--ui-success)] data-[state=completed]:ring-[var(--ui-success)] data-[state=completed]:text-[var(--ui-success-foreground)]",
+        separator: "data-[state=completed]:bg-[var(--ui-success)]"
+      },
+      danger: {
+        indicator: "data-[state=active]:ring-[var(--ui-danger)] data-[state=active]:text-[var(--ui-danger)] data-[state=completed]:bg-[var(--ui-danger)] data-[state=completed]:ring-[var(--ui-danger)] data-[state=completed]:text-[var(--ui-danger-foreground)]",
+        separator: "data-[state=completed]:bg-[var(--ui-danger)]"
+      },
+      info: {
+        indicator: "data-[state=active]:ring-[var(--ui-info)] data-[state=active]:text-[var(--ui-info)] data-[state=completed]:bg-[var(--ui-info)] data-[state=completed]:ring-[var(--ui-info)] data-[state=completed]:text-[var(--ui-info-foreground)]",
+        separator: "data-[state=completed]:bg-[var(--ui-info)]"
+      },
+      warning: {
+        indicator: "data-[state=active]:ring-[var(--ui-warning)] data-[state=active]:text-[var(--ui-warning)] data-[state=completed]:bg-[var(--ui-warning)] data-[state=completed]:ring-[var(--ui-warning)] data-[state=completed]:text-[var(--ui-warning-foreground)]",
+        separator: "data-[state=completed]:bg-[var(--ui-warning)]"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "md",
+    color: "primary"
+  }
+});

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

@@ -0,0 +1,206 @@
+export declare const switchTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            track: string;
+            thumb: string;
+        };
+        neutral: {
+            track: string;
+            thumb: string;
+        };
+        secondary: {
+            track: string;
+            thumb: string;
+        };
+        success: {
+            track: string;
+            thumb: string;
+        };
+        danger: {
+            track: string;
+            thumb: string;
+        };
+        info: {
+            track: string;
+            thumb: string;
+        };
+        warning: {
+            track: string;
+            thumb: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+    };
+    invalid: {
+        true: {
+            track: string;
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    thumb: string;
+    icon: string;
+    label: string;
+    description: string;
+    labelGroup: string;
+}, undefined, {
+    color: {
+        primary: {
+            track: string;
+            thumb: string;
+        };
+        neutral: {
+            track: string;
+            thumb: string;
+        };
+        secondary: {
+            track: string;
+            thumb: string;
+        };
+        success: {
+            track: string;
+            thumb: string;
+        };
+        danger: {
+            track: string;
+            thumb: string;
+        };
+        info: {
+            track: string;
+            thumb: string;
+        };
+        warning: {
+            track: string;
+            thumb: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+    };
+    invalid: {
+        true: {
+            track: string;
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    thumb: string;
+    icon: string;
+    label: string;
+    description: string;
+    labelGroup: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: {
+            track: string;
+            thumb: string;
+        };
+        neutral: {
+            track: string;
+            thumb: string;
+        };
+        secondary: {
+            track: string;
+            thumb: string;
+        };
+        success: {
+            track: string;
+            thumb: string;
+        };
+        danger: {
+            track: string;
+            thumb: string;
+        };
+        info: {
+            track: string;
+            thumb: string;
+        };
+        warning: {
+            track: string;
+            thumb: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            icon: string;
+            label: string;
+            description: string;
+        };
+    };
+    invalid: {
+        true: {
+            track: string;
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    thumb: string;
+    icon: string;
+    label: string;
+    description: string;
+    labelGroup: string;
+}>>;
+export type SwitchThemeSlots = keyof (typeof switchTheme)['slots'];

package/dist/runtime/theme/switch.js

@@ -0,0 +1,84 @@
+import { tv } from "tailwind-variants";
+export const switchTheme = tv({
+  slots: {
+    root: "inline-flex items-center gap-2 cursor-pointer has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50",
+    // `group` here, not `isolate` - the track (not the thumb) is the real
+    // interactive element (a real <button role="switch">), so the thumb's
+    // own hover/focus-visible halo has to react to the TRACK's state via
+    // Tailwind's group-*: variants rather than its own :hover/
+    // :focus-visible, which would never fire on a plain decorative child.
+    // outline-none replaces the old focus-visible:outline box, same as
+    // RadioGroup/Checkbox, now that the halo is the focus indicator. Color
+    // (the checked-state fill) comes entirely from the `color` variant
+    // below now, not hardcoded here - same reasoning as every other
+    // themed component that exposes `color`.
+    track: "group relative inline-flex h-4.5 w-8 shrink-0 items-center rounded-[var(--ui-radius-full)] bg-[var(--ui-border)] transition-colors focus-visible:outline-none",
+    // Track/thumb sized down from the original 40x24/20px to 32x18/16px - a
+    // 1px inset on each side at rest (translate-x-px, thumb centered
+    // vertically via the track's own items-center), traveling to 15px when
+    // checked (32 track - 16 thumb - 1px inset = 15). Same halo mechanism
+    // as RadioGroup/Checkbox (see their theme files for the full
+    // derivation), rescaled to this thumb's own 16px size (32px halo, -8px
+    // inset each side, was -10px at the old 20px size). `relative isolate`
+    // still needed here even though hover/focus come from the track
+    // (group-hover/group-focus-visible) - the -z-10 pseudo itself still
+    // needs its own stacking context to stay scoped to the thumb, not
+    // escape past it.
+    thumb: "relative isolate flex items-center justify-center size-4 translate-x-px rounded-full bg-white shadow-[var(--ui-shadow-sm)] transition-transform before:absolute before:-inset-[8px] before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--ui-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] group-hover:before:[transform:scale(1)] group-focus-visible:before:[transform:scale(1)] data-[state=checked]:translate-x-[15px]",
+    // The checked/unchecked/loading glyph rendered inside the thumb -
+    // muted gray by default (the thumb itself stays white regardless of
+    // `color`, so an icon needs its own contrast rather than inheriting
+    // currentColor from a colored parent).
+    icon: "size-2.5 text-[var(--ui-text-muted)]",
+    label: "select-none text-sm text-[var(--ui-text)]",
+    description: "block select-none text-xs text-[var(--ui-text-muted)]",
+    // Only rendered when there's a description (wrapping the label and
+    // description together so they stack under one another) - same font-
+    // baseline correction as RadioGroup's own labelGroup slot (see its
+    // theme file for the full derivation): the label text visually sits a
+    // bit lower than its own line box's true center, so this nudges the
+    // whole block up slightly to compensate.
+    labelGroup: "-mt-[2.5px]"
+  },
+  variants: {
+    // Only affects the checked state - unchecked always stays the same
+    // neutral border color regardless of `color`, matching how this
+    // library's other "off" states (e.g. Chip's unselected variant) never
+    // take on the color prop either.
+    color: {
+      primary: { track: "data-[state=checked]:bg-[var(--ui-primary)]", thumb: "data-[state=checked]:before:bg-[var(--ui-primary)]" },
+      neutral: { track: "data-[state=checked]:bg-[var(--ui-bg-inverted)]", thumb: "data-[state=checked]:before:bg-[var(--ui-bg-inverted)]" },
+      secondary: { track: "data-[state=checked]:bg-[var(--ui-secondary)]", thumb: "data-[state=checked]:before:bg-[var(--ui-secondary)]" },
+      success: { track: "data-[state=checked]:bg-[var(--ui-success)]", thumb: "data-[state=checked]:before:bg-[var(--ui-success)]" },
+      danger: { track: "data-[state=checked]:bg-[var(--ui-danger)]", thumb: "data-[state=checked]:before:bg-[var(--ui-danger)]" },
+      info: { track: "data-[state=checked]:bg-[var(--ui-info)]", thumb: "data-[state=checked]:before:bg-[var(--ui-info)]" },
+      warning: { track: "data-[state=checked]:bg-[var(--ui-warning)]", thumb: "data-[state=checked]:before:bg-[var(--ui-warning)]" }
+    },
+    // Same +4px-per-step scale RadioGroup's own `size` variant uses (its
+    // item goes size-3.5/4.5/5.5 across sm/md/lg) - track/thumb/halo/travel
+    // distance all re-derived from that same 1px-inset math at each size
+    // (see the `thumb` slot's own comment for the base md derivation).
+    size: {
+      sm: { track: "h-3.5 w-6", thumb: "size-3 data-[state=checked]:translate-x-[11px] before:-inset-[6px]", icon: "size-2", label: "text-xs", description: "text-xs" },
+      md: { track: "h-4.5 w-8", thumb: "size-4 data-[state=checked]:translate-x-[15px] before:-inset-[8px]", icon: "size-2.5", label: "text-sm", description: "text-xs" },
+      lg: { track: "h-5.5 w-10", thumb: "size-5 data-[state=checked]:translate-x-[19px] before:-inset-[10px]", icon: "size-3", label: "text-base", description: "text-sm" }
+    },
+    // Declared last (after color) so tailwind-merge lets its own
+    // data-[state=checked] override win over color's - invalid should
+    // always show danger regardless of what color was also requested, on
+    // the checked track/thumb too, not just via the ring below (which
+    // alone would leave an invalid-but-checked switch showing a red ring
+    // around an otherwise normally-colored track).
+    invalid: {
+      // ring rather than an offset outline - the track has no border of
+      // its own to recolor (unlike Radio/Checkbox's ring-inset), but an
+      // offset outline left a visible gap between it and the pill, unlike
+      // every other invalid state in this library, which sits flush.
+      true: { track: "ring-2 ring-[var(--ui-danger)] data-[state=checked]:bg-[var(--ui-danger)]", thumb: "data-[state=checked]:before:bg-[var(--ui-danger)]" }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});

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

@@ -0,0 +1,176 @@
+export declare const tableTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            th: string;
+            td: string;
+        };
+        md: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    gridlines: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+    };
+    striped: {
+        true: {
+            table: string;
+        };
+    };
+    scrollable: {
+        true: {
+            wrapper: string;
+            thead: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tr: string;
+    th: string;
+    thSortable: string;
+    sortIcon: string;
+    td: string;
+    tfoot: string;
+    emptyState: string;
+    filterInput: string;
+    paginationWrapper: string;
+    paginationInfo: string;
+    paginationButtons: string;
+    loadingOverlay: string;
+    loadingIcon: string;
+    expandButton: string;
+    expandChevron: string;
+    expandedRow: string;
+    expandedCell: string;
+    columnToggle: string;
+    columnTogglePanel: string;
+    columnToggleItem: string;
+}, undefined, {
+    size: {
+        sm: {
+            th: string;
+            td: string;
+        };
+        md: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    gridlines: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+    };
+    striped: {
+        true: {
+            table: string;
+        };
+    };
+    scrollable: {
+        true: {
+            wrapper: string;
+            thead: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tr: string;
+    th: string;
+    thSortable: string;
+    sortIcon: string;
+    td: string;
+    tfoot: string;
+    emptyState: string;
+    filterInput: string;
+    paginationWrapper: string;
+    paginationInfo: string;
+    paginationButtons: string;
+    loadingOverlay: string;
+    loadingIcon: string;
+    expandButton: string;
+    expandChevron: string;
+    expandedRow: string;
+    expandedCell: string;
+    columnToggle: string;
+    columnTogglePanel: string;
+    columnToggleItem: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            th: string;
+            td: string;
+        };
+        md: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    gridlines: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+    };
+    striped: {
+        true: {
+            table: string;
+        };
+    };
+    scrollable: {
+        true: {
+            wrapper: string;
+            thead: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tr: string;
+    th: string;
+    thSortable: string;
+    sortIcon: string;
+    td: string;
+    tfoot: string;
+    emptyState: string;
+    filterInput: string;
+    paginationWrapper: string;
+    paginationInfo: string;
+    paginationButtons: string;
+    loadingOverlay: string;
+    loadingIcon: string;
+    expandButton: string;
+    expandChevron: string;
+    expandedRow: string;
+    expandedCell: string;
+    columnToggle: string;
+    columnTogglePanel: string;
+    columnToggleItem: string;
+}>>;
+export type TableThemeSlots = keyof (typeof tableTheme)['slots'];

package/dist/runtime/theme/table.js

@@ -0,0 +1,59 @@
+import { tv } from "tailwind-variants";
+export const tableTheme = tv({
+  slots: {
+    root: "relative w-full",
+    wrapper: "overflow-x-auto rounded-[var(--ui-radius-md)] ring-1 ring-[var(--ui-border)]",
+    table: "w-full border-collapse",
+    thead: "bg-[var(--ui-bg-elevated)]",
+    tr: "border-b border-[var(--ui-border)] last:border-b-0",
+    th: "text-start font-medium text-[var(--ui-text-muted)] whitespace-nowrap data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--ui-bg-elevated)]",
+    thSortable: "cursor-pointer select-none hover:text-[var(--ui-text)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-primary)]",
+    sortIcon: "ms-1 inline-block size-3.5 align-text-bottom text-[var(--ui-text-muted)]",
+    td: "text-[var(--ui-text)] data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--ui-bg)]",
+    tfoot: "bg-[var(--ui-bg-elevated)] font-medium",
+    emptyState: "px-3 py-8 text-center text-sm text-[var(--ui-text-muted)]",
+    filterInput: "mt-1",
+    paginationWrapper: "flex items-center justify-between gap-3 px-3 py-2",
+    paginationInfo: "text-sm text-[var(--ui-text-muted)]",
+    paginationButtons: "flex items-center gap-2",
+    loadingOverlay: "absolute inset-0 z-10 flex items-center justify-center bg-[var(--ui-bg)]/60",
+    loadingIcon: "size-6 animate-spin text-[var(--ui-primary)]",
+    expandButton: "flex size-5 shrink-0 items-center justify-center text-[var(--ui-text-muted)]",
+    // Points toward the reading-start direction while collapsed - 0deg
+    // (right) under LTR, 180deg (left) under RTL - then always rotates to
+    // an absolute 90deg once expanded, which already points down under
+    // either direction, so that state needs no separate RTL variant of
+    // its own. The rtl:data-[expanded] compound pins that absolute value
+    // for the one case where both conditions hold at once, rather than
+    // leaving the outcome to rely on Tailwind's variant cascade order.
+    expandChevron: "size-4 transition-transform rtl:rotate-180 data-[expanded]:rotate-90 rtl:data-[expanded]:rotate-90",
+    expandedRow: "border-b border-[var(--ui-border)] last:border-b-0",
+    expandedCell: "bg-[var(--ui-bg-elevated)] px-3 py-3 text-[var(--ui-text)]",
+    columnToggle: "relative",
+    columnTogglePanel: "absolute end-0 z-20 mt-1 flex min-w-40 flex-col gap-1 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-2 shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)]",
+    columnToggleItem: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-1.5 text-sm text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)]"
+  },
+  variants: {
+    size: {
+      sm: { th: "px-2 py-1.5 text-xs", td: "px-2 py-1.5 text-xs" },
+      md: { th: "px-3 py-2 text-sm", td: "px-3 py-2 text-sm" },
+      lg: { th: "px-4 py-3 text-base", td: "px-4 py-3 text-base" }
+    },
+    gridlines: {
+      true: {
+        table: "border border-[var(--ui-border)]",
+        th: "border border-[var(--ui-border)]",
+        td: "border border-[var(--ui-border)]"
+      }
+    },
+    striped: {
+      true: { table: "[&>tbody>tr:nth-child(even)]:bg-[var(--ui-bg-elevated)]" }
+    },
+    scrollable: {
+      true: { wrapper: "overflow-y-auto", thead: "sticky top-0 z-[1]" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

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

@@ -0,0 +1,59 @@
+export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        underline: {
+            list: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            trigger: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string;
+    icon: string;
+    indicator: string;
+    content: string;
+}, undefined, {
+    variant: {
+        underline: {
+            list: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            trigger: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string;
+    icon: string;
+    indicator: string;
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        underline: {
+            list: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            trigger: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string;
+    icon: string;
+    indicator: string;
+    content: string;
+}>>;
+export type TabsThemeSlots = keyof (typeof tabsTheme)['slots'];