@sewadah/selaras 0.1.1

package/dist/runtime/theme/radio-group.js

@@ -0,0 +1,134 @@
+import { tv } from "tailwind-variants";
+export const radioGroupTheme = tv({
+  slots: {
+    root: "flex",
+    // card's has-[[data-state=checked]] targets the RadioGroupItem button
+    // rendered directly inside this label, matching the existing
+    // has-[[data-disabled]] pattern already used here for the disabled look.
+    itemWrapper: "inline-flex items-center gap-2 cursor-pointer has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50",
+    // The item itself is a hollow ring (transparent center, no fill) so
+    // that the before:* radial halo below can show through it as one
+    // continuous disc rather than being blocked by an opaque background -
+    // a soft circular "state layer" sitting behind the ring, twice the
+    // item's own diameter (an inset of half that diameter on each side,
+    // scaled per size variant below), invisible at rest (scaled to 0),
+    // growing in on hover and keyboard focus. Fill animated via transform
+    // scale rather than opacity, gray at rest and switched to the primary
+    // color by the checked-state variant below - an explicit var per
+    // state rather than currentColor, since this slot's own text color
+    // isn't otherwise tied to checked/unchecked here. Uses
+    // --ui-border-hover for the gray fill - lighter than a plain mid-gray
+    // text color would give, while still clearing the plain --ui-border
+    // token, which reads as basically invisible at any reasonable opacity
+    // since it's already very close to the page background. scale(0)/
+    // scale(1) use Tailwind's arbitrary-value [transform:] syntax, not the
+    // named scale-0/scale-100 utilities - those silently failed to
+    // generate any CSS in this project's Tailwind v4 setup even though
+    // other before: utilities on the same element worked fine; not worth
+    // chasing why, arbitrary values sidestep it reliably. -z-10 keeps it
+    // behind the ring/dot rather than covering them; keyboard focus relies
+    // on the halo alone (no separate focus-visible:outline box) since the
+    // halo itself already grows on focus-visible and a second, crisper
+    // outline on top of it read as redundant. `isolate` is load-bearing
+    // here, not decorative - without it, `relative` alone doesn't give the
+    // item its own stacking context, so the -z-10 pseudo escapes all the
+    // way up to the page's root stacking context instead of staying
+    // scoped to this element. Any ancestor between the item and <body>
+    // that has an opaque background but no stacking context of its own
+    // (true of every plain Tailwind utility div, including this library's
+    // own page layout wrapper) then paints *after* that root-level
+    // negative-z layer and fully covers it - found by comparing a real
+    // page render against an isolated one: identical computed styles,
+    // completely invisible halo on the real page, and
+    // document.elementsFromPoint() at the halo's own pixels confirmed an
+    // ancestor's background was winning the paint order despite being
+    // nested outside the button in the DOM. ring-[1.5px] rather than the
+    // plain ring-1 (1px) utility - a full 1px stroke on an 18px circle
+    // rendered visibly jagged at normal (non-zoomed) browser scale; the
+    // fractional width needs the arbitrary-value form since Tailwind's
+    // named ring scale only has integer steps.
+    item: "relative isolate flex shrink-0 items-center justify-center rounded-full ring-[1.5px] ring-inset ring-[var(--ui-border)] transition-colors before:absolute 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-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)]",
+    // force-mount (see RadioGroup.vue) keeps this in the DOM for every
+    // item regardless of checked state, so switching the selection scales
+    // the old dot out and the new one in instead of an abrupt pop -
+    // needed because this project's Presence-driven show/hide only
+    // coordinates exit animations for real @keyframes animations (it
+    // detects them via computed animation-name), not plain CSS
+    // transitions, so a transition-only version without force-mount would
+    // just vanish instantly.
+    indicator: "rounded-full [transform:scale(0)] transition-transform duration-200 data-[state=checked]:[transform:scale(1)]",
+    label: "select-none text-[var(--ui-text)]",
+    description: "block select-none text-[var(--ui-text-muted)]",
+    // Only rendered when an item has a description (wrapping the label and
+    // description together so they stack under one another). The label
+    // text visually sits a bit lower than its own line box's true center -
+    // a font/line-height rendering characteristic (Plus Jakarta Sans specifically,
+    // confirmed against a real browser rather than assumed), not a layout
+    // bug - so this nudges the whole block up slightly to compensate. Left
+    // untouched by size, since it wasn't verified per size and it's a small
+    // enough correction to not obviously need it.
+    labelGroup: "-mt-[2.5px]"
+  },
+  variants: {
+    size: {
+      sm: { item: "size-3.5 before:-inset-[7px]", indicator: "size-2", label: "text-xs", description: "text-xs" },
+      md: { item: "size-4.5 before:-inset-[9px]", indicator: "size-2.5", label: "text-sm", description: "text-xs" },
+      lg: { item: "size-5.5 before:-inset-[11px]", indicator: "size-3", label: "text-base", description: "text-sm" }
+    },
+    orientation: {
+      vertical: { root: "flex-col gap-2" },
+      horizontal: { root: "flex-row flex-wrap gap-x-6 gap-y-2" }
+    },
+    // card wraps each item in its own bordered box (a common alternative
+    // to the plain inline list, useful for pairing a description or price
+    // with the option via the label slot) - selected state comes from the
+    // same has-[[data-state=checked]] the disabled look already uses. The
+    // color-dependent part of that highlight (border/background tint)
+    // lives in the compoundVariants below instead, since it has to follow
+    // `color` - this block only keeps the structural bits.
+    variant: {
+      default: {},
+      card: {
+        itemWrapper: "w-full items-start gap-3 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] px-3.5 py-3 transition-colors",
+        item: "mt-0.5"
+      }
+    },
+    // Recolors the ring/dot when checked - unchecked always stays the same
+    // neutral ring regardless of `color`, matching Checkbox's/Switch's own
+    // `color` variant exactly (same reasoning, same token pattern).
+    color: {
+      primary: { item: "data-[state=checked]:ring-[var(--ui-primary)] data-[state=checked]:before:bg-[var(--ui-primary)]", indicator: "bg-[var(--ui-primary)]" },
+      neutral: { item: "data-[state=checked]:ring-[var(--ui-neutral)] data-[state=checked]:before:bg-[var(--ui-neutral)]", indicator: "bg-[var(--ui-neutral)]" },
+      secondary: { item: "data-[state=checked]:ring-[var(--ui-secondary)] data-[state=checked]:before:bg-[var(--ui-secondary)]", indicator: "bg-[var(--ui-secondary)]" },
+      success: { item: "data-[state=checked]:ring-[var(--ui-success)] data-[state=checked]:before:bg-[var(--ui-success)]", indicator: "bg-[var(--ui-success)]" },
+      danger: { item: "data-[state=checked]:ring-[var(--ui-danger)] data-[state=checked]:before:bg-[var(--ui-danger)]", indicator: "bg-[var(--ui-danger)]" },
+      info: { item: "data-[state=checked]:ring-[var(--ui-info)] data-[state=checked]:before:bg-[var(--ui-info)]", indicator: "bg-[var(--ui-info)]" },
+      warning: { item: "data-[state=checked]:ring-[var(--ui-warning)] data-[state=checked]:before:bg-[var(--ui-warning)]", indicator: "bg-[var(--ui-warning)]" }
+    },
+    // Recolors the existing ring rather than adding a second outline
+    // outside it (an earlier version did that, which read as a double
+    // ring) - matches how Input/Select handle their own invalid ring.
+    // data-[state=checked] needs its own danger override too, since it'd
+    // otherwise win the ring color back whenever an already-invalid group
+    // has something selected.
+    invalid: {
+      true: { item: "ring-[var(--ui-danger)] data-[state=checked]:ring-[var(--ui-danger)]" }
+    }
+  },
+  compoundVariants: [
+    // The card variant's own checked-state highlight, following `color`.
+    { variant: "card", color: "primary", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-primary)] has-[[data-state=checked]]:bg-[var(--ui-primary-soft)]" } },
+    { variant: "card", color: "neutral", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-neutral)] has-[[data-state=checked]]:bg-[var(--ui-neutral-soft)]" } },
+    { variant: "card", color: "secondary", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-secondary)] has-[[data-state=checked]]:bg-[var(--ui-secondary-soft)]" } },
+    { variant: "card", color: "success", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-success)] has-[[data-state=checked]]:bg-[var(--ui-success-soft)]" } },
+    { variant: "card", color: "danger", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-danger)] has-[[data-state=checked]]:bg-[var(--ui-danger-soft)]" } },
+    { variant: "card", color: "info", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-info)] has-[[data-state=checked]]:bg-[var(--ui-info-soft)]" } },
+    { variant: "card", color: "warning", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--ui-warning)] has-[[data-state=checked]]:bg-[var(--ui-warning-soft)]" } }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    orientation: "vertical",
+    variant: "default"
+  }
+});

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

@@ -0,0 +1,167 @@
+export declare const ratingTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+        md: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+        lg: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+    };
+    color: {
+        primary: {
+            fillIcon: string;
+        };
+        neutral: {
+            fillIcon: string;
+        };
+        secondary: {
+            fillIcon: string;
+        };
+        success: {
+            fillIcon: string;
+        };
+        danger: {
+            fillIcon: string;
+        };
+        info: {
+            fillIcon: string;
+        };
+        warning: {
+            fillIcon: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    fillIcon: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+        md: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+        lg: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+    };
+    color: {
+        primary: {
+            fillIcon: string;
+        };
+        neutral: {
+            fillIcon: string;
+        };
+        secondary: {
+            fillIcon: string;
+        };
+        success: {
+            fillIcon: string;
+        };
+        danger: {
+            fillIcon: string;
+        };
+        info: {
+            fillIcon: string;
+        };
+        warning: {
+            fillIcon: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    fillIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+        md: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+        lg: {
+            item: string;
+            icon: string;
+            fillIcon: string;
+        };
+    };
+    color: {
+        primary: {
+            fillIcon: string;
+        };
+        neutral: {
+            fillIcon: string;
+        };
+        secondary: {
+            fillIcon: string;
+        };
+        success: {
+            fillIcon: string;
+        };
+        danger: {
+            fillIcon: string;
+        };
+        info: {
+            fillIcon: string;
+        };
+        warning: {
+            fillIcon: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    fillIcon: string;
+}>>;
+export type RatingThemeSlots = keyof (typeof ratingTheme)['slots'];

package/dist/runtime/theme/rating.js

@@ -0,0 +1,77 @@
+import { tv } from "tailwind-variants";
+export const ratingTheme = tv({
+  slots: {
+    root: "inline-flex items-center",
+    // The shared positioning context for one star's backdrop plus every
+    // one of its overlapping step indicators - a fixed size (via `size`
+    // below) so absolutely-positioned children have something concrete
+    // to size/crop against.
+    // has-[:focus-visible] rather than the usual focus-visible directly -
+    // keyboard focus lands on whichever sub-step's own (possibly
+    // narrower-than-the-whole-star) indicator button is current, but the
+    // ring should still outline the *whole* star, not just that step's
+    // own cropped hit region.
+    item: "relative shrink-0 rounded-[var(--ui-radius-sm)] transition-shadow has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--ui-primary)]",
+    // The empty/outline star, always visible, sitting behind every step
+    // indicator - what a not-yet-filled star reads as.
+    icon: "absolute inset-0 text-[var(--ui-border)]",
+    // One per fractional sub-step (Rating.vue renders one
+    // RatingItemIndicator per entry in RatingItem's own `steps`, a single
+    // entry `[N]` when `step` is the default 1, several overlapping ones
+    // for a fractional step) - overflow-hidden + a width pinned to Reka's
+    // own --reka-rating-item-step-width is what turns the *fixed-size*
+    // fillIcon inside it into a correctly-cropped partial fill instead of
+    // a squished one. z-index/opacity are also Reka's own exposed custom
+    // properties - see RatingItemIndicator's compiled source
+    // (node_modules/reka-ui/dist/Rating/RatingItemIndicator.js) for what
+    // each one tracks (narrower/earlier sub-steps stack in front so their
+    // smaller click region wins over the full-width one behind it;
+    // opacity hides a redundant overlapping layer mid-hover-transition).
+    // Marked group/step so the nested fillIcon can react to *this*
+    // element's own data-state=active (has this step's value been
+    // reached by the current hover-or-model value) without needing to
+    // duplicate that computation itself.
+    // p-0 + flex + leading-none reset the real <button> Reka renders this
+    // as - its default UA padding/line-height otherwise pushes fillIcon a
+    // few fixed pixels off the backdrop icon's own position. A fixed
+    // offset is invisible at lg (a small fraction of a 24px icon) but
+    // reads as a visibly "cut" star at sm (the same few px against a
+    // 16px icon) - confirmed via getBoundingClientRect(): fillIcon sat
+    // 2px lower than the backdrop/indicator/item box it should exactly
+    // match, entirely explained by the button's own default padding.
+    indicator: "group/step absolute inset-y-0 start-0 flex items-start justify-start overflow-hidden p-0 leading-none [opacity:var(--reka-rating-item-step-opacity)] [width:var(--reka-rating-item-step-width)] [z-index:var(--reka-rating-item-step-z-index)] disabled:cursor-not-allowed",
+    // Same star shape again, same fixed size as the backdrop - see the
+    // indicator slot's own comment for why this can't be sized relative
+    // to its own (intentionally shrunk) indicator parent. Transparent at
+    // rest - a transparent star atop the muted backdrop simply shows the
+    // backdrop through it, reading as "not filled" with no shape swap
+    // needed - recolored once its own indicator's data-state flips to
+    // active.
+    fillIcon: "text-transparent transition-colors group-data-[state=active]/step:text-[var(--ui-primary)]"
+  },
+  variants: {
+    orientation: {
+      horizontal: { root: "flex-row gap-1" },
+      vertical: { root: "flex-col gap-1" }
+    },
+    size: {
+      sm: { item: "size-4", icon: "size-4", fillIcon: "size-4" },
+      md: { item: "size-5", icon: "size-5", fillIcon: "size-5" },
+      lg: { item: "size-6", icon: "size-6", fillIcon: "size-6" }
+    },
+    color: {
+      primary: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-primary)]" },
+      neutral: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-bg-inverted)]" },
+      secondary: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-secondary)]" },
+      success: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-success)]" },
+      danger: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-danger)]" },
+      info: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-info)]" },
+      warning: { fillIcon: "group-data-[state=active]/step:text-[var(--ui-warning)]" }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "md",
+    color: "primary"
+  }
+});

package/dist/runtime/theme/read-more.d.ts

@@ -0,0 +1,38 @@
+export declare const readMoreTheme: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            triggerIcon: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    fade: string;
+    trigger: string;
+    triggerIcon: string;
+}, undefined, {
+    open: {
+        true: {
+            triggerIcon: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    fade: string;
+    trigger: string;
+    triggerIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    open: {
+        true: {
+            triggerIcon: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    fade: string;
+    trigger: string;
+    triggerIcon: string;
+}>>;
+export type ReadMoreThemeSlots = keyof (typeof readMoreTheme)['slots'];

package/dist/runtime/theme/read-more.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+export const readMoreTheme = tv({
+  slots: {
+    root: "relative",
+    // max-height (not height) is what actually animates - see
+    // ReadMore.vue's own comment on why this needs a measured pixel value
+    // rather than the `auto` keyword, which CSS transitions can't animate.
+    content: "overflow-hidden transition-[max-height] duration-300 ease-out",
+    // A fade rather than a hard cut - signals there's more below without a
+    // visible seam at the truncation line. Reads from --ui-bg since it
+    // needs to blend into whatever's directly behind it, not a fixed color.
+    fade: "pointer-events-none absolute inset-x-0 bottom-8 h-16 bg-gradient-to-t from-[var(--ui-bg)] to-transparent",
+    trigger: "relative mt-2 inline-flex items-center gap-1 text-sm font-medium text-[var(--ui-primary)] transition-colors hover:text-[var(--ui-primary-hover)]",
+    triggerIcon: "size-4 transition-transform duration-200"
+  },
+  variants: {
+    open: {
+      true: { triggerIcon: "rotate-180" }
+    }
+  }
+});

package/dist/runtime/theme/scroll-area.d.ts

@@ -0,0 +1,50 @@
+export declare const scrollAreaTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            corner?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            corner?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    corner: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            corner?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    corner: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    viewport: string;
+    scrollbar: string;
+    thumb: string;
+    corner: string;
+}>>;
+export type ScrollAreaThemeSlots = keyof (typeof scrollAreaTheme)['slots'];

package/dist/runtime/theme/scroll-area.js

@@ -0,0 +1,10 @@
+import { tv } from "tailwind-variants";
+export const scrollAreaTheme = tv({
+  slots: {
+    root: "relative overflow-hidden",
+    viewport: "h-full w-full rounded-[inherit]",
+    scrollbar: "flex touch-none select-none p-0.5 transition-colors data-[orientation=vertical]:w-2 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col",
+    thumb: "relative flex-1 rounded-full bg-[var(--ui-border)] before:absolute before:left-1/2 before:top-1/2 before:h-full before:min-h-11 before:w-full before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
+    corner: "bg-[var(--ui-bg-elevated)]"
+  }
+});

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

@@ -0,0 +1,176 @@
+export declare const selectTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    color: {
+        primary: {
+            trigger: string;
+        };
+        neutral: {
+            trigger: string;
+        };
+        secondary: {
+            trigger: string;
+        };
+        success: {
+            trigger: string;
+        };
+        danger: {
+            trigger: string;
+        };
+        info: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    value: string;
+    chipOverflow: string;
+    icon: string;
+    clear: string;
+    dropdown: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    mobileContent: string;
+    viewport: string;
+    group: string;
+    item: string;
+    itemIndicator: string;
+    empty: string;
+    arrow: string;
+}, undefined, {
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    color: {
+        primary: {
+            trigger: string;
+        };
+        neutral: {
+            trigger: string;
+        };
+        secondary: {
+            trigger: string;
+        };
+        success: {
+            trigger: string;
+        };
+        danger: {
+            trigger: string;
+        };
+        info: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    value: string;
+    chipOverflow: string;
+    icon: string;
+    clear: string;
+    dropdown: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    mobileContent: string;
+    viewport: string;
+    group: string;
+    item: string;
+    itemIndicator: string;
+    empty: string;
+    arrow: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    color: {
+        primary: {
+            trigger: string;
+        };
+        neutral: {
+            trigger: string;
+        };
+        secondary: {
+            trigger: string;
+        };
+        success: {
+            trigger: string;
+        };
+        danger: {
+            trigger: string;
+        };
+        info: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    value: string;
+    chipOverflow: string;
+    icon: string;
+    clear: string;
+    dropdown: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    mobileContent: string;
+    viewport: string;
+    group: string;
+    item: string;
+    itemIndicator: string;
+    empty: string;
+    arrow: string;
+}>>;
+export type SelectThemeSlots = keyof (typeof selectTheme)['slots'];