@sewadah/selaras 0.1.1

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

@@ -0,0 +1,185 @@
+export declare const inputTheme: 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: {};
+    };
+    hasTrailingIcon: {
+        true: {};
+    };
+    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: {};
+    };
+    hasTrailingIcon: {
+        true: {};
+    };
+    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: {};
+    };
+    hasTrailingIcon: {
+        true: {};
+    };
+    invalid: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    clear: string;
+}>>;
+export type InputThemeSlots = keyof (typeof inputTheme)['slots'];

package/dist/runtime/theme/input.js

@@ -0,0 +1,72 @@
+import { tv } from "tailwind-variants";
+export const inputTheme = tv({
+  slots: {
+    root: "relative inline-flex items-center w-full",
+    // not-focus: on the hover ring - without it, hovering while focused
+    // (unavoidable while the pointer sits on the input) let the plain gray
+    // hover ring beat the primary focus ring, since both are equal-
+    // specificity pseudo-class selectors and hover's happened to win. The
+    // focus ring's own color comes from the `color` variant below, not
+    // hardcoded here - hover's own color stays neutral regardless of
+    // `color`, matching every other component's own hover state.
+    base: "w-full rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] 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",
+    leadingIcon: "absolute start-2.5 shrink-0 text-[var(--ui-text-muted)]",
+    trailingIcon: "absolute end-2.5 shrink-0 text-[var(--ui-text-muted)]",
+    // A separate slot from trailingIcon (not reused) - that one is a
+    // decorative, non-interactive icon; this is a real dismiss button.
+    // Rendered as an <SButton> (ghost/neutral) - real chrome, focus ring
+    // and rounded-full (this dismiss-glyph family reads better circular
+    // than the library's usual rounded-md) come from Button's own theme;
+    // this slot only positions it and shrinks it below the input's full
+    // height (Button's own size steps match that height exactly, which
+    // once centered still touches both edges with zero margin) - explicit
+    // top-1/2 -translate-y-1/2 centering, not the root's items-center,
+    // since position:absolute drops it out of that flex flow.
+    clear: "absolute end-1 top-1/2 -translate-y-1/2 shrink-0 rounded-full"
+  },
+  variants: {
+    size: {
+      sm: { base: "h-8 px-2.5 text-sm", leadingIcon: "size-4", trailingIcon: "size-4", clear: "size-7" },
+      md: { base: "h-10 px-3 text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5", clear: "size-9" },
+      lg: { base: "h-11 px-3.5 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 a Nuxt-ecosystem component kit's own Input
+    // (confirmed by reading its docs directly, not assumed).
+    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: {}
+    },
+    hasTrailingIcon: {
+      true: {}
+    },
+    // Declared last (after color) so tailwind-merge lets its own focus:ring
+    // override win over color's - invalid should always show danger
+    // regardless of what color was also requested. See this session's own
+    // Checkbox/Switch fix 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)]" }
+    }
+  },
+  compoundVariants: [
+    { size: "sm", hasLeadingIcon: true, class: { base: "ps-8" } },
+    { size: "md", hasLeadingIcon: true, class: { base: "ps-9" } },
+    { size: "lg", hasLeadingIcon: true, class: { base: "ps-10" } },
+    { size: "sm", hasTrailingIcon: true, class: { base: "pe-8" } },
+    { size: "md", hasTrailingIcon: true, class: { base: "pe-9" } },
+    { size: "lg", hasTrailingIcon: true, class: { base: "pe-10" } }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});

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

@@ -0,0 +1,44 @@
+export declare const kbdTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>>;
+export type KbdThemeSlots = keyof (typeof kbdTheme)['slots'];

package/dist/runtime/theme/kbd.js

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants";
+export const kbdTheme = tv({
+  slots: {
+    base: "inline-flex items-center justify-center rounded-[var(--ui-radius-sm)] border border-[var(--ui-border)] bg-[var(--ui-bg-elevated)] font-mono font-medium text-[var(--ui-text-muted)]"
+  },
+  variants: {
+    size: {
+      sm: { base: "h-4.5 min-w-4.5 px-1 text-[10px]" },
+      md: { base: "h-5 min-w-5 px-1.5 text-xs" },
+      lg: { base: "h-6 min-w-6 px-2 text-sm" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

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

@@ -0,0 +1,74 @@
+export declare const modalTheme: import("tailwind-variants").TVReturnType<{
+    fullscreen: {
+        true: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    headerActions: string;
+    close: string;
+    maximize: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    fullscreen: {
+        true: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    headerActions: string;
+    close: string;
+    maximize: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    fullscreen: {
+        true: {
+            content: string;
+        };
+    };
+    transition: {
+        true: {
+            overlay: string;
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    description: string;
+    headerActions: string;
+    close: string;
+    maximize: string;
+    body: string;
+    footer: string;
+}>>;
+export type ModalThemeSlots = keyof (typeof modalTheme)['slots'];

package/dist/runtime/theme/modal.js

@@ -0,0 +1,58 @@
+import { tv } from "tailwind-variants";
+export const modalTheme = tv({
+  slots: {
+    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50",
+    // flex flex-col + the header/footer's own shrink-0 (native to a flex
+    // child, no extra class needed) let a tall body scroll internally via
+    // its own overflow-y-auto below, capped to the viewport height so a
+    // centered dialog can never overflow past the screen edges regardless
+    // of content length.
+    content: "fixed left-1/2 top-1/2 z-[var(--ui-z-modal)] flex max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col rounded-[var(--ui-radius-lg)] 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)]",
+    // Groups the maximize + close buttons as header's second flex item, so
+    // `header`'s own justify-between still splits [title block] / [buttons]
+    // correctly regardless of how many buttons are actually shown.
+    headerActions: "flex shrink-0 items-center gap-1",
+    // 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).
+    close: "shrink-0 rounded-full",
+    maximize: "shrink-0 rounded-full",
+    // flex-1 - without it, body only grows to its own content's height, so
+    // in `fullscreen` (a real fixed h-full, not just a max-h cap) the
+    // footer ends up stranded right after a short body instead of pinned
+    // to the bottom of the viewport. Harmless for the default compact
+    // card too: a flex-growing child in a max-h-capped column still just
+    // shrinks to fit short content the same as before - this only matters
+    // once the column's own height is truly fixed, not merely capped.
+    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: {
+    fullscreen: {
+      true: { content: "inset-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 rounded-none" }
+    },
+    // The animation classes live entirely in this variant rather than the
+    // base slot strings above - tailwind-merge doesn't know `animate-in`/
+    // `animate-none` conflict (they're `tw-animate-css` utilities, not
+    // core Tailwind, so they're outside its built-in conflict map), so
+    // adding an `animate-none` override on top of an already-present
+    // `animate-in` in the base string does NOT replace it - both classes
+    // would just coexist in the final string. Keeping the "on" state's
+    // classes here too (not just "off") sidesteps that entirely: only one
+    // branch's classes are ever present at once, nothing to conflict-
+    // resolve at all.
+    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",
+        content: "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"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    transition: true
+  }
+});

package/dist/runtime/theme/navigation-menu.d.ts

@@ -0,0 +1,224 @@
+export declare const navigationMenuTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            list: string;
+            content: string;
+            childList: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            content: string;
+            childList: string;
+            childItem: string;
+        };
+    };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        pill: "";
+        link: "";
+    };
+    active: {
+        true: {};
+        false: {
+            link: string;
+            childLink: string;
+        };
+    };
+    disabled: {
+        true: {
+            link: string;
+            childLink: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    collapsed: {
+        true: {
+            link: string;
+            linkLabel: string;
+        };
+    };
+    flyoutRoot: {
+        true: {
+            childList: string;
+            childItem: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    linkIcon: string;
+    linkIconFallback: string;
+    linkLabel: string;
+    linkTrailingIcon: string;
+    content: string;
+    viewport: string;
+    childList: string;
+    childItem: string;
+    childLink: string;
+    childLinkLabel: string;
+    groupLabel: string;
+    separator: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            list: string;
+            content: string;
+            childList: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            content: string;
+            childList: string;
+            childItem: string;
+        };
+    };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        pill: "";
+        link: "";
+    };
+    active: {
+        true: {};
+        false: {
+            link: string;
+            childLink: string;
+        };
+    };
+    disabled: {
+        true: {
+            link: string;
+            childLink: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    collapsed: {
+        true: {
+            link: string;
+            linkLabel: string;
+        };
+    };
+    flyoutRoot: {
+        true: {
+            childList: string;
+            childItem: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    linkIcon: string;
+    linkIconFallback: string;
+    linkLabel: string;
+    linkTrailingIcon: string;
+    content: string;
+    viewport: string;
+    childList: string;
+    childItem: string;
+    childLink: string;
+    childLinkLabel: string;
+    groupLabel: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+            list: string;
+            content: string;
+            childList: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            content: string;
+            childList: string;
+            childItem: string;
+        };
+    };
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        pill: "";
+        link: "";
+    };
+    active: {
+        true: {};
+        false: {
+            link: string;
+            childLink: string;
+        };
+    };
+    disabled: {
+        true: {
+            link: string;
+            childLink: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    collapsed: {
+        true: {
+            link: string;
+            linkLabel: string;
+        };
+    };
+    flyoutRoot: {
+        true: {
+            childList: string;
+            childItem: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+    linkIcon: string;
+    linkIconFallback: string;
+    linkLabel: string;
+    linkTrailingIcon: string;
+    content: string;
+    viewport: string;
+    childList: string;
+    childItem: string;
+    childLink: string;
+    childLinkLabel: string;
+    groupLabel: string;
+    separator: string;
+}>>;
+export type NavigationMenuThemeSlots = keyof (typeof navigationMenuTheme)['slots'];