@sewadah/selaras 0.1.1

package/dist/runtime/theme/select.js

@@ -0,0 +1,74 @@
+import { tv } from "tailwind-variants";
+export const selectTheme = tv({
+  slots: {
+    root: "w-full",
+    // Hover ring excludes all three focus-ish states (focus, focus-within,
+    // the popover being open) - without it, hovering while any of those is
+    // true (unavoidable while interacting with the trigger or its options)
+    // let the plain gray hover ring beat the primary one in the cascade,
+    // since they're all equal-specificity pseudo-class/attribute selectors.
+    trigger: "inline-flex w-full min-h-10 flex-wrap items-center gap-1.5 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] px-3 py-1.5 text-sm ring-1 ring-inset ring-[var(--ui-border)] outline-none transition-[color,background-color,box-shadow] not-focus:not-focus-within:not-data-[state=open]:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 focus-within:ring-2 data-[state=open]:ring-2 disabled:opacity-50 disabled:pointer-events-none",
+    value: "flex-1 truncate text-start text-[var(--ui-text)] data-[placeholder]:text-[var(--ui-text-muted)]",
+    // Both chip display branches render a real Chip (see
+    // ComboboxSelectBase.vue) instead of hand-rolled markup, styled/
+    // colored via its own props and :ui override - only the "+N more"
+    // overflow indicator still needs a Select-owned slot. bg-primary-soft
+    // (not bg-elevated) - elevated is the same token the trigger itself
+    // switches to on hover, so it used to vanish on hover exactly like
+    // the chips did before they moved to Chip's own primary/soft. Text
+    // matches the chips' own primary too, not text-muted - muted-on-
+    // primary-soft measures 4.46:1, just under AA; primary-on-primary-
+    // soft (the same pairing Chip's own soft variant uses) clears 6.5:1.
+    chipOverflow: "inline-flex items-center rounded-[var(--ui-radius-sm)] bg-[var(--ui-primary-soft)] px-2 py-0.5 text-xs text-[var(--ui-primary)]",
+    icon: "shrink-0 text-[var(--ui-text-muted)]",
+    // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring
+    // and touch target come from Button's own theme; only rounded-full
+    // (this dismiss-glyph family reads better circular) stays here.
+    clear: "shrink-0 rounded-full",
+    dropdown: "shrink-0 rounded-[var(--ui-radius-sm)] p-0.5 text-[var(--ui-text-muted)] transition-colors hover:bg-[var(--ui-border)] hover:text-[var(--ui-text)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]",
+    searchWrapper: "flex items-center gap-2 border-b border-[var(--ui-border)] px-2",
+    searchInput: "h-9 min-w-16 flex-1 bg-transparent text-sm text-[var(--ui-text)] outline-none placeholder:text-[var(--ui-text-muted)]",
+    content: "z-[var(--ui-z-dropdown)] max-h-72 min-w-[var(--reka-combobox-trigger-width)] overflow-hidden rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    // The `mobileModal` path's own content wrapper - none of `content`'s
+    // own popover chrome (ring/shadow/rounded/animate-in, sized off the
+    // trigger's own width via --reka-combobox-trigger-width, which is
+    // only ever set while position="popper" is active) applies here,
+    // since Modal's own card already provides that surface; this only
+    // needs to fill Modal's content slot width.
+    mobileContent: "w-full",
+    viewport: "max-h-72 overflow-y-auto p-1",
+    group: "px-2 pt-2 pb-1 text-xs font-medium text-[var(--ui-text-muted)]",
+    item: "relative flex items-center gap-2 rounded-[var(--ui-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--ui-text)] outline-none cursor-pointer select-none data-[highlighted]:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    itemIndicator: "absolute end-2 flex items-center text-[var(--ui-primary)]",
+    empty: "px-2 py-6 text-center text-sm text-[var(--ui-text-muted)]",
+    arrow: "fill-[var(--ui-bg)] stroke-[var(--ui-border)] stroke-1"
+  },
+  variants: {
+    size: {
+      sm: { trigger: "min-h-8 text-sm" },
+      md: { trigger: "min-h-10" },
+      lg: { trigger: "min-h-11 text-base" }
+    },
+    // Focus-ring color only - the resting ring stays --ui-border regardless
+    // of `color`, matching Input's own scope (see input.ts).
+    color: {
+      primary: { trigger: "focus:ring-[var(--ui-primary)] focus-within:ring-[var(--ui-primary)] data-[state=open]:ring-[var(--ui-primary)]" },
+      neutral: { trigger: "focus:ring-[var(--ui-bg-inverted)] focus-within:ring-[var(--ui-bg-inverted)] data-[state=open]:ring-[var(--ui-bg-inverted)]" },
+      secondary: { trigger: "focus:ring-[var(--ui-secondary)] focus-within:ring-[var(--ui-secondary)] data-[state=open]:ring-[var(--ui-secondary)]" },
+      success: { trigger: "focus:ring-[var(--ui-success)] focus-within:ring-[var(--ui-success)] data-[state=open]:ring-[var(--ui-success)]" },
+      danger: { trigger: "focus:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)] data-[state=open]:ring-[var(--ui-danger)]" },
+      info: { trigger: "focus:ring-[var(--ui-info)] focus-within:ring-[var(--ui-info)] data-[state=open]:ring-[var(--ui-info)]" },
+      warning: { trigger: "focus:ring-[var(--ui-warning)] focus-within:ring-[var(--ui-warning)] data-[state=open]:ring-[var(--ui-warning)]" }
+    },
+    // Declared last (after color) so tailwind-merge lets its own ring
+    // overrides win over color's - see input.ts for why declaration order
+    // (not runtime call order) is what decides this.
+    invalid: {
+      true: { trigger: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)] data-[state=open]:ring-[var(--ui-danger)]" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});

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

@@ -0,0 +1,158 @@
+export declare const separatorTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            line: string;
+        };
+        vertical: {
+            root: string;
+            line: string;
+        };
+    };
+    variant: {
+        solid: {
+            line: string;
+        };
+        dashed: {
+            line: string;
+        };
+        dotted: {
+            line: string;
+        };
+        double: {
+            line: string;
+        };
+    };
+    color: {
+        neutral: {
+            line: string;
+        };
+        primary: {
+            line: string;
+        };
+        secondary: {
+            line: string;
+        };
+        success: {
+            line: string;
+        };
+        danger: {
+            line: string;
+        };
+        info: {
+            line: string;
+        };
+        warning: {
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    line: string;
+    label: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            line: string;
+        };
+        vertical: {
+            root: string;
+            line: string;
+        };
+    };
+    variant: {
+        solid: {
+            line: string;
+        };
+        dashed: {
+            line: string;
+        };
+        dotted: {
+            line: string;
+        };
+        double: {
+            line: string;
+        };
+    };
+    color: {
+        neutral: {
+            line: string;
+        };
+        primary: {
+            line: string;
+        };
+        secondary: {
+            line: string;
+        };
+        success: {
+            line: string;
+        };
+        danger: {
+            line: string;
+        };
+        info: {
+            line: string;
+        };
+        warning: {
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    line: string;
+    label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+            line: string;
+        };
+        vertical: {
+            root: string;
+            line: string;
+        };
+    };
+    variant: {
+        solid: {
+            line: string;
+        };
+        dashed: {
+            line: string;
+        };
+        dotted: {
+            line: string;
+        };
+        double: {
+            line: string;
+        };
+    };
+    color: {
+        neutral: {
+            line: string;
+        };
+        primary: {
+            line: string;
+        };
+        secondary: {
+            line: string;
+        };
+        success: {
+            line: string;
+        };
+        danger: {
+            line: string;
+        };
+        info: {
+            line: string;
+        };
+        warning: {
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    line: string;
+    label: string;
+}>>;
+export type SeparatorThemeSlots = keyof (typeof separatorTheme)['slots'];

package/dist/runtime/theme/separator.js

@@ -0,0 +1,63 @@
+import { tv } from "tailwind-variants";
+export const separatorTheme = tv({
+  slots: {
+    root: "flex shrink-0 items-center",
+    // A zero-size box with a themed border on the relevant side, not a
+    // background fill - a background-color only ever looks solid
+    // regardless of variant, and dashed/dotted need a real border-style
+    // to render at all. flex-1 - with no label this is the only child,
+    // so it alone fills the root's full length and looks identical to a
+    // plain bar; with a label, a second one of these renders after it
+    // (see Separator.vue), splitting the available space evenly on both
+    // sides of the text.
+    line: "shrink-0 border-[var(--ui-border)]",
+    // Always muted, independent of `color` - a colored line with
+    // matching bright label text reads as garish rather than
+    // informative; the label stays legible/neutral regardless of how
+    // much the line itself is emphasized.
+    label: "shrink-0 px-2 text-xs text-[var(--ui-text-muted)] whitespace-nowrap"
+  },
+  variants: {
+    orientation: {
+      horizontal: { root: "w-full flex-row", line: "h-0 flex-1 border-t" },
+      vertical: { root: "h-full flex-col", line: "w-0 flex-1 border-l" }
+    },
+    variant: {
+      solid: { line: "border-solid" },
+      dashed: { line: "border-dashed" },
+      dotted: { line: "border-dotted" },
+      // CSS's own double border-style needs real width to show two
+      // distinct lines at all - at the 1px default the two lines and
+      // the gap between them have no room to render separately, so this
+      // also widens the border (see the compoundVariants below, one per
+      // orientation since the thickened side differs).
+      double: { line: "border-double" }
+    },
+    // Unlike Input/PinInput's own `color` (focus-ring only), the line is
+    // always visible with no interactive state to gate a color reveal
+    // behind - it just tints directly. `neutral` here means the same
+    // subtle --ui-border this component always used, not the bold
+    // --ui-bg-inverted "neutral" means elsewhere (Checkbox, Slider, ...) -
+    // a divider's own default has to stay subtle, matching precedent for
+    // "neutral" carrying whatever's contextually right per component
+    // (Badge's own soft variant does the same with --ui-bg-elevated).
+    color: {
+      neutral: { line: "border-[var(--ui-border)]" },
+      primary: { line: "border-[var(--ui-primary)]" },
+      secondary: { line: "border-[var(--ui-secondary)]" },
+      success: { line: "border-[var(--ui-success)]" },
+      danger: { line: "border-[var(--ui-danger)]" },
+      info: { line: "border-[var(--ui-info)]" },
+      warning: { line: "border-[var(--ui-warning)]" }
+    }
+  },
+  compoundVariants: [
+    { variant: "double", orientation: "horizontal", class: { line: "border-t-[3px]" } },
+    { variant: "double", orientation: "vertical", class: { line: "border-l-[3px]" } }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+    color: "neutral"
+  }
+});

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

@@ -0,0 +1,35 @@
+export declare const skeletonTheme: import("tailwind-variants").TVReturnType<{
+    animation: {
+        pulse: {
+            base: string;
+        };
+        shimmer: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    animation: {
+        pulse: {
+            base: string;
+        };
+        shimmer: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    animation: {
+        pulse: {
+            base: string;
+        };
+        shimmer: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>>;
+export type SkeletonThemeSlots = keyof (typeof skeletonTheme)['slots'];

package/dist/runtime/theme/skeleton.js

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+export const skeletonTheme = tv({
+  slots: {
+    // --ui-bg-elevated (neutral-50) reads as barely-off-white against the
+    // page background it's normally shown on - fine for a soft surface
+    // tint, but a loading placeholder needs to actually be visible.
+    // --ui-border is the same "visible neutral block on white" token
+    // Slider's own track already uses for the identical reason.
+    base: "block rounded-[var(--ui-radius-md)] bg-[var(--ui-border)]"
+  },
+  variants: {
+    animation: {
+      pulse: { base: "animate-pulse" },
+      // Tailwind has no built-in gradient-sweep utility (unlike pulse's
+      // animate-pulse) - the keyframe itself lives in theme.css, next to
+      // the other custom animations (selaras-ripple, selaras-accordion-*).
+      // A 200%-wide gradient slides across the block's own width via
+      // background-position, giving the light band somewhere to travel.
+      shimmer: {
+        base: "bg-[linear-gradient(90deg,var(--ui-border)_25%,var(--ui-border-hover)_50%,var(--ui-border)_75%)] bg-[length:200%_100%] animate-[selaras-skeleton-shimmer_1.6s_ease-in-out_infinite]"
+      }
+    }
+  },
+  defaultVariants: {
+    animation: "pulse"
+  }
+});

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

@@ -0,0 +1,107 @@
+export declare const slideoverTheme: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+    };
+    inset: {
+        true: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: 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;
+        };
+    };
+    inset: {
+        true: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: 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;
+        };
+    };
+    inset: {
+        true: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    close: string;
+    body: string;
+    footer: string;
+}>>;
+export type SlideoverThemeSlots = keyof (typeof slideoverTheme)['slots'];

package/dist/runtime/theme/slideover.js

@@ -0,0 +1,62 @@
+import { tv } from "tailwind-variants";
+export const slideoverTheme = 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",
+    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: {
+    // Deliberately no height/width here for any side - inset-x-*/inset-y-*
+    // below (varying by `inset`) supply both edges and let the browser
+    // derive the size implicitly. Setting an explicit h-full/w-full here
+    // too would over-constrain the box: for a fixed element with top,
+    // bottom, AND height all specified, height wins and the browser
+    // recomputes bottom from it - silently discarding inset-y-4's margin
+    // and letting the panel overflow past the viewport edge. Found via a
+    // real browser check on the inset example (side=right defaulted):
+    // the panel's own bottom sat 16px past the viewport bottom, exactly
+    // matching inset-y-4's 16px top offset carried straight through to
+    // an unconstrained h-full height.
+    side: {
+      top: { content: "" },
+      bottom: { content: "" },
+      left: { content: "max-w-md" },
+      right: { content: "max-w-md" }
+    },
+    inset: {
+      true: { content: "rounded-[var(--ui-radius-lg)] ring-1 ring-[var(--ui-border)]" }
+    },
+    // The animation classes live entirely in this variant (and the
+    // compoundVariants below) rather than the base slot strings above -
+    // see modal.ts for why: tailwind-merge doesn't recognize
+    // animate-in/animate-none as a conflicting pair, so keeping both
+    // states' full class sets inside the variant avoids that entirely.
+    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", inset: true, class: { content: "inset-x-4 top-4 max-h-[calc(100%-2rem)]" } },
+    { side: "top", inset: false, class: { content: "inset-x-0 top-0 max-h-full" } },
+    { side: "bottom", inset: true, class: { content: "inset-x-4 bottom-4 max-h-[calc(100%-2rem)]" } },
+    { side: "bottom", inset: false, class: { content: "inset-x-0 bottom-0 max-h-full" } },
+    { side: "left", inset: true, class: { content: "inset-y-4 left-4 w-[calc(100%-2rem)]" } },
+    { side: "left", inset: false, class: { content: "inset-y-0 left-0 w-full" } },
+    { side: "right", inset: true, class: { content: "inset-y-4 right-4 w-[calc(100%-2rem)]" } },
+    { side: "right", inset: false, 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: {
+    side: "right",
+    transition: true
+  }
+});