iryx-ui 0.2.0 → 0.3.0

package/README.md

@@ -1,18 +1,10 @@
 # iryx-ui
 
-> An artful Vue 3 component library built on [Reka UI](https://reka-ui.com) and [Tailwind CSS v4](https://tailwindcss.com).
+A Vue 3 component library built on [Reka UI](https://reka-ui.com) and [Tailwind CSS v4](https://tailwindcss.com). Styled by default, headless when you need it, with a Vue plugin and a Nuxt module in one package.
 
 [![npm version](https://img.shields.io/npm/v/iryx-ui.svg)](https://www.npmjs.com/package/iryx-ui)
 [![license](https://img.shields.io/npm/l/iryx-ui.svg)](https://github.com/therok1/iryx-ui/blob/main/LICENSE)
 
-- 🎨 **Styled by default** — sensible Tailwind v4 themes via [tailwind-variants](https://www.tailwind-variants.org)
-- 🌗 **Light & dark out of the box** — `useAppearance()` with `light` / `dark` / `system`, persisted
-- 🌈 **Swappable themes** — built-in color presets or your own, switchable at runtime with `applyTheme()`
-- 🪶 **Headless when you want** — `unstyled` per component or globally, leaving bare Reka UI primitives
-- 🧩 **Composable theming** — override any slot with the `ui` prop or re-brand with CSS theme tokens
-- ⚡ **Vue 3 + Nuxt** — a Vue plugin and a Nuxt module with auto-imports, from one package
-- 🌳 **Tree-shakeable, ESM-only, fully typed**
-
 ## Installation
 
 ```bash
@@ -66,24 +58,43 @@ Components are auto-imported with the `I` prefix (configurable via the `iryxUi.p
 
 ### Icons
 
-Just drop an icon component into the button alongside your text — leading, trailing, or both. Icons are sized automatically to match the button, and spaced for you. Works with any SVG icon set; [lucide-vue-next](https://lucide.dev/guide/packages/lucide-vue-next) pairs nicely:
+Put an icon in the default slot, leading or trailing. Icons are sized to match the button, and any SVG icon set works. Iryx's own icons come from [Hugeicons](https://hugeicons.com), which ships icons as data rather than components:
 
 ```vue
 <script setup lang="ts">
-import { ArrowRight, Search } from 'lucide-vue-next'
+import { ArrowRight01Icon, Search01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/vue'
 </script>
 
 <template>
   <IButton>
-    <Search /> Search
+    <HugeiconsIcon :icon="Search01Icon" data-icon="inline-start" /> Search
   </IButton>
   <IButton variant="outline">
-    Next <ArrowRight />
+    Next <HugeiconsIcon :icon="ArrowRight01Icon" data-icon="inline-end" />
+  </IButton>
+  <IButton square aria-label="Search">
+    <HugeiconsIcon :icon="Search01Icon" />
   </IButton>
 </template>
 ```
 
-When `loading` is set, a spinner appears in the leading position.
+Mark the icon with `data-icon="inline-start"` or `"inline-end"` and the padding tightens on the side it sits on. For an icon with no label, add `square`.
+
+Props that take an icon — `IAlert`'s `icon`, and the `icon` on `IDropdownMenu`, `IBreadcrumb`, `ITabs` and `IEmptyState` items — accept **either** a Hugeicons icon or any component that renders an SVG, so an icon set like Lucide still works:
+
+```ts
+import { Alert02Icon } from '@hugeicons/core-free-icons'
+import { Bell } from 'lucide-vue-next'
+
+// Both are valid.
+const a = { label: 'Alerts', icon: Alert02Icon }
+const b = { label: 'Alerts', icon: Bell }
+```
+
+The marker is needed because a label is a bare text node: CSS's `:first-child` and `:last-child` count element children, so an icon beside text matches both. An unmarked icon still renders, it just keeps the full padding.
+
+`IBadge` follows the same convention. When `loading` is set on a button, a spinner takes the leading position automatically.
 
 ## The `IApp` wrapper
 
@@ -186,9 +197,30 @@ For a static re-brand, plain CSS works too — tokens are just variables:
 }
 ```
 
-Available tokens: `background`, `foreground`, `primary`, `primary-foreground`,
-`accent`, `accent-foreground`, `muted`, `muted-foreground`, `border` — each
-usable as a Tailwind color (`bg-primary`, `text-muted-foreground`, …).
+Available tokens, each usable as a Tailwind color (`bg-primary`,
+`text-muted-foreground`, …):
+
+| Group | Tokens |
+| --- | --- |
+| Surfaces | `background`, `foreground`, `accent`, `accent-foreground`, `muted`, `muted-foreground`, `border` |
+| Brand | `primary`, `primary-foreground`, `primary-from`, `primary-to` |
+| Status | `success`, `warning`, `danger`, `info` — each with `-foreground`, `-muted`, `-muted-foreground` and `-border` |
+
+`primary-from` / `primary-to` are the stops of the solid button's vertical
+gradient. The status tokens carry their own dark-mode values, so components
+never need a `dark:` class for them: `success` is the solid fill,
+`success-foreground` the text on it, `success-muted` a tinted surface,
+`success-muted-foreground` the text on that, and `success-border` the edge.
+
+The built-in presets swap only the brand colors — red should mean danger in
+every theme — but `applyTheme()` accepts the status tokens too:
+
+```ts
+applyTheme({
+  light: { success: 'oklch(0.6 0.15 150)', successMuted: 'oklch(0.97 0.02 150)' },
+  dark: { success: 'oklch(0.7 0.15 150)', successMuted: 'oklch(0.26 0.05 150)' },
+})
+```
 
 Tweak a single instance with `class` (conflicts are merged smartly) or per-slot with `ui`:
 
@@ -215,21 +247,130 @@ app.use(createIryxUi({ unstyled: true }))
 
 ## Components
 
+**Layout & structure**
+
 | Component | Description |
 | --- | --- |
 | `IApp` | Root wrapper — reactive global config, theme, appearance, RTL/locale |
+| `ICard` | Panel with `outline`/`soft` variants, four paddings, header and footer slots |
+| `ISeparator` | Horizontal or vertical rule, optionally with a centred label |
+
+**Forms**
+
+| Component | Description |
+| --- | --- |
 | `IForm` | Validating form wrapper — any Standard Schema validator, or your own function |
 | `IFormField` | Label, description, hint, help and error text around a control |
-| `IButton` | Variants (`solid`, `outline`, `ghost`, `link`), five sizes, `loading` and `block` states, polymorphic via `as` / `asChild` |
 | `IInput` | Text field with `sm`/`md`/`lg` sizes, `invalid` state, `v-model` |
 | `ITextarea` | Multi-line field with matching sizes and `invalid` state |
-| `ILabel` | Field label with optional `required` asterisk |
+| `ILabel` | Field label with optional `required` asterisk, indented to line up with the control's text |
 | `ICheckbox` | Tri-state checkbox (`true` / `false` / `'indeterminate'`), optional `label` + `description` |
 | `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array |
 | `IRadioGroup` | Radio list with labels wired up automatically; items take a `description` |
 | `ISwitch` | Accessible toggle, optional `label` + `description` |
 
-Every component supports `unstyled`, a `class` override, and multi-part ones take a `ui` prop for per-slot classes. More on the way.
+**Actions**
+
+| Component | Description |
+| --- | --- |
+| `IButton` | Variants (`solid`, `outline`, `ghost`, `link`), five sizes, `loading`, `block` and `square` states, polymorphic via `as` / `asChild` |
+| `IButtonGroup` | Joins any children into a segmented control — split buttons, toolbars, pagers |
+| `IDropdownMenu` | Menu driven by an `items` array, with separators, group labels, danger items and nested submenus |
+
+**Feedback**
+
+| 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` |
+| `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 |
+| `IProgress` | Determinate or `indeterminate` bar, five variants, `formatValue` |
+| `ISkeleton` | Loading placeholder — `text`/`rect`/`circle`, stackable with `lines` |
+| `IEmptyState` | Icon, title, description and an `actions` slot for empty lists |
+| `ITooltip` | Hover/focus tooltip with side, align, delay and optional arrow |
+
+**Navigation & data display**
+
+| Component | Description |
+| --- | --- |
+| `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 |
+| `IStepper` | Multi-step progress, horizontal or vertical, optional `linear` ordering |
+| `IStat` | KPI tile — label, value, signed delta with trend colour, and a hint |
+
+Every component supports `unstyled` and a `class` override; multi-part ones take a `ui` prop for per-slot classes.
+
+### Button groups
+
+`IButtonGroup` joins whatever you put inside it — buttons, a menu trigger, a link — squaring the inner edges and collapsing the shared borders. Set `size` once on the group and the buttons inherit it:
+
+```vue
+<template>
+  <IButtonGroup>
+    <IButton @click="save">
+      Save
+    </IButton>
+    <IDropdownMenu :items="saveActions" align="end">
+      <template #trigger>
+        <IButton square aria-label="More options">
+          <ChevronDown />
+        </IButton>
+      </template>
+    </IDropdownMenu>
+  </IButtonGroup>
+</template>
+```
+
+### Menus
+
+`IDropdownMenu` takes entries as data. A `'-'` is a separator, an entry without `onSelect` is a group label, and one with its own `items` opens a submenu — to any depth:
+
+```ts
+const items = [
+  { label: 'Invoice' },
+  { label: 'Open', icon: Search, onSelect: () => open() },
+  { label: 'Export as', icon: Download, items: [
+    { label: 'PDF', onSelect: () => exportPdf() },
+    { label: 'CSV', onSelect: () => exportCsv() },
+  ] },
+  '-',
+  { label: 'Delete', icon: Trash2, danger: true, onSelect: () => remove() },
+]
+```
+
+### Toasts and confirmations
+
+Both are imperative, so they can be called from anywhere — including plain functions outside a component. Mount each host once, typically just inside `<IApp>`:
+
+```vue
+<template>
+  <IApp>
+    <!-- your app -->
+    <IConfirmDialog />
+    <IToaster />
+  </IApp>
+</template>
+```
+
+```ts
+const toast = useToast()
+toast.success('Saved')
+toast.danger({ title: 'Failed to send', description: 'Check the address.' })
+toast.toast({ title: 'Note deleted', action: { label: 'Undo', onClick: restore } })
+
+const { confirm } = useConfirm()
+if (await confirm({ title: 'Delete this draft?', danger: true }))
+  await remove()
+```
+
+`confirm()` resolves `true` on confirmation and `false` on cancel or dismissal.
+
+### Internationalisation
+
+No English string is baked in without an escape hatch. `IAlert`, `IDialog` and `IToaster` take a `closeLabel`, `IPagination` takes `prevLabel` / `nextLabel` / `label`, `IBreadcrumb` and `ISkeleton` take a `label`, and `IProgress` and `IStat` take `formatValue` / `formatDelta` for locale-aware numbers.
 
 ### Forms
 
@@ -315,6 +456,25 @@ The control inside a field automatically inherits its `id`, invalid styling and
 
 **Server errors and manual control** — grab a template ref to the form and call `validate()`, `clear(name?)` or `setErrors()`. `IFormField` also takes a plain `error` prop that bypasses validation entirely.
 
+### Label alignment
+
+`ILabel` and `IFormField` indent their text so it lines up with the control's
+text rather than its outer edge, putting the label directly above the
+placeholder. The offset matches the input's horizontal padding — `sm` 10px,
+`md` 12px, `lg` 16px — so pass the same size you gave the control:
+
+```vue
+<template>
+  <ILabel for="amount" indent="lg">
+    Amount
+  </ILabel>
+  <IInput id="amount" size="lg" />
+</template>
+```
+
+Use `indent="none"` when the label wraps its control, as with a checkbox, since
+there is no text to line up with.
+
 ### Labels and descriptions
 
 `ICheckbox` and `ISwitch` render bare by default. Give them a `label` and/or `description` and they render a wired-up layout instead — the text is clickable, and the description is linked with `aria-describedby`. `IRadioGroup` items take a `description` too.

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", "Button", "Card", "Checkbox", "Form", "FormField", "Input", "Label", "RadioGroup", "Select", "Switch", "Textarea"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

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

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { IconLike } from '../composables/icon';
 export interface AlertProps {
     /** Render as a different element or component. */
     as?: string;
@@ -11,7 +11,7 @@ export interface AlertProps {
      * Leading icon. Defaults to one matching the variant; pass a component to
      * override it, or `false` to drop it entirely.
      */
-    icon?: Component | false;
+    icon?: IconLike | false;
     /** Render a dismiss button that emits `close`. */
     closable?: boolean;
     /** Accessible name for the dismiss button — override for non-English apps. */
@@ -44,7 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {
-    icon: Component | false;
+    icon: IconLike | false;
     as: string;
     closeLabel: string;
     unstyled: boolean;

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

@@ -0,0 +1,45 @@
+import type { IconLike } from '../composables/icon';
+export interface BreadcrumbItem {
+    label: string;
+    /** Omit on the current page. */
+    href?: string;
+    icon?: IconLike;
+    /** Handle navigation yourself, e.g. with a router. */
+    onSelect?: () => void;
+}
+export interface BreadcrumbProps {
+    items?: BreadcrumbItem[];
+    /**
+     * Accessible name for the navigation landmark — override for non-English
+     * apps.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ current: 'text-primary' }`. */
+    ui?: {
+        root?: string;
+        list?: string;
+        item?: string;
+        link?: string;
+        current?: string;
+        separator?: string;
+    };
+}
+declare var __VLS_26: {};
+type __VLS_Slots = {} & {
+    separator?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
+    unstyled: boolean;
+    label: string;
+}, {}, {}, {}, 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/Button.vue.d.ts

@@ -7,6 +7,14 @@ export interface ButtonProps {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** Stretch to the full width of the container. */
     block?: boolean;
+    /**
+     * Square the button for icon-only use, dropping the horizontal padding.
+     *
+     * For an icon *beside* a label, mark the icon with
+     * `data-icon="inline-start"` or `data-icon="inline-end"` instead — the
+     * padding then tightens on that side.
+     */
+    square?: boolean;
     /** Show a spinner (in the leading position) and disable interaction. */
     loading?: boolean;
     disabled?: boolean;

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

@@ -0,0 +1,32 @@
+import type { ButtonSize } from '../composables/button-group';
+export interface ButtonGroupProps {
+    /** Render as a different element or component. */
+    as?: string;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Size applied to every button inside, so it only has to be set once.
+     * A button's own `size` still wins.
+     */
+    size?: ButtonSize;
+    /** Stretch to fill the container, splitting the width between children. */
+    block?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
+    as: string;
+    unstyled: 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/ConfirmDialog.vue.d.ts

@@ -0,0 +1,18 @@
+export interface ConfirmDialogProps {
+    /** Fallback confirm label, used when a request doesn't supply one. */
+    confirmLabel?: string;
+    /** Fallback cancel label, used when a request doesn't supply one. */
+    cancelLabel?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<ConfirmDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ConfirmDialogProps> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+    unstyled: boolean;
+    confirmLabel: string;
+    cancelLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+export interface DialogProps {
+    title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Clicking the overlay or pressing Escape closes it. Set false to force a choice. */
+    dismissible?: boolean;
+    /** Render the corner dismiss button. */
+    showClose?: boolean;
+    /** Accessible name for the dismiss button — override for non-English apps. */
+    closeLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ content: 'max-w-3xl' }`. */
+    ui?: {
+        overlay?: string;
+        content?: string;
+        header?: string;
+        title?: string;
+        description?: string;
+        body?: string;
+        footer?: string;
+        close?: string;
+    };
+}
+type __VLS_Props = DialogProps;
+declare function close(): void;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_16: {}, __VLS_35: {}, __VLS_43: {}, __VLS_51: {}, __VLS_65: {}, __VLS_67: {
+    close: typeof close;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_16) => any;
+} & {
+    header?: (props: typeof __VLS_35) => any;
+} & {
+    title?: (props: typeof __VLS_43) => any;
+} & {
+    description?: (props: typeof __VLS_51) => any;
+} & {
+    default?: (props: typeof __VLS_65) => any;
+} & {
+    footer?: (props: typeof __VLS_67) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    closeLabel: string;
+    unstyled: boolean;
+    dismissible: boolean;
+    showClose: 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/DropdownMenu.vue.d.ts

@@ -0,0 +1,49 @@
+import type { DropdownMenuEntry } from '../composables/dropdown-menu';
+export interface DropdownMenuProps {
+    /** Entries to render. Nest by giving an entry its own `items`. */
+    items?: DropdownMenuEntry[];
+    /** Which edge of the trigger to align to. */
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ item: 'py-2' }`. */
+    ui?: {
+        content?: string;
+        item?: string;
+        label?: string;
+        separator?: string;
+        subTrigger?: string;
+        subContent?: string;
+    };
+}
+type __VLS_Props = DropdownMenuProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,24 @@
+import type { DropdownMenuEntry } from '../composables/dropdown-menu';
+/**
+ * Renders one level of menu entries, recursing into submenus.
+ *
+ * Split out of `DropdownMenu` so it can call itself: an SFC may reference
+ * itself by its filename, which is what allows arbitrary nesting depth.
+ */
+export interface DropdownMenuItemsProps {
+    entries: DropdownMenuEntry[];
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    ui?: {
+        item?: string;
+        label?: string;
+        separator?: string;
+        subTrigger?: string;
+        subContent?: string;
+    };
+}
+declare const __VLS_export: import("vue").DefineComponent<DropdownMenuItemsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DropdownMenuItemsProps> & Readonly<{}>, {
+    unstyled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,46 @@
+import type { IconLike } from '../composables/icon';
+export interface EmptyStateProps {
+    /** Render as a different element or component. */
+    as?: string;
+    /** Illustrative icon shown above the title. Omitted when not given. */
+    icon?: IconLike | false;
+    title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ title: 'text-xl' }`. */
+    ui?: {
+        root?: string;
+        icon?: string;
+        title?: string;
+        description?: string;
+        actions?: string;
+    };
+}
+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;
+} & {
+    description?: (props: typeof __VLS_17) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+} & {
+    actions?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<EmptyStateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyStateProps> & Readonly<{}>, {
+    icon: IconLike | false;
+    as: string;
+    unstyled: 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/FormField.vue.d.ts

@@ -11,6 +11,15 @@ export interface FormFieldProps {
     required?: boolean;
     /** Force an error message, bypassing the form's validation. */
     error?: string;
+    /**
+     * Indent the label, description, error and help text so they line up with
+     * the control's own text rather than its outer edge.
+     *
+     * The values match the input's horizontal padding, so pass the same size you
+     * gave the control. Use `none` for controls that draw their own label, like
+     * a checkbox or switch.
+     */
+    indent?: 'none' | 'sm' | 'md' | 'lg';
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;

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

@@ -0,0 +1,8 @@
+import type { IconLike } from '../composables/icon';
+export interface IconProps {
+    icon?: IconLike;
+    class?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -2,6 +2,12 @@ import type { LabelProps as RekaLabelProps } from 'reka-ui';
 export interface LabelProps extends RekaLabelProps {
     /** Append a red asterisk to mark the associated field as required. */
     required?: boolean;
+    /**
+     * Indent the label to line up with the control's text rather than its outer
+     * edge. Match it to the control's size; use `none` when the label wraps its
+     * control, as with a checkbox.
+     */
+    indent?: 'none' | 'sm' | 'md' | 'lg';
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;