@sewadah/selaras 0.1.1 → 0.3.0

package/dist/runtime/components/Tree.vue

@@ -3,6 +3,7 @@ import { TreeItem, TreeRoot } from "reka-ui";
 import { computed, mergeProps, ref, watch } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { treeTheme } from "../theme/tree";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Checkbox from "./Checkbox.vue";
 import Icon from "./Icon.vue";
@@ -21,6 +22,7 @@ const props = defineProps({
   getKey: { type: Function, required: false },
   getChildren: { type: Function, required: false },
   size: { type: null, required: false },
+  color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:modelValue", "update:expanded"]);
@@ -50,7 +52,8 @@ function onUpdateExpanded(value) {
   emit("update:expanded", value);
 }
 const theme = useComponentTheme("tree", treeTheme);
-const ui = computed(() => theme.value({ size: props.size }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ size: props.size, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
 const toggleProps = computed(() => resolveSlot(ui.value.toggle, props.ui?.toggle));
@@ -77,6 +80,7 @@ function treeItemProps(entry, level) {
     :propagate-select="propagateSelect"
     :bubble-select="bubbleSelect"
     :disabled="disabled"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="onUpdateModelValue"
     @update:expanded="onUpdateExpanded"

package/dist/runtime/components/Tree.vue.d.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TreeThemeSlots } from '../theme/tree.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { treeTheme } from '../theme/tree.js';
 type TreeVariants = VariantProps<typeof treeTheme>;
@@ -31,6 +32,8 @@ export interface TreeProps {
     /** @default item => item.children */
     getChildren?: (item: TreeItemType) => TreeItemType[] | undefined;
     size?: TreeVariants['size'];
+    /** The selected-row and keyboard-focus accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<TreeThemeSlots>;
 }
 export interface TreeEmits {
@@ -48,11 +51,11 @@ export interface TreeSlots {
     }) => any;
 }
 declare const __VLS_base: import("vue").DefineComponent<TreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: TreeItemType | TreeItemType[]) => any;
     "update:expanded": (value: string[]) => any;
+    "update:modelValue": (value: TreeItemType | TreeItemType[]) => any;
 }, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: TreeItemType | TreeItemType[]) => any) | undefined;
     "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TreeItemType | TreeItemType[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/use-drawer.d.ts

@@ -1,22 +1,4 @@
-import type { Component, Ref } from 'vue';
-export interface DrawerInstance {
-    id: number;
-    component: Component;
-    props: Record<string, unknown>;
-    isOpen: boolean;
-    title?: string;
-    description?: string;
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    handle?: boolean;
-    snapPoints?: (number | string)[];
-    snapPoint?: number | string | null;
-    snapToSequentialPoints?: boolean;
-    dismissible?: boolean;
-    modal?: boolean | 'trap-focus';
-    overlay?: boolean;
-    transition?: boolean;
-    resolve: (value: unknown) => void;
-}
+import type { Component } from 'vue';
 export interface UseDrawerOpenOptions {
     props?: Record<string, unknown>;
     /** Registered with Reka as the drawer's accessible name, visually hidden - the opened component still supplies its own visible header via the content slot. */
@@ -34,9 +16,6 @@ export interface UseDrawerOpenOptions {
     transition?: boolean;
 }
 export interface UseDrawerReturn {
-    drawers: Ref<DrawerInstance[]>;
     open: <T = void>(component: Component, options?: UseDrawerOpenOptions) => Promise<T | undefined>;
-    close: (id: number, value?: unknown) => void;
-    remove: (id: number) => void;
 }
 export declare function useDrawer(): UseDrawerReturn;

package/dist/runtime/composables/use-drawer.js

@@ -1,11 +1,15 @@
-import { markRaw, ref } from "vue";
-const drawers = ref([]);
-let counter = 0;
+import { markRaw } from "vue";
+import { useDrawerService } from "../internal/programmatic-services.js";
+import { useProgrammaticThemeSnapshot } from "../utils/programmatic-theme.js";
 export function useDrawer() {
+  const service = useDrawerService();
+  const snapshotTheme = useProgrammaticThemeSnapshot();
   function open(component, options) {
+    if (import.meta.server)
+      return Promise.reject(new Error("[useDrawer] open() is client-only. Render SDrawer declaratively during SSR."));
     return new Promise((resolve) => {
-      drawers.value.push({
-        id: counter++,
+      service.instances.value.push({
+        id: service.nextId(),
         // Vue components are meant to stay an opaque, non-reactive value -
         // without this, pushing one into this reactive array wraps it in
         // a reactive proxy too, which Vue's own dev warning flags as
@@ -13,6 +17,7 @@ export function useDrawer() {
         component: markRaw(component),
         props: options?.props ?? {},
         isOpen: true,
+        _settled: false,
         title: options?.title,
         description: options?.description,
         side: options?.side,
@@ -24,21 +29,10 @@ export function useDrawer() {
         modal: options?.modal,
         overlay: options?.overlay,
         transition: options?.transition,
+        _theme: snapshotTheme(),
         resolve
       });
     });
   }
-  function close(id, value) {
-    const instance = drawers.value.find((d) => d.id === id);
-    if (!instance)
-      return;
-    instance.isOpen = false;
-    instance.resolve(value);
-  }
-  function remove(id) {
-    const index = drawers.value.findIndex((d) => d.id === id);
-    if (index !== -1)
-      drawers.value.splice(index, 1);
-  }
-  return { drawers, open, close, remove };
+  return { open };
 }

package/dist/runtime/composables/use-form-field.d.ts

@@ -1,6 +1,7 @@
 import type { ComputedRef } from 'vue';
 export interface FormFieldContext {
     id: string;
+    labelId?: string;
     name?: string;
     size?: 'sm' | 'md' | 'lg';
     invalid: ComputedRef<boolean>;

package/dist/runtime/composables/use-icons.d.ts

@@ -1,8 +1,8 @@
 import type { ComputedRef } from 'vue';
 import type { IconRegistry } from '../utils/icons.js';
 /**
- * Merges a consumer's app.config.icons override onto the default (Hugeicons)
- * registry - mirrors useComponentTheme's app.config.ui.<key> merge (see
+ * Merges a consumer's app.config.selaras.icons override onto the default
+ * (Hugeicons) registry - mirrors useComponentTheme's selaras.ui.<key> merge (see
  * ../utils/ui.ts), just for icon name strings instead of tv() themes, so a
  * single semantic key (e.g. close) can be overridden once for every
  * component that uses it rather than per component.

package/dist/runtime/composables/use-icons.js

@@ -3,5 +3,5 @@ import { useAppConfig } from "#imports";
 import { defaultIcons } from "../utils/icons.js";
 export function useIcons() {
   const appConfig = useAppConfig();
-  return computed(() => ({ ...defaultIcons, ...appConfig.icons }));
+  return computed(() => ({ ...defaultIcons, ...appConfig.selaras?.icons }));
 }

package/dist/runtime/composables/use-locale.d.ts

@@ -1,8 +1,8 @@
 import type { ComputedRef } from 'vue';
 /**
  * The app-wide default BCP-47 locale code, overridable via
- * `app.config.locale` - mirrors useIcons()/useMessages()'s own
- * app.config.<key> merge (see use-icons.ts), just for a single string
+ * `app.config.selaras.locale` - mirrors useIcons()/useMessages()'s own
+ * namespaced merge (see use-icons.ts), just for a single string
  * instead of a registry. DatePicker/InputNumber/TimeStepper each read
  * this as their own `locale` prop's fallback instead of hardcoding
  * 'en-US' independently, so a consumer sets the locale once instead of

package/dist/runtime/composables/use-locale.js

@@ -2,5 +2,5 @@ import { computed } from "vue";
 import { useAppConfig } from "#imports";
 export function useLocale() {
   const appConfig = useAppConfig();
-  return computed(() => appConfig.locale ?? "en-US");
+  return computed(() => appConfig.selaras?.locale ?? "en-US");
 }

package/dist/runtime/composables/use-media-query.d.ts

@@ -1,11 +1,9 @@
 import type { Ref } from 'vue';
 /**
- * Whether the viewport is currently at or below `breakpoint` px wide.
- * Defaults to `false` on SSR/first render (no `window` there) - corrected
- * once mounted, the same "safer default, corrected client-side" precedent
- * DashboardGroup's own inline version of this (and ReadMore's `truncated`
- * default) already use. Tracks a `matchMedia` `change` listener rather
- * than a one-off check, so a live resize across the breakpoint updates
- * reactively instead of only being read once at mount.
+ * Whether the viewport is below the consumer's selected Tailwind breakpoint.
+ * False during SSR/first render; samples the generated CSS bridge on mount.
+ * Relative units stay in the native media query, whose font-size basis is
+ * different from an authored root font-size. Breakpoints are build-time theme
+ * conditions: runtime CSS changes do not rewrite compiled responsive utilities.
  */
-export declare function useIsMobile(breakpoint?: number): Ref<boolean>;
+export declare function useIsMobile(): Ref<boolean>;

package/dist/runtime/composables/use-media-query.js

@@ -1,12 +1,17 @@
 import { onMounted, onUnmounted, ref } from "vue";
-export function useIsMobile(breakpoint = 768) {
+export function useIsMobile() {
   const isMobile = ref(false);
   let mediaQuery;
   function update() {
     isMobile.value = mediaQuery?.matches ?? false;
   }
   onMounted(() => {
-    mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const breakpoint = getComputedStyle(document.documentElement).getPropertyValue("--selaras-adaptive-breakpoint").trim();
+    if (!/^(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em)$/.test(breakpoint)) {
+      console.warn('[Selaras] Adaptive presentation requires a Tailwind breakpoint in px, rem or em. Import "#selaras/tailwind.css" in your Tailwind entry and define the selected --breakpoint-* token in @theme.');
+      return;
+    }
+    mediaQuery = window.matchMedia(`(width < ${breakpoint})`);
     update();
     mediaQuery.addEventListener("change", update);
   });

package/dist/runtime/composables/use-messages.d.ts

@@ -1,8 +1,8 @@
 import type { ComputedRef } from 'vue';
 import type { MessageRegistry } from '../utils/messages.js';
 /**
- * Merges a consumer's app.config.messages override onto the default
- * (English) registry - mirrors useIcons' own app.config.icons merge (see
+ * Merges a consumer's app.config.selaras.messages override onto the default
+ * (English) registry - mirrors useIcons' own namespaced merge (see
  * use-icons.ts), just for UI copy instead of icon names. This is where a
  * consuming app wires up real translation: override every key with
  * locale-aware text (or functions, for the interpolated ones), typically

package/dist/runtime/composables/use-messages.js

@@ -3,5 +3,5 @@ import { useAppConfig } from "#imports";
 import { defaultMessages } from "../utils/messages.js";
 export function useMessages() {
   const appConfig = useAppConfig();
-  return computed(() => ({ ...defaultMessages, ...appConfig.messages }));
+  return computed(() => ({ ...defaultMessages, ...appConfig.selaras?.messages }));
 }

package/dist/runtime/composables/use-modal.d.ts

@@ -1,17 +1,4 @@
-import type { Component, Ref } from 'vue';
-export interface ModalInstance {
-    id: number;
-    component: Component;
-    props: Record<string, unknown>;
-    isOpen: boolean;
-    title?: string;
-    description?: string;
-    dismissible?: boolean;
-    modal?: boolean;
-    overlay?: boolean;
-    transition?: boolean;
-    resolve: (value: unknown) => void;
-}
+import type { Component } from 'vue';
 export interface UseModalOpenOptions {
     props?: Record<string, unknown>;
     /** Registered with Reka as the dialog's accessible name, visually hidden - the opened component still supplies its own visible header via the content slot. */
@@ -24,9 +11,6 @@ export interface UseModalOpenOptions {
     transition?: boolean;
 }
 export interface UseModalReturn {
-    modals: Ref<ModalInstance[]>;
     open: <T = void>(component: Component, options?: UseModalOpenOptions) => Promise<T | undefined>;
-    close: (id: number, value?: unknown) => void;
-    remove: (id: number) => void;
 }
 export declare function useModal(): UseModalReturn;

package/dist/runtime/composables/use-modal.js

@@ -1,11 +1,15 @@
-import { markRaw, ref } from "vue";
-const modals = ref([]);
-let counter = 0;
+import { markRaw } from "vue";
+import { useModalService } from "../internal/programmatic-services.js";
+import { useProgrammaticThemeSnapshot } from "../utils/programmatic-theme.js";
 export function useModal() {
+  const service = useModalService();
+  const snapshotTheme = useProgrammaticThemeSnapshot();
   function open(component, options) {
+    if (import.meta.server)
+      return Promise.reject(new Error("[useModal] open() is client-only. Render SModal declaratively during SSR."));
     return new Promise((resolve) => {
-      modals.value.push({
-        id: counter++,
+      service.instances.value.push({
+        id: service.nextId(),
         // Vue components are meant to stay an opaque, non-reactive value -
         // without this, pushing one into this reactive array wraps it in
         // a reactive proxy too, which Vue's own dev warning flags as
@@ -13,27 +17,17 @@ export function useModal() {
         component: markRaw(component),
         props: options?.props ?? {},
         isOpen: true,
+        _settled: false,
         title: options?.title,
         description: options?.description,
         dismissible: options?.dismissible,
         modal: options?.modal,
         overlay: options?.overlay,
         transition: options?.transition,
+        _theme: snapshotTheme(),
         resolve
       });
     });
   }
-  function close(id, value) {
-    const instance = modals.value.find((m) => m.id === id);
-    if (!instance)
-      return;
-    instance.isOpen = false;
-    instance.resolve(value);
-  }
-  function remove(id) {
-    const index = modals.value.findIndex((m) => m.id === id);
-    if (index !== -1)
-      modals.value.splice(index, 1);
-  }
-  return { modals, open, close, remove };
+  return { open };
 }

package/dist/runtime/composables/use-ripple.d.ts

@@ -1,8 +1,8 @@
 import type { ComputedRef } from 'vue';
 /**
  * Whether v-ripple should actually spawn a ripple - mirrors useIcons' own
- * app.config merge (see use-icons.ts), just a single top-level boolean
- * instead of a registry object. Defaults to enabled; app.config.ripple =
+ * app.config merge (see use-icons.ts), just a single boolean instead of a
+ * registry object. Defaults to enabled; app.config.selaras.ripple =
  * false turns it off globally for every component that binds v-ripple to
  * this rather than hardcoding it unconditionally on.
  *

package/dist/runtime/composables/use-ripple.js

@@ -2,5 +2,5 @@ import { computed } from "vue";
 import { useAppConfig } from "#imports";
 export function useRippleEnabled() {
   const appConfig = useAppConfig();
-  return computed(() => appConfig.ripple ?? true);
+  return computed(() => appConfig.selaras?.ripple ?? true);
 }

package/dist/runtime/composables/use-slideover.d.ts

@@ -1,19 +1,4 @@
-import type { Component, Ref } from 'vue';
-export interface SlideoverInstance {
-    id: number;
-    component: Component;
-    props: Record<string, unknown>;
-    isOpen: boolean;
-    title?: string;
-    description?: string;
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    inset?: boolean;
-    dismissible?: boolean;
-    modal?: boolean;
-    overlay?: boolean;
-    transition?: boolean;
-    resolve: (value: unknown) => void;
-}
+import type { Component } from 'vue';
 export interface UseSlideoverOpenOptions {
     props?: Record<string, unknown>;
     /** Registered with Reka as the panel's accessible name, visually hidden - the opened component still supplies its own visible header via the content slot. */
@@ -28,9 +13,6 @@ export interface UseSlideoverOpenOptions {
     transition?: boolean;
 }
 export interface UseSlideoverReturn {
-    slideovers: Ref<SlideoverInstance[]>;
     open: <T = void>(component: Component, options?: UseSlideoverOpenOptions) => Promise<T | undefined>;
-    close: (id: number, value?: unknown) => void;
-    remove: (id: number) => void;
 }
 export declare function useSlideover(): UseSlideoverReturn;

package/dist/runtime/composables/use-slideover.js

@@ -1,11 +1,15 @@
-import { markRaw, ref } from "vue";
-const slideovers = ref([]);
-let counter = 0;
+import { markRaw } from "vue";
+import { useSlideoverService } from "../internal/programmatic-services.js";
+import { useProgrammaticThemeSnapshot } from "../utils/programmatic-theme.js";
 export function useSlideover() {
+  const service = useSlideoverService();
+  const snapshotTheme = useProgrammaticThemeSnapshot();
   function open(component, options) {
+    if (import.meta.server)
+      return Promise.reject(new Error("[useSlideover] open() is client-only. Render SSlideover declaratively during SSR."));
     return new Promise((resolve) => {
-      slideovers.value.push({
-        id: counter++,
+      service.instances.value.push({
+        id: service.nextId(),
         // Vue components are meant to stay an opaque, non-reactive value -
         // without this, pushing one into this reactive array wraps it in
         // a reactive proxy too, which Vue's own dev warning flags as
@@ -13,6 +17,7 @@ export function useSlideover() {
         component: markRaw(component),
         props: options?.props ?? {},
         isOpen: true,
+        _settled: false,
         title: options?.title,
         description: options?.description,
         side: options?.side,
@@ -21,21 +26,10 @@ export function useSlideover() {
         modal: options?.modal,
         overlay: options?.overlay,
         transition: options?.transition,
+        _theme: snapshotTheme(),
         resolve
       });
     });
   }
-  function close(id, value) {
-    const instance = slideovers.value.find((s) => s.id === id);
-    if (!instance)
-      return;
-    instance.isOpen = false;
-    instance.resolve(value);
-  }
-  function remove(id) {
-    const index = slideovers.value.findIndex((s) => s.id === id);
-    if (index !== -1)
-      slideovers.value.splice(index, 1);
-  }
-  return { slideovers, open, close, remove };
+  return { open };
 }

package/dist/runtime/composables/use-table.d.ts

@@ -1,34 +1,91 @@
+import type { ColumnDef, ColumnVisibilityState, ExpandedState, RowData, RowSelectionState, SortingState } from '@tanstack/vue-table';
 import type { ComputedRef } from 'vue';
-interface UseTableProps {
-    data: unknown[];
+/**
+ * One fixed feature set for every STable instance, registered once at module
+ * scope - not per-instance. This is what createTableHook is for: it pre-binds
+ * TFeatures so STable never needs to expose a features generic to consumers,
+ * who only ever get this one capability set rather than TanStack's full
+ * a-la-carte feature menu. columnPinning/columnVisibility need no row model
+ * of their own (they don't change which rows exist, only column layout).
+ */
+declare const tableHook: import("@tanstack/vue-table").CreateTableHookResult<{
+    rowSortingFeature: import("@tanstack/vue-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/vue-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/vue-table").TableFeature;
+    rowExpandingFeature: import("@tanstack/vue-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/vue-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/vue-table").TableFeature;
+    columnPinningFeature: import("@tanstack/vue-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/vue-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    filteredRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    expandedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import("@tanstack/vue-table").CreatedSortFn<any, any>;
+    };
+    filterFns: {
+        includesString: import("@tanstack/vue-table").CreatedFilterFn<any, any>;
+    };
+}, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>>;
+export type TableColumnDef<TData extends RowData = RowData> = ColumnDef<typeof tableHook.appFeatures, TData, any>;
+export type TableSortingState = SortingState;
+export type TableRowSelectionState = RowSelectionState;
+export type TableExpandedState = ExpandedState;
+export type TableColumnVisibilityState = ColumnVisibilityState;
+export type TableGetRowId<TData extends RowData = RowData> = (row: TData, index: number) => string;
+/** Creates TanStack v9 column definitions bound to STable's fixed feature set. */
+export declare const createTableColumnHelper: <TData extends RowData>() => import("@tanstack/vue-table").AppColumnHelper<{
+    rowSortingFeature: import("@tanstack/vue-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/vue-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/vue-table").TableFeature;
+    rowExpandingFeature: import("@tanstack/vue-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/vue-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/vue-table").TableFeature;
+    columnPinningFeature: import("@tanstack/vue-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/vue-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    filteredRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    expandedRowModel: (table: import("@tanstack/vue-table").Table<any, any>) => () => import("@tanstack/vue-table").RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import("@tanstack/vue-table").CreatedSortFn<any, any>;
+    };
+    filterFns: {
+        includesString: import("@tanstack/vue-table").CreatedFilterFn<any, any>;
+    };
+}, TData, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>>;
+interface UseTableProps<TData extends RowData> {
+    data: TData[];
     selectable?: boolean;
     pageSize?: number;
     virtualize?: unknown;
-    sorting?: any[];
-    defaultSorting?: any[];
-    rowSelection?: Record<string, boolean>;
+    sorting?: TableSortingState;
+    defaultSorting?: TableSortingState;
+    rowSelection?: TableRowSelectionState;
     globalFilter?: string;
     pageIndex?: number;
-    expanded?: any;
-    columnVisibility?: Record<string, boolean>;
+    expanded?: TableExpandedState;
+    columnVisibility?: TableColumnVisibilityState;
+    getRowId?: TableGetRowId<TData>;
     manualSorting?: boolean;
     manualFiltering?: boolean;
     manualPagination?: boolean;
 }
 interface UseTableEmit {
-    (event: 'update:sorting', value: any[]): void;
-    (event: 'update:rowSelection', value: Record<string, boolean>): void;
+    (event: 'update:sorting', value: TableSortingState): void;
+    (event: 'update:rowSelection', value: TableRowSelectionState): void;
     (event: 'update:globalFilter', value: string): void;
     (event: 'update:pageIndex', value: number): void;
-    (event: 'update:expanded', value: any): void;
-    (event: 'update:columnVisibility', value: Record<string, boolean>): void;
+    (event: 'update:expanded', value: TableExpandedState): void;
+    (event: 'update:columnVisibility', value: TableColumnVisibilityState): void;
 }
 /**
  * Pure TanStack wiring - the final column defs (including any synthetic
  * selection/expand column, which need to render SCheckbox/an expand button
  * and so live in Table.vue instead) are passed in already built.
  */
-export declare function useTable(props: UseTableProps, emit: UseTableEmit, columns: ComputedRef<any[]>, columnPinning: ComputedRef<{
+export declare function useTable<TData extends RowData>(props: UseTableProps<TData>, emit: UseTableEmit, columns: ComputedRef<TableColumnDef<TData>[]>, columnPinning: ComputedRef<{
     start: string[];
     end: string[];
 }>): {
@@ -51,13 +108,13 @@ export declare function useTable(props: UseTableProps, emit: UseTableEmit, colum
         filterFns: {
             includesString: import("@tanstack/vue-table").CreatedFilterFn<any, any>;
         };
-    }, import("@tanstack/vue-table").RowData, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>>;
-    sorting: import("vue").WritableComputedRef<any[], any[]>;
-    rowSelection: import("vue").WritableComputedRef<Record<string, boolean>, Record<string, boolean>>;
+    }, TData, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>, Record<string, import("@tanstack/vue-table").ComponentType<any>>>;
+    sorting: import("vue").WritableComputedRef<SortingState, SortingState>;
+    rowSelection: import("vue").WritableComputedRef<RowSelectionState, RowSelectionState>;
     globalFilter: import("vue").WritableComputedRef<string, string>;
     pageIndex: import("vue").WritableComputedRef<number, number>;
-    expanded: import("vue").WritableComputedRef<any, any>;
-    columnVisibility: import("vue").WritableComputedRef<Record<string, boolean>, Record<string, boolean>>;
+    expanded: import("vue").WritableComputedRef<ExpandedState, ExpandedState>;
+    columnVisibility: import("vue").WritableComputedRef<ColumnVisibilityState, ColumnVisibilityState>;
     effectivePageSize: ComputedRef<number>;
 };
 export {};

package/dist/runtime/composables/use-table.js

@@ -16,7 +16,7 @@ import {
   sortFn_alphanumeric
 } from "@tanstack/vue-table";
 import { computed, ref } from "vue";
-const { useAppTable } = createTableHook({
+const tableHook = createTableHook({
   features: {
     rowSortingFeature,
     rowSelectionFeature,
@@ -34,6 +34,8 @@ const { useAppTable } = createTableHook({
     filterFns: { includesString: filterFn_includesString }
   }
 });
+const { useAppTable } = tableHook;
+export const createTableColumnHelper = tableHook.createAppColumnHelper;
 export function useTable(props, emit, columns, columnPinning) {
   const internalSorting = ref(props.defaultSorting ?? []);
   const sorting = computed({
@@ -88,6 +90,7 @@ export function useTable(props, emit, columns, columnPinning) {
     data: computed(() => props.data),
     columns,
     enableRowSelection: computed(() => !!props.selectable),
+    getRowId: props.getRowId,
     // Row expansion otherwise only allows expanding rows that already have
     // real hierarchical subRows - this table's own expansion is manual
     // (detail content via the `expanded` slot), not a subRow tree.

package/dist/runtime/composables/use-toast.d.ts

@@ -1,15 +1,15 @@
-export interface ToastItem {
-    id: number;
+import type { ColorRole } from '../utils/color-registry.js';
+export interface ToastOptions {
     title?: string;
     description?: string;
     duration?: number;
-    /** Status - tints the icon and adds a matching left-edge accent. Scoped to just these four (not the full color palette Button/Badge/Chip expose) since a toast's color only ever means "what kind of status is this." */
-    color?: 'success' | 'danger' | 'warning' | 'info';
+    /** Tints the icon and left-edge accent with any registered semantic role. Built-in feedback intents also select a default icon. */
+    color?: ColorRole;
     /** Overrides the color's own default icon (or shows an icon with no color set at all). */
     icon?: string;
 }
-export declare function useToast(): {
-    toasts: import("vue").Ref<ToastItem[], ToastItem[]>;
-    add: (toast: Omit<ToastItem, "id">) => number;
+export interface UseToastReturn {
+    add: (toast: ToastOptions) => number;
     remove: (id: number) => void;
-};
+}
+export declare function useToast(): UseToastReturn;