@sewadah/selaras 0.7.1 → 0.8.0

package/dist/runtime/internal/color-mode-control.d.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef } from 'vue';
+import { useColorMode } from '#imports';
+export declare function useColorModeControl(): {
+    colorMode: ReturnType<typeof useColorMode>;
+    isDark: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+};

package/dist/runtime/internal/color-mode-control.js

@@ -0,0 +1,12 @@
+import { computed, onMounted, ref } from "vue";
+import { useColorMode } from "#imports";
+export function useColorModeControl() {
+  const colorMode = useColorMode();
+  const mounted = ref(false);
+  onMounted(() => mounted.value = true);
+  return {
+    colorMode,
+    isDark: computed(() => mounted.value && colorMode.value === "dark"),
+    isDisabled: computed(() => !mounted.value || colorMode.unknown || colorMode.forced)
+  };
+}

package/dist/runtime/internal/list-selection.d.ts

@@ -0,0 +1,15 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
+export type ListSelection = SelectModelValue | SelectModelValue[] | undefined;
+export declare function selectionForMode(value: ListSelection, multiple: boolean): ListSelection;
+export declare function assertUniqueSelection(value: ListSelection): void;
+export declare function useListSelection(props: {
+    modelValue?: ListSelection;
+    defaultValue?: ListSelection;
+    multiple?: boolean;
+    disabled?: boolean;
+}, emit: (value: ListSelection) => void): {
+    selection: import("vue").ComputedRef<string | number | object | undefined>;
+    values: import("vue").ComputedRef<SelectModelValue[]>;
+    update: (value: ListSelection) => void;
+    reset: () => void;
+};

package/dist/runtime/internal/list-selection.js

@@ -0,0 +1,43 @@
+import { computed, getCurrentInstance, ref, watch } from "vue";
+export function selectionForMode(value, multiple) {
+  return multiple ? value === void 0 ? [] : Array.isArray(value) ? [...value] : [value] : Array.isArray(value) ? value[0] : value;
+}
+export function assertUniqueSelection(value) {
+  if (Array.isArray(value) && new Set(value).size !== value.length)
+    throw new TypeError("[selaras] List selection values must be unique.");
+}
+export function useListSelection(props, emit) {
+  const instance = getCurrentInstance();
+  const controlled = () => Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
+  const initial = Array.isArray(props.defaultValue) ? [...props.defaultValue] : props.defaultValue;
+  assertUniqueSelection(initial);
+  const local = ref(selectionForMode(initial, !!props.multiple));
+  const selection = computed(() => {
+    const value = controlled() ? props.modelValue : local.value;
+    if (controlled() && value !== void 0 && Array.isArray(value) !== !!props.multiple)
+      throw new TypeError("[selaras] List modelValue must be an array in multiple mode and a scalar in single mode.");
+    assertUniqueSelection(value);
+    return value;
+  });
+  void selection.value;
+  function update(value) {
+    if (props.disabled)
+      return;
+    assertUniqueSelection(value);
+    if (!controlled())
+      local.value = value;
+    emit(value);
+  }
+  watch(() => props.multiple, (multiple) => {
+    if (!controlled())
+      update(selectionForMode(local.value, !!multiple));
+  });
+  function reset() {
+    const value = selectionForMode(initial, !!props.multiple);
+    if (!controlled())
+      local.value = value;
+    emit(value);
+  }
+  const values = computed(() => selection.value === void 0 ? [] : Array.isArray(selection.value) ? selection.value : [selection.value]);
+  return { selection, values, update, reset };
+}

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

@@ -0,0 +1,131 @@
+export declare const listboxTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    label: string;
+    description: string;
+    itemContent: string;
+    icon: string;
+    indicator: string;
+    checkbox: string;
+    empty: string;
+}, undefined, {
+    size: {
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    label: string;
+    description: string;
+    itemContent: string;
+    icon: string;
+    indicator: string;
+    checkbox: string;
+    empty: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+    };
+    color: {
+        primary: "";
+        secondary: "";
+        neutral: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    searchWrapper: string;
+    searchInput: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    label: string;
+    description: string;
+    itemContent: string;
+    icon: string;
+    indicator: string;
+    checkbox: string;
+    empty: string;
+}>>;
+export type ListboxThemeSlots = keyof (typeof listboxTheme)['slots'];

package/dist/runtime/theme/listbox.js

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+export const listboxTheme = tv({
+  slots: {
+    root: "flex min-h-0 min-w-0 flex-col overflow-hidden rounded-[var(--selaras-resolved-radius-md)] border border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-default)] text-[var(--selaras-resolved-text-default)]",
+    header: "flex items-center justify-between gap-2 border-b border-[var(--selaras-resolved-border-default)] px-3 py-2",
+    footer: "border-t border-[var(--selaras-resolved-border-default)] px-3 py-2",
+    searchWrapper: "flex items-center gap-2 border-b border-[var(--selaras-resolved-border-default)] px-3",
+    searchInput: "h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--selaras-resolved-text-muted)]",
+    content: "max-h-72 min-h-0 overflow-y-auto p-1 outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--_selaras-color-focus)]",
+    group: "",
+    groupLabel: "px-2 py-2 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
+    item: "my-0.5 flex w-full min-w-0 items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-2 outline-none cursor-pointer select-none transition-colors data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[state=checked]:bg-[var(--_selaras-color-subtle)] data-[state=checked]:text-[var(--_selaras-color-on-subtle)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    label: "truncate",
+    description: "text-xs text-[var(--selaras-resolved-text-muted)]",
+    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)]",
+    empty: "px-3 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]"
+  },
+  variants: {
+    size: { sm: { item: "py-1.5 text-xs" }, md: { item: "text-sm" }, lg: { item: "py-2.5 text-base" } },
+    color: { primary: "", secondary: "", neutral: "", success: "", danger: "", info: "", warning: "" },
+    invalid: { true: { root: "border-[var(--_selaras-color-border)]" } }
+  },
+  defaultVariants: { size: "md", color: "primary" }
+});

package/dist/runtime/theme/select.js

@@ -40,7 +40,7 @@ export const selectTheme = tv({
     mobilePanel: "",
     viewport: "max-h-72 overflow-y-auto p-1",
     group: "px-2 pt-2 pb-1 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
-    item: "relative flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    item: "relative my-0.5 flex w-full min-w-0 items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none transition-colors data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[state=checked]:bg-[var(--_selaras-color-subtle)] data-[state=checked]:text-[var(--_selaras-color-on-subtle)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
     itemIndicator: "absolute end-2 flex items-center text-[var(--_selaras-color-indicator)]",
     empty: "px-2 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
     arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"

package/dist/runtime/theme/transfer-list.d.ts

@@ -0,0 +1,74 @@
+export declare const transferListTheme: import("tailwind-variants").TVReturnType<{
+    layout: {
+        auto: {
+            root: string;
+            actions: string;
+        };
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    header: string;
+    count: string;
+    listbox: string;
+    actions: string;
+    action: string;
+    announcement: string;
+}, undefined, {
+    layout: {
+        auto: {
+            root: string;
+            actions: string;
+        };
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    header: string;
+    count: string;
+    listbox: string;
+    actions: string;
+    action: string;
+    announcement: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    layout: {
+        auto: {
+            root: string;
+            actions: string;
+        };
+        horizontal: {
+            root: string;
+            actions: string;
+        };
+        vertical: {
+            root: string;
+            actions: string;
+        };
+    };
+}, {
+    root: string;
+    panel: string;
+    header: string;
+    count: string;
+    listbox: string;
+    actions: string;
+    action: string;
+    announcement: string;
+}>>;
+export type TransferListThemeSlots = keyof (typeof transferListTheme)['slots'];

package/dist/runtime/theme/transfer-list.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+export const transferListTheme = tv({
+  slots: {
+    root: "flex min-w-0 gap-3",
+    panel: "flex min-w-0 flex-1 flex-col gap-2",
+    header: "flex items-center justify-between gap-2 text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    count: "text-xs font-normal text-[var(--selaras-resolved-text-muted)]",
+    listbox: "flex-1",
+    actions: "flex shrink-0 items-center justify-center gap-2",
+    action: "",
+    announcement: "sr-only"
+  },
+  variants: {
+    layout: {
+      auto: { root: "flex-col sm:flex-row", actions: "flex-row sm:flex-col" },
+      horizontal: { root: "flex-row", actions: "flex-col" },
+      vertical: { root: "flex-col", actions: "flex-row" }
+    }
+  },
+  defaultVariants: { layout: "auto" }
+});

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

@@ -41,6 +41,7 @@ import type { inputTheme, InputThemeSlots } from './theme/input.js';
 import type { inputGroupTheme, InputGroupThemeSlots } from './theme/input-group.js';
 import type { inputNumberTheme, InputNumberThemeSlots } from './theme/input-number.js';
 import type { kbdTheme, KbdThemeSlots } from './theme/kbd.js';
+import type { listboxTheme, ListboxThemeSlots } from './theme/listbox.js';
 import type { modalTheme, ModalThemeSlots } from './theme/modal.js';
 import type { navigationMenuTheme, NavigationMenuThemeSlots } from './theme/navigation-menu.js';
 import type { pageAsideTheme, PageAsideThemeSlots } from './theme/page-aside.js';
@@ -72,6 +73,7 @@ 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 { tooltipTheme, TooltipThemeSlots } from './theme/tooltip.js';
+import type { transferListTheme, TransferListThemeSlots } from './theme/transfer-list.js';
 import type { treeTheme, TreeThemeSlots } from './theme/tree.js';
 import type { ColorRole, RuntimeTokenOverrides } from './utils/color-registry.js';
 type AccordionVariants = VariantProps<typeof accordionTheme>;
@@ -362,6 +364,14 @@ export interface ThemeComponentRegistry {
         slots: RadioGroupThemeSlots;
         conditions: WithRegisteredColor<Pick<RadioGroupVariants, 'color' | 'size' | 'orientation' | 'variant' | 'invalid'>>;
     };
+    listbox: {
+        slots: ListboxThemeSlots;
+        conditions: WithRegisteredColor<Pick<VariantProps<typeof listboxTheme>, 'color' | 'size' | 'invalid'>>;
+    };
+    transferList: {
+        slots: TransferListThemeSlots;
+        conditions: Pick<VariantProps<typeof transferListTheme>, 'layout'>;
+    };
     rating: {
         slots: RatingThemeSlots;
         conditions: WithRegisteredColor<Pick<RatingVariants, 'color' | 'size' | 'orientation'>>;

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

@@ -46,6 +46,7 @@ export type * from '../components/Input.vue';
 export type * from '../components/InputGroup.vue';
 export type * from '../components/InputNumber.vue';
 export type * from '../components/Kbd.vue';
+export type * from '../components/Listbox.vue';
 export type * from '../components/Modal.vue';
 export type * from '../components/NavigationMenu.vue';
 export type * from '../components/PageAside.vue';
@@ -83,6 +84,7 @@ export type * from '../components/Toast.vue';
 export type * from '../components/Toggle.vue';
 export type * from '../components/ToggleGroup.vue';
 export type * from '../components/Tooltip.vue';
+export type * from '../components/TransferList.vue';
 export type * from '../components/Tree.vue';
 export type { UseCommandPaletteReturn } from '../composables/use-command-palette.js';
 export type { UseConfirmOptions, UseConfirmReturn } from '../composables/use-confirm.js';

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

@@ -0,0 +1,31 @@
+import type { ListboxThemeSlots } from '../theme/listbox.js';
+import type { SelectEntry, SelectEntryGroup, SelectEntryItem, SelectIdentity, SelectModel, SelectProps } from './select-contracts.js';
+import type { UiProp } from './ui.js';
+export interface ListboxProps<Entry extends SelectEntry = SelectEntry, Key extends string = 'value', Multiple extends boolean = false> extends Pick<SelectProps<Entry, Key, Multiple>, 'items' | 'modelValue' | 'defaultValue' | 'valueKey' | 'labelKey' | 'multiple' | 'searchable' | 'searchTerm' | 'virtualize' | 'disabled' | 'loading' | 'invalid' | 'size' | 'color' | 'id' | 'name' | 'form' | 'required'> {
+    label?: string;
+    descriptionKey?: keyof SelectEntryItem<Entry> & string;
+    selectionBehavior?: 'toggle' | 'replace';
+    checkbox?: boolean;
+    selectAll?: boolean;
+    ui?: UiProp<ListboxThemeSlots>;
+}
+export interface ListboxEmits<Entry extends SelectEntry = SelectEntry, Key extends string = 'value', Multiple extends boolean = false> {
+    'update:modelValue': [value: SelectModel<SelectIdentity<Entry, Key>, Multiple>];
+    'update:searchTerm': [value: string];
+}
+export interface ListboxItemSlot<Entry extends SelectEntry> {
+    item: SelectEntryItem<Entry>;
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface ListboxSlots<Entry extends SelectEntry> {
+    'item'?: (props: ListboxItemSlot<Entry>) => any;
+    'group'?: (props: {
+        group: SelectEntryGroup<Entry>;
+    }) => any;
+    'header'?: () => any;
+    'footer'?: () => any;
+    'empty'?: () => any;
+    'empty-filter'?: () => any;
+}

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

@@ -44,6 +44,13 @@ export interface MessageRegistry {
     increment: string;
     decrement: string;
     noOptions: string;
+    selectAll: string;
+    transferSource: string;
+    transferTarget: string;
+    moveToTarget: string;
+    moveToSource: string;
+    listSelectionCount: (selected: number, total: number) => string;
+    transferItems: (count: number, target: string) => string;
     noResultsFound: string;
     createOption: (value: string) => string;
     noData: string;

package/dist/runtime/utils/messages.js

@@ -44,6 +44,13 @@ export const defaultMessages = {
   increment: "Increment",
   decrement: "Decrement",
   noOptions: "No options",
+  selectAll: "Select all",
+  transferSource: "Available",
+  transferTarget: "Assigned",
+  moveToTarget: "Add selected",
+  moveToSource: "Remove selected",
+  listSelectionCount: (selected, total) => `${selected} of ${total} selected`,
+  transferItems: (count, target) => `${count} item${count === 1 ? "" : "s"} moved to ${target}`,
   noResultsFound: "No results found",
   createOption: (value) => `Create "${value}"`,
   noData: "No data",

package/dist/runtime/utils/slot-children.d.ts

@@ -0,0 +1,2 @@
+import type { VNode } from 'vue';
+export declare function flattenSlotChildren(vnodes: VNode[]): VNode[];

package/dist/runtime/utils/slot-children.js

@@ -0,0 +1,15 @@
+import { Comment, Fragment, Text } from "vue";
+export function flattenSlotChildren(vnodes) {
+  const children = [];
+  for (const vnode of vnodes) {
+    if (vnode.type === Comment || vnode.type === Text)
+      continue;
+    if (vnode.type === Fragment) {
+      if (Array.isArray(vnode.children))
+        children.push(...flattenSlotChildren(vnode.children));
+      continue;
+    }
+    children.push(vnode);
+  }
+  return children;
+}

package/dist/runtime/utils/transfer-list-contracts.d.ts

@@ -0,0 +1,48 @@
+import type { TransferListThemeSlots } from '../theme/transfer-list.js';
+import type { ListboxItemSlot, ListboxProps } from './listbox-contracts.js';
+import type { SelectEntry, SelectIdentity } from './select-contracts.js';
+import type { UiProp } from './ui.js';
+export type TransferDirection = 'to-target' | 'to-source';
+export type TransferSide = 'source' | 'target';
+export interface TransferListProps<Entry extends SelectEntry = SelectEntry, Key extends string = 'value'> extends Omit<ListboxProps<Entry, Key, true>, 'multiple' | 'checkbox' | 'selectAll' | 'selectionBehavior' | 'searchTerm' | 'ui' | 'label'> {
+    checked?: NoInfer<SelectIdentity<Entry, Key>[]>;
+    sourceLabel?: string;
+    targetLabel?: string;
+    sourceSearchTerm?: string;
+    targetSearchTerm?: string;
+    showSelectAll?: boolean;
+    layout?: 'auto' | 'horizontal' | 'vertical';
+    ui?: UiProp<TransferListThemeSlots>;
+}
+export interface TransferListEmits<Entry extends SelectEntry = SelectEntry, Key extends string = 'value'> {
+    'update:modelValue': [value: SelectIdentity<Entry, Key>[]];
+    'update:checked': [value: SelectIdentity<Entry, Key>[]];
+    'update:sourceSearchTerm': [value: string];
+    'update:targetSearchTerm': [value: string];
+    'transfer': [payload: {
+        direction: TransferDirection;
+        items: ListboxItemSlot<Entry>['item'][];
+        values: SelectIdentity<Entry, Key>[];
+    }];
+}
+export interface TransferListSlots<Entry extends SelectEntry> {
+    'item'?: (props: ListboxItemSlot<Entry> & {
+        side: TransferSide;
+    }) => any;
+    'source-header'?: (props: {
+        count: number;
+        checkedCount: number;
+    }) => any;
+    'target-header'?: (props: {
+        count: number;
+        checkedCount: number;
+    }) => any;
+    'source-footer'?: () => any;
+    'target-footer'?: () => any;
+    'empty'?: (props: {
+        side: TransferSide;
+    }) => any;
+    'empty-filter'?: (props: {
+        side: TransferSide;
+    }) => any;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",