@matta-trade/ui 0.0.0-stage → 0.2.1

package/DESIGN.md

@@ -0,0 +1,217 @@
+# Matta design system — House Style (DESIGN.md)
+
+_Shared by every Matta admin app. This file ships with the `@matta/ui` package._
+
+This file is the design law for every screen built on this design system. Every new screen and component must
+follow it. When a component's default style conflicts with a rule here, the rule wins.
+Add new rules here as they are decided.
+
+> **Rewritten 2026-09-25 for Vue 3 + shadcn-vue + Tailwind v4.** The previous version of
+> this file described the React / Untitled UI kit this repo no longer contains — every
+> component it named (`ModalShell`, `FeaturedIcon`, `@/components/base/*`,
+> `@/components/application/*`, `@untitledui/icons`, `getAvatarInitialsColor` at the old
+> path) was removed in the 2026-09-22 Vue migration. Every component named below exists in
+> this package — import it as `@matta/ui/<name>`.
+>
+> Commands, file naming, conventions and the local build environment live in `CLAUDE.md`.
+> This file covers how things must look, not how they are built.
+
+## Page & layout
+
+- The page background is the **light grey shell surface**, never plain white: the content
+  area carries `bg-gray-50/50 dark:bg-gray-950/80` and cards/tables sit on it as raised
+  white surfaces. (This theme has no `gray-25` step — don't reach for one.)
+- Search bars and filter controls sit **on the page, above the card/table** — never inside
+  the card itself.
+- Cards and tables are the primary visual units; main content sits in a container with
+  consistent horizontal padding.
+- Cards that sit in a row are **uniform height** — content must not stretch one card taller
+  than its siblings.
+- Page header: a **short title** (a name, not a sentence) with a one-line subtitle
+  underneath, and the primary action button **top-right**.
+
+## Corners & shape
+
+- **Cards and tables use `rounded-xl`** — not the kit default `rounded-lg`/`rounded-md`.
+- **Modals use `rounded-lg` (8px)** — modals are deliberately tighter than cards.
+- Fields and buttons use `rounded-lg`; badges are `rounded-full`. Both are the kit default,
+  so don't restate them per screen.
+- If a new shape needs its own radius, add the rule here rather than inventing one inline.
+
+## Dividers
+
+- Any divider inside a card (a header/footer border, or a manual `border-t`/`border-b`) must
+  **touch both edges of the card** — never inset by the card's own padding.
+- A card with a header-then-divider pattern is built as an **outer zero-padding container**
+  with the header (its own `px`/`py` + its `border-b`) and the body (its own `p`) as separate
+  children — never padding and the divider on the same element inside a padded ancestor.
+  (The Matta admin's Overview summary cards are the reference.)
+
+## Fields
+
+- Inputs, textareas, selects and combo boxes share **one height: `h-10` (40px)**. Never give
+  a field a one-off height on a screen.
+- Reuse the field components the admin apps already provide before building anything new:
+  `SearchableSelect` (searchable single select), `TagPickerField` (multi-value picker),
+  `FileUploadField` / `BannerUploadField` (uploads), `IconPicker`.
+- Field colours come from the theme: `border-border-primary` at rest,
+  `focus-visible:border-border-brand` + `ring-brand-500/20` on focus, `opacity-50` when
+  disabled.
+- Transitions stay short (`transition-colors`) — no long or bouncy easing.
+
+## Buttons
+
+- Use the kit `Button` with a `variant` — never a hand-styled `<button>` for an action:
+  `primary` (default) / `secondary` / `tertiary` / `destructive` / `outline` / `ghost` / `link`.
+- Sizes: `sm` h-8, `md` h-9 (default), `lg` h-10, `xl` h-11. Icon-only actions use
+  `size="icon-sm" | "icon-md" | "icon-lg"` rather than a hand-rolled square button.
+- Buttons are **flat — no drop shadow and no ring.** Depth and grouping come from the fill
+  and the hover state, not from an edge. Never add `shadow-*` or `ring-1` to make a button
+  "look more clickable".
+- `focus-visible:ring-*` is the **keyboard focus** indicator and stays — that is
+  accessibility, not decoration.
+- If a button must stand out, change its **colour**, not its elevation or its edge.
+
+## Badges
+
+- Always the kit `Badge` (`@matta/ui/badge`) — never hand-build a pill or a coloured
+  `<span>`.
+- **Status and variant badges are coloured.** Pick the semantic variant: `brand`, `success`,
+  `warning`, `error`, `indigo`, `purple`, `pink`. Grey (`gray`/`secondary`) reads as
+  unfinished and is a last resort for a value with genuinely no meaning.
+- **Never place a grey badge on a grey surface** — it disappears into the card instead of
+  reading as a distinct element.
+- The `dot` prop renders the leading status dot and inherits the variant's colour.
+- A table row's status is a badge, never bare coloured text.
+
+## Tables
+
+- Use the kit `Table` (`@matta/ui/table`).
+- Headers are **`text-xs` / weight 500 (`font-medium`) in `text-quaternary`** — not semibold,
+  not body-sized.
+- The row-actions column header omits visible text (`aria-label="Actions"` keeps it
+  accessible).
+- **Pagination stays together with the table** — one unit in the same card footer, not
+  separate blocks.
+- The **page** (not the table component) owns searching, filtering and paging state.
+- Wide tables scroll horizontally _inside_ their card (`ScrollArea` plus a `min-w-[…]` inner
+  wrapper); the card itself never scrolls off the page.
+
+## Tabs
+
+- Tabs are the **segmented control**: `TabsList` is `rounded-lg` on `bg-secondary` with `p-1`,
+  and the active `TabsTrigger` is a raised `bg-primary` chip. That is the app-wide pattern
+  (list pages, detail panels, drawers).
+- There are **no underline tabs** in this kit — don't reintroduce them on one screen.
+- Always import from `@matta/ui/tabs`.
+
+## Avatars
+
+- Always the kit `Avatar` (`@matta/ui/avatar`) — never a raw `<img>` and never an
+  initials-only circle.
+- Initials fallbacks take a **deterministic colour** from `getAvatarInitialsColor`
+  (`@matta/ui`) — same identity, same colour, every render. Never the flat
+  grey default.
+- Every avatar slot shows something (photo or coloured initials) — never a blank slot.
+
+## Menus (DropdownMenu)
+
+- Item labels are **regular weight** (`text-sm`), not semibold — semibold reads too heavy at
+  the sizes this app uses menus at.
+- **Destructive entries take the error colour** (`text-error-primary`), not a `red-*` palette
+  class.
+- Row-action kebabs share one item shape across views (`cursor-pointer`, `py-2`, `text-sm`)
+  so every table's menu behaves and reads identically.
+
+## Modals, panels & confirmations
+
+- **Modal dialog:** `Dialog` / `DialogScrollContent` — overlay, centred card, `rounded-lg`,
+  close button top-right.
+- **Destructive or cautionary confirmation:** `AlertDialog` — Cancel plus one coloured confirm
+  button — and the description **names the affected record**, so the dialog is unambiguous
+  about what it acts on.
+- **Record detail and create/edit flows:** `Sheet` (right-hand drawer) — e.g.
+  `OrderDetailsSheet`, `RequestDetailsSheet`, `CustomerProfileSheet`, `CreateOrderDrawer`.
+- The bottom `Drawer` is showcase-only; application screens use `Sheet`.
+- One pattern per job. Don't add a fourth kind of overlay when one of these three fits.
+
+## Icons
+
+- **`lucide-vue-next` only**, named imports, `size-4` / `size-5`. Don't add a second icon
+  library.
+- No icon beside a document or row title unless explicitly requested.
+- A summary/metric row's leading icon is a lucide icon inside the card's own muted container
+  — not a hand-rolled coloured circle.
+- Metric rows above a table are cards in the house shape (`rounded-xl`,
+  `border-border-secondary`, `bg-primary`), with the number at `text-2xl`/`text-3xl`
+  `font-semibold` and the caption in `text-tertiary` — not loose bare text.
+
+## Components (build rules)
+
+- **Compose from the kit (`@matta/ui/<name>`) before building anything new.**
+- When a primitive genuinely doesn't exist, add it with
+  `npx shadcn-vue@latest add <name>`, keep it in the kit style (`cn()` + CVA variants), add a
+  section for it on the **Design System showcase page**
+  (the admin app's `DesignSystemView.vue`) — then reuse it everywhere.
+- **Every component in this package is re-tokenised** to this theme
+  (`bg-primary`/`bg-secondary`, `border-border-secondary`, `text-primary`/`text-tertiary`/
+  `text-quaternary`, `bg-brand-solid`, …). Re-running `shadcn-vue add` on a primitive that
+  already exists **overwrites that mapping and reverts the theme** — use the CLI to add
+  _missing_ primitives only, and diff it against the theme before keeping it.
+- Colours come from the semantic tokens in `styles/theme.css` (shipped as
+  `@matta/ui/styles/theme.css`): `text-primary` /
+  `text-secondary` / `text-tertiary` / `text-quaternary`, `bg-primary` / `bg-secondary`,
+  `border-primary` / `border-secondary`, `text-brand-secondary`, `text-error-primary`, and the
+  `utility-*` status scales. Two ramps may be named directly: the **brand** ramp
+  (`bg-brand-600`, `hover:bg-brand-700` — the Matta blue the primary buttons use) and the
+  **flux** ramp (`bg-flux-600`, `hover:bg-flux-700` — the Flux red, base `#E50031`). Nothing
+  else. Both ramps run `50` → `950` off the same lightness steps, so the two apps differ by
+  palette only.
+- **No raw hex and no arbitrary colour values** (`bg-[#…]`) anywhere. No second component
+  library: no Untitled UI, no extra kit.
+- Variants come from CVA; class names are composed with `cn()` from `@matta/ui`.
+
+## Data & mock state
+
+- Pages run on in-memory mock data in each app's `src/utils/`, typed from `src/types/`, and reset on
+  refresh. Views stay presentation-only; data, formatting and derived figures live in
+  `utils/`.
+- **Never present mock data as live data** — no "last synced", no invented timestamps, no
+  copy implying a backend that doesn't exist yet.
+
+## Copy
+
+- Titles are short; the subtitle says what the page is for in one line.
+- Confirmations and empty states name the thing they are about ("No orders yet", "Reject this
+  customer?") rather than using generic wording.
+- Sentence case for labels and buttons; no exclamation marks.
+
+## Open conflicts — the code does not match this document yet
+
+Found 2026-09-25 while rewriting this file. Each needs a decision: change the code to match
+the rule, or change the rule to match the code. Nothing here is silently harmonised.
+
+1. **Button elevation.** Rule: flat, no shadow. Code: `@matta/ui/button`
+   puts `shadow-xs` on `primary`, `secondary` and `destructive`. `CLAUDE.md` also states
+   buttons are flat, so the code is the outlier.
+2. **Card radius.** Rule: `rounded-xl`. Code: `@matta/ui/card` ships
+   `rounded-lg`, **and is used only on the showcase page** — every application screen builds
+   its card as a `rounded-xl border border-border-secondary bg-primary` container by hand
+   (see `OverviewView.vue`). Either fix the primitive and start using it, or keep the
+   hand-built shells and drop the primitive.
+3. **Modal radius.** Rule: `rounded-lg` (8px). Code:
+   `@matta/ui/dialog` ships `rounded-xl` — cards and modals are
+   currently swapped.
+4. **Table header weight.** Rule: `font-medium` (500). Code:
+   `@matta/ui/table` ships `font-semibold`.
+5. **Page background step.** The rule above now states the shell's actual grey
+   (`bg-gray-50/50`). This one is only still open because the original spec called for a
+   lighter **grey-25** step that this theme doesn't define — decide whether to add a
+   `--color-gray-25` token and move the shell onto it, or strike grey-25 from the spec for
+   good.
+6. **Destructive menu items.** Rule: `text-error-primary`. Code: `AgentsView.vue` and
+   `CustomersView.vue` hardcode `text-red-600 dark:text-red-400`.
+
+Also true today, but a migration state rather than a rule conflict: many views still use raw
+palette greys (`text-gray-900 dark:text-white`, `border-gray-200 dark:border-gray-800`)
+instead of the semantic tokens. New and edited screens use the tokens.

package/README.md

@@ -1,3 +1,92 @@
-# Temporary Holding Version
+# @matta/ui — the Matta design system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue 3 + shadcn-vue primitives, the design tokens, and the house style, shared by the Matta
+admin apps. **`DESIGN.md` in this repo is the design law** — read it before building a screen.
+
+## What's in here
+
+```
+src/                 the kit — one folder per primitive, each with an index.ts barrel
+  button/ badge/ table/ sheet/ dialog/ sidebar/ ...   ->  import { Button } from "@matta/ui/button"
+  lib/utils.ts       cn()
+  avatar-colors.ts   getAvatarInitialsColor()
+  index.ts           root barrel: cn + avatar colors
+styles/
+  theme.css          design tokens (brand ramp, semantic colours, radii, shadows)
+  typography.css     type scale
+  kit.css            the design system's Tailwind layer: @plugin, @custom-variant, @utility
+preview/             local preview app (dev-only; not shipped in the package)
+DESIGN.md            house style — the rules every screen must follow
+```
+
+## Previewing the kit locally
+
+```bash
+npm run dev      # http://localhost:3002
+```
+
+`preview/` is a small Vite app that renders the showcase page straight from this repo's
+`src/`, so edits to the kit show up on save. It resolves the kit through the package's own
+name (`@matta/ui/button`), so no install or release is needed to see a change. It is not
+listed in `files`, so none of it is ever shipped to a consuming app.
+
+## Installing it into an admin app
+
+```bash
+npm install @matta-trade/ui
+```
+
+Then in the app's `src/styles/globals.css`:
+
+```css
+@import "tailwindcss";
+@import "@matta-trade/ui/styles/kit.css";
+/* Tailwind scans classes from the built package or source */
+@source "../../node_modules/@matta-trade/ui/dist";
+```
+
+Use it anywhere:
+
+```vue
+<script setup lang="ts">
+import { Button } from "@matta-trade/ui/button";
+import { Badge } from "@matta-trade/ui/badge";
+import { cn, getAvatarInitialsColor } from "@matta-trade/ui";
+</script>
+```
+
+## Building the package locally
+
+```bash
+npm run build      # Compiles src/ to dist/ with .d.ts TypeScript types
+npm run check      # Runs vue-tsc type checking
+```
+
+## Releasing a new version to npm
+
+### Method 1: One-command release from terminal (Recommended)
+Run any of the following:
+```bash
+npm run release:patch    # e.g. 0.2.0 -> 0.2.1
+npm run release:minor    # e.g. 0.2.0 -> 0.3.0
+npm run release:major    # e.g. 0.2.0 -> 1.0.0
+```
+This automatically bumps `package.json`, commits, creates the git tag, and pushes to GitHub. The GitHub Actions workflow then automatically builds and publishes to npm.
+
+### Method 2: From GitHub Actions UI (No terminal needed)
+1. Go to the **Actions** tab in GitHub.
+2. Select **Publish to npm** from the left sidebar.
+3. Click **Run workflow**, choose `patch`, `minor`, or `major`, and click **Run workflow**.
+
+### Method 3: Manual Git tag
+```bash
+git tag v0.2.1
+git push origin v0.2.1
+```
+
+Add a **new** primitive with `npx shadcn-vue@latest add <name>` from this repo, then move the
+generated folder to `src/<name>/` so the subpath export `@matta/ui/<name>` resolves, re-tokenise
+it to `styles/theme.css`, and add a section for it on the app's Design System showcase page.
+
+Re-running `shadcn-vue add` on a primitive that already exists here **overwrites the local
+token mapping** — only use it for new components.

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

@@ -0,0 +1,19 @@
+import { AlertVariants } from '.';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+    variant?: AlertVariants["variant"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert/AlertDescription.vue.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert/AlertTitle.vue.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert/index.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
+export declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/dist/alert/index.js

@@ -0,0 +1,62 @@
+import { t as e } from "../chunks/utils-CX-Pz5p6.js";
+import { cva as t } from "class-variance-authority";
+import { createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, unref as s } from "vue";
+//#endregion
+//#region src/alert/Alert.vue
+var c = /* @__PURE__ */ r({
+	__name: "Alert",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: {}
+	},
+	setup(t) {
+		let r = t;
+		return (c, l) => (a(), n("div", {
+			class: i(s(e)(s(d)({ variant: t.variant }), r.class)),
+			role: "alert"
+		}, [o(c.$slots, "default")], 2));
+	}
+}), l = /* @__PURE__ */ r({
+	__name: "AlertDescription",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let r = t;
+		return (t, c) => (a(), n("div", { class: i(s(e)("[&_p]:leading-relaxed text-sm", r.class)) }, [o(t.$slots, "default")], 2));
+	}
+}), u = /* @__PURE__ */ r({
+	__name: "AlertTitle",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let r = t;
+		return (t, c) => (a(), n("h5", { class: i(s(e)("mb-1 font-medium tracking-tight leading-none", r.class)) }, [o(t.$slots, "default")], 2));
+	}
+}), d = t("p-4 [&>svg~*]:pl-7 [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 relative w-full rounded-xl border text-sm [&>svg]:absolute [&>svg+div]:translate-y-[-2px]", {
+	variants: { variant: {
+		default: "border-border-secondary bg-primary text-primary [&>svg]:text-primary",
+		destructive: "dark:bg-utility-red-950 dark:border-utility-red-800 border-utility-red-200 bg-utility-red-50 text-utility-red-700 dark:text-utility-red-300 [&>svg]:text-utility-red-600 dark:[&>svg]:text-utility-red-400",
+		success: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 dark:border-utility-success-800 dark:bg-utility-success-950 dark:text-utility-success-300 [&>svg]:text-utility-success-600 dark:[&>svg]:text-utility-success-400",
+		warning: "border-utility-warning-200 bg-utility-warning-50 text-utility-warning-700 dark:border-utility-warning-800 dark:bg-utility-warning-950 dark:text-utility-warning-300 [&>svg]:text-utility-warning-600 dark:[&>svg]:text-utility-warning-400",
+		info: "dark:bg-utility-brand-950 border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 dark:border-utility-brand-800 dark:text-utility-brand-300 [&>svg]:text-utility-brand-600 dark:[&>svg]:text-utility-brand-400"
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+export { c as Alert, l as AlertDescription, u as AlertTitle, d as alertVariants };

package/dist/alert-dialog/AlertDialog.vue.d.ts

@@ -0,0 +1,18 @@
+import { AlertDialogProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<AlertDialogProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<AlertDialogProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => 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/alert-dialog/AlertDialogAction.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+import { AlertDialogActionProps } from 'reka-ui';
+type __VLS_Props = AlertDialogActionProps & {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert-dialog/AlertDialogCancel.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+import { AlertDialogCancelProps } from 'reka-ui';
+type __VLS_Props = AlertDialogCancelProps & {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert-dialog/AlertDialogContent.vue.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'vue';
+import { AlertDialogContentProps } from 'reka-ui';
+type __VLS_Props = AlertDialogContentProps & {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_19: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: import('reka-ui').PointerDownOutsideEvent) => any;
+    focusOutside: (event: import('reka-ui').FocusOutsideEvent) => any;
+    interactOutside: (event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import('reka-ui').PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import('reka-ui').FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => 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/alert-dialog/AlertDialogDescription.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+import { AlertDialogDescriptionProps } from 'reka-ui';
+type __VLS_Props = AlertDialogDescriptionProps & {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert-dialog/AlertDialogFooter.vue.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert-dialog/AlertDialogHeader.vue.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert-dialog/AlertDialogTitle.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+import { AlertDialogTitleProps } from 'reka-ui';
+type __VLS_Props = AlertDialogTitleProps & {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/alert-dialog/AlertDialogTrigger.vue.d.ts

@@ -0,0 +1,14 @@
+import { AlertDialogTriggerProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<AlertDialogTriggerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AlertDialogTriggerProps> & Readonly<{}>, {}, {}, {}, {}, 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/alert-dialog/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';