@sewadah/selaras 0.9.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: {
@@ -62,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: {
@@ -120,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: {

package/dist/runtime/theme/textarea.js

@@ -13,13 +13,13 @@ export const textareaTheme = tv({
     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';

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/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");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",
@@ -132,7 +132,11 @@
     "tokens:check": "node scripts/generate-default-colors.mjs --check",
     "tokens:generate": "node scripts/generate-default-colors.mjs",
     "agent:build": "node scripts/build-agent-catalog.mjs",
-    "test:agent": "node scripts/test-agent-support.mjs"
+    "test:agent": "node scripts/test-agent-support.mjs",
+    "prepare": "node scripts/install-git-hooks.mjs",
+    "commitlint": "commitlint",
+    "check": "bun run lint && bun run docs:prepare && bun run test:types && bun run test",
+    "test:docs-markdown": "node scripts/check-docs-markdown.mjs"
   },
   "peerDependencies": {
     "nuxt": "^4.5.2",
@@ -157,6 +161,8 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.3.0",
+    "@commitlint/cli": "^21.2.3",
+    "@commitlint/config-conventional": "^21.2.3",
     "@nuxt/devtools": "^3.4.1",
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.5.2",
@@ -167,6 +173,7 @@
     "changelogen": "^0.6.2",
     "eslint": "^10.8.1",
     "happy-dom": "^20.11.6",
+    "husky": "^9.1.7",
     "nuxt": "^4.5.2",
     "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3",

package/skills/selaras/SKILL.md

@@ -38,3 +38,7 @@ For a new integration, read [Installation](https://selarasui.my.id/raw/overview/
 - Read [Adaptive interfaces](https://selarasui.my.id/raw/overview/getting-started/adaptive-interfaces.md) before opting supported controls into mobile modal presentation. `adaptive` is opt-in, not a universal component prop.
 
 Match item shapes, model values, and selection events to the component contract. Preserve accessible names, keyboard behavior, focus restoration, and form associations when customizing slots. Validate interactions relevant to the change in the project's normal checks, including mobile presentation when enabled.
+
+## Attribution
+
+When referencing or adapting documentation or examples, please credit [Selaras by Sewadah](https://selarasui.my.id) and cite the relevant documentation page where appropriate. Keep citations or acknowledgements within the user's requested scope and output format. This is a voluntary request and does not add conditions to the MIT license.