@equal-experts/kuat-react 0.2.4 → 0.2.6

package/README.md

@@ -42,6 +42,42 @@ pnpm add lucide-react
 
 **Note:** `@equal-experts/kuat-core` is bundled with this package - you don't need to install it separately. Only install the Radix UI packages for the components you actually use.
 
+### Recommended: Use Subpath Imports
+
+To avoid installing all peer dependencies when you only need specific components, use **subpath imports**. This allows you to import only the components you need and only install their required peer dependencies.
+
+**Example: Only using Button**
+
+```bash
+# Only install peer dependencies for Button
+pnpm add react react-dom @radix-ui/react-slot
+```
+
+```tsx
+// Import from subpath - only Button and its dependencies are required
+import { Button } from "@equal-experts/kuat-react/button";
+```
+
+**Component Peer Dependencies:**
+
+- **Button**: `react`, `react-dom`, `@radix-ui/react-slot`
+- **Accordion**: `react`, `react-dom`, `@radix-ui/react-accordion`, `lucide-react`
+- **AlertDialog**: `react`, `react-dom`, `@radix-ui/react-alert-dialog`
+- **Badge**: `react`, `react-dom` (no additional Radix UI dependencies)
+
+**Using Main Export (All Components):**
+
+If you import from the main package, you'll need all peer dependencies:
+
+```tsx
+// This requires ALL peer dependencies to be installed
+import { Button, Accordion, AlertDialog } from "@equal-experts/kuat-react";
+```
+
+**lucide-react Version Support:**
+
+The package supports `lucide-react` versions `^0.344.0 || >=0.400.0`, including the latest versions (0.562.0+).
+
 ---
 
 ## Setup
@@ -144,18 +180,98 @@ If you want to use different fonts or load them differently, you can override th
 
 ---
 
+## AI Agent Documentation Setup
+
+The Kuat Design System includes AI-friendly documentation optimized for LLM consumption. This documentation helps AI assistants understand the design system, generate code that follows design patterns, and maintain brand consistency.
+
+### Setup Documentation
+
+To make the agent documentation available in your repository for LLM context (e.g., Cursor), run the setup script:
+
+```bash
+# Using pnpm exec (recommended)
+pnpm exec @equal-experts/kuat-react setup-docs
+
+# Using npm exec
+npm exec @equal-experts/kuat-react setup-docs
+
+# Or if you have the package installed locally
+cd node_modules/@equal-experts/kuat-react && pnpm setup-docs
+```
+
+This will copy the agent documentation to `.cursor/rules/kuat-docs/` in your repository root.
+
+### What Gets Copied
+
+The setup script copies the following documentation:
+
+- **Design System** (`design/`) - Colors, typography, spacing, borders, layouts, logo usage
+- **Component Guidelines** (`components/`) - Component development patterns and best practices
+- **Content Guidelines** (`content/`) - Content writing guidelines for marketing, sales, and product interfaces
+
+### Using the Documentation
+
+Once copied, you can:
+
+1. **Reference in Cursor Rules**: Add references to `.cursor/rules/kuat-docs/` in your `.cursorrules` file
+2. **LLM Context**: The documentation is optimized for LLM consumption and provides context for:
+   - Understanding the design system
+   - Using components correctly
+   - Maintaining brand consistency
+   - Writing appropriate content
+
+### Updating Documentation
+
+After installing a new version of `@equal-experts/kuat-react`, run the setup script again to update the documentation:
+
+```bash
+pnpm exec @equal-experts/kuat-react setup-docs
+```
+
+The script will automatically clean and replace the existing documentation.
+
+### Documentation Location
+
+The documentation is copied to:
+```
+.cursor/rules/kuat-docs/
+```
+
+This location is chosen because:
+- It's within the `.cursor/` directory (typically gitignored)
+- It's in the `rules/` subdirectory where Cursor looks for context files
+- It's clearly namespaced as `kuat-docs/` to avoid conflicts
+
+---
+
 ## Basic Usage
 
 ### Import Components
 
+You can import components in two ways:
+
+**Option 1: Subpath Import (Recommended for single components)**
+
 ```typescript
+// Import only Button - only requires Button's peer dependencies
+import { Button } from "@equal-experts/kuat-react/button";
+```
+
+**Option 2: Main Package Import**
+
+```typescript
+// Import from main package - requires all peer dependencies
 import { Button } from "@equal-experts/kuat-react";
 ```
 
 ### Use in Your App
 
 ```tsx
-import { Button } from "@equal-experts/kuat-react";
+// Recommended: Subpath import
+import { Button } from "@equal-experts/kuat-react/button";
+
+// Or: Main package import
+// import { Button } from "@equal-experts/kuat-react";
 
 function App() {
   return (

package/dist/accordion-Da2BsKRK.js

@@ -0,0 +1,46 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import * as s from "react";
+import * as a from "@radix-ui/react-accordion";
+import { ChevronDown as d } from "lucide-react";
+import { c as i } from "./styles-qaFjX9_3.js";
+const w = a.Root, m = s.forwardRef(({ className: e, ...o }, r) => /* @__PURE__ */ t(
+  a.Item,
+  {
+    ref: r,
+    className: i("border-b", e),
+    ...o
+  }
+));
+m.displayName = "AccordionItem";
+const l = s.forwardRef(({ className: e, children: o, ...r }, n) => /* @__PURE__ */ t(a.Header, { className: "flex", children: /* @__PURE__ */ c(
+  a.Trigger,
+  {
+    ref: n,
+    className: i(
+      "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 ",
+      e
+    ),
+    ...r,
+    children: [
+      o,
+      /* @__PURE__ */ t(d, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+    ]
+  }
+) }));
+l.displayName = a.Trigger.displayName;
+const f = s.forwardRef(({ className: e, children: o, ...r }, n) => /* @__PURE__ */ t(
+  a.Content,
+  {
+    ref: n,
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...r,
+    children: /* @__PURE__ */ t("div", { className: i("pb-4 pt-0", e), children: o })
+  }
+));
+f.displayName = a.Content.displayName;
+export {
+  w as A,
+  m as a,
+  l as b,
+  f as c
+};

package/dist/accordion.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './lib/utils';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './components/ui/accordion';

package/dist/accordion.js

@@ -0,0 +1,9 @@
+import { c as r } from "./styles-qaFjX9_3.js";
+import { A as a, c as e, a as i, b as s } from "./accordion-Da2BsKRK.js";
+export {
+  a as Accordion,
+  e as AccordionContent,
+  i as AccordionItem,
+  s as AccordionTrigger,
+  r as cn
+};

package/dist/alert-dialog-C769FFOM.js

@@ -0,0 +1,113 @@
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import * as i from "react";
+import * as t from "@radix-ui/react-alert-dialog";
+import { c as l } from "./styles-qaFjX9_3.js";
+import { b as r } from "./button-X-yV4Iwq.js";
+const w = t.Root, b = t.Trigger, m = t.Portal, d = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ s(
+  t.Overlay,
+  {
+    className: l(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      a
+    ),
+    ...e,
+    ref: o
+  }
+));
+d.displayName = t.Overlay.displayName;
+const c = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ n(m, { children: [
+  /* @__PURE__ */ s(d, {}),
+  /* @__PURE__ */ s(
+    t.Content,
+    {
+      ref: o,
+      className: l(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        a
+      ),
+      ...e
+    }
+  )
+] }));
+c.displayName = t.Content.displayName;
+const f = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: l(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      a
+    ),
+    ...e
+  }
+);
+f.displayName = "AlertDialogHeader";
+const p = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: l(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      a
+    ),
+    ...e
+  }
+);
+p.displayName = "AlertDialogFooter";
+const g = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ s(
+  t.Title,
+  {
+    ref: o,
+    className: l("text-lg font-semibold", a),
+    ...e
+  }
+));
+g.displayName = t.Title.displayName;
+const N = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ s(
+  t.Description,
+  {
+    ref: o,
+    className: l("text-sm text-muted-foreground", a),
+    ...e
+  }
+));
+N.displayName = t.Description.displayName;
+const y = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ s(
+  t.Action,
+  {
+    ref: o,
+    className: l(r(), a),
+    ...e
+  }
+));
+y.displayName = t.Action.displayName;
+const x = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ s(
+  t.Cancel,
+  {
+    ref: o,
+    className: l(
+      r({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      a
+    ),
+    ...e
+  }
+));
+x.displayName = t.Cancel.displayName;
+export {
+  w as A,
+  m as a,
+  d as b,
+  b as c,
+  c as d,
+  f as e,
+  p as f,
+  g,
+  N as h,
+  y as i,
+  x as j
+};

package/dist/alert-dialog.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './lib/utils';
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './components/ui/alert-dialog';

package/dist/alert-dialog.js

@@ -0,0 +1,16 @@
+import { c as e } from "./styles-qaFjX9_3.js";
+import { A as o, i as t, j as i, d as g, h as s, f as A, e as D, b as c, a as n, g as f, c as p } from "./alert-dialog-C769FFOM.js";
+export {
+  o as AlertDialog,
+  t as AlertDialogAction,
+  i as AlertDialogCancel,
+  g as AlertDialogContent,
+  s as AlertDialogDescription,
+  A as AlertDialogFooter,
+  D as AlertDialogHeader,
+  c as AlertDialogOverlay,
+  n as AlertDialogPortal,
+  f as AlertDialogTitle,
+  p as AlertDialogTrigger,
+  e as cn
+};

package/dist/badge-BXjC4NYJ.js

@@ -0,0 +1,26 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as o } from "./index-D5fkjZ2l.js";
+import { c as a } from "./styles-qaFjX9_3.js";
+const s = o(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function u({ className: r, variant: t, ...e }) {
+  return /* @__PURE__ */ n("div", { className: a(s({ variant: t }), r), ...e });
+}
+export {
+  u as B,
+  s as b
+};

package/dist/badge.d.ts

@@ -0,0 +1,3 @@
+export { cn } from './lib/utils';
+export { Badge, badgeVariants } from './components/ui/badge';
+export type { BadgeProps } from './components/ui/badge';

package/dist/badge.js

@@ -0,0 +1,7 @@
+import { c as e } from "./styles-qaFjX9_3.js";
+import { B as s, b as t } from "./badge-BXjC4NYJ.js";
+export {
+  s as Badge,
+  t as badgeVariants,
+  e as cn
+};

package/dist/button-X-yV4Iwq.js

@@ -0,0 +1,44 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as a from "react";
+import { Slot as d } from "@radix-ui/react-slot";
+import { c } from "./index-D5fkjZ2l.js";
+import { c as u } from "./styles-qaFjX9_3.js";
+const f = c(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), g = a.forwardRef(
+  ({ className: e, variant: r, size: t, asChild: o = !1, ...n }, i) => /* @__PURE__ */ s(
+    o ? d : "button",
+    {
+      className: u(f({ variant: r, size: t, className: e })),
+      ref: i,
+      ...n
+    }
+  )
+);
+g.displayName = "Button";
+export {
+  g as B,
+  f as b
+};

package/dist/button-group-C55D9oj4.js

@@ -0,0 +1,93 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as d } from "@radix-ui/react-slot";
+import { c as u } from "./index-D5fkjZ2l.js";
+import { c as e } from "./styles-qaFjX9_3.js";
+import * as c from "react";
+import * as n from "@radix-ui/react-separator";
+const i = c.forwardRef(
+  ({ className: o, orientation: t = "horizontal", decorative: r = !0, ...s }, l) => /* @__PURE__ */ a(
+    n.Root,
+    {
+      ref: l,
+      decorative: r,
+      orientation: t,
+      className: e(
+        "shrink-0 bg-border",
+        t === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        o
+      ),
+      ...s
+    }
+  )
+);
+i.displayName = n.Root.displayName;
+const p = u(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function g({
+  className: o,
+  orientation: t,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": t,
+      className: e(p({ orientation: t }), o),
+      ...r
+    }
+  );
+}
+function v({
+  className: o,
+  asChild: t = !1,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    t ? d : "div",
+    {
+      className: e(
+        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        o
+      ),
+      ...r
+    }
+  );
+}
+function x({
+  className: o,
+  orientation: t = "vertical",
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    i,
+    {
+      "data-slot": "button-group-separator",
+      orientation: t,
+      className: e(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        o
+      ),
+      ...r
+    }
+  );
+}
+export {
+  g as B,
+  x as a,
+  v as b,
+  p as c
+};

package/dist/button-group.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './lib/utils';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } from './components/ui/button-group';

package/dist/button-group.js

@@ -0,0 +1,9 @@
+import { c as r } from "./styles-qaFjX9_3.js";
+import { B as u, a as p, b as n, c as s } from "./button-group-C55D9oj4.js";
+export {
+  u as ButtonGroup,
+  p as ButtonGroupSeparator,
+  n as ButtonGroupText,
+  s as buttonGroupVariants,
+  r as cn
+};

package/dist/button.d.ts

@@ -0,0 +1,3 @@
+export { cn } from './lib/utils';
+export { Button, buttonVariants } from './components/ui/button';
+export type { ButtonProps } from './components/ui/button';

package/dist/button.js

@@ -0,0 +1,7 @@
+import { c as a } from "./styles-qaFjX9_3.js";
+import { B as n, b as s } from "./button-X-yV4Iwq.js";
+export {
+  n as Button,
+  s as buttonVariants,
+  a as cn
+};

package/dist/components/ui/button-group.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/components/ui/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/index-D5fkjZ2l.js

@@ -0,0 +1,34 @@
+import { a as O } from "./styles-qaFjX9_3.js";
+const m = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, y = O, j = (e, l) => (n) => {
+  var u;
+  if ((l == null ? void 0 : l.variants) == null) return y(e, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
+  const { variants: r, defaultVariants: d } = l, V = Object.keys(r).map((t) => {
+    const a = n == null ? void 0 : n[t], s = d == null ? void 0 : d[t];
+    if (a === null) return null;
+    const i = m(a) || m(s);
+    return r[t][i];
+  }), v = n && Object.entries(n).reduce((t, a) => {
+    let [s, i] = a;
+    return i === void 0 || (t[s] = i), t;
+  }, {}), N = l == null || (u = l.compoundVariants) === null || u === void 0 ? void 0 : u.reduce((t, a) => {
+    let { class: s, className: i, ...f } = a;
+    return Object.entries(f).every((C) => {
+      let [c, o] = C;
+      return Array.isArray(o) ? o.includes({
+        ...d,
+        ...v
+      }[c]) : {
+        ...d,
+        ...v
+      }[c] === o;
+    }) ? [
+      ...t,
+      s,
+      i
+    ] : t;
+  }, []);
+  return y(e, V, N, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
+};
+export {
+  j as c
+};

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from '.
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './components/ui/alert-dialog';
 export { Badge, badgeVariants } from './components/ui/badge';
 export type { BadgeProps } from './components/ui/badge';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } from './components/ui/button-group';