@sewadah/selaras 0.8.0 → 0.10.0

package/dist/runtime/theme/date-picker.d.ts

@@ -2,12 +2,18 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         md: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         lg: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
     };
     invalid: {
@@ -25,6 +31,9 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     field: string;
     segment: string;
     separator: string;
+    clear: string;
+    buttonClear: string;
+    triggerIcon: string;
     content: string;
     mobileContent: string;
     header: string;
@@ -42,12 +51,18 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         md: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         lg: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
     };
     invalid: {
@@ -65,6 +80,9 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     field: string;
     segment: string;
     separator: string;
+    clear: string;
+    buttonClear: string;
+    triggerIcon: string;
     content: string;
     mobileContent: string;
     header: string;
@@ -82,12 +100,18 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         md: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
         lg: {
             field: string;
+            buttonClear: string;
+            triggerIcon: string;
         };
     };
     invalid: {
@@ -105,6 +129,9 @@ export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
     field: string;
     segment: string;
     separator: string;
+    clear: string;
+    buttonClear: string;
+    triggerIcon: string;
     content: string;
     mobileContent: string;
     header: string;

package/dist/runtime/theme/date-picker.js

@@ -18,6 +18,9 @@ export const datePickerTheme = tv({
     // Between the two segment groups in range mode - a plain en dash, not an
     // arrow glyph, so there's nothing directional to mirror under RTL.
     separator: "px-0.5 text-[var(--selaras-resolved-text-muted)]",
+    clear: "shrink-0",
+    buttonClear: "absolute top-1/2 -translate-y-1/2",
+    triggerIcon: "shrink-0",
     // Copied from theme/dropdown.ts's `content` - the more complete of this
     // library's two floating-panel precedents (directional slide-in, not
     // just fade/zoom).
@@ -55,9 +58,9 @@ export const datePickerTheme = tv({
   },
   variants: {
     size: {
-      sm: { field: "h-8 px-2.5 text-sm" },
-      md: { field: "h-10 px-3 text-sm" },
-      lg: { field: "h-11 px-3.5 text-base" }
+      sm: { field: "h-8 px-2.5 text-sm", buttonClear: "end-8", triggerIcon: "size-4" },
+      md: { field: "h-10 px-3 text-sm", buttonClear: "end-10", triggerIcon: "size-4.5" },
+      lg: { field: "h-11 px-3.5 text-base", buttonClear: "end-11", triggerIcon: "size-5" }
     },
     invalid: {
       true: { field: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus-within:ring-[var(--_selaras-color-focus)]" }

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

@@ -0,0 +1,155 @@
+export declare const editableTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            preview: string;
+            input: string;
+        };
+        md: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+        lg: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
+    };
+    multiline: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+    empty: {
+        true: {
+            preview: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    input: string;
+    controls: string;
+    edit: string;
+    submit: string;
+    cancel: string;
+}, undefined, {
+    size: {
+        sm: {
+            preview: string;
+            input: string;
+        };
+        md: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+        lg: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
+    };
+    multiline: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+    empty: {
+        true: {
+            preview: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    input: string;
+    controls: string;
+    edit: string;
+    submit: string;
+    cancel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            preview: string;
+            input: string;
+        };
+        md: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+        lg: {
+            preview: string;
+            input: string;
+            controls: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        warning: "";
+        info: "";
+    };
+    multiline: {
+        true: {
+            preview: string;
+            input: string;
+        };
+    };
+    empty: {
+        true: {
+            preview: string;
+        };
+    };
+    invalid: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    area: string;
+    preview: string;
+    input: string;
+    controls: string;
+    edit: string;
+    submit: string;
+    cancel: string;
+}>>;
+export type EditableThemeSlots = keyof (typeof editableTheme)['slots'];

package/dist/runtime/theme/editable.js

@@ -0,0 +1,25 @@
+import { tv } from "tailwind-variants";
+export const editableTheme = tv({
+  slots: {
+    root: "relative inline-flex w-full items-start gap-2",
+    area: "relative min-w-0 flex-1",
+    preview: "flex w-full items-center rounded-[var(--selaras-resolved-radius-md)] bg-transparent text-start text-[var(--selaras-resolved-text-default)] outline-none transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:cursor-not-allowed",
+    input: "w-full rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] placeholder:text-[var(--selaras-resolved-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    controls: "flex shrink-0 items-center gap-1",
+    edit: "",
+    submit: "",
+    cancel: ""
+  },
+  variants: {
+    size: {
+      sm: { preview: "min-h-8 px-2.5 text-sm", input: "h-8 px-2.5 text-sm" },
+      md: { preview: "min-h-10 px-3 text-sm", input: "h-10 px-3 text-sm", controls: "py-1" },
+      lg: { preview: "min-h-11 px-3.5 text-base", input: "h-11 px-3.5 text-base", controls: "py-0.5" }
+    },
+    color: { primary: "", secondary: "", neutral: "", success: "", danger: "", warning: "", info: "" },
+    multiline: { true: { preview: "whitespace-pre-wrap break-words py-2", input: "h-auto py-2" } },
+    empty: { true: { preview: "text-[var(--selaras-resolved-text-muted)]" } },
+    invalid: { true: { input: "ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" } }
+  },
+  defaultVariants: { size: "md", color: "primary" }
+});

package/dist/runtime/theme/field-clear-button.d.ts

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

package/dist/runtime/theme/field-clear-button.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+export const fieldClearButtonTheme = tv({
+  slots: {
+    base: "shrink-0 rounded-full text-[var(--selaras-resolved-text-muted)] hover:bg-[var(--selaras-resolved-border-default)] hover:text-[var(--selaras-resolved-text-default)] active:bg-[var(--selaras-resolved-border-hover)] focus-visible:outline-offset-0",
+    icon: "shrink-0"
+  },
+  variants: {
+    size: {
+      sm: { base: "size-6", icon: "size-4" },
+      md: { base: "size-7", icon: "size-4.5" },
+      lg: { base: "size-8", icon: "size-5" }
+    }
+  },
+  defaultVariants: { size: "md" }
+});

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

@@ -4,19 +4,16 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             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: {
@@ -42,6 +39,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -51,19 +50,16 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             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: {
@@ -89,6 +85,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -98,19 +96,16 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
             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: {
@@ -136,6 +131,8 @@ export declare const inputTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;

package/dist/runtime/theme/input.js

@@ -10,25 +10,20 @@ export const inputTheme = tv({
     // hardcoded here - hover's own color stays neutral regardless of
     // `color`, matching every other component's own hover state.
     base: "w-full rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)] ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] placeholder:text-[var(--selaras-resolved-text-muted)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    leading: "absolute top-1/2 -translate-y-1/2 start-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute top-1/2 -translate-y-1/2 end-0 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     leadingIcon: "absolute start-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     trailingIcon: "absolute end-2.5 shrink-0 text-[var(--selaras-resolved-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"
+    // The shared clear control owns its target size, icon, and feedback.
+    clear: "absolute end-1 top-1/2 -translate-y-1/2"
   },
   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" }
+      sm: { base: "h-8 px-2.5 text-sm", leadingIcon: "size-4", trailingIcon: "size-4" },
+      md: { base: "h-10 px-3 text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5" },
+      lg: { base: "h-11 px-3.5 text-base", leadingIcon: "size-5", trailingIcon: "size-5" }
     },
     // Focus-ring color only - the resting ring stays --selaras-resolved-border-default regardless
     // of `color`, matching a Nuxt-ecosystem component kit's own Input

package/dist/runtime/theme/listbox.js

@@ -15,7 +15,7 @@ export const listboxTheme = tv({
     itemContent: "flex min-w-0 flex-1 flex-col gap-0.5",
     icon: "size-4 shrink-0",
     indicator: "ms-auto flex size-4 shrink-0 items-center justify-center text-[var(--_selaras-color-indicator)]",
-    checkbox: "pointer-events-none flex size-4 shrink-0 items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] border border-[var(--selaras-resolved-border-default)] data-[state=checked]:border-[var(--_selaras-color-fill)] data-[state=checked]:bg-[var(--_selaras-color-fill)] data-[state=checked]:text-[var(--_selaras-color-on-fill)]",
+    checkbox: "pointer-events-none shrink-0",
     empty: "px-3 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]"
   },
   variants: {

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

@@ -2,12 +2,15 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             trigger: string;
+            icon: string;
         };
         md: {
             trigger: string;
+            icon: string;
         };
         lg: {
             trigger: string;
+            icon: string;
         };
     };
     color: {
@@ -29,6 +32,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;
@@ -49,12 +54,15 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             trigger: string;
+            icon: string;
         };
         md: {
             trigger: string;
+            icon: string;
         };
         lg: {
             trigger: string;
+            icon: string;
         };
     };
     color: {
@@ -76,6 +84,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;
@@ -96,12 +106,15 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             trigger: string;
+            icon: string;
         };
         md: {
             trigger: string;
+            icon: string;
         };
         lg: {
             trigger: string;
+            icon: string;
         };
     };
     color: {
@@ -123,6 +136,8 @@ export declare const selectTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     trigger: string;
+    leading: string;
+    trailing: string;
     value: string;
     chipOverflow: string;
     icon: string;

package/dist/runtime/theme/select.js

@@ -8,6 +8,8 @@ export const selectTheme = tv({
     // 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(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] px-3 py-1.5 text-sm ring-1 ring-inset ring-[var(--selaras-resolved-border-default)] outline-none transition-[color,background-color,box-shadow] not-focus:not-focus-within:not-data-[state=open]:hover:ring-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus:ring-2 focus:ring-[var(--_selaras-color-focus)] focus-within:ring-2 focus-within:ring-[var(--_selaras-color-focus)] data-[state=open]:ring-2 data-[state=open]:ring-[var(--_selaras-color-focus)] disabled:opacity-50 disabled:pointer-events-none",
+    leading: "absolute start-0 top-1/2 -translate-y-1/2 m-0 flex min-w-0 items-center gap-1 border-0 p-0 ps-2.5 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
+    trailing: "absolute end-0 top-1/2 -translate-y-1/2 m-0 flex min-w-0 items-center gap-1 border-0 p-0 pe-1 text-sm text-[var(--selaras-resolved-text-muted)] disabled:opacity-50",
     value: "flex-1 truncate text-start text-[var(--selaras-resolved-text-default)] data-[placeholder]:text-[var(--selaras-resolved-text-muted)]",
     // Both chip display branches render a real Chip (see
     // ComboboxSelectBase.vue) instead of hand-rolled markup, styled/
@@ -21,13 +23,14 @@ export const selectTheme = tv({
     // soft (the same pairing Chip's own soft variant uses) clears 6.5:1.
     chipOverflow: "inline-flex items-center rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--_selaras-color-subtle)] px-2 py-0.5 text-xs text-[var(--_selaras-color-text)]",
     icon: "shrink-0 text-[var(--selaras-resolved-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(--selaras-resolved-radius-sm)] p-0.5 text-[var(--selaras-resolved-text-muted)] transition-colors hover:bg-[var(--selaras-resolved-border-default)] hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
-    searchWrapper: "flex items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-2",
-    searchInput: "h-9 min-w-16 flex-1 bg-transparent text-sm text-[var(--selaras-resolved-text-default)] outline-none placeholder:text-[var(--selaras-resolved-text-muted)]",
+    // Layout only; FieldClearButton owns the shared interaction treatment.
+    clear: "",
+    dropdown: "inline-flex shrink-0 items-center justify-center rounded-[var(--selaras-resolved-radius-sm)] p-0.5 text-[var(--selaras-resolved-text-muted)] transition-colors hover:bg-[var(--selaras-resolved-border-default)] hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
+    searchWrapper: "box-content flex h-9 items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-2",
+    // The popup owns its search row height. Inside a trigger, stretch the
+    // editor into the available space instead of adding a fixed input
+    // height to the trigger's vertical padding.
+    searchInput: "min-w-16 flex-1 self-stretch bg-transparent text-sm text-[var(--selaras-resolved-text-default)] outline-none placeholder:text-[var(--selaras-resolved-text-muted)]",
     content: "z-[var(--selaras-resolved-z-dropdown)] max-h-72 min-w-[var(--reka-combobox-trigger-width)] overflow-hidden rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-md)] ring-1 ring-[var(--selaras-resolved-border-default)] 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 `adaptive` path's own content wrapper - none of `content`'s
     // own popover chrome (ring/shadow/rounded/animate-in, sized off the
@@ -47,9 +50,9 @@ export const selectTheme = tv({
   },
   variants: {
     size: {
-      sm: { trigger: "min-h-8 text-sm" },
-      md: { trigger: "min-h-10" },
-      lg: { trigger: "min-h-11 text-base" }
+      sm: { trigger: "min-h-8 py-1 text-sm", icon: "size-4" },
+      md: { trigger: "min-h-10", icon: "size-4.5" },
+      lg: { trigger: "min-h-11 text-base", icon: "size-5" }
     },
     // Registered custom roles have no finite Tailwind Variants branch. Keep
     // the semantic focus styling in the base slot so every registered role