@sewadah/selaras 0.3.0 → 0.3.2

package/dist/runtime/utils/file-icons.js

@@ -106,6 +106,9 @@ export const defaultFileIcons = {
   "git": "vscode-icons:file-type-git",
   "gitignore": "vscode-icons:file-type-git",
   "npm": "vscode-icons:file-type-npm",
+  "pnpm": "vscode-icons:file-type-pnpm",
+  "yarn": "vscode-icons:file-type-yarn",
+  "bun": "vscode-icons:file-type-bun",
   "nuxt": "vscode-icons:file-type-nuxt",
   "ansible": "vscode-icons:file-type-ansible",
   "bicep": "vscode-icons:file-type-bicep"

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

@@ -10,8 +10,10 @@ export interface IconRegistry {
     chevronsRight: string;
     loading: string;
     search: string;
+    sortUnsorted: string;
     sortAscending: string;
     sortDescending: string;
+    filter: string;
     columns: string;
     copy: string;
     lightMode: string;

package/dist/runtime/utils/icons.js

@@ -16,10 +16,12 @@ export const defaultIcons = {
   chevronsRight: "hugeicons:next",
   loading: "hugeicons:loading-02",
   search: "hugeicons:search-01",
+  sortUnsorted: "hugeicons:sorting-05",
   // "arrow-*-02" (shaft + arrowhead) - kept visually distinct from the
   // plain chevrons above, matching the original caret-vs-arrow split.
   sortAscending: "hugeicons:arrow-up-02",
   sortDescending: "hugeicons:arrow-down-02",
+  filter: "hugeicons:filter",
   columns: "hugeicons:table-columns-split",
   copy: "hugeicons:copy",
   lightMode: "hugeicons:sun-01",

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

@@ -3,6 +3,7 @@ export interface MessageRegistry {
     clear: string;
     close: string;
     cancel: string;
+    confirmation: string;
     continue: string;
     colorModeToggle: string;
     colorPicker: string;
@@ -11,11 +12,14 @@ export interface MessageRegistry {
     searchDescription: string;
     columns: string;
     filterPlaceholder: string;
+    filterColumn: (column: string) => string;
     previous: string;
     next: string;
     first: string;
     last: string;
     pagination: string;
+    scrollTabsLeft: string;
+    scrollTabsRight: string;
     datePicker: string;
     datePickerDescription: string;
     dateRangePicker: string;
@@ -39,6 +43,7 @@ export interface MessageRegistry {
     decrement: string;
     noOptions: string;
     noResultsFound: string;
+    createOption: (value: string) => string;
     noData: string;
     expandRow: string;
     collapseRow: string;
@@ -62,6 +67,8 @@ export interface MessageRegistry {
     showHiddenBreadcrumbItems: string;
     commandPalette: string;
     commandPaletteDescription: string;
+    dropdownMenu: string;
+    dropdownMenuDescription: string;
     navigate: string;
     select: string;
     onThisPage: string;

package/dist/runtime/utils/messages.js

@@ -3,6 +3,7 @@ export const defaultMessages = {
   clear: "Clear",
   close: "Close",
   cancel: "Cancel",
+  confirmation: "Confirm action",
   continue: "Continue",
   colorModeToggle: "Toggle color mode",
   colorPicker: "Color picker",
@@ -11,11 +12,14 @@ export const defaultMessages = {
   searchDescription: "Type to filter, then use arrow keys and enter to select",
   columns: "Columns",
   filterPlaceholder: "Filter...",
+  filterColumn: (column) => `Filter ${column}`,
   previous: "Previous",
   next: "Next",
   first: "First",
   last: "Last",
   pagination: "Pagination",
+  scrollTabsLeft: "Scroll tabs left",
+  scrollTabsRight: "Scroll tabs right",
   datePicker: "Date picker",
   datePickerDescription: "Use arrow keys to navigate days, enter to select",
   dateRangePicker: "Date range picker",
@@ -39,6 +43,7 @@ export const defaultMessages = {
   decrement: "Decrement",
   noOptions: "No options",
   noResultsFound: "No results found",
+  createOption: (value) => `Create "${value}"`,
   noData: "No data",
   expandRow: "Expand row",
   collapseRow: "Collapse row",
@@ -61,6 +66,8 @@ export const defaultMessages = {
   showHiddenBreadcrumbItems: "Show hidden breadcrumb items",
   commandPalette: "Command palette",
   commandPaletteDescription: "Search for a command and press enter",
+  dropdownMenu: "Actions",
+  dropdownMenuDescription: "Choose an action",
   navigate: "Navigate",
   select: "Select",
   onThisPage: "On this page",

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

@@ -1,3 +1,4 @@
+import type { HotkeyOptions } from '../directives/hotkey.js';
 export interface NavigationMenuItem {
     label: string;
     icon?: string;
@@ -11,6 +12,10 @@ export interface NavigationMenuItem {
     /** One level for horizontal (Reka's own real limit for its shared-viewport flyout); arbitrary depth for vertical, which falls back to a recursive accordion instead. */
     children?: NavigationMenuItem[];
     onSelect?: (event: Event) => void;
+    /** Display a keyboard shortcut hint beside this item's label. */
+    shortcut?: string;
+    /** Bind `shortcut` page-wide, so the key activates this item from anywhere except while typing in a field. */
+    hotkey?: boolean;
     /** Targets this item's own named slots (`#{slot}`, `#{slot}-leading`, `#{slot}-label`, `#{slot}-trailing`, `#{slot}-content`) ahead of the generic `#item`/`#item-leading`/etc, when the named one is actually provided. */
     slot?: string;
     /**
@@ -33,3 +38,5 @@ export interface NavigationMenuItem {
     description?: string;
 }
 export declare function isNavigationMenuItemActive(item: NavigationMenuItem, currentPath: string): boolean;
+/** The v-hotkey binding for an item that opts in with `hotkey: true`. */
+export declare function navigationMenuHotkey(item: NavigationMenuItem): HotkeyOptions | undefined;

package/dist/runtime/utils/navigation-menu.js

@@ -3,3 +3,6 @@ export function isNavigationMenuItemActive(item, currentPath) {
     return item.active;
   return item.to !== void 0 && item.to === currentPath;
 }
+export function navigationMenuHotkey(item) {
+  return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut } : void 0;
+}

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

@@ -0,0 +1,17 @@
+import type { ContextMenuContentProps, PopoverContentProps } from 'reka-ui';
+/** Positioning options shared by Selaras's anchored panels. Visual styling stays in `ui.content`. */
+export type OverlayPositioning = Pick<PopoverContentProps, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'arrowPadding' | 'sticky' | 'hideWhenDetached' | 'positionStrategy'>;
+/** A context menu is anchored to the pointer, so it does not accept side or alignment. */
+export type ContextMenuPositioning = Pick<ContextMenuContentProps, 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'positionStrategy'>;
+/** `false` renders inline; a selector or element chooses a teleport target. */
+export type OverlayPortal = boolean | string | HTMLElement;
+export declare function overlayPortalProps(portal: OverlayPortal | undefined): {
+    disabled: boolean;
+    to?: undefined;
+} | {
+    to: string | HTMLElement;
+    disabled?: undefined;
+} | {
+    disabled?: undefined;
+    to?: undefined;
+};

package/dist/runtime/utils/overlay.js

@@ -0,0 +1,7 @@
+export function overlayPortalProps(portal) {
+  if (portal === false)
+    return { disabled: true };
+  if (typeof portal === "string" || typeof HTMLElement !== "undefined" && portal instanceof HTMLElement)
+    return { to: portal };
+  return {};
+}

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

@@ -1,21 +1,29 @@
 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 { OverlayPortal, OverlayPositioning } from './overlay.js';
 import type { UiProp } from './ui.js';
 export type SelectValue = string | number;
-export interface SelectGroup<Item extends object> {
+export type SelectModelValue = SelectValue | object;
+export type SelectEntry = SelectValue | object;
+export interface SelectGroup<Item extends SelectEntry> {
     label: string;
     items: readonly Item[];
 }
 /** Infer options from the entry array before unwrapping one group level. */
 export type SelectEntryItem<Entry> = Entry extends SelectGroup<infer Item> ? Item : Entry;
-export type SelectEntryGroup<Entry> = Extract<Entry, SelectGroup<object>>;
-export type SelectIdentityKeys<Item> = {
-    [Key in keyof Item]-?: Item[Key] extends SelectValue ? Key : never;
-}[keyof Item] & string;
-export type SelectIdentity<Entry, Key extends string> = SelectEntryItem<Entry>[Key & keyof SelectEntryItem<Entry>] & SelectValue;
+export type SelectEntryGroup<Entry> = Extract<Entry, SelectGroup<SelectEntry>>;
+export type SelectIdentityKeys<Item> = [Item] extends [object] ? {
+    [Key in keyof Item]-?: Item[Key] extends SelectModelValue ? Key : never;
+}[keyof Item] & string : never;
+type DefaultObjectIdentity<Item extends object> = 'value' extends keyof Item ? Item extends {
+    value: infer Value;
+} ? Value : NonNullable<Item['value' & keyof Item]> | Item : Item;
+type ItemIdentity<Item, Key extends string> = Item extends SelectValue ? Item : Key extends 'value' ? Item extends object ? DefaultObjectIdentity<Item> : never : Key extends keyof Item ? Item[Key] : never;
+export type SelectIdentity<Entry, Key extends string = 'value'> = ItemIdentity<SelectEntryItem<Entry>, Key>;
 export type SelectModel<Value, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
-type ValidEntry<Entry, Key extends string> = Entry extends SelectGroup<infer Item> ? SelectGroup<Item & Record<Key, SelectValue>> : Entry & Record<Key, SelectValue>;
+type ValidEntry<Entry, Key extends string> = Entry extends SelectGroup<infer Item> ? SelectGroup<Item extends SelectValue ? Item : Key extends 'value' ? Item : Item & Record<Key, SelectModelValue>> : Entry extends SelectValue ? Entry : Key extends 'value' ? Entry : Entry & Record<Key, SelectModelValue>;
 export interface SelectResolvedOption<Entry, Key extends string = 'value'> {
     value: SelectIdentity<Entry, Key>;
     label: string;
@@ -23,7 +31,7 @@ export interface SelectResolvedOption<Entry, Key extends string = 'value'> {
     /** Undefined while a selected identity is absent from the current options. */
     raw: SelectEntryItem<Entry> | undefined;
 }
-export interface SelectProps<Entry extends object = {
+export interface SelectProps<Entry extends SelectEntry = {
     value: SelectValue;
     label?: string;
     disabled?: boolean;
@@ -33,7 +41,9 @@ export interface SelectProps<Entry extends object = {
     /** ID of an associated form outside the component's ancestors. */
     form?: string;
     items: readonly Entry[] & NoInfer<readonly ValidEntry<Entry, Key>[]>;
+    /** Uses an option's `value` field by default, or the whole object if absent. */
     valueKey?: Key & SelectIdentityKeys<SelectEntryItem<Entry>>;
+    /** Object field used for display; defaults to `label`. */
     labelKey?: keyof SelectEntryItem<Entry> & string;
     open?: boolean;
     /** Initial uncontrolled open state. */
@@ -62,7 +72,11 @@ export interface SelectProps<Entry extends object = {
     searchTerm?: string;
     resetSearchTermOnBlur?: boolean;
     resetSearchTermOnSelect?: boolean;
-    arrow?: boolean;
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored list (the adaptive Select modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored list, or `false` to render it inline. */
+    portal?: OverlayPortal;
     /**
      * Opts into the control's accessible small-screen presentation. Select uses
      * a centered modal; Autocomplete keeps its editable combobox in a wider
@@ -72,14 +86,14 @@ export interface SelectProps<Entry extends object = {
     adaptive?: boolean;
     ui?: UiProp<SelectThemeSlots>;
 }
-export interface SelectEmits<Entry extends object = {
+export interface SelectEmits<Entry extends SelectEntry = {
     value: SelectValue;
 }, Key extends string = 'value', Multiple extends boolean = false> {
     'update:open': [value: boolean];
     'update:modelValue': [value: SelectModel<SelectIdentity<Entry, Key>, Multiple>];
     'update:searchTerm': [value: string];
 }
-export interface SelectSlots<Entry extends object, Key extends string = 'value'> {
+export interface SelectSlots<Entry extends SelectEntry, Key extends string = 'value'> {
     'item'?: (props: {
         item: SelectEntryItem<Entry>;
     }) => any;

package/dist/runtime/utils/table-columns.js

@@ -54,7 +54,7 @@ export function convertChildrenToColumns(vnodes) {
         accessorKey: props.field,
         header: buildHeaderOrFooter(slots.header, props.header ?? props.field),
         footer: buildHeaderOrFooter(slots.footer, props.footer),
-        enableSorting: toBooleanProp(props.sortable, true),
+        enableSorting: toBooleanProp(props.sortable, false),
         sortFn: "alphanumeric",
         enableColumnFilter: toBooleanProp(props.filterable, false),
         filterFn: "includesString",

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

@@ -1,5 +1,5 @@
 import type { RowData } from '@tanstack/vue-table';
-import type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableRowSelectionState, TableSortingState } from '../composables/use-table.js';
+import type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableGetSubRows, TableRowSelectionState, TableSortingState } from '../composables/use-table.js';
 import type { TableThemeSlots } from '../theme/table.js';
 import type { ColorRole } from './color-registry.js';
 import type { UiProp } from './ui.js';
@@ -7,6 +7,10 @@ export interface TableProps<TData extends RowData = RowData> {
     data: TData[];
     columns?: TableColumnDef<TData>[];
     selectable?: boolean;
+    /** Highlights body rows on hover. @default false */
+    rowHover?: boolean;
+    /** Toggles selection when a selectable body row is clicked. Interactive controls inside cells are ignored. @default false */
+    selectOnRowClick?: boolean;
     pageSize?: number;
     loading?: boolean;
     sorting?: TableSortingState;
@@ -20,6 +24,10 @@ export interface TableProps<TData extends RowData = RowData> {
     gridlines?: boolean;
     striped?: boolean;
     expandable?: boolean;
+    /** Displays hierarchical rows from `subRows` by default. Set `getSubRows` to read children from another field. @default false */
+    tree?: boolean;
+    /** Returns a row's child rows when `tree` is enabled. Defaults to `row.subRows`. */
+    getSubRows?: TableGetSubRows<TData>;
     expanded?: TableExpandedState;
     columnVisibility?: TableColumnVisibilityState;
     columnToggle?: boolean;

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

@@ -0,0 +1,42 @@
+import type { TimelineThemeSlots } from '../theme/timeline.js';
+import type { ColorRole } from './color-registry.js';
+import type { UiProp } from './ui.js';
+export interface TimelineItem {
+    id?: string | number;
+    class?: string;
+    date?: string;
+    /** ISO-8601 value for the semantic `<time datetime>` attribute. */
+    datetime?: string;
+    title?: string;
+    description?: string;
+    icon?: string;
+    color?: ColorRole;
+    /** Selects a named slot for this item, replacing its default content. */
+    slot?: string;
+    /** Per-item styling overrides, resolved against the component's theme. */
+    ui?: UiProp<TimelineThemeSlots>;
+    /** Additional application data is passed unchanged to scoped slots. */
+    [key: string]: unknown;
+}
+export interface TimelineProps<TItem extends TimelineItem = TimelineItem> {
+    items: TItem[];
+    orientation?: 'vertical' | 'horizontal';
+    align?: 'start' | 'end' | 'alternate';
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    ui?: UiProp<TimelineThemeSlots>;
+}
+export interface TimelineSlotProps<TItem extends TimelineItem = TimelineItem> {
+    item: TItem;
+    index: number;
+}
+export interface TimelineSlots<TItem extends TimelineItem = TimelineItem> {
+    marker?: (props: TimelineSlotProps<TItem>) => any;
+    connector?: (props: TimelineSlotProps<TItem>) => any;
+    date?: (props: TimelineSlotProps<TItem>) => any;
+    title?: (props: TimelineSlotProps<TItem>) => any;
+    description?: (props: TimelineSlotProps<TItem>) => any;
+    content?: (props: TimelineSlotProps<TItem>) => any;
+    item?: (props: TimelineSlotProps<TItem>) => any;
+    [name: string]: ((props: TimelineSlotProps<TItem>) => any) | undefined;
+}

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

@@ -107,6 +107,10 @@ export declare function useRootProps<T extends AnySlotFn>(slotFn: () => T, overr
 }): ComputedRef<{
     [x: string]: unknown;
 }>;
+/** Routes fallthrough attrs to a chosen non-root target without theme bindings. */
+export declare function useFallthroughProps(override?: () => UiSlotValue | undefined): ComputedRef<{
+    [x: string]: unknown;
+}>;
 /**
  * Returns fallthrough attributes selected for a component's real interactive
  * element. Wrapped controls use this alongside useRootProps: layout and
@@ -124,6 +128,13 @@ export declare function useFallthroughAttrs(select: (key: string) => boolean): C
  * to the base theme untouched when neither exists.
  */
 export declare function useComponentTheme<T extends (...args: any[]) => any>(key: string, base: T): ComputedRef<T>;
+/**
+ * Tailwind Variants drops the classes for an axis when its supplied value is
+ * unknown. Keep malformed runtime props usable by resolving them to the
+ * active theme's own default, and report the mistake once in development.
+ * Theme-configured variant values and compound-variant values stay valid.
+ */
+export declare function withVariantFallback<T extends (...args: any[]) => any>(theme: T, key: string): T;
 /**
  * The nearest (chain-merged) STheme `defaults.<key>` override, if any - a
  * component reads this as its own prop's fallback, one level below its

package/dist/runtime/utils/ui.js

@@ -53,6 +53,13 @@ export function useRootProps(slotFn, override, options) {
     resolveSlot(slotFn(), withFallthroughClass(options?.includeClass === false ? void 0 : fallthroughClass.value, override()))
   ));
 }
+export function useFallthroughProps(override) {
+  const { fallthroughClass, attrsWithoutClass } = useRootFallthrough();
+  return computed(() => mergeProps(
+    attrsWithoutClass.value,
+    resolveSlot((options) => options?.class ?? "", withFallthroughClass(fallthroughClass.value, override?.()))
+  ));
+}
 export function useFallthroughAttrs(select) {
   const attrs = useAttrs();
   return computed(() => Object.fromEntries(
@@ -78,7 +85,53 @@ export function useComponentTheme(key, base) {
       result = tv({ extend: result, ...globalOverride });
     for (const override of collectThemeChain(themeContext?.value, (c) => c.ui, key))
       result = tv({ extend: result, ...override });
-    return result;
+    return withVariantFallback(result, key);
+  });
+}
+const warnedThemeValues = /* @__PURE__ */ new Set();
+export function withVariantFallback(theme, key) {
+  return new Proxy(theme, {
+    apply(target, thisArg, args) {
+      const supplied = args[0];
+      if (!supplied || typeof supplied !== "object")
+        return Reflect.apply(target, thisArg, args);
+      let resolved;
+      for (const axis of ["variant", "size"]) {
+        const value = supplied[axis];
+        if (value === void 0)
+          continue;
+        const values = target.variants?.[axis];
+        if (!values)
+          continue;
+        const accepted = new Set(Object.keys(values));
+        for (const compound of target.compoundVariants ?? []) {
+          const condition = compound[axis];
+          if (Array.isArray(condition)) {
+            for (const entry of condition)
+              accepted.add(String(entry));
+          } else if (condition !== void 0) {
+            accepted.add(String(condition));
+          }
+        }
+        if (accepted.has(String(value)))
+          continue;
+        const defaults = target.defaultVariants;
+        const fallback = defaults?.[axis];
+        resolved ??= { ...supplied };
+        resolved[axis] = fallback;
+        if (import.meta.dev) {
+          const signature = `${key}:${axis}:${String(value)}`;
+          if (!warnedThemeValues.has(signature)) {
+            warnedThemeValues.add(signature);
+            const component = `${key[0]?.toUpperCase() ?? ""}${key.slice(1)}`;
+            const values2 = [...accepted].join(", ");
+            const fallbackMessage = fallback === void 0 ? "the default styling" : `"${String(fallback)}"`;
+            console.warn(`[Selaras ${component}] Unknown ${axis} "${String(value)}"; using ${fallbackMessage}. Valid values: ${values2}.`);
+          }
+        }
+      }
+      return Reflect.apply(target, thisArg, resolved ? [resolved, ...args.slice(1)] : args);
+    }
   });
 }
 export function useThemeProps(key) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",
@@ -45,6 +45,7 @@
       "import": "./dist/runtime/theme-api.js"
     },
     "./components/DrawerRenderer*": {},
+    "./components/ConfirmRenderer*": {},
     "./components/ModalRenderer*": {},
     "./components/NavigationMenuAccordionItem*": {},
     "./components/NavigationMenuFlyoutList*": {},
@@ -76,6 +77,7 @@
         "./dist/runtime/theme-api.d.ts"
       ],
       "components/DrawerRenderer*": [],
+      "components/ConfirmRenderer*": [],
       "components/ModalRenderer*": [],
       "components/NavigationMenuAccordionItem*": [],
       "components/NavigationMenuFlyoutList*": [],
@@ -98,18 +100,16 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "bun run docs:dev",
+    "dev": "bun run docs:prepare && nuxt dev docs",
     "dev:build": "bun run docs:build",
     "dev:generate": "bun run docs:generate",
     "dev:preview": "bunx nuxt preview docs",
     "dev:prepare": "bun run docs:prepare",
     "docs:build": "nuxt build docs",
-    "docs:dev": "bun run docs:prepare && nuxt dev docs",
+    "docs:dev": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare packages/docs/preview && nuxt dev packages/docs/preview",
     "docs:generate": "nuxt generate docs",
     "docs:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare docs && bun run scripts/sync-workspace-dist.mjs",
     "docs:types": "cd docs && vue-tsc --noEmit",
-    "docs-template:dev": "bun run docs-template:prepare && nuxt dev packages/docs/preview",
-    "docs-template:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare packages/docs/preview",
     "release": "bun run release:both",
     "release:both": "bun run release:selaras && bun run release:docs",
     "release:selaras": "bun run lint && bun run test && (if [ -n \"$RELEASE_VERSION\" ]; then npx changelogen --bump -r \"$RELEASE_VERSION\"; elif [ \"${RELEASE_BUMP:-auto}\" = \"auto\" ]; then npx changelogen --bump; else npx changelogen --bump \"--$RELEASE_BUMP\"; fi) && bun run test:release && npm publish --access public && bash scripts/tag-and-push-release.sh selaras && changelogen gh release",
@@ -140,6 +140,7 @@
     "@tanstack/vue-table": "^9.1.2",
     "@tanstack/vue-virtual": "^3.13.36",
     "reka-ui": "^2.2.0",
+    "shiki": "^4.4.3",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.1",
     "tw-animate-css": "^1.4.0"