@sewadah/selaras 0.1.1

package/dist/runtime/components/Table.vue

@@ -0,0 +1,339 @@
+<script setup>
+import { FlexRender } from "@tanstack/vue-table";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { computed, getCurrentInstance, h, nextTick, onMounted, onUnmounted, ref, useSlots, watch, watchEffect } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { useTable } from "../composables/use-table";
+import { tableTheme } from "../theme/table";
+import { collectColumnPinning, convertChildrenToColumns } from "../utils/table-columns";
+import { exportTableToCsv } from "../utils/table-export";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
+import Button from "./Button.vue";
+import Checkbox from "./Checkbox.vue";
+import Icon from "./Icon.vue";
+import Input from "./Input.vue";
+import Pagination from "./Pagination.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  data: { type: Array, required: true },
+  columns: { type: Array, required: false },
+  selectable: { type: Boolean, required: false },
+  pageSize: { type: Number, required: false },
+  loading: { type: Boolean, required: false },
+  sorting: { type: Array, required: false },
+  defaultSorting: { type: Array, required: false },
+  rowSelection: { type: Object, required: false },
+  globalFilter: { type: String, required: false },
+  pageIndex: { type: Number, required: false },
+  size: { type: String, required: false, default: "md" },
+  gridlines: { type: Boolean, required: false },
+  striped: { type: Boolean, required: false },
+  expandable: { type: Boolean, required: false },
+  expanded: { type: null, required: false },
+  columnVisibility: { type: Object, required: false },
+  columnToggle: { type: Boolean, required: false },
+  scrollHeight: { type: String, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  manualSorting: { type: Boolean, required: false },
+  manualFiltering: { type: Boolean, required: false },
+  manualPagination: { type: Boolean, required: false },
+  rowClass: { type: Function, required: false },
+  rowStyle: { type: Function, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:sorting", "update:rowSelection", "update:globalFilter", "update:pageIndex", "update:expanded", "update:columnVisibility", "rowClick", "rowContextmenu"]);
+const slots = useSlots();
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("table", tableTheme);
+const ui = computed(() => theme.value({ size: props.size, gridlines: props.gridlines, striped: props.striped, scrollable: !!props.scrollHeight }));
+const selectColumn = {
+  id: "__select__",
+  header: ({ table: table2 }) => h(Checkbox, {
+    "modelValue": table2.getIsAllRowsSelected() ? true : table2.getIsSomeRowsSelected() ? "indeterminate" : false,
+    "onUpdate:modelValue": () => table2.toggleAllRowsSelected()
+  }),
+  cell: ({ row }) => h(Checkbox, {
+    "modelValue": row.getIsSelected(),
+    "disabled": !row.getCanSelect(),
+    "onUpdate:modelValue": () => row.toggleSelected()
+  }),
+  enableSorting: false,
+  enableColumnFilter: false
+};
+const expandColumn = {
+  id: "__expand__",
+  header: "",
+  cell: ({ row }) => h("button", {
+    "type": "button",
+    "class": ui.value.expandButton(),
+    "aria-label": row.getIsExpanded() ? messages.value.collapseRow : messages.value.expandRow,
+    "onClick": () => row.toggleExpanded()
+  }, [h(Icon, { "name": icons.value.chevronRight, "class": ui.value.expandChevron(), "data-expanded": row.getIsExpanded() || void 0 })]),
+  enableSorting: false,
+  enableColumnFilter: false
+};
+const columns = computed(() => {
+  const base = props.columns ?? convertChildrenToColumns(slots.default?.());
+  const withExpand = props.expandable ? [expandColumn, ...base] : base;
+  return props.selectable ? [selectColumn, ...withExpand] : withExpand;
+});
+const columnPinning = computed(() => collectColumnPinning(columns.value));
+const { table, pageIndex, columnVisibility, effectivePageSize } = useTable(props, emit, columns, columnPinning);
+if (import.meta.dev) {
+  watchEffect(() => {
+    const firstRow = props.data[0];
+    if (!firstRow)
+      return;
+    for (const column of columns.value) {
+      if (column.accessorKey && !(column.accessorKey in firstRow))
+        console.warn(`[SColumn] field "${column.accessorKey}" was not found on the first row of data.`);
+    }
+  });
+}
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const wrapperProps = computed(() => resolveSlot(ui.value.wrapper, props.ui?.wrapper));
+const tableProps = computed(() => resolveSlot(ui.value.table, props.ui?.table));
+const theadProps = computed(() => resolveSlot(ui.value.thead, props.ui?.thead));
+const trProps = computed(() => resolveSlot(ui.value.tr, props.ui?.tr));
+const instance = getCurrentInstance();
+function isRowClickable() {
+  return !!instance?.vnode.props?.onRowClick;
+}
+function bodyRowProps(rowOriginal) {
+  const extraClass = [
+    isRowClickable() ? "cursor-pointer" : void 0,
+    props.rowClass?.(rowOriginal)
+  ].filter(Boolean).join(" ") || void 0;
+  const base = resolveSlot(ui.value.tr, withFallthroughClass(extraClass, props.ui?.tr));
+  const rowStyle = props.rowStyle?.(rowOriginal);
+  return rowStyle ? { ...base, style: { ...base.style, ...rowStyle } } : base;
+}
+function onRowClick(rowOriginal, event) {
+  emit("rowClick", rowOriginal, event);
+}
+function onRowContextmenu(rowOriginal, event) {
+  emit("rowContextmenu", rowOriginal, event);
+}
+const thProps = computed(() => resolveSlot(ui.value.th, props.ui?.th));
+const thSortableClass = computed(() => ui.value.thSortable());
+const sortIconProps = computed(() => resolveSlot(ui.value.sortIcon, props.ui?.sortIcon));
+const tdProps = computed(() => resolveSlot(ui.value.td, props.ui?.td));
+const tfootProps = computed(() => resolveSlot(ui.value.tfoot, props.ui?.tfoot));
+const emptyStateProps = computed(() => resolveSlot(ui.value.emptyState, props.ui?.emptyState));
+const filterInputProps = computed(() => resolveSlot(ui.value.filterInput, props.ui?.filterInput));
+const paginationWrapperProps = computed(() => resolveSlot(ui.value.paginationWrapper, props.ui?.paginationWrapper));
+const paginationInfoProps = computed(() => resolveSlot(ui.value.paginationInfo, props.ui?.paginationInfo));
+const paginationButtonsProps = computed(() => resolveSlot(ui.value.paginationButtons, props.ui?.paginationButtons));
+const loadingOverlayProps = computed(() => resolveSlot(ui.value.loadingOverlay, props.ui?.loadingOverlay));
+const loadingIconProps = computed(() => resolveSlot(ui.value.loadingIcon, props.ui?.loadingIcon));
+const expandedRowProps = computed(() => resolveSlot(ui.value.expandedRow, props.ui?.expandedRow));
+const expandedCellProps = computed(() => resolveSlot(ui.value.expandedCell, props.ui?.expandedCell));
+const columnToggleProps = computed(() => resolveSlot(ui.value.columnToggle, props.ui?.columnToggle));
+const columnTogglePanelProps = computed(() => resolveSlot(ui.value.columnTogglePanel, props.ui?.columnTogglePanel));
+const columnToggleItemProps = computed(() => resolveSlot(ui.value.columnToggleItem, props.ui?.columnToggleItem));
+const hasFooter = computed(
+  () => table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer))
+);
+const headerRefs = /* @__PURE__ */ new Map();
+function setHeaderRef(id, el) {
+  if (el)
+    headerRefs.set(id, el);
+  else
+    headerRefs.delete(id);
+}
+const pinnedOffsets = ref({});
+async function recomputePinnedOffsets() {
+  await nextTick();
+  const offsets = {};
+  let left = 0;
+  for (const column of table.getStartVisibleLeafColumns()) {
+    offsets[column.id] = left;
+    left += headerRefs.get(column.id)?.getBoundingClientRect().width ?? 0;
+  }
+  let right = 0;
+  for (const column of [...table.getEndVisibleLeafColumns()].reverse()) {
+    offsets[column.id] = right;
+    right += headerRefs.get(column.id)?.getBoundingClientRect().width ?? 0;
+  }
+  pinnedOffsets.value = offsets;
+}
+onMounted(recomputePinnedOffsets);
+watch([columns, columnVisibility], recomputePinnedOffsets);
+function pinnedStyle(cell) {
+  const side = cell.column.getIsPinned();
+  if (!side)
+    return void 0;
+  const offset = pinnedOffsets.value[cell.column.id] ?? 0;
+  return side === "start" ? { insetInlineStart: `${offset}px` } : { insetInlineEnd: `${offset}px` };
+}
+const wrapperEl = ref();
+const virtualizeConfig = computed(() => {
+  if (!props.virtualize)
+    return null;
+  const opts = props.virtualize === true ? {} : props.virtualize;
+  return { estimateSize: opts.estimateSize ?? 40, overscan: opts.overscan ?? 8 };
+});
+const rowVirtualizer = useVirtualizer(computed(() => ({
+  count: table.getRowModel().rows.length,
+  getScrollElement: () => wrapperEl.value ?? null,
+  estimateSize: () => virtualizeConfig.value?.estimateSize ?? 40,
+  overscan: virtualizeConfig.value?.overscan ?? 8
+})));
+const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems());
+const virtualPaddingTop = computed(() => virtualRows.value[0]?.start ?? 0);
+const virtualPaddingBottom = computed(() => {
+  if (!virtualRows.value.length)
+    return 0;
+  const last = virtualRows.value[virtualRows.value.length - 1];
+  return rowVirtualizer.value.getTotalSize() - (last.start + last.size);
+});
+const visibleRows = computed(() => {
+  const rows = table.getRowModel().rows;
+  return virtualizeConfig.value ? virtualRows.value.map((v) => rows[v.index]) : rows;
+});
+const showColumnTogglePanel = ref(false);
+const toggleableColumns = computed(() => table.getAllLeafColumns().filter((c) => !c.id.startsWith("__")));
+function onDocumentClick(event) {
+  if (!event.target.closest("[data-column-toggle]"))
+    showColumnTogglePanel.value = false;
+}
+onMounted(() => document.addEventListener("click", onDocumentClick));
+onUnmounted(() => document.removeEventListener("click", onDocumentClick));
+defineExpose({
+  exportCsv: (filename) => exportTableToCsv(table, filename)
+});
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <div v-if="columnToggle" :class="applyClassPrefix('mb-2 flex justify-end')">
+      <div data-column-toggle v-bind="columnToggleProps">
+        <Button variant="outline" size="sm" :icon="icons.columns" @click="showColumnTogglePanel = !showColumnTogglePanel">
+          {{ messages.columns }}
+        </Button>
+        <div v-if="showColumnTogglePanel" v-bind="columnTogglePanelProps">
+          <label v-for="column in toggleableColumns" :key="column.id" v-bind="columnToggleItemProps">
+            <Checkbox :model-value="column.getIsVisible()" @update:model-value="column.toggleVisibility()" />
+            {{ typeof column.columnDef.header === "string" ? column.columnDef.header : column.id }}
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div ref="wrapperEl" v-bind="wrapperProps" :style="scrollHeight ? { maxHeight: scrollHeight } : void 0">
+      <table v-bind="tableProps">
+        <thead v-bind="theadProps">
+          <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id" v-bind="trProps">
+            <template v-for="header in headerGroup.headers" :key="header.id">
+              <th
+                v-if="header.rowSpan !== 0"
+                :ref="(el) => setHeaderRef(header.column.id, el)"
+                :colspan="header.colSpan"
+                :rowspan="header.rowSpan"
+                v-bind="thProps"
+                :class="header.column.getCanSort() ? thSortableClass : void 0"
+                :data-pinned="header.column.getIsPinned() || void 0"
+                :style="pinnedStyle(header)"
+                :tabindex="header.column.getCanSort() ? 0 : void 0"
+                :aria-sort="header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : header.column.getCanSort() ? 'none' : void 0"
+                @click="header.column.getToggleSortingHandler()?.($event)"
+                @keydown.enter="header.column.getToggleSortingHandler()?.($event)"
+                @keydown.space.prevent="header.column.getToggleSortingHandler()?.($event)"
+              >
+                <template v-if="!header.isPlaceholder || header.rowSpan > 1">
+                  <FlexRender :header="header" />
+                  <Icon
+                    v-if="header.column.getIsSorted() === 'asc'"
+                    :name="icons.sortAscending"
+                    v-bind="sortIconProps"
+                  />
+                  <Icon
+                    v-else-if="header.column.getIsSorted() === 'desc'"
+                    :name="icons.sortDescending"
+                    v-bind="sortIconProps"
+                  />
+                  <div v-if="header.column.getCanFilter()">
+                    <Input
+                      size="sm"
+                      :model-value="header.column.getFilterValue() ?? ''"
+                      :placeholder="messages.filterPlaceholder"
+                      v-bind="filterInputProps"
+                      @click.stop
+                      @update:model-value="(value) => header.column.setFilterValue(value)"
+                    />
+                  </div>
+                </template>
+              </th>
+            </template>
+          </tr>
+        </thead>
+
+        <tbody v-if="table.getRowModel().rows.length">
+          <tr v-if="virtualizeConfig && virtualPaddingTop > 0">
+            <td :colspan="table.getVisibleLeafColumns().length" :style="{ height: `${virtualPaddingTop}px`, padding: 0, border: 0 }" />
+          </tr>
+          <template v-for="row in visibleRows" :key="row.id">
+            <tr
+              v-bind="bodyRowProps(row.original)"
+              @click="onRowClick(row.original, $event)"
+              @contextmenu="onRowContextmenu(row.original, $event)"
+            >
+              <td
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                v-bind="tdProps"
+                :data-pinned="cell.column.getIsPinned() || void 0"
+                :style="pinnedStyle(cell)"
+              >
+                <FlexRender :cell="cell" />
+              </td>
+            </tr>
+            <tr v-if="row.getIsExpanded()" v-bind="expandedRowProps">
+              <td :colspan="row.getVisibleCells().length" v-bind="expandedCellProps">
+                <slot name="expanded" :row="row.original" />
+              </td>
+            </tr>
+          </template>
+          <tr v-if="virtualizeConfig && virtualPaddingBottom > 0">
+            <td :colspan="table.getVisibleLeafColumns().length" :style="{ height: `${virtualPaddingBottom}px`, padding: 0, border: 0 }" />
+          </tr>
+        </tbody>
+
+        <tfoot v-if="hasFooter" v-bind="tfootProps">
+          <tr v-for="footerGroup in table.getFooterGroups()" :key="footerGroup.id" v-bind="trProps">
+            <th v-for="header in footerGroup.headers" :key="header.id" :colspan="header.colSpan" v-bind="thProps">
+              <FlexRender v-if="!header.isPlaceholder" :footer="header" />
+            </th>
+          </tr>
+        </tfoot>
+      </table>
+
+      <div v-if="!table.getRowModel().rows.length" v-bind="emptyStateProps">
+        <slot name="empty">
+          {{ messages.noData }}
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="loading" v-bind="loadingOverlayProps">
+      <Icon :name="icons.loading" v-bind="loadingIconProps" />
+    </div>
+
+    <div v-if="!manualPagination && table.getPageCount() > 1" v-bind="paginationWrapperProps">
+      <span v-bind="paginationInfoProps">
+        {{ messages.paginationInfo(pageIndex + 1, table.getPageCount()) }}
+      </span>
+      <div v-bind="paginationButtonsProps">
+        <Pagination
+          :page="pageIndex + 1"
+          :total="table.getFilteredRowModel().rows.length"
+          :items-per-page="effectivePageSize"
+          :size="size"
+          @update:page="(value) => table.setPageIndex(value - 1)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,83 @@
+import type { TableThemeSlots } from '../theme/table.js';
+import type { UiProp } from '../utils/ui.js';
+export interface TableProps {
+    data: unknown[];
+    columns?: any[];
+    selectable?: boolean;
+    pageSize?: number;
+    loading?: boolean;
+    sorting?: any[];
+    defaultSorting?: any[];
+    rowSelection?: Record<string, boolean>;
+    globalFilter?: string;
+    pageIndex?: number;
+    size?: 'sm' | 'md' | 'lg';
+    gridlines?: boolean;
+    striped?: boolean;
+    expandable?: boolean;
+    expanded?: any;
+    columnVisibility?: Record<string, boolean>;
+    columnToggle?: boolean;
+    /** Enables vertical scroll with a sticky header, capped at this CSS height (e.g. '24rem'). */
+    scrollHeight?: string;
+    virtualize?: boolean | {
+        estimateSize?: number;
+        overscan?: number;
+    };
+    /** Opts out of the local sorted/filtered/paginated row models - set when `data` is already sorted/filtered/paginated server-side, so this table doesn't redundantly (and incorrectly) reprocess an already-server-processed slice. `sorting`/`globalFilter`/`pageIndex` still drive the UI and still emit their `update:*` events the same way - only the *local row model* is skipped, not the state itself. `manualPagination` also suppresses the built-in Pagination UI entirely (there's no way to know the real page count from a server-paginated slice) - bring your own `SPagination`, bound to your own server metadata, the same way this table already expects you to bring your own search input for `globalFilter`. */
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
+    manualPagination?: boolean;
+    /** Adds a class to a body row based on its own data - e.g. highlighting a flagged row. Called per row, not per render, so keep it cheap. */
+    rowClass?: (row: unknown) => string | undefined;
+    /** Same as `rowClass`, for inline styles. */
+    rowStyle?: (row: unknown) => Record<string, string> | undefined;
+    ui?: UiProp<TableThemeSlots>;
+}
+export interface TableEmits {
+    'update:sorting': [value: any[]];
+    'update:rowSelection': [value: Record<string, boolean>];
+    'update:globalFilter': [value: string];
+    'update:pageIndex': [value: number];
+    'update:expanded': [value: any];
+    'update:columnVisibility': [value: Record<string, boolean>];
+    'rowClick': [row: unknown, event: MouseEvent];
+    'rowContextmenu': [row: unknown, event: MouseEvent];
+}
+declare var __VLS_44: {
+    row: import("@tanstack/vue-table").RowData;
+}, __VLS_51: {};
+type __VLS_Slots = {} & {
+    expanded?: (props: typeof __VLS_44) => any;
+} & {
+    empty?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableProps, {
+    exportCsv: (filename?: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sorting": (value: any[]) => any;
+    "update:rowSelection": (value: Record<string, boolean>) => any;
+    "update:globalFilter": (value: string) => any;
+    "update:pageIndex": (value: number) => any;
+    "update:expanded": (value: any) => any;
+    "update:columnVisibility": (value: Record<string, boolean>) => any;
+    rowClick: (row: unknown, event: MouseEvent) => any;
+    rowContextmenu: (row: unknown, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{
+    "onUpdate:sorting"?: ((value: any[]) => any) | undefined;
+    "onUpdate:rowSelection"?: ((value: Record<string, boolean>) => any) | undefined;
+    "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
+    "onUpdate:pageIndex"?: ((value: number) => any) | undefined;
+    "onUpdate:expanded"?: ((value: any) => any) | undefined;
+    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
+    onRowClick?: ((row: unknown, event: MouseEvent) => any) | undefined;
+    onRowContextmenu?: ((row: unknown, event: MouseEvent) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,43 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { TabsThemeSlots } from '../theme/tabs.js';
+import type { UiProp } from '../utils/ui.js';
+import { tabsTheme } from '../theme/tabs.js';
+type TabsVariants = VariantProps<typeof tabsTheme>;
+export interface TabItem {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface TabsProps {
+    items: TabItem[];
+    variant?: TabsVariants['variant'];
+    defaultValue?: string;
+    modelValue?: string;
+    ui?: UiProp<TabsThemeSlots>;
+}
+export interface TabsEmits {
+    'update:modelValue': [value: string];
+}
+declare var __VLS_27: {
+    item: TabItem;
+    index: number;
+}, __VLS_41: string, __VLS_42: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
+} & {
+    label?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Tabs.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "reka-ui";
+import { computed } from "vue";
+import { tabsTheme } from "../theme/tabs";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  variant: { type: null, required: false },
+  defaultValue: { type: String, required: false },
+  modelValue: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineEmits(["update:modelValue"]);
+const theme = useComponentTheme("tabs", tabsTheme);
+const ui = computed(() => theme.value({ variant: props.variant }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
+const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const indicatorProps = computed(() => resolveSlot(ui.value.indicator, props.ui?.indicator));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+function itemValue(item, index) {
+  return item.value ?? String(index);
+}
+</script>
+
+<template>
+  <TabsRoot
+    :default-value="defaultValue"
+    :model-value="modelValue"
+    v-bind="rootProps"
+    @update:model-value="(value) => $emit('update:modelValue', value)"
+  >
+    <TabsList v-bind="listProps">
+      <TabsTrigger
+        v-for="(item, index) in items"
+        :key="itemValue(item, index)"
+        :value="itemValue(item, index)"
+        :disabled="item.disabled"
+        v-bind="triggerProps"
+      >
+        <Icon v-if="item.icon" :name="item.icon" v-bind="iconProps" />
+        <slot name="label" :item="item" :index="index">
+          {{ item.label }}
+        </slot>
+      </TabsTrigger>
+      <TabsIndicator aria-hidden="true" v-bind="indicatorProps" />
+    </TabsList>
+    <TabsContent
+      v-for="(item, index) in items"
+      :key="itemValue(item, index)"
+      :value="itemValue(item, index)"
+      v-bind="contentProps"
+    >
+      <slot :name="itemValue(item, index)" />
+    </TabsContent>
+  </TabsRoot>
+</template>

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

@@ -0,0 +1,43 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { TabsThemeSlots } from '../theme/tabs.js';
+import type { UiProp } from '../utils/ui.js';
+import { tabsTheme } from '../theme/tabs.js';
+type TabsVariants = VariantProps<typeof tabsTheme>;
+export interface TabItem {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface TabsProps {
+    items: TabItem[];
+    variant?: TabsVariants['variant'];
+    defaultValue?: string;
+    modelValue?: string;
+    ui?: UiProp<TabsThemeSlots>;
+}
+export interface TabsEmits {
+    'update:modelValue': [value: string];
+}
+declare var __VLS_27: {
+    item: TabItem;
+    index: number;
+}, __VLS_41: string, __VLS_42: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
+} & {
+    label?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { TextareaThemeSlots } from '../theme/textarea.js';
+import type { UiProp } from '../utils/ui.js';
+import { textareaTheme } from '../theme/textarea.js';
+type TextareaVariants = VariantProps<typeof textareaTheme>;
+export interface TextareaProps {
+    id?: string;
+    name?: string;
+    modelValue?: string;
+    placeholder?: string;
+    rows?: number;
+    size?: TextareaVariants['size'];
+    disabled?: boolean;
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: TextareaVariants['color'];
+    clearable?: boolean;
+    icon?: string;
+    trailingIcon?: string;
+    /** Grows the box to fit its content instead of a fixed height + scrollbar/drag-handle. */
+    autoresize?: boolean;
+    /** autoresize only - caps how many rows it can grow to before switching to a scrollbar (0/unset grows indefinitely). */
+    maxrows?: number;
+    ui?: UiProp<TextareaThemeSlots>;
+}
+export interface TextareaEmits {
+    'update:modelValue': [value: string];
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    'clear-icon'?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};