@equal-experts/kuat-vue 0.4.2 → 0.6.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. It also provides a localized **Button** component. For other UI components (e.g. Dialog), install them 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,66 +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 |
-|-----------|-------------|
-| `Button` | Primary actions with variant (primary, secondary, outline, ghost, ghost-muted, destructive) and color |
-| `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:
+
+```vue
+<script setup lang="ts">
+import { Switch } from '@equal-experts/kuat-vue/switch';
+</script>
+```
 
-For the best experience, combine this package with kuat-core and shadcn-vue:
+See `package.json` `exports` and [public-api-inventory.md](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/public-api-inventory.md).
 
-### Step 1: Install Dependencies
+---
 
-```bash
-pnpm add @equal-experts/kuat-core @equal-experts/kuat-vue
-```
+## Recommended setup
 
-### Step 2: Configure Tailwind
+### 1. Tailwind
 
 ```typescript
 // tailwind.config.ts
@@ -102,38 +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, Button } from '@equal-experts/kuat-vue';
-
-// Other shadcn-vue components from your local installation if needed
+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,107 +126,54 @@ import { ButtonGroup, ButtonGroupText, Button } from '@equal-experts/kuat-vue';
 
 ---
 
-## Component Examples
+## Component examples
 
 ### ButtonGroup
 
-Groups buttons together with seamless borders:
-
 ```vue
 <script setup lang="ts">
 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
-);
+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 } from '@equal-experts/kuat-vue';
-</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';
-
-// Kuat-specific components from this package (including Badge)
-import { ButtonGroup, Badge } from '@equal-experts/kuat-vue';
-</script>
-```
+## Migration (legacy projects)
 
-### Migration Steps
+**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).
 
-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`
-4. Update imports to use local components
-5. Keep imports for Kuat-specific components (Button, ButtonGroup, Badge, etc.)
+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">
@@ -254,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/FieldSet.vue_vue_type_script_setup_true_lang-D9i4ciy0.js

@@ -0,0 +1,119 @@
+import { defineComponent as i, useAttrs as u, computed as d, createElementBlock as o, createCommentVNode as h, openBlock as n, mergeProps as p, unref as f, renderSlot as _, toDisplayString as A, Fragment as $, renderList as F } from "vue";
+import { c as m } from "./utils-DLUjLwnh.js";
+import "./FieldTitle.vue_vue_type_script_setup_true_lang-Bu8UIwRT.js";
+const L = ["responsive", "vertical", "horizontal"], N = ["legend", "label"], y = { key: 1 }, E = {
+  key: 2,
+  class: "field-error__list"
+}, D = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "FieldError",
+  props: {
+    class: {},
+    errors: {},
+    issues: {}
+  },
+  setup(r) {
+    const t = r, a = u(), l = d(() => {
+      const { class: e, ...g } = a;
+      return g;
+    }), s = d(() => {
+      const e = Array.isArray(t.errors) ? t.errors : t.errors ? [t.errors] : [], g = t.issues ?? [];
+      return [...e, ...g].map((c) => {
+        var v;
+        return (v = c == null ? void 0 : c.message) == null ? void 0 : v.trim();
+      }).filter((c) => !!c);
+    });
+    return (e, g) => e.$slots.default || s.value.length ? (n(), o("div", p({
+      key: 0,
+      "data-slot": "field-error",
+      class: f(m)("field-error", t.class)
+    }, l.value), [
+      e.$slots.default ? _(e.$slots, "default", { key: 0 }) : s.value.length === 1 ? (n(), o("span", y, A(s.value[0]), 1)) : s.value.length > 1 ? (n(), o("ul", E, [
+        (n(!0), o($, null, F(s.value, (c) => (n(), o("li", { key: c }, A(c), 1))), 128))
+      ])) : h("", !0)
+    ], 16)) : h("", !0);
+  }
+}), B = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "FieldGroup",
+  props: {
+    class: {}
+  },
+  setup(r) {
+    const t = r, a = u(), l = d(() => {
+      const { class: s, ...e } = a;
+      return e;
+    });
+    return (s, e) => (n(), o("div", p({
+      "data-slot": "field-group",
+      class: f(m)("field-group", t.class)
+    }, l.value), [
+      _(s.$slots, "default")
+    ], 16));
+  }
+}), T = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "FieldLegend",
+  props: {
+    class: {},
+    variant: { default: "legend" }
+  },
+  setup(r) {
+    const t = r, a = u(), l = d(() => {
+      const { class: s, ...e } = a;
+      return e;
+    });
+    return (s, e) => (n(), o("legend", p({
+      "data-slot": "field-legend",
+      class: f(m)("field-legend", `field-legend--${r.variant}`, t.class)
+    }, l.value), [
+      _(s.$slots, "default")
+    ], 16));
+  }
+}), b = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "FieldSeparator",
+  props: {
+    class: {}
+  },
+  setup(r) {
+    const t = r, a = u(), l = d(() => {
+      const { class: s, ...e } = a;
+      return e;
+    });
+    return (s, e) => (n(), o("div", p({
+      "data-slot": "field-separator",
+      role: "separator",
+      class: f(m)("field-separator", t.class)
+    }, l.value), [
+      _(s.$slots, "default")
+    ], 16));
+  }
+}), C = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "FieldSet",
+  props: {
+    class: {}
+  },
+  setup(r) {
+    const t = r, a = u(), l = d(() => {
+      const { class: s, ...e } = a;
+      return e;
+    });
+    return (s, e) => (n(), o("fieldset", p({
+      "data-slot": "field-set",
+      class: f(m)("field-set", t.class)
+    }, l.value), [
+      _(s.$slots, "default")
+    ], 16));
+  }
+});
+export {
+  N as F,
+  D as _,
+  B as a,
+  T as b,
+  b as c,
+  C as d,
+  L as e
+};

package/dist/FieldTitle.vue_vue_type_script_setup_true_lang-Bu8UIwRT.js

@@ -0,0 +1,108 @@
+import { defineComponent as c, useAttrs as o, computed as n, createBlock as v, openBlock as i, resolveDynamicComponent as A, mergeProps as d, unref as u, withCtx as $, renderSlot as p, createElementBlock as _ } from "vue";
+import { c as f } from "./utils-DLUjLwnh.js";
+const F = /* @__PURE__ */ c({
+  inheritAttrs: !1,
+  __name: "Field",
+  props: {
+    class: {},
+    orientation: { default: "responsive" },
+    as: { default: "div" }
+  },
+  setup(e) {
+    const l = e, a = o(), r = n(() => {
+      const { class: t, "data-slot": m, ...h } = a;
+      return h;
+    }), s = n(() => {
+      const t = a["data-slot"];
+      return typeof t == "string" ? t : "field";
+    });
+    return (t, m) => (i(), v(A(e.as), d({
+      class: u(f)("field", `field--orientation-${e.orientation}`, l.class),
+      "data-slot": s.value
+    }, r.value), {
+      default: $(() => [
+        p(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class", "data-slot"]));
+  }
+}), C = /* @__PURE__ */ c({
+  inheritAttrs: !1,
+  __name: "FieldContent",
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e, a = o(), r = n(() => {
+      const { class: s, ...t } = a;
+      return t;
+    });
+    return (s, t) => (i(), _("div", d({
+      "data-slot": "field-content",
+      class: u(f)("field-content", l.class)
+    }, r.value), [
+      p(s.$slots, "default")
+    ], 16));
+  }
+}), k = /* @__PURE__ */ c({
+  inheritAttrs: !1,
+  __name: "FieldDescription",
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e, a = o(), r = n(() => {
+      const { class: s, ...t } = a;
+      return t;
+    });
+    return (s, t) => (i(), _("p", d({
+      "data-slot": "field-description",
+      class: u(f)("field-description", l.class)
+    }, r.value), [
+      p(s.$slots, "default")
+    ], 16));
+  }
+}), B = /* @__PURE__ */ c({
+  inheritAttrs: !1,
+  __name: "FieldLabel",
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e, a = o(), r = n(() => {
+      const { class: s, ...t } = a;
+      return t;
+    });
+    return (s, t) => (i(), _("label", d({
+      "data-slot": "field-label",
+      class: u(f)("field-label", l.class)
+    }, r.value), [
+      p(s.$slots, "default")
+    ], 16));
+  }
+}), x = /* @__PURE__ */ c({
+  inheritAttrs: !1,
+  __name: "FieldTitle",
+  props: {
+    class: {}
+  },
+  setup(e) {
+    const l = e, a = o(), r = n(() => {
+      const { class: s, ...t } = a;
+      return t;
+    });
+    return (s, t) => (i(), _("div", d({
+      "data-slot": "field-title",
+      class: u(f)("field-title", l.class)
+    }, r.value), [
+      p(s.$slots, "default")
+    ], 16));
+  }
+});
+export {
+  F as _,
+  C as a,
+  k as b,
+  B as c,
+  x as d
+};