@equal-experts/kuat-vue 0.4.1 → 0.5.0

package/README.md

@@ -1,24 +1,24 @@
 # @equal-experts/kuat-vue
 
-Custom Vue components and blocks for the Kuat Design System.
+Vue 3 components and blocks for the Kuat Design System: **localized primitives** and **composed blocks**. Use **`@equal-experts/kuat-core`** for tokens and **shadcn-vue** only for UI that Kuat does not ship (for example Dialog, DropdownMenu).
+
+**When to import from here vs shadcn-vue:** [Choosing components](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/choosing-components.md) · [Public API inventory](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/public-api-inventory.md)
 
 ---
 
 ## Architecture
 
-This package provides **custom components** and **blocks** that are unique to Kuat. For standard UI components (Button, Dialog, etc.), install them directly via shadcn-vue CLI with kuat-core theming.
-
 ```
 ┌─────────────────────────────────────────────────────┐
 │  Your Application                                   │
 ├─────────────────────────────────────────────────────┤
-│  Kuat Blocks (from this package)                    │
+│  Kuat blocks (KuatHeader, KuatCarousel, …)         │  ← This package
 ├─────────────────────────────────────────────────────┤
-│  Kuat Components (from this package)                │
+│  Kuat primitives (Button, Field, Select, …)        │  ← This package
 ├─────────────────────────────────────────────────────┤
-│  shadcn-vue Components (installed directly)         │
+│  shadcn-vue-only (Dialog, DropdownMenu, …)          │  ← Installed in your app
 ├─────────────────────────────────────────────────────┤
-│  @equal-experts/kuat-core (design tokens)           │
+│  @equal-experts/kuat-core                            │
 └─────────────────────────────────────────────────────┘
 ```
 
@@ -27,65 +27,58 @@ This package provides **custom components** and **blocks** that are unique to Ku
 ## Installation
 
 ```bash
-# Using pnpm (recommended)
-pnpm add @equal-experts/kuat-vue
-
-# Using npm
-npm install @equal-experts/kuat-vue
-
-# Using yarn
-yarn add @equal-experts/kuat-vue
+pnpm add @equal-experts/kuat-core @equal-experts/kuat-vue
 ```
 
-### Peer Dependencies
+### Peer dependencies
 
-```bash
-pnpm add vue radix-vue reka-ui
-```
+See this package’s `package.json` `peerDependencies` (for example `vue`, `radix-vue` / `reka-ui` as appropriate to your stack).
 
 ---
 
-## What's Included
+## What’s included
 
-### Custom Components
+### Utilities
 
-Components unique to Kuat, not available in shadcn-vue:
+| Export | Description |
+|--------|-------------|
+| `cn` | Class name merger |
 
-| Component | Description |
-|-----------|-------------|
-| `ButtonGroup` | Groups buttons together with proper styling |
-| `ButtonGroupText` | Text element within a button group |
-| `ButtonGroupSeparator` | Separator between button group items |
+### Blocks
 
-### Blocks (Coming Soon)
+| Area | Examples |
+|------|----------|
+| Header / brand | `KuatHeader`, `EELogo` |
+| Carousel | `KuatCarousel`, `KuatCarouselContent`, `KuatCarouselItem`, `KuatCarouselPrevious`, `KuatCarouselNext` |
+| Logo lockup | `KuatLogoLockup`, `EELogoIcon` |
+| Progress | `KuatRadialProgress` |
+| Cards | `ContentCard` |
 
-Pre-built compositions for common patterns:
+### Form and actions
 
-| Block | Description |
-|-------|-------------|
-| `KuatHeader` | Brand header with logo, navigation, actions |
-| `KuatFooter` | Brand footer with links and legal |
-| `KuatSearchPattern` | Search input with suggestions |
+`Button`, `ButtonGroup`, `ButtonGroupText`, `ButtonGroupSeparator`, `Badge`, `Input`, `Textarea`, `Field` (+ subcomponents), `KuatSelect` / `Select` (+ primitives), `Checkbox` / `CheckboxField`, `RadioGroup` / `RadioField`, `Switch` / `SwitchField`, `Toggle`, `ToggleGroup`.
 
-### Utilities
+### Content and navigation
 
-| Utility | Description |
-|---------|-------------|
-| `cn()` | Class name merger using clsx + tailwind-merge |
+`Accordion`, `AlertDialog`, `Breadcrumb` (Vue API may differ slightly from React—see Storybook: `apps/storybook-vue`).
 
----
+### Tree-shakable subpath imports
 
-## Recommended Setup
+Example:
 
-For the best experience, combine this package with kuat-core and shadcn-vue:
+```vue
+<script setup lang="ts">
+import { Switch } from '@equal-experts/kuat-vue/switch';
+</script>
+```
 
-### Step 1: Install Dependencies
+See `package.json` `exports` and [public-api-inventory.md](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/public-api-inventory.md).
 
-```bash
-pnpm add @equal-experts/kuat-core @equal-experts/kuat-vue
-```
+---
+
+## Recommended setup
 
-### Step 2: Configure Tailwind
+### 1. Tailwind
 
 ```typescript
 // tailwind.config.ts
@@ -101,39 +94,31 @@ export default {
 } satisfies Config;
 ```
 
-### Step 3: Import Styles
+### 2. Design tokens
 
 ```typescript
 // main.ts
-import { createApp } from 'vue';
 import '@equal-experts/kuat-core/variables.css';
-import App from './App.vue';
-
-createApp(App).mount('#app');
 ```
 
-### Step 4: Install shadcn-vue Components
+### 3. shadcn-vue for gaps
 
 ```bash
 npx shadcn-vue@latest init
-npx shadcn-vue@latest add button dialog dropdown-menu
+npx shadcn-vue@latest add dialog dropdown-menu
 ```
 
-### Step 5: Use Components Together
+### 4. Use Kuat + shadcn-vue together
 
 ```vue
 <script setup lang="ts">
-// Kuat custom components from this package
-import { ButtonGroup, ButtonGroupText } from '@equal-experts/kuat-vue';
-
-// shadcn-vue components from your local installation
-import { Button } from '@/components/ui/button';
+import { Button, ButtonGroup } from '@equal-experts/kuat-vue';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 </script>
 
 <template>
   <ButtonGroup>
     <Button variant="outline">Edit</Button>
-    <Button variant="outline">Save</Button>
     <Button variant="destructive">Delete</Button>
   </ButtonGroup>
 </template>
@@ -141,124 +126,54 @@ import { Button } from '@/components/ui/button';
 
 ---
 
-## Component Examples
+## Component examples
 
 ### ButtonGroup
 
-Groups buttons together with seamless borders:
-
 ```vue
 <script setup lang="ts">
-import { ButtonGroup, ButtonGroupText } from '@equal-experts/kuat-vue';
-import { Button } from '@/components/ui/button';
+import { ButtonGroup, ButtonGroupText, Button } from '@equal-experts/kuat-vue';
 </script>
 
 <template>
-  <!-- Horizontal (default) -->
   <ButtonGroup>
     <Button variant="outline">Left</Button>
-    <Button variant="outline">Center</Button>
     <Button variant="outline">Right</Button>
   </ButtonGroup>
 
-  <!-- Vertical -->
   <ButtonGroup orientation="vertical">
     <Button variant="outline">Top</Button>
-    <Button variant="outline">Middle</Button>
     <Button variant="outline">Bottom</Button>
   </ButtonGroup>
 
-  <!-- With text label -->
   <ButtonGroup>
     <ButtonGroupText>Filter:</ButtonGroupText>
     <Button variant="outline">All</Button>
-    <Button variant="outline">Active</Button>
-    <Button variant="outline">Completed</Button>
   </ButtonGroup>
 </template>
 ```
 
-### cn() Utility
-
-Merge class names with Tailwind conflict resolution:
+### `cn()` utility
 
 ```vue
 <script setup lang="ts">
 import { cn } from '@equal-experts/kuat-vue';
 
-const props = defineProps<{
-  class?: string;
-}>();
-
-const containerClass = cn(
-  'bg-background text-foreground p-4',
-  props.class
-);
-</script>
-
-<template>
-  <div :class="containerClass">
-    <slot />
-  </div>
-</template>
-```
-
----
-
-## Migration Guide
-
-If you were importing standard components from this package, migrate to direct shadcn-vue installation:
-
-### Before (Deprecated)
-
-```vue
-<script setup lang="ts">
-import { Button, Dialog, Badge } from '@equal-experts/kuat-vue';
+const containerClass = cn('bg-background text-foreground p-4', props.class);
 </script>
 ```
 
-### After (Recommended)
-
-```vue
-<script setup lang="ts">
-// Standard components from your local shadcn-vue installation
-import { Button } from '@/components/ui/button';
-import { Dialog } from '@/components/ui/dialog';
-import { Badge } from '@/components/ui/badge';
-
-// Kuat-specific components from this package
-import { ButtonGroup } from '@equal-experts/kuat-vue';
-</script>
-```
-
-### Migration Steps
-
-1. Ensure `@equal-experts/kuat-core` is installed
-2. Initialize shadcn-vue: `npx shadcn-vue@latest init`
-3. Install needed components: `npx shadcn-vue@latest add button dialog badge`
-4. Update imports to use local components
-5. Keep imports for Kuat-specific components (ButtonGroup, etc.)
-
 ---
 
-## Deprecated Exports
-
-The following exports are deprecated and will be removed in the next major version. Install them directly via shadcn-vue CLI instead:
+## Migration (legacy projects)
 
-| Component | Replacement |
-|-----------|-------------|
-| `Button` | `npx shadcn-vue@latest add button` |
-| `Accordion` | `npx shadcn-vue@latest add accordion` |
-| `AlertDialog` | `npx shadcn-vue@latest add alert-dialog` |
-| `Badge` | `npx shadcn-vue@latest add badge` |
+**Prefer** imports from `@equal-experts/kuat-vue` for primitives this package publishes. Use **shadcn-vue** under `@/components/ui` for components **not** in Kuat (for example Dialog).
 
-These components are still exported for backward compatibility but will be themed correctly only when using kuat-core.
+Do **not** move `Button` to a local shadcn-vue copy unless you have a deliberate fork—prefer Kuat’s `Button` for consistency with tokens and variants.
 
 ---
 
-## TypeScript Support
-
-All components are fully typed:
+## TypeScript
 
 ```vue
 <script setup lang="ts">
@@ -271,30 +186,16 @@ const orientation: ButtonGroupVariants['orientation'] = 'horizontal';
 
 ---
 
-## Dark Mode
-
-Dark mode is supported via the `.dark` class on your root element:
-
-```vue
-<template>
-  <div :class="{ dark: isDark }">
-    <App />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-const isDark = ref(false);
-</script>
-```
+## Dark mode
 
-Components automatically adapt when using kuat-core design tokens.
+Apply `.dark` on the root (or toggle a class on `<html>` / layout). Tokens come from `kuat-core`.
 
 ---
 
-## Related Documentation
+## Related documentation
 
-- [Consumer Setup Guide](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/consumer-setup.md)
-- [kuat-core Integration](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/kuat-core-integration.md)
-- [Component Patterns](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/rules/components/patterns.md)
-- [shadcn-vue Documentation](https://www.shadcn-vue.com)
+- [Consumer setup](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/consumer-setup.md)
+- [Choosing components](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/choosing-components.md)
+- [kuat-core integration](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/kuat-core-integration.md)
+- [Component patterns (contributors)](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/rules/components/patterns.md)
+- [shadcn-vue](https://www.shadcn-vue.com)

package/dist/AccordionTrigger-BRz5PzEd.js

@@ -0,0 +1,105 @@
+import { defineComponent as d, createBlock as i, openBlock as l, unref as o, normalizeProps as A, guardReactiveProps as y, withCtx as c, renderSlot as n, mergeProps as p, createElementVNode as B, normalizeClass as C, createVNode as g } from "vue";
+import { useForwardPropsEmits as v, AccordionRoot as $, AccordionContent as h, useForwardProps as P, AccordionItem as b, AccordionHeader as w, AccordionTrigger as I } from "reka-ui";
+import { c as m } from "./utils-DLUjLwnh.js";
+import { r as u } from "./index-A7umpmtg.js";
+import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { ChevronDown as V } from "lucide-vue-next";
+const D = /* @__PURE__ */ d({
+  __name: "Accordion",
+  props: {
+    collapsible: { type: Boolean },
+    disabled: { type: Boolean },
+    dir: {},
+    orientation: {},
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    type: {},
+    modelValue: {},
+    defaultValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: e }) {
+    const a = v(s, e);
+    return (f, k) => (l(), i(o($), A(y(o(a))), {
+      default: c(() => [
+        n(f.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), T = /* @__PURE__ */ d({
+  __name: "AccordionContent",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const e = s, r = u(e, "class");
+    return (t, a) => (l(), i(o(h), p(o(r), { class: "accordion-content" }), {
+      default: c(() => [
+        B("div", {
+          class: C(o(m)("accordion-content__body", e.class))
+        }, [
+          n(t.$slots, "default", {}, void 0, !0)
+        ], 2)
+      ]),
+      _: 3
+    }, 16));
+  }
+}), M = /* @__PURE__ */ _(T, [["__scopeId", "data-v-323c4af0"]]), H = /* @__PURE__ */ d({
+  __name: "AccordionItem",
+  props: {
+    disabled: { type: Boolean },
+    value: {},
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const e = s, r = u(e, "class"), t = P(r);
+    return (a, f) => (l(), i(o(b), p(o(t), {
+      class: o(m)("accordion-item", e.class)
+    }), {
+      default: c(() => [
+        n(a.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), S = /* @__PURE__ */ _(H, [["__scopeId", "data-v-f0319512"]]), O = /* @__PURE__ */ d({
+  __name: "AccordionTrigger",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const e = s, r = u(e, "class");
+    return (t, a) => (l(), i(o(w), { class: "accordion-trigger-wrapper" }, {
+      default: c(() => [
+        g(o(I), p(o(r), {
+          class: o(m)("accordion-trigger", e.class)
+        }), {
+          default: c(() => [
+            n(t.$slots, "default", {}, void 0, !0),
+            n(t.$slots, "icon", {}, () => [
+              g(o(V), { class: "accordion-trigger__icon" })
+            ], !0)
+          ]),
+          _: 3
+        }, 16, ["class"])
+      ]),
+      _: 3
+    }));
+  }
+}), j = /* @__PURE__ */ _(O, [["__scopeId", "data-v-a03b22b5"]]);
+export {
+  S as A,
+  D as _,
+  j as a,
+  M as b
+};

package/dist/AlertDialogTrigger.vue_vue_type_script_setup_true_lang-CK1Um8CY.js

@@ -0,0 +1,173 @@
+import { defineComponent as l, createBlock as p, openBlock as r, unref as e, normalizeProps as D, guardReactiveProps as $, withCtx as n, renderSlot as c, mergeProps as u, createVNode as A, createElementBlock as v, normalizeClass as h } from "vue";
+import { useForwardPropsEmits as C, AlertDialogRoot as y, AlertDialogAction as B, AlertDialogCancel as P, AlertDialogPortal as I, AlertDialogOverlay as O, AlertDialogContent as w, AlertDialogDescription as T, AlertDialogTitle as b, AlertDialogTrigger as F } from "reka-ui";
+import { c as d } from "./utils-DLUjLwnh.js";
+import { r as g } from "./index-A7umpmtg.js";
+import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const G = /* @__PURE__ */ l({
+  __name: "AlertDialog",
+  props: {
+    open: { type: Boolean },
+    defaultOpen: { type: Boolean }
+  },
+  emits: ["update:open"],
+  setup(s, { emit: t }) {
+    const i = C(s, t);
+    return (f, m) => (r(), p(e(y), D($(e(i))), {
+      default: n(() => [
+        c(f.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), k = /* @__PURE__ */ l({
+  __name: "AlertDialogAction",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const t = s, a = g(t, "class");
+    return (o, i) => (r(), p(e(B), u(e(a), {
+      class: e(d)("alert-dialog-action", t.class)
+    }), {
+      default: n(() => [
+        c(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), J = /* @__PURE__ */ _(k, [["__scopeId", "data-v-a5af5f97"]]), x = /* @__PURE__ */ l({
+  __name: "AlertDialogCancel",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const t = s, a = g(t, "class");
+    return (o, i) => (r(), p(e(P), u(e(a), {
+      class: e(d)("alert-dialog-cancel", t.class)
+    }), {
+      default: n(() => [
+        c(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), L = /* @__PURE__ */ _(x, [["__scopeId", "data-v-4ab33db4"]]), E = /* @__PURE__ */ l({
+  __name: "AlertDialogContent",
+  props: {
+    forceMount: { type: Boolean },
+    disableOutsidePointerEvents: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
+  setup(s, { emit: t }) {
+    const a = s, o = t, i = g(a, "class"), f = C(i, o);
+    return (m, M) => (r(), p(e(I), null, {
+      default: n(() => [
+        A(e(O), { class: "alert-dialog-overlay" }),
+        A(e(w), u(e(f), {
+          class: e(d)("alert-dialog-content", a.class)
+        }), {
+          default: n(() => [
+            c(m.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 16, ["class"])
+      ]),
+      _: 3
+    }));
+  }
+}), Q = /* @__PURE__ */ _(E, [["__scopeId", "data-v-630d3e5f"]]), z = /* @__PURE__ */ l({
+  __name: "AlertDialogDescription",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const t = s, a = g(t, "class");
+    return (o, i) => (r(), p(e(T), u(e(a), {
+      class: e(d)("alert-dialog-description", t.class)
+    }), {
+      default: n(() => [
+        c(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), U = /* @__PURE__ */ _(z, [["__scopeId", "data-v-5a0d8461"]]), H = /* @__PURE__ */ l({
+  __name: "AlertDialogFooter",
+  props: {
+    class: {}
+  },
+  setup(s) {
+    const t = s;
+    return (a, o) => (r(), v("div", {
+      class: h(e(d)("alert-dialog-footer", t.class))
+    }, [
+      c(a.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), W = /* @__PURE__ */ _(H, [["__scopeId", "data-v-59463818"]]), R = /* @__PURE__ */ l({
+  __name: "AlertDialogHeader",
+  props: {
+    class: {}
+  },
+  setup(s) {
+    const t = s;
+    return (a, o) => (r(), v("div", {
+      class: h(e(d)("alert-dialog-header", t.class))
+    }, [
+      c(a.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), X = /* @__PURE__ */ _(R, [["__scopeId", "data-v-689b6152"]]), K = /* @__PURE__ */ l({
+  __name: "AlertDialogTitle",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const t = s, a = g(t, "class");
+    return (o, i) => (r(), p(e(b), u(e(a), {
+      class: e(d)("alert-dialog-title", t.class)
+    }), {
+      default: n(() => [
+        c(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), Y = /* @__PURE__ */ _(K, [["__scopeId", "data-v-f431895c"]]), Z = /* @__PURE__ */ l({
+  __name: "AlertDialogTrigger",
+  props: {
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s) {
+    const t = s;
+    return (a, o) => (r(), p(e(F), D($(t)), {
+      default: n(() => [
+        c(a.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  J as A,
+  G as _,
+  L as a,
+  Q as b,
+  U as c,
+  W as d,
+  X as e,
+  Y as f,
+  Z as g
+};