iryx-ui 0.5.0 → 0.6.0

package/README.md

@@ -197,6 +197,24 @@ For a static re-brand, plain CSS works too — tokens are just variables:
 }
 ```
 
+### Typeface
+
+The library ships **no webfont** — that would put font files, a licence and a
+network request into every app whether it wanted them or not. It reads one
+variable, defaulting to the system stack. Point it at your own family and
+everything follows, including Tailwind's `font-sans`:
+
+```css
+@import "@fontsource-variable/instrument-sans"; /* or a <link>, or self-hosted */
+
+:root {
+  --iryx-font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Unlike the colour tokens, this one is not mode-specific — there is no `.dark`
+counterpart to keep in sync.
+
 Available tokens, each usable as a Tailwind color (`bg-primary`,
 `text-muted-foreground`, …):
 
@@ -292,8 +310,9 @@ app.use(createIryxUi({ unstyled: true }))
 
 | Component | Description |
 | --- | --- |
-| `IAlert` | Inline banner in four variants, with a variant icon and optional dismiss |
-| `IBadge` | Status pill — five variants × `soft`/`solid` tones × three sizes, optional `dot` |
+| `IAlert` | Inline, contextual message in four variants — variant icon, `actions` slot, optional dismiss |
+| `IBanner` | Page-level announcement — full-bleed, six variants, sticky top or fixed bottom |
+| `IBadge` | Status pill — five variants × three sizes; `dot` moves the colour onto a leading dot |
 | `IToaster` | Host for `useToast()`; six viewport positions, stacking, action buttons |
 | `IDialog` | Modal with header/body/footer slots, `dismissible` and `showClose` |
 | `IConfirmDialog` | Host for `useConfirm()` — renders the promise-based confirmation |
@@ -308,9 +327,10 @@ app.use(createIryxUi({ unstyled: true }))
 | --- | --- |
 | `ITabs` | `solid` or `line` variants with an animated indicator, horizontal or vertical |
 | `IBreadcrumb` | Trail from an `items` array; the last crumb is marked as the current page |
-| `IPagination` | Page list with ellipsis, edge pages and prev/next controls |
+| `IPagination` | Page list with ellipsis, edge pages and prev/next controls; `align` places it, `size` sets the button scale |
 | `IStepper` | Multi-step progress, horizontal or vertical, optional `linear` ordering |
 | `IStat` | KPI tile — label, value, signed delta with trend colour, and a hint |
+| `ITable` | Data table — sorting, selection, expansion and per-cell slots, client- or server-driven |
 
 Every component supports `unstyled` and a `class` override; multi-part ones take a `ui` prop for per-slot classes.
 
@@ -607,6 +627,188 @@ The control inside a field automatically inherits its `id`, invalid styling and
 
 Use the `#label` / `#description` slots instead of the props when you need markup (a link, a badge) inside the text.
 
+### Alerts and banners
+
+They look similar and do different jobs, so they're separate components.
+
+**`IAlert` is contextual.** It sits in the flow next to the thing it's about —
+a failed upload, a form that won't submit — boxed, with an icon and a title.
+Danger and warning variants take `role="alert"` so a screen reader interrupts,
+because the user caused it and needs to know now.
+
+**`IBanner` is page-level.** It spans the full width and announces something
+that isn't about any one element: a trial ending, scheduled maintenance. It's a
+labelled `role="region"`, never an alert — it's ambient, so interrupting
+someone mid-task would be wrong.
+
+```vue
+<IBanner
+  v-model:open="showTrial"
+  variant="primary"
+  position="top"
+  title="Trial ends in 3 days."
+  description="Upgrade to keep your data."
+  closable
+  label="Trial notice"
+>
+  <template #actions>
+    <IButton size="sm" variant="outline">Upgrade</IButton>
+  </template>
+</IBanner>
+```
+
+`position` is `static` (in flow), `top` (sticky) or `bottom` (fixed to the
+viewport, with the rule moved to its top edge). `contained` keeps the text at a
+readable measure while the fill still spans the window.
+
+Both dismiss through `v-model:open`, so the usual case is one binding instead
+of a `close` handler plus a `v-if`. `close` still fires if you need to persist
+or confirm first:
+
+```vue
+<IAlert v-model:open="visible" variant="danger" title="Upload failed" closable>
+  The file was larger than 10 MB.
+  <template #actions>
+    <IButton size="sm" @click="retry()">Retry</IButton>
+  </template>
+</IAlert>
+```
+
+### Tables
+
+`ITable` takes `rows` and `columns` and renders a real `<table>`. Columns are
+plain objects — no render functions — and anything beyond the raw value is a
+slot:
+
+```vue
+<script setup>
+const columns = [
+  { key: 'number', label: 'Invoice', sortable: true },
+  { key: 'customer.name', label: 'Customer', sortable: true, sortKey: 'customer_name' },
+  { key: 'total', label: 'Total', sortable: true, numeric: true },
+  { key: 'status', label: 'Status' },
+]
+</script>
+
+<template>
+  <ITable :rows="invoices" :columns="columns" label="Invoices">
+    <template #cell-total="{ value }">
+      {{ formatMoney(value) }}
+    </template>
+    <template #cell-status="{ row }">
+      <IBadge :variant="row.paid ? 'success' : 'warning'">
+        {{ row.paid ? 'Paid' : 'Due' }}
+      </IBadge>
+    </template>
+  </ITable>
+</template>
+```
+
+`key` doubles as the accessor (dot-notation reaches nested values) and the slot
+suffix, so `#cell-customer.name` targets that column. `#header-<key>` replaces a
+header the same way.
+
+`numeric` gives a column tabular figures and end alignment, so amounts line up
+digit-for-digit down the column instead of wandering with each glyph's width.
+Set `align` alongside it to keep the figures but place the column differently.
+
+#### Client or server
+
+**The table never fetches.** It renders what you give it and emits what the
+user did, so caching, cancellation and auth stay in your data layer.
+
+Which mode it runs in is decided by one prop. Omit `total` and it sorts and
+paginates `rows` itself. Provide `total` and it does neither — the rows you
+passed are already the page the server returned, so it only reflects state and
+emits changes:
+
+```vue
+<ITable
+  v-model:sort="sort"
+  v-model:page="page"
+  :rows="data.rows"
+  :columns="columns"
+  :total="data.total"
+  :loading="pending"
+/>
+```
+
+Watch those models and refetch. Sorting a column resets `page` to 1, since the
+old page number means nothing against a reordered list.
+
+#### State ownership
+
+Every model is optional. Bind one and you own that state — put it in the URL, a
+store, or `useState`. Leave it unbound and the table keeps it internally, so the
+simple case needs no wiring:
+
+| Model | Type |
+| --- | --- |
+| `v-model:sort` | `{ key, order } \| null` — `null` is "unsorted", distinct from never-sorted |
+| `v-model:page` | `number`, 1-indexed |
+| `v-model:perPage` | `number` |
+| `v-model:selection` | `(string \| number)[]` of row keys |
+| `v-model:expanded` | `(string \| number)[]` of row keys |
+
+#### Selection and expansion
+
+`selectable` adds a checkbox column whose header is tri-state over the rows on
+screen. Selection is held as **row keys** (`rowKey`, default `'id'`), and
+select-all only touches the current page, so selections made on other pages
+survive. `isRowSelectable` vetoes a row — its checkbox is hidden and the header
+skips it.
+
+`expandable` adds a disclosure column and renders the `#expanded` slot beneath
+an open row; `canExpandRow` vetoes it per row.
+
+```vue
+<ITable
+  v-model:selection="selected"
+  :rows="rows"
+  :columns="columns"
+  selectable
+  expandable
+  :is-row-selectable="row => !row.locked"
+>
+  <template #expanded="{ row }">
+    <div class="p-4">{{ row.notes }}</div>
+  </template>
+</ITable>
+```
+
+#### States and props
+
+`loading` sets `aria-busy` and, when there is nothing to show yet, renders
+`loadingRows` skeleton rows instead of the empty message. With rows already on
+screen it leaves them in place, so a refetch doesn't blank the table. Otherwise
+`emptyText` — or the `#empty` slot — takes over.
+
+| Prop | What it does |
+| --- | --- |
+| `rowKey` | Field identifying a row. Default `'id'` |
+| `clickableRows` | Emits `rowClick` and shows a pointer cursor |
+| `striped` / `hoverable` / `stickyHeader` | Row and header treatment |
+| `size` | `sm` / `md` / `lg` row density |
+| `label` / `caption` | Accessible name, and an optional visible caption |
+
+Headers are real `<button>`s, sorted columns carry `aria-sort`, and the table is
+a plain `<table>`, so screen readers and keyboard users get the semantics for
+free. Give it a `label` (or a `caption`) — a table with no accessible name is
+hard to place when tabbing through a page.
+
+#### Without the markup
+
+`useDataTable()` holds the whole state machine — sorting, paging, selection,
+expansion — and renders nothing, if you want the logic under your own markup:
+
+```ts
+const table = useDataTable({
+  rows: () => rows.value,
+  columns: () => columns,
+})
+// table.pageRows, table.toggleSort, table.headerSelection, …
+```
+
 ## License
 
 [MIT](https://github.com/therok1/iryx-ui/blob/main/LICENSE)

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/components/Alert.vue.d.ts

@@ -26,10 +26,21 @@ export interface AlertProps {
         content?: string;
         title?: string;
         description?: string;
+        actions?: string;
         close?: string;
     };
 }
-declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Props = AlertProps;
+type __VLS_ModelProps = {
+    /**
+     * Dismissal as a model, so the common case is one binding rather than a
+     * `close` handler plus a `v-if` in every consumer. `close` still fires, for
+     * callers that want to confirm or persist before it goes.
+     */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_8) => any;
 } & {
@@ -37,12 +48,16 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_17) => any;
 } & {
-    close?: (props: typeof __VLS_19) => any;
+    actions?: (props: typeof __VLS_19) => any;
+} & {
+    close?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
-}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     icon: IconLike | false;
     as: string;

package/dist/components/Badge.vue.d.ts

@@ -4,10 +4,11 @@ export interface BadgeProps {
     /** Merge props onto the immediate child instead of rendering an element. */
     asChild?: boolean;
     variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone?: 'soft' | 'solid';
     size?: 'sm' | 'md' | 'lg';
-    /** Show a small leading dot in the current text colour. */
+    /**
+     * Show a leading status dot. This also switches the look: the badge goes
+     * neutral and the dot alone carries the variant's colour.
+     */
     dot?: boolean;
     /** Text content. Ignored when the default slot is used. */
     label?: string;

package/dist/components/Banner.vue.d.ts

@@ -0,0 +1,81 @@
+import type { IconLike } from '../composables/icon';
+export interface BannerProps {
+    /** Render as a different element or component. */
+    as?: string;
+    variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'primary';
+    /**
+     * `static` sits in the flow, `top` sticks to the top of the scroll
+     * container, `bottom` pins to the bottom of the viewport.
+     */
+    position?: 'static' | 'top' | 'bottom';
+    /** Bold lead-in before the message. */
+    title?: string;
+    /** Message text. Ignored when the default slot is used. */
+    description?: string;
+    /** Leading icon. None by default — a banner is ambient, not a status report. */
+    icon?: IconLike;
+    /** Constrain the text to a readable measure while the fill still spans full width. */
+    contained?: boolean;
+    align?: 'start' | 'center';
+    /** Render a dismiss button. */
+    closable?: boolean;
+    /** Accessible name for the dismiss button — override for non-English apps. */
+    closeLabel?: string;
+    /**
+     * Accessible name for the landmark. A banner is a region rather than an
+     * alert: it is ambient, so it must not interrupt a screen reader mid-task.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ container: 'max-w-3xl' }`. */
+    ui?: {
+        root?: string;
+        container?: string;
+        icon?: string;
+        content?: string;
+        title?: string;
+        actions?: string;
+        close?: string;
+    };
+}
+type __VLS_Props = BannerProps;
+type __VLS_ModelProps = {
+    /** Dismissal as a model, matching IAlert — bind it, or let the banner hide itself. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    actions?: (props: typeof __VLS_19) => any;
+} & {
+    close?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    as: string;
+    closeLabel: string;
+    unstyled: boolean;
+    label: string;
+    contained: boolean;
+}, {}, {}, {}, 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/components/Combobox.vue.d.ts

@@ -74,23 +74,24 @@ type __VLS_Slots = {} & {
     create?: (props: typeof __VLS_139) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
     "update:modelValue": (value: AcceptableValue) => any;
     create: (query: string) => any;
     highlight: (payload: {
         ref: HTMLElement;
         value: AcceptableValue;
     } | undefined) => any;
-    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined;
     onCreate?: ((query: string) => any) | undefined;
     onHighlight?: ((payload: {
         ref: HTMLElement;
         value: AcceptableValue;
     } | undefined) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
+    open: boolean;
     disabled: boolean;
     invalid: boolean;
     emptyText: string;
@@ -99,7 +100,6 @@ declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {
     virtual: boolean;
     estimateSize: number;
     overscan: number;
-    open: boolean;
     defaultOpen: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/DropdownMenu.vue.d.ts

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
-    sideOffset: number;
     align: "start" | "center" | "end";
+    sideOffset: number;
 }, {}, {}, {}, 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/components/Pagination.vue.d.ts

@@ -7,6 +7,8 @@ export interface PaginationProps {
     /** Keep the first and last page visible however far away they are. */
     showEdges?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /** Where the control sits in its container. Centred by default. */
+    align?: 'start' | 'center' | 'end';
     /** Accessible names — override for non-English apps. */
     prevLabel?: string;
     nextLabel?: string;

package/dist/components/Select.vue.d.ts

@@ -35,11 +35,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_48) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
     "update:open": (value: boolean) => any;
+    "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
 }, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
 }>, {
     unstyled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,131 @@
+import type { TableColumn, TableSort } from '../composables/data-table';
+export interface TableProps<Row = any> {
+    /** The rows to render. In server mode this is already the page the server returned. */
+    rows?: Row[];
+    columns?: TableColumn<Row>[];
+    /**
+     * Total rows on the server. Providing it switches to server mode: the table
+     * stops sorting and slicing locally and only emits state, because the rows
+     * it was given are already the requested page.
+     */
+    total?: number;
+    /** Field identifying a row, used for selection and expansion. */
+    rowKey?: string;
+    loading?: boolean;
+    /** Rows of skeletons while `loading` and there is nothing to show yet. */
+    loadingRows?: number;
+    selectable?: boolean;
+    /** Veto selection per row — the checkbox is hidden and the header skips it. */
+    isRowSelectable?: (row: Row) => boolean;
+    expandable?: boolean;
+    /** Veto expansion per row; the chevron is hidden. */
+    canExpandRow?: (row: Row) => boolean;
+    /** Emit `rowClick` and show a pointer cursor. */
+    clickableRows?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Text when there are no rows. Overridden by the `empty` slot. */
+    emptyText?: string;
+    /** Accessible name for the table, since a visible caption is optional. */
+    label?: string;
+    caption?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ td: 'py-1' }`. */
+    ui?: {
+        root?: string;
+        table?: string;
+        thead?: string;
+        tbody?: string;
+        tr?: string;
+        th?: string;
+        td?: string;
+        empty?: string;
+        caption?: string;
+    };
+}
+declare const __VLS_export: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(TableProps<T> & {
+        sort?: TableSort | null;
+        page?: number;
+        perPage?: number;
+        selection?: (string | number)[];
+        expanded?: (string | number)[];
+    }) & {
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        onRowClick?: ((row: T) => any) | undefined;
+        "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
+        "onUpdate:perPage"?: ((value: number) => any) | undefined;
+        "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
+        "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        table: {
+            sort: {
+                value: TableSort | null;
+            };
+            page: {
+                value: number;
+            };
+            perPage: {
+                value: number;
+            };
+            selection: {
+                value: (string | number)[];
+            };
+            expanded: {
+                value: (string | number)[];
+            };
+            isServerMode: import("vue").ComputedRef<boolean>;
+            visibleColumns: import("vue").ComputedRef<TableColumn<T>[]>;
+            pageRows: import("vue").ComputedRef<T[]>;
+            total: import("vue").ComputedRef<number>;
+            pageCount: import("vue").ComputedRef<number>;
+            keyOf: (row: T) => string | number;
+            toggleSort: (column: TableColumn<T>) => void;
+            sortOrderFor: (column: TableColumn<T>) => import("..").SortOrder | null;
+            headerSelection: import("vue").ComputedRef<boolean | "indeterminate">;
+            isSelected: (row: T) => boolean;
+            toggleRow: (row: T) => void;
+            toggleAll: (value: boolean | "indeterminate") => void;
+            isExpanded: (row: T) => boolean;
+            toggleExpanded: (row: T) => void;
+            getRowValue: typeof import("..").getRowValue;
+        };
+    }>) => void;
+    attrs: any;
+    slots: {
+        [x: `header-${string}`]: ((props: {
+            column: TableColumn<T>;
+        }) => any) | undefined;
+    } & {
+        [x: `cell-${string}`]: ((props: {
+            row: T;
+            column: TableColumn<T>;
+            value: unknown;
+        }) => any) | undefined;
+    } & {
+        caption?: (props: {}) => any;
+    } & {
+        empty?: (props: {}) => any;
+    } & {
+        expanded?: (props: {
+            row: T;
+        }) => any;
+    };
+    emit: ((evt: "rowClick", row: T) => void) & (((event: "update:page", value: number) => void) & ((event: "update:sort", value: TableSort | null) => void) & ((event: "update:perPage", value: number) => void) & ((event: "update:selection", value: (string | number)[]) => void) & ((event: "update:expanded", value: (string | number)[]) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Alert } from './Alert.vue';
 export { default as App } from './App.vue';
 export { default as Badge } from './Badge.vue';
+export { default as Banner } from './Banner.vue';
 export { default as Breadcrumb } from './Breadcrumb.vue';
 export { default as Button } from './Button.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
@@ -25,6 +26,7 @@ export { default as Skeleton } from './Skeleton.vue';
 export { default as Stat } from './Stat.vue';
 export { default as Stepper } from './Stepper.vue';
 export { default as Switch } from './Switch.vue';
+export { default as Table } from './Table.vue';
 export { default as Tabs } from './Tabs.vue';
 export { default as Textarea } from './Textarea.vue';
 export { default as Toaster } from './Toaster.vue';