@sewadah/selaras 0.8.0 → 0.10.0

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

@@ -4,19 +4,16 @@ export declare const textareaTheme: 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: {
@@ -51,6 +48,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -60,19 +59,16 @@ export declare const textareaTheme: 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: {
@@ -107,6 +103,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;
@@ -116,19 +114,16 @@ export declare const textareaTheme: 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: {
@@ -163,6 +158,8 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     base: string;
+    leading: string;
+    trailing: string;
     leadingIcon: string;
     trailingIcon: string;
     clear: string;

package/dist/runtime/theme/textarea.js

@@ -9,15 +9,17 @@ export const textareaTheme = tv({
     // 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.
+    leading: "absolute top-1 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 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-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     trailingIcon: "absolute end-3 top-2.5 shrink-0 text-[var(--selaras-resolved-text-muted)]",
-    clear: "absolute end-1 top-1 shrink-0 rounded-full"
+    clear: "absolute end-1 top-1"
   },
   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" }
+      sm: { base: "text-sm", leadingIcon: "size-4", trailingIcon: "size-4" },
+      md: { base: "text-sm", leadingIcon: "size-4.5", trailingIcon: "size-4.5" },
+      lg: { base: "text-base", leadingIcon: "size-5", trailingIcon: "size-5" }
     },
     // Focus-ring color only - the resting ring stays --selaras-resolved-border-default regardless
     // of `color`, matching Input's own scope (see input.ts).

package/dist/runtime/theme/toolbar-button.d.ts

@@ -0,0 +1,65 @@
+export declare const toolbarButtonTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    variant: {
+        solid: {};
+        soft: {};
+        subtle: {};
+        outline: {};
+        ghost: {
+            base: string;
+        };
+        text: {};
+        link: {};
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+}, undefined, {
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    variant: {
+        solid: {};
+        soft: {};
+        subtle: {};
+        outline: {};
+        ghost: {
+            base: string;
+        };
+        text: {};
+        link: {};
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    variant: {
+        solid: {};
+        soft: {};
+        subtle: {};
+        outline: {};
+        ghost: {
+            base: string;
+        };
+        text: {};
+        link: {};
+    };
+}, {
+    base: string;
+    leadingIcon: string;
+    trailingIcon: string;
+}>>;
+export type ToolbarButtonThemeSlots = keyof (typeof toolbarButtonTheme)['slots'];

package/dist/runtime/theme/toolbar-button.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+export const toolbarButtonTheme = tv({
+  slots: {
+    base: "",
+    leadingIcon: "",
+    trailingIcon: ""
+  },
+  variants: {
+    size: { sm: {}, md: {}, lg: {} },
+    variant: {
+      solid: {},
+      soft: {},
+      subtle: {},
+      outline: {},
+      ghost: { base: "text-[var(--selaras-resolved-text-muted)] hover:bg-[var(--selaras-resolved-surface-elevated)] hover:text-[var(--selaras-resolved-text-default)] data-[state=on]:bg-[var(--_selaras-color-subtle)] data-[state=on]:text-[var(--_selaras-color-on-subtle)] data-[state=on]:hover:bg-[var(--_selaras-color-subtle-hover)]" },
+      text: {},
+      link: {}
+    }
+  },
+  defaultVariants: { variant: "ghost" }
+});

package/dist/runtime/theme/toolbar-separator.d.ts

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

package/dist/runtime/theme/toolbar-separator.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+export const toolbarSeparatorTheme = tv({
+  slots: { root: "shrink-0 bg-[var(--selaras-resolved-border-default)]" },
+  variants: {
+    orientation: { vertical: { root: "mx-1 h-5 w-px" }, horizontal: { root: "my-1 h-px w-full" } }
+  },
+  defaultVariants: { orientation: "vertical" }
+});

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

@@ -0,0 +1,74 @@
+export declare const toolbarToggleGroupTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            icon: string;
+        };
+        md: {
+            icon: string;
+        };
+        lg: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    icon: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            icon: string;
+        };
+        md: {
+            icon: string;
+        };
+        lg: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            icon: string;
+        };
+        md: {
+            icon: string;
+        };
+        lg: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    icon: string;
+}>>;
+export type ToolbarToggleGroupThemeSlots = keyof (typeof toolbarToggleGroupTheme)['slots'];

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

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+export const toolbarToggleGroupTheme = tv({
+  slots: {
+    root: "inline-flex gap-1",
+    item: "text-[var(--selaras-resolved-text-muted)] hover:bg-[var(--selaras-resolved-surface-elevated)] hover:text-[var(--selaras-resolved-text-default)] data-[state=on]:bg-[var(--_selaras-color-subtle)] data-[state=on]:text-[var(--_selaras-color-on-subtle)] data-[state=on]:hover:bg-[var(--_selaras-color-subtle-hover)]",
+    icon: "shrink-0"
+  },
+  variants: {
+    orientation: { horizontal: { root: "flex-row" }, vertical: { root: "flex-col" } },
+    size: { sm: { icon: "size-4" }, md: { icon: "size-4.5" }, lg: { icon: "size-5" } }
+  },
+  defaultVariants: { orientation: "horizontal", size: "sm" }
+});

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

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

package/dist/runtime/theme/toolbar.js

@@ -0,0 +1,11 @@
+import { tv } from "tailwind-variants";
+export const toolbarTheme = tv({
+  slots: { root: "flex gap-1 rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)] p-1" },
+  variants: {
+    orientation: {
+      horizontal: { root: "flex-row flex-wrap items-center" },
+      vertical: { root: "inline-flex flex-col items-stretch" }
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});

package/dist/runtime/theme-config.d.ts

@@ -32,6 +32,8 @@ import type { dashboardSidebarTheme, DashboardSidebarThemeSlots } from './theme/
 import type { datePickerTheme, DatePickerThemeSlots } from './theme/date-picker.js';
 import type { drawerTheme, DrawerThemeSlots } from './theme/drawer.js';
 import type { dropdownTheme, DropdownThemeSlots } from './theme/dropdown.js';
+import type { editableTheme, EditableThemeSlots } from './theme/editable.js';
+import type { fieldClearButtonTheme, FieldClearButtonThemeSlots } from './theme/field-clear-button.js';
 import type { fileTreeTheme, FileTreeThemeSlots } from './theme/file-tree.js';
 import type { fileUploadTheme, FileUploadThemeSlots } from './theme/file-upload.js';
 import type { formFieldTheme, FormFieldThemeSlots } from './theme/form-field.js';
@@ -72,6 +74,10 @@ import type { timelineTheme, TimelineThemeSlots } from './theme/timeline.js';
 import type { toastTheme, ToastThemeSlots } from './theme/toast.js';
 import type { toggleTheme, ToggleThemeSlots } from './theme/toggle.js';
 import type { toggleGroupTheme, ToggleGroupThemeSlots } from './theme/toggle-group.js';
+import type { toolbarTheme, ToolbarThemeSlots } from './theme/toolbar.js';
+import type { toolbarButtonTheme, ToolbarButtonThemeSlots } from './theme/toolbar-button.js';
+import type { toolbarSeparatorTheme, ToolbarSeparatorThemeSlots } from './theme/toolbar-separator.js';
+import type { toolbarToggleGroupTheme, ToolbarToggleGroupThemeSlots } from './theme/toolbar-toggle-group.js';
 import type { tooltipTheme, TooltipThemeSlots } from './theme/tooltip.js';
 import type { transferListTheme, TransferListThemeSlots } from './theme/transfer-list.js';
 import type { treeTheme, TreeThemeSlots } from './theme/tree.js';
@@ -101,6 +107,7 @@ type ContentNavigationVariants = VariantProps<typeof contentNavigationTheme>;
 type ContentSurroundVariants = VariantProps<typeof contentSurroundTheme>;
 type ContentTocVariants = VariantProps<typeof contentTocTheme>;
 type InputVariants = VariantProps<typeof inputTheme>;
+type EditableVariants = VariantProps<typeof editableTheme>;
 type InputGroupVariants = VariantProps<typeof inputGroupTheme>;
 type InputNumberVariants = VariantProps<typeof inputNumberTheme>;
 type KbdVariants = VariantProps<typeof kbdTheme>;
@@ -279,6 +286,15 @@ export interface ThemeComponentRegistry {
         conditions: WithRegisteredColor<Pick<InputVariants, 'color' | 'size' | 'hasLeadingIcon' | 'hasTrailingIcon' | 'invalid'>>;
         defaults: WithRegisteredColor<Pick<InputVariants, 'color' | 'size'>>;
     };
+    fieldClearButton: {
+        slots: FieldClearButtonThemeSlots;
+        conditions: Pick<VariantProps<typeof fieldClearButtonTheme>, 'size'>;
+    };
+    editable: {
+        slots: EditableThemeSlots;
+        conditions: WithRegisteredColor<Pick<EditableVariants, 'color' | 'size' | 'invalid' | 'empty' | 'multiline'>>;
+        defaults: WithRegisteredColor<Pick<EditableVariants, 'color' | 'size'>>;
+    };
     inputGroup: {
         slots: InputGroupThemeSlots;
         conditions: Pick<InputGroupVariants, 'orientation'>;
@@ -458,6 +474,26 @@ export interface ThemeComponentRegistry {
         slots: SlideoverThemeSlots;
         conditions: Pick<SlideoverVariants, 'side' | 'inset' | 'transition'>;
     };
+    toolbar: {
+        slots: ToolbarThemeSlots;
+        conditions: Pick<VariantProps<typeof toolbarTheme>, 'orientation'>;
+        defaults: {
+            size?: 'sm' | 'md' | 'lg';
+            color?: ColorRole;
+        };
+    };
+    toolbarButton: {
+        slots: ToolbarButtonThemeSlots;
+        conditions: Pick<VariantProps<typeof toolbarButtonTheme>, 'size' | 'variant'>;
+    };
+    toolbarToggleGroup: {
+        slots: ToolbarToggleGroupThemeSlots;
+        conditions: Pick<VariantProps<typeof toolbarToggleGroupTheme>, 'size' | 'orientation'>;
+    };
+    toolbarSeparator: {
+        slots: ToolbarSeparatorThemeSlots;
+        conditions: Pick<VariantProps<typeof toolbarSeparatorTheme>, 'orientation'>;
+    };
     tooltip: {
         slots: TooltipThemeSlots;
         conditions: Pick<TooltipVariants, never>;

package/dist/runtime/types/index.d.ts

@@ -37,6 +37,7 @@ export type * from '../components/DashboardSidebarToggle.vue';
 export type * from '../components/DatePicker.vue';
 export type * from '../components/Drawer.vue';
 export type * from '../components/Dropdown.vue';
+export type * from '../components/Editable.vue';
 export type * from '../components/FileTree.vue';
 export type * from '../components/FileUpload.vue';
 export type * from '../components/FormField.vue';
@@ -83,6 +84,10 @@ export type * from '../components/Timeline.vue';
 export type * from '../components/Toast.vue';
 export type * from '../components/Toggle.vue';
 export type * from '../components/ToggleGroup.vue';
+export type * from '../components/Toolbar.vue';
+export type * from '../components/ToolbarButton.vue';
+export type * from '../components/ToolbarSeparator.vue';
+export type * from '../components/ToolbarToggleGroup.vue';
 export type * from '../components/Tooltip.vue';
 export type * from '../components/TransferList.vue';
 export type * from '../components/Tree.vue';
@@ -97,6 +102,7 @@ export type { ThemeComponentRegistry, ThemeConfiguration, ThemeDefaults, ThemeUi
 export type { ArrowConfig, RoundedArrowConfig } from '../utils/arrow.js';
 export type { AutocompleteValue } from '../utils/autocomplete-contracts.js';
 export type { BuiltinColorName, ColorRecipe, ColorRecipeInput, ColorRole, RuntimeColorOverrides, RuntimeThemeMode, RuntimeTokenOverrides } from '../utils/color-registry.js';
+export type { FieldAdornmentSlotProps } from '../utils/field-adornments.js';
 export type { FunctionalTokenOverrides, GeometryTokenOverrides, ThemeTokenOverrides } from '../utils/functional-tokens.js';
 export type { IconRegistry } from '../utils/icons.js';
 export { defaultIcons } from '../utils/icons.js';

package/dist/runtime/utils/field-adornments.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'vue';
+export interface FieldAdornmentSlotProps {
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    /** Button size that fits inside the field. */
+    buttonSize: 'sm' | 'md';
+}
+/** Reserve the rendered width of custom content, including dynamic suffixes. */
+export declare function useFieldAdornments(): {
+    leading: import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
+    trailing: import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
+    padding: (hasLeading: boolean, hasTrailing: boolean, trailingExtra?: string) => CSSProperties | undefined;
+    clearOffset: () => CSSProperties;
+};

package/dist/runtime/utils/field-adornments.js

@@ -0,0 +1,36 @@
+import { shallowRef, watchEffect } from "vue";
+export function useFieldAdornments() {
+  const leading = shallowRef(null);
+  const trailing = shallowRef(null);
+  const leadingWidth = shallowRef();
+  const trailingWidth = shallowRef();
+  watchEffect((onCleanup) => {
+    const start = leading.value;
+    const end = trailing.value;
+    function measure() {
+      leadingWidth.value = start ? `${start.getBoundingClientRect().width}px` : void 0;
+      trailingWidth.value = end ? `${end.getBoundingClientRect().width}px` : void 0;
+    }
+    measure();
+    if (!start && !end || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(measure);
+    if (start)
+      observer.observe(start);
+    if (end)
+      observer.observe(end);
+    onCleanup(() => observer.disconnect());
+  }, { flush: "post" });
+  function padding(hasLeading, hasTrailing, trailingExtra = "0rem") {
+    if (!hasLeading && !hasTrailing)
+      return;
+    return {
+      paddingInlineStart: hasLeading ? `calc(${leadingWidth.value ?? "2rem"} + 0.5rem)` : void 0,
+      paddingInlineEnd: hasTrailing ? `calc(${trailingWidth.value ?? "2rem"} + 0.5rem + ${trailingExtra})` : void 0
+    };
+  }
+  function clearOffset() {
+    return { insetInlineEnd: `calc(${trailingWidth.value ?? "2rem"} + 0.25rem)` };
+  }
+  return { leading, trailing, padding, clearOffset };
+}

package/dist/runtime/utils/field-clear.d.ts

@@ -0,0 +1,9 @@
+/** Presence follows native boolean-attribute semantics, including readonly="". */
+export declare function isFieldReadonly(value: unknown): boolean;
+export declare function canClearField(clearable: boolean | undefined, hasContent: boolean, disabled: boolean | undefined, readonly?: boolean): boolean;
+/** The clear target is smaller than the field; glyph sizing is independent. */
+export declare const fieldClearWidths: {
+    readonly sm: "1.5rem";
+    readonly md: "1.75rem";
+    readonly lg: "2rem";
+};

package/dist/runtime/utils/field-clear.js

@@ -0,0 +1,7 @@
+export function isFieldReadonly(value) {
+  return value !== void 0 && value !== null && value !== false;
+}
+export function canClearField(clearable, hasContent, disabled, readonly = false) {
+  return !!clearable && hasContent && !disabled && !readonly;
+}
+export const fieldClearWidths = { sm: "1.5rem", md: "1.75rem", lg: "2rem" };

package/dist/runtime/utils/icons.d.ts

@@ -1,4 +1,5 @@
 export interface IconRegistry {
+    edit: string;
     close: string;
     check: string;
     indeterminate: string;

package/dist/runtime/utils/icons.js

@@ -3,6 +3,7 @@ export function isFeedbackIntent(value) {
   return feedbackIntentNames.includes(value);
 }
 export const defaultIcons = {
+  edit: "hugeicons:pencil-edit-01",
   close: "hugeicons:cancel-01",
   check: "hugeicons:tick-02",
   indeterminate: "hugeicons:minus-sign",

package/dist/runtime/utils/messages.d.ts

@@ -1,4 +1,8 @@
 export interface MessageRegistry {
+    edit: string;
+    save: string;
+    editableInput: string;
+    editablePlaceholder: string;
     loading: string;
     clear: string;
     close: string;

package/dist/runtime/utils/messages.js

@@ -1,4 +1,8 @@
 export const defaultMessages = {
+  edit: "Edit",
+  save: "Save",
+  editableInput: "Editable text",
+  editablePlaceholder: "Click to edit",
   loading: "Loading",
   clear: "Clear",
   close: "Close",

package/dist/runtime/utils/select-contracts.d.ts

@@ -2,6 +2,7 @@ import type { VariantProps } from 'tailwind-variants';
 import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from './arrow.js';
 import type { ColorRole } from './color-registry.js';
+import type { FieldAdornmentSlotProps } from './field-adornments.js';
 import type { OverlayPortal, OverlayPositioning } from './overlay.js';
 import type { UiProp } from './ui.js';
 export type SelectValue = string | number;
@@ -94,6 +95,8 @@ export interface SelectEmits<Entry extends SelectEntry = {
     'update:searchTerm': [value: string];
 }
 export interface SelectSlots<Entry extends SelectEntry, Key extends string = 'value'> {
+    'leading'?: (props: FieldAdornmentSlotProps) => any;
+    'trailing'?: (props: FieldAdornmentSlotProps) => any;
     'item'?: (props: {
         item: SelectEntryItem<Entry>;
     }) => any;

package/dist/runtime/utils/toolbar.d.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { ColorRole } from './color-registry.js';
+export interface ToolbarContext {
+    size: 'sm' | 'md' | 'lg';
+    color: ColorRole;
+    disabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+}
+export declare const TOOLBAR_CONTEXT: InjectionKey<ComputedRef<ToolbarContext>>;

package/dist/runtime/utils/toolbar.js

@@ -0,0 +1 @@
+export const TOOLBAR_CONTEXT = Symbol("selaras-toolbar");