@sewadah/selaras 0.1.1

package/dist/runtime/theme/tabs.js

@@ -0,0 +1,44 @@
+import { tv } from "tailwind-variants";
+export const tabsTheme = tv({
+  slots: {
+    root: "w-full",
+    // relative - the positioned ancestor both the triggers' own offsetLeft
+    // and the sliding indicator's absolute positioning resolve against.
+    list: "relative flex items-center border-b border-[var(--ui-border)]",
+    // z-10 unconditionally (not just for `pill`) - harmless for `underline`
+    // (its indicator never overlaps the trigger's own text anyway) and
+    // keeps this one class instead of a compound variant.
+    trigger: "relative z-10 inline-flex items-center gap-1.5 px-1 py-2 text-sm font-medium text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)] disabled:opacity-50 disabled:pointer-events-none data-[state=active]:text-[var(--ui-primary)]",
+    icon: "size-4 shrink-0",
+    // Positioned via Reka's own TabsIndicator - it measures the active
+    // trigger's offsetLeft/offsetWidth itself (ResizeObserver-driven, and
+    // re-runs on every active-tab change whether Tabs is controlled or
+    // uncontrolled) and exposes the result as these two CSS custom
+    // properties, the same `var(...)` arbitrary-value pattern
+    // theme/select.ts's own `content` slot already uses for
+    // --reka-combobox-trigger-width. The transition is the only thing
+    // actually driving the slide - JS never animates it directly.
+    // `translate-x-*` compiles to the standalone CSS `translate` property
+    // (not `transform`) in this version of Tailwind, so the transition
+    // list has to say `translate`, not `transform` - watching the wrong
+    // property meant this never animated at all, just snapped instantly.
+    indicator: "absolute translate-x-[var(--reka-tabs-indicator-position)] w-[var(--reka-tabs-indicator-size)] transition-[translate,width] duration-200 ease-out",
+    content: "pt-4 focus-visible:outline-none data-[state=active]:animate-in data-[state=active]:fade-in-0"
+  },
+  variants: {
+    variant: {
+      underline: {
+        list: "gap-4",
+        indicator: "inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--ui-primary)]"
+      },
+      pill: {
+        list: "gap-1 rounded-[var(--ui-radius-md)] border-0 bg-[var(--ui-bg-elevated)] p-1",
+        trigger: "rounded-[var(--ui-radius-sm)] px-3",
+        indicator: "inset-y-1 rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg)] shadow-[var(--ui-shadow-sm)]"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "underline"
+  }
+});

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

@@ -0,0 +1,212 @@
+export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    hasLeadingIcon: {
+        true: {
+            base: string;
+        };
+    };
+    hasTrailingIcon: {
+        true: {
+            base: string;
+        };
+    };
+    autoresize: {
+        true: {
+            base: string;
+        };
+    };
+    invalid: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    clear: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    hasLeadingIcon: {
+        true: {
+            base: string;
+        };
+    };
+    hasTrailingIcon: {
+        true: {
+            base: string;
+        };
+    };
+    autoresize: {
+        true: {
+            base: string;
+        };
+    };
+    invalid: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    clear: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+        md: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+        lg: {
+            base: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            clear: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    hasLeadingIcon: {
+        true: {
+            base: string;
+        };
+    };
+    hasTrailingIcon: {
+        true: {
+            base: string;
+        };
+    };
+    autoresize: {
+        true: {
+            base: string;
+        };
+    };
+    invalid: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    clear: string;
+}>>;
+export type TextareaThemeSlots = keyof (typeof textareaTheme)['slots'];

package/dist/runtime/theme/textarea.js

@@ -0,0 +1,56 @@
+import { tv } from "tailwind-variants";
+export const textareaTheme = tv({
+  slots: {
+    root: "relative w-full",
+    // not-focus: on the hover ring - see input.ts's own base slot for why
+    // (same fix, same reasoning).
+    base: "w-full resize-y rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] px-3 py-2 text-sm text-[var(--ui-text)] ring-1 ring-inset ring-[var(--ui-border)] placeholder:text-[var(--ui-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 disabled:opacity-50 disabled:pointer-events-none disabled:resize-none",
+    // Anchored to the top corner (`top-2.5`), not vertically centered the
+    // way Input's own icons are - once content wraps past one line,
+    // centering against the whole (variable) box height would drift the
+    // icon away from the first line of text it's meant to sit beside.
+    leadingIcon: "absolute start-3 top-2.5 shrink-0 text-[var(--ui-text-muted)]",
+    trailingIcon: "absolute end-3 top-2.5 shrink-0 text-[var(--ui-text-muted)]",
+    clear: "absolute end-1 top-1 shrink-0 rounded-full"
+  },
+  variants: {
+    size: {
+      sm: { base: "text-sm", leadingIcon: "size-4", trailingIcon: "size-4", clear: "size-7" },
+      md: { base: "text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5", clear: "size-9" },
+      lg: { base: "text-base", leadingIcon: "size-5", trailingIcon: "size-5", clear: "size-10" }
+    },
+    // Focus-ring color only - the resting ring stays --ui-border regardless
+    // of `color`, matching Input's own scope (see input.ts).
+    color: {
+      primary: { base: "focus:ring-[var(--ui-primary)]" },
+      neutral: { base: "focus:ring-[var(--ui-bg-inverted)]" },
+      secondary: { base: "focus:ring-[var(--ui-secondary)]" },
+      success: { base: "focus:ring-[var(--ui-success)]" },
+      danger: { base: "focus:ring-[var(--ui-danger)]" },
+      info: { base: "focus:ring-[var(--ui-info)]" },
+      warning: { base: "focus:ring-[var(--ui-warning)]" }
+    },
+    hasLeadingIcon: {
+      true: { base: "ps-9" }
+    },
+    hasTrailingIcon: {
+      true: { base: "pe-9" }
+    },
+    // Manual drag-resize and JS-driven autoresize fight each other - the
+    // resize handle lets a user set a height the next keystroke's resize()
+    // call would immediately override.
+    autoresize: {
+      true: { base: "resize-none" }
+    },
+    // Declared last (after color) so tailwind-merge lets its own focus:ring
+    // override win over color's - see input.ts for why declaration order
+    // (not runtime call order) is what decides this.
+    invalid: {
+      true: { base: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus:ring-[var(--ui-danger)]" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});

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

@@ -0,0 +1,80 @@
+export declare const toastTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        success: {
+            icon: string;
+            root: string;
+        };
+        danger: {
+            icon: string;
+            root: string;
+        };
+        warning: {
+            icon: string;
+            root: string;
+        };
+        info: {
+            icon: string;
+            root: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string;
+    title: string;
+    description: string;
+    icon: string;
+    close: string;
+}, undefined, {
+    color: {
+        success: {
+            icon: string;
+            root: string;
+        };
+        danger: {
+            icon: string;
+            root: string;
+        };
+        warning: {
+            icon: string;
+            root: string;
+        };
+        info: {
+            icon: string;
+            root: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string;
+    title: string;
+    description: string;
+    icon: string;
+    close: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        success: {
+            icon: string;
+            root: string;
+        };
+        danger: {
+            icon: string;
+            root: string;
+        };
+        warning: {
+            icon: string;
+            root: string;
+        };
+        info: {
+            icon: string;
+            root: string;
+        };
+    };
+}, {
+    viewport: string;
+    root: string;
+    title: string;
+    description: string;
+    icon: string;
+    close: string;
+}>>;
+export type ToastThemeSlots = keyof (typeof toastTheme)['slots'];

package/dist/runtime/theme/toast.js

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants";
+export const toastTheme = tv({
+  slots: {
+    viewport: "fixed bottom-0 end-0 z-[var(--ui-z-toast)] flex w-full max-w-sm flex-col gap-2 p-4 outline-none",
+    root: "relative flex items-start gap-3 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-4 pe-10 shadow-[var(--ui-shadow-lg)] ring-1 ring-[var(--ui-border)] data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-2 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-end-full",
+    title: "text-sm font-medium text-[var(--ui-text)]",
+    description: "mt-1 text-sm text-[var(--ui-text-muted)]",
+    // Base (no color set) is a plain neutral glyph - only shown at all when
+    // `icon` is set without a `color`, since a colorless toast otherwise
+    // has nothing to render here.
+    icon: "size-5 shrink-0 text-[var(--ui-text-muted)]",
+    // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring and
+    // touch target now come from Button's own theme; rounded-full overrides
+    // its default rounded-md just for this dismiss-glyph family (close/clear).
+    // Positioning (this card doesn't lay it out via flex, unlike Modal's
+    // header) stays here, alongside the root's matching pr- reserved space.
+    close: "absolute end-1.5 top-1.5 shrink-0 rounded-full"
+  },
+  variants: {
+    // A colored icon + a matching left-edge accent border - not a full
+    // colored card background, matching this library's existing restraint
+    // elsewhere (Dropdown's own `destructive` only recolors text/icon + a
+    // soft hover tint, never repaints the whole menu).
+    color: {
+      success: { icon: "text-[var(--ui-success)]", root: "border-s-2 border-s-[var(--ui-success)]" },
+      danger: { icon: "text-[var(--ui-danger)]", root: "border-s-2 border-s-[var(--ui-danger)]" },
+      warning: { icon: "text-[var(--ui-warning)]", root: "border-s-2 border-s-[var(--ui-warning)]" },
+      info: { icon: "text-[var(--ui-info)]", root: "border-s-2 border-s-[var(--ui-info)]" }
+    }
+  }
+});

package/dist/runtime/theme/toggle-group.d.ts

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

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

@@ -0,0 +1,48 @@
+import { tv } from "tailwind-variants";
+export const toggleGroupTheme = tv({
+  slots: {
+    // Same joined-segment technique as ButtonGroup's own theme: squares
+    // off each item's inner corner and overlaps adjacent 1px rings by
+    // -1px so the shared edge doesn't render double-thick; the hover/
+    // focus z-index bump keeps a hovered/focused item's own edge drawn
+    // on top of its neighbor's instead of being clipped by it.
+    root: "inline-flex [&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10",
+    item: "inline-flex items-center justify-center gap-1.5 font-medium rounded-[var(--ui-radius-md)] transition-colors ring-1 ring-inset ring-[var(--ui-border)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)] disabled:opacity-50 disabled:pointer-events-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-primary)]",
+    icon: "shrink-0"
+  },
+  variants: {
+    orientation: {
+      horizontal: { root: "flex-row [&>*:not(:first-child)]:-ms-px [&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none" },
+      vertical: { root: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none" }
+    },
+    size: {
+      sm: { item: "h-8 px-3 text-sm", icon: "size-4" },
+      md: { item: "h-10 px-4 text-sm", icon: "size-4.5" },
+      lg: { item: "h-11 px-5 text-base", icon: "size-5" }
+    },
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    }
+  },
+  compoundVariants: [
+    // Pressed (data-[state=on]) - matches Toggle's own per-color treatment.
+    { color: "primary", class: { item: "data-[state=on]:bg-[var(--ui-primary-soft)] data-[state=on]:text-[var(--ui-primary)] data-[state=on]:hover:bg-[var(--ui-primary-soft)]/70" } },
+    { color: "neutral", class: { item: "data-[state=on]:bg-[var(--ui-neutral-soft)] data-[state=on]:text-[var(--ui-text)] data-[state=on]:hover:bg-[var(--ui-neutral-soft)]/70" } },
+    { color: "secondary", class: { item: "data-[state=on]:bg-[var(--ui-secondary-soft)] data-[state=on]:text-[var(--ui-secondary)] data-[state=on]:hover:bg-[var(--ui-secondary-soft)]/70" } },
+    { color: "success", class: { item: "data-[state=on]:bg-[var(--ui-success-soft)] data-[state=on]:text-[var(--ui-success)] data-[state=on]:hover:bg-[var(--ui-success-soft)]/70" } },
+    { color: "danger", class: { item: "data-[state=on]:bg-[var(--ui-danger-soft)] data-[state=on]:text-[var(--ui-danger)] data-[state=on]:hover:bg-[var(--ui-danger-soft)]/70" } },
+    { color: "info", class: { item: "data-[state=on]:bg-[var(--ui-info-soft)] data-[state=on]:text-[var(--ui-info)] data-[state=on]:hover:bg-[var(--ui-info-soft)]/70" } },
+    { color: "warning", class: { item: "data-[state=on]:bg-[var(--ui-warning-soft)] data-[state=on]:text-[var(--ui-warning)] data-[state=on]:hover:bg-[var(--ui-warning-soft)]/70" } }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "md",
+    color: "primary"
+  }
+});

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

@@ -0,0 +1,92 @@
+export declare const toggleTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    size: {
+        sm: {
+            base: string;
+            icon: string;
+        };
+        md: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+    };
+    square: {
+        true: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    size: {
+        sm: {
+            base: string;
+            icon: string;
+        };
+        md: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+    };
+    square: {
+        true: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    size: {
+        sm: {
+            base: string;
+            icon: string;
+        };
+        md: {
+            base: string;
+            icon: string;
+        };
+        lg: {
+            base: string;
+            icon: string;
+        };
+    };
+    square: {
+        true: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}>>;
+export type ToggleThemeSlots = keyof (typeof toggleTheme)['slots'];