@sewadah/selaras 0.1.1

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

@@ -0,0 +1,227 @@
+export declare const sliderTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+    };
+    color: {
+        primary: {
+            range: string;
+            thumb: string;
+        };
+        neutral: {
+            range: string;
+            thumb: string;
+        };
+        secondary: {
+            range: string;
+            thumb: string;
+        };
+        success: {
+            range: string;
+            thumb: string;
+        };
+        danger: {
+            range: string;
+            thumb: string;
+        };
+        info: {
+            range: string;
+            thumb: string;
+        };
+        warning: {
+            range: string;
+            thumb: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            range: string;
+            tick: string;
+        };
+    };
+    thumbVariant: {
+        circle: {
+            thumb: string;
+        };
+        bar: {
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    thumb: string;
+    tick: string;
+    start: string;
+    end: string;
+}, undefined, {
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+    };
+    color: {
+        primary: {
+            range: string;
+            thumb: string;
+        };
+        neutral: {
+            range: string;
+            thumb: string;
+        };
+        secondary: {
+            range: string;
+            thumb: string;
+        };
+        success: {
+            range: string;
+            thumb: string;
+        };
+        danger: {
+            range: string;
+            thumb: string;
+        };
+        info: {
+            range: string;
+            thumb: string;
+        };
+        warning: {
+            range: string;
+            thumb: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            range: string;
+            tick: string;
+        };
+    };
+    thumbVariant: {
+        circle: {
+            thumb: string;
+        };
+        bar: {
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    thumb: string;
+    tick: string;
+    start: string;
+    end: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            tick: string;
+        };
+    };
+    color: {
+        primary: {
+            range: string;
+            thumb: string;
+        };
+        neutral: {
+            range: string;
+            thumb: string;
+        };
+        secondary: {
+            range: string;
+            thumb: string;
+        };
+        success: {
+            range: string;
+            thumb: string;
+        };
+        danger: {
+            range: string;
+            thumb: string;
+        };
+        info: {
+            range: string;
+            thumb: string;
+        };
+        warning: {
+            range: string;
+            thumb: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            range: string;
+            tick: string;
+        };
+    };
+    thumbVariant: {
+        circle: {
+            thumb: string;
+        };
+        bar: {
+            thumb: string;
+        };
+    };
+}, {
+    root: string;
+    track: string;
+    range: string;
+    thumb: string;
+    tick: string;
+    start: string;
+    end: string;
+}>>;
+export type SliderThemeSlots = keyof (typeof sliderTheme)['slots'];

package/dist/runtime/theme/slider.js

@@ -0,0 +1,73 @@
+import { tv } from "tailwind-variants";
+export const sliderTheme = tv({
+  slots: {
+    root: "relative flex touch-none select-none items-center data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    track: "relative grow rounded-full bg-[var(--ui-border)]",
+    // Reka's own SliderRange sets left/right (horizontal) or top/bottom
+    // (vertical) itself via inline style, to size the *main* axis - the
+    // *cross* axis (this slot's own height for horizontal, width for
+    // vertical) is left entirely up to the theme, and an absolutely
+    // positioned element with no top/bottom of its own collapses to 0
+    // height. inset-y-0/inset-x-0 below (in the orientation variant)
+    // supply that missing cross-axis size.
+    range: "absolute rounded-full",
+    thumb: "block shrink-0 rounded-full bg-[var(--ui-bg)] shadow-[var(--ui-shadow-sm)] ring-2 transition-shadow focus-visible:outline-none focus-visible:ring-4",
+    // Own addition - Reka's Slider has no tick/mark concept of its own.
+    // Positioned via an inline style (percent along the track), not a
+    // variant - see Slider.vue's own `ticks` computed.
+    tick: "absolute size-1 -translate-x-1/2 rounded-full bg-[var(--ui-border-hover)]",
+    // Own addition - flanking content (an icon, an emoji, a unit label)
+    // either side of the track. Plain flex boxes, no Reka equivalent.
+    start: "flex shrink-0 items-center justify-center text-[var(--ui-text-muted)]",
+    end: "flex shrink-0 items-center justify-center text-[var(--ui-text-muted)]"
+  },
+  variants: {
+    size: {
+      sm: { track: "h-1", thumb: "size-3.5", tick: "top-1/2 -translate-y-1/2" },
+      md: { track: "h-1.5", thumb: "size-4", tick: "top-1/2 -translate-y-1/2" },
+      lg: { track: "h-2", thumb: "size-5", tick: "top-1/2 -translate-y-1/2" }
+    },
+    color: {
+      primary: { range: "bg-[var(--ui-primary)]", thumb: "ring-[var(--ui-primary)]" },
+      neutral: { range: "bg-[var(--ui-bg-inverted)]", thumb: "ring-[var(--ui-bg-inverted)]" },
+      secondary: { range: "bg-[var(--ui-secondary)]", thumb: "ring-[var(--ui-secondary)]" },
+      success: { range: "bg-[var(--ui-success)]", thumb: "ring-[var(--ui-success)]" },
+      danger: { range: "bg-[var(--ui-danger)]", thumb: "ring-[var(--ui-danger)]" },
+      info: { range: "bg-[var(--ui-info)]", thumb: "ring-[var(--ui-info)]" },
+      warning: { range: "bg-[var(--ui-warning)]", thumb: "ring-[var(--ui-warning)]" }
+    },
+    // Vertical needs a real, non-zero height to size against - unlike
+    // horizontal, which sizes off its own intrinsic full width.
+    orientation: {
+      horizontal: { root: "w-full", range: "inset-y-0" },
+      vertical: { root: "h-44 flex-col", range: "inset-x-0", tick: "inset-x-1/2 top-auto translate-x-0 translate-y-1/2" }
+    },
+    // circle (default): the existing round thumb, sized entirely by
+    // `size` above. bar: a thin rounded rectangle instead - long across
+    // the track's own cross axis, narrow along its main axis - sized via
+    // the compoundVariants below (it needs both `size` *and*
+    // `orientation` to pick the right long/short axis, so a flat
+    // per-size class here isn't enough on its own).
+    thumbVariant: {
+      circle: { thumb: "rounded-full" },
+      bar: { thumb: "rounded-[var(--ui-radius-sm)]" }
+    }
+  },
+  compoundVariants: [
+    { orientation: "vertical", size: "sm", class: { track: "h-full w-1" } },
+    { orientation: "vertical", size: "md", class: { track: "h-full w-1.5" } },
+    { orientation: "vertical", size: "lg", class: { track: "h-full w-2" } },
+    { thumbVariant: "bar", orientation: "horizontal", size: "sm", class: { thumb: "h-4 w-1" } },
+    { thumbVariant: "bar", orientation: "horizontal", size: "md", class: { thumb: "h-5 w-1.5" } },
+    { thumbVariant: "bar", orientation: "horizontal", size: "lg", class: { thumb: "h-6 w-2" } },
+    { thumbVariant: "bar", orientation: "vertical", size: "sm", class: { thumb: "h-1 w-4" } },
+    { thumbVariant: "bar", orientation: "vertical", size: "md", class: { thumb: "h-1.5 w-5" } },
+    { thumbVariant: "bar", orientation: "vertical", size: "lg", class: { thumb: "h-2 w-6" } }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    orientation: "horizontal",
+    thumbVariant: "circle"
+  }
+});

package/dist/runtime/theme/splitter-panel.d.ts

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

package/dist/runtime/theme/splitter-panel.js

@@ -0,0 +1,9 @@
+import { tv } from "tailwind-variants";
+export const splitterPanelTheme = tv({
+  slots: {
+    // Deliberately no visual styling (border/background/padding) - a
+    // panel's own look depends entirely on what it's used for (a sidebar
+    // looks nothing like a code viewer), left to the consumer.
+    root: "overflow-hidden"
+  }
+});

package/dist/runtime/theme/splitter-resize-handle.d.ts

@@ -0,0 +1,44 @@
+export declare const splitterResizeHandleTheme: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            root: string;
+            line: string;
+        };
+        vertical: {
+            root: string;
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    line: string;
+}, undefined, {
+    direction: {
+        horizontal: {
+            root: string;
+            line: string;
+        };
+        vertical: {
+            root: string;
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    line: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    direction: {
+        horizontal: {
+            root: string;
+            line: string;
+        };
+        vertical: {
+            root: string;
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    line: string;
+}>>;
+export type SplitterResizeHandleThemeSlots = keyof (typeof splitterResizeHandleTheme)['slots'];

package/dist/runtime/theme/splitter-resize-handle.js

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+export const splitterResizeHandleTheme = tv({
+  slots: {
+    // A slim hit area with a thinner visible line inside it - the visible
+    // line alone would be too narrow a target to reliably grab.
+    root: "group relative shrink-0 bg-transparent outline-none",
+    line: "absolute bg-[var(--ui-border)] transition-colors group-hover:bg-[var(--ui-primary)] group-data-[state=drag]:bg-[var(--ui-primary)]"
+  },
+  variants: {
+    direction: {
+      horizontal: { root: "w-1 cursor-col-resize", line: "inset-y-0 start-1/2 w-px -translate-x-1/2" },
+      vertical: { root: "h-1 cursor-row-resize", line: "inset-x-0 top-1/2 h-px -translate-y-1/2" }
+    }
+  },
+  defaultVariants: {
+    direction: "horizontal"
+  }
+});

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

@@ -0,0 +1,35 @@
+export declare const splitterTheme: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    direction: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    direction: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}>>;
+export type SplitterThemeSlots = keyof (typeof splitterTheme)['slots'];

package/dist/runtime/theme/splitter.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+export const splitterTheme = tv({
+  slots: {
+    root: "flex h-full w-full overflow-hidden"
+  },
+  variants: {
+    direction: {
+      horizontal: { root: "flex-row" },
+      vertical: { root: "flex-col" }
+    }
+  },
+  defaultVariants: {
+    direction: "horizontal"
+  }
+});

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

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