@sewadah/selaras 0.1.1

package/dist/runtime/theme/form-field.d.ts

@@ -0,0 +1,95 @@
+export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            label: string;
+        };
+        md: {};
+        lg: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+        };
+    };
+    orientation: {
+        vertical: {};
+        horizontal: {
+            body: string;
+            header: string;
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    body: string;
+    header: string;
+    label: string;
+    required: string;
+    description: string;
+    container: string;
+    hint: string;
+    error: string;
+}, undefined, {
+    size: {
+        sm: {
+            label: string;
+        };
+        md: {};
+        lg: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+        };
+    };
+    orientation: {
+        vertical: {};
+        horizontal: {
+            body: string;
+            header: string;
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    body: string;
+    header: string;
+    label: string;
+    required: string;
+    description: string;
+    container: string;
+    hint: string;
+    error: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            label: string;
+        };
+        md: {};
+        lg: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+        };
+    };
+    orientation: {
+        vertical: {};
+        horizontal: {
+            body: string;
+            header: string;
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    body: string;
+    header: string;
+    label: string;
+    required: string;
+    description: string;
+    container: string;
+    hint: string;
+    error: string;
+}>>;
+export type FormFieldThemeSlots = keyof (typeof formFieldTheme)['slots'];

package/dist/runtime/theme/form-field.js

@@ -0,0 +1,37 @@
+import { tv } from "tailwind-variants";
+export const formFieldTheme = tv({
+  slots: {
+    root: "flex flex-col gap-1.5",
+    // Groups label+description as one unit next to `container` in
+    // horizontal orientation - plain flex-col stacking (matching root's
+    // own default look exactly) in vertical.
+    body: "flex flex-col gap-1.5",
+    header: "",
+    label: "text-sm font-medium text-[var(--ui-text)]",
+    required: "ms-0.5 text-[var(--ui-danger)]",
+    description: "text-xs text-[var(--ui-text-muted)]",
+    container: "",
+    hint: "text-xs text-[var(--ui-text-muted)]",
+    error: "text-xs text-[var(--ui-danger)]"
+  },
+  variants: {
+    // Scales FormField's own label/description/hint/error text to match
+    // the size passed to the wrapped control (that part already flows
+    // through FormFieldContext - this is just making FormField's own
+    // text visually agree with it too).
+    size: {
+      sm: { label: "text-xs" },
+      md: {},
+      // matches the base slot classes above exactly
+      lg: { label: "text-base", description: "text-sm", hint: "text-sm", error: "text-sm" }
+    },
+    orientation: {
+      vertical: {},
+      horizontal: { body: "flex-row items-start gap-3", header: "shrink-0", container: "flex-1 min-w-0" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    orientation: "vertical"
+  }
+});

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

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

package/dist/runtime/theme/header.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+export const headerTheme = tv({
+  slots: {
+    root: "sticky top-0 z-20 flex h-16 shrink-0 items-center justify-between gap-4 border-b border-[var(--ui-border)] bg-[var(--ui-bg)] px-4 sm:px-6",
+    left: "flex min-w-0 items-center gap-2",
+    right: "flex shrink-0 items-center gap-2"
+  }
+});

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

@@ -0,0 +1,80 @@
+export declare const iconTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    color: {
+        primary: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: {
+            base: string;
+        };
+        neutral: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>>;
+export type IconThemeSlots = keyof (typeof iconTheme)['slots'];

package/dist/runtime/theme/icon.js

@@ -0,0 +1,26 @@
+import { tv } from "tailwind-variants";
+export const iconTheme = tv({
+  slots: {
+    base: "shrink-0"
+  },
+  variants: {
+    // No default - an unset color inherits currentColor from wherever the
+    // icon is placed, which is what every internal usage elsewhere in this
+    // library already relies on (e.g. Input's --ui-text-muted icon slots).
+    // No size variant (deliberately) - every internal consumer needs its
+    // own precise size (size-2.5/3/3.5/4/4.5/5/6 depending on component and
+    // slot), none of which map cleanly onto a shared sm/md/lg scale. Pass
+    // whatever size class you need via `class` instead, same as any other
+    // icon usage - a raw `class="text-*"` still overrides `color` too,
+    // since both just flow through the same tailwind-merge below.
+    color: {
+      primary: { base: "text-[var(--ui-primary)]" },
+      neutral: { base: "text-[var(--ui-text)]" },
+      secondary: { base: "text-[var(--ui-secondary)]" },
+      success: { base: "text-[var(--ui-success)]" },
+      danger: { base: "text-[var(--ui-danger)]" },
+      info: { base: "text-[var(--ui-info)]" },
+      warning: { base: "text-[var(--ui-warning)]" }
+    }
+  }
+});

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

@@ -0,0 +1,95 @@
+export declare const inputGroupTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    /**
+     * Same mechanism as button-group.ts, plus a second, deeper rule per
+     * side: Button's own root IS its styled box, so the shallow
+     * `[&>*:not(...)]` rule alone is enough for it - but Input/Textarea/
+     * Select wrap their real ring/radius one level deeper (their root is
+     * a plain unstyled div), so the shallow rule is a harmless no-op for
+     * them. The `[data-ui-group-item]` descendant rule reaches that real
+     * inner element instead (see Input.vue/Textarea.vue/
+     * ComboboxSelectBase.vue for where that attribute lives). Both rules
+     * stay active together - each is a no-op on the child type the other
+     * one targets.
+     *
+     * `:focus-within` (not ButtonGroup's `:focus-visible`) - it fires
+     * whether the focused element is the child itself (Button) or nested
+     * inside it (Input/Textarea/Select's real focusable element), and
+     * matches Input's own existing convention of an unconditional
+     * `focus:` ring rather than `focus-visible:`. `:hover` needs no
+     * change - it already applies to an ancestor whenever the pointer is
+     * over it or any descendant.
+     */
+    root: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    /**
+     * Same mechanism as button-group.ts, plus a second, deeper rule per
+     * side: Button's own root IS its styled box, so the shallow
+     * `[&>*:not(...)]` rule alone is enough for it - but Input/Textarea/
+     * Select wrap their real ring/radius one level deeper (their root is
+     * a plain unstyled div), so the shallow rule is a harmless no-op for
+     * them. The `[data-ui-group-item]` descendant rule reaches that real
+     * inner element instead (see Input.vue/Textarea.vue/
+     * ComboboxSelectBase.vue for where that attribute lives). Both rules
+     * stay active together - each is a no-op on the child type the other
+     * one targets.
+     *
+     * `:focus-within` (not ButtonGroup's `:focus-visible`) - it fires
+     * whether the focused element is the child itself (Button) or nested
+     * inside it (Input/Textarea/Select's real focusable element), and
+     * matches Input's own existing convention of an unconditional
+     * `focus:` ring rather than `focus-visible:`. `:hover` needs no
+     * change - it already applies to an ancestor whenever the pointer is
+     * over it or any descendant.
+     */
+    root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    /**
+     * Same mechanism as button-group.ts, plus a second, deeper rule per
+     * side: Button's own root IS its styled box, so the shallow
+     * `[&>*:not(...)]` rule alone is enough for it - but Input/Textarea/
+     * Select wrap their real ring/radius one level deeper (their root is
+     * a plain unstyled div), so the shallow rule is a harmless no-op for
+     * them. The `[data-ui-group-item]` descendant rule reaches that real
+     * inner element instead (see Input.vue/Textarea.vue/
+     * ComboboxSelectBase.vue for where that attribute lives). Both rules
+     * stay active together - each is a no-op on the child type the other
+     * one targets.
+     *
+     * `:focus-within` (not ButtonGroup's `:focus-visible`) - it fires
+     * whether the focused element is the child itself (Button) or nested
+     * inside it (Input/Textarea/Select's real focusable element), and
+     * matches Input's own existing convention of an unconditional
+     * `focus:` ring rather than `focus-visible:`. `:hover` needs no
+     * change - it already applies to an ancestor whenever the pointer is
+     * over it or any descendant.
+     */
+    root: string;
+}>>;
+export type InputGroupThemeSlots = keyof (typeof inputGroupTheme)['slots'];

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

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+export const inputGroupTheme = tv({
+  slots: {
+    /**
+     * Same mechanism as button-group.ts, plus a second, deeper rule per
+     * side: Button's own root IS its styled box, so the shallow
+     * `[&>*:not(...)]` rule alone is enough for it - but Input/Textarea/
+     * Select wrap their real ring/radius one level deeper (their root is
+     * a plain unstyled div), so the shallow rule is a harmless no-op for
+     * them. The `[data-ui-group-item]` descendant rule reaches that real
+     * inner element instead (see Input.vue/Textarea.vue/
+     * ComboboxSelectBase.vue for where that attribute lives). Both rules
+     * stay active together - each is a no-op on the child type the other
+     * one targets.
+     *
+     * `:focus-within` (not ButtonGroup's `:focus-visible`) - it fires
+     * whether the focused element is the child itself (Button) or nested
+     * inside it (Input/Textarea/Select's real focusable element), and
+     * matches Input's own existing convention of an unconditional
+     * `focus:` ring rather than `focus-visible:`. `:hover` needs no
+     * change - it already applies to an ancestor whenever the pointer is
+     * over it or any descendant.
+     */
+    root: "[&>*]:relative [&>*:hover]:z-10 [&>*:focus-within]:z-10"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "inline-flex [&>*:not(:first-child)]:-ms-px [&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none [&>*:not(:first-child)_[data-ui-group-item]]:rounded-s-none [&>*:not(:last-child)_[data-ui-group-item]]:rounded-e-none"
+      },
+      vertical: {
+        root: "inline-flex flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)_[data-ui-group-item]]:rounded-t-none [&>*:not(:last-child)_[data-ui-group-item]]:rounded-b-none"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});

package/dist/runtime/theme/input-number.d.ts

@@ -0,0 +1,164 @@
+export declare const inputNumberTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+    color: {
+        primary: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+    };
+    orientation: {
+        horizontal: {};
+        vertical: {
+            input: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    stepper: string;
+    stepperButton: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+    color: {
+        primary: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+    };
+    orientation: {
+        horizontal: {};
+        vertical: {
+            input: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    stepper: string;
+    stepperButton: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
+    };
+    color: {
+        primary: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+    };
+    orientation: {
+        horizontal: {};
+        vertical: {
+            input: string;
+        };
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    stepper: string;
+    stepperButton: string;
+}>>;
+export type InputNumberThemeSlots = keyof (typeof inputNumberTheme)['slots'];

package/dist/runtime/theme/input-number.js

@@ -0,0 +1,76 @@
+import { tv } from "tailwind-variants";
+export const inputNumberTheme = tv({
+  slots: {
+    // Same ring/bg/radius/hover/focus-within box language as Input's own
+    // `base` (theme/input.ts) - this wraps real interactive children
+    // (decrement button, input, increment button) rather than being the
+    // input itself, so the focus ring keys off :focus-within, and the
+    // disabled look off :has(:disabled) instead of a bare `disabled` prop.
+    // Scoped to `has-[input:disabled]` specifically, not a bare
+    // `has-[:disabled]` - the two step buttons independently become
+    // `:disabled` whenever they hit their own min/max boundary (e.g. a
+    // fresh 0-23 hour field starts at its own minimum), which is normal,
+    // expected state, not "the whole control is disabled." A bare
+    // `has-[:disabled]` matched that too and killed pointer-events for the
+    // entire root - including the input and the OTHER, non-boundary button
+    // - the moment either step button reached its own boundary; only the
+    // real `disabled` prop (bound solely to the <input>) should trigger this.
+    // `relative` is unused in the default horizontal layout but required by
+    // `stepper` below once orientation="vertical" positions against it.
+    // not-focus-within: on the hover ring specifically - without it, hovering
+    // anywhere in here (which is unavoidable while clicking the +/- buttons,
+    // since the pointer sits right on top of them) let the plain gray hover
+    // ring beat the primary focus-within ring in the cascade, since both are
+    // equal-specificity pseudo-class selectors and hover's happened to win.
+    // bg's own hover change is left unscoped - there's no competing
+    // focus-driven background to conflict with, so it can keep showing
+    // regardless of focus state.
+    root: "relative inline-flex w-full items-center gap-1 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] ring-1 ring-inset ring-[var(--ui-border)] transition-[color,background-color,box-shadow] not-focus-within:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus-within:ring-2 has-[input:disabled]:opacity-50 has-[input:disabled]:pointer-events-none",
+    // Borderless/transparent - root already carries the visual box, this is
+    // just the editable text. Centered + tabular-nums so digits don't shift
+    // width as the value changes - orientation="vertical" overrides the
+    // centering below, since the stepper only occupies the end edge there.
+    input: "w-full min-w-0 flex-1 border-0 bg-transparent text-center tabular-nums text-[var(--ui-text)] outline-none placeholder:text-[var(--ui-text-muted)] disabled:cursor-not-allowed",
+    // orientation="vertical" only - a compact up/down pair pinned to the
+    // end edge, replacing the two full-height flanking buttons.
+    stepper: "absolute end-1 inset-y-1 flex flex-col justify-center gap-px",
+    // Each vertical stepper button - not a <SButton> composition (see
+    // DatePicker.vue's drill-down heading for the same precedent): Button's
+    // own size scale has no step small enough for two of these to stack
+    // inside one field's own height, and fighting its fixed sm classes with
+    // overrides is more fragile than a plain, purpose-built button here.
+    stepperButton: "flex h-3.5 w-5 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text)] disabled:opacity-50 disabled:pointer-events-none"
+  },
+  variants: {
+    size: {
+      sm: { root: "h-8 px-1", input: "text-sm" },
+      md: { root: "h-10 px-1.5", input: "text-sm" },
+      lg: { root: "h-11 px-2", input: "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: { root: "focus-within:ring-[var(--ui-primary)]" },
+      neutral: { root: "focus-within:ring-[var(--ui-bg-inverted)]" },
+      secondary: { root: "focus-within:ring-[var(--ui-secondary)]" },
+      success: { root: "focus-within:ring-[var(--ui-success)]" },
+      danger: { root: "focus-within:ring-[var(--ui-danger)]" },
+      info: { root: "focus-within:ring-[var(--ui-info)]" },
+      warning: { root: "focus-within:ring-[var(--ui-warning)]" }
+    },
+    orientation: {
+      horizontal: {},
+      vertical: { input: "text-start ps-1.5 pe-7" }
+    },
+    // Declared last (after color) so tailwind-merge lets its own
+    // focus-within:ring override win over color's - see input.ts for why
+    // declaration order (not runtime call order) is what decides this.
+    invalid: {
+      true: { root: "ring-[var(--ui-danger)] hover:ring-[var(--ui-danger)] focus-within:ring-[var(--ui-danger)]" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});