@equal-experts/kuat-react 0.2.3 → 0.2.5

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
@@ -148,14 +184,30 @@ If you want to use different fonts or load them differently, you can override th
 
 ### 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 (
@@ -379,10 +431,43 @@ function CustomButton({ className, ...props }) {
 
 ## Additional Resources
 
-- **Design System Documentation**: See [../../docs/agent/design/design-system.md](../../docs/agent/design/design-system.md)
-- **Component Guidelines**: See [../../docs/agent/technical/component-guidelines.md](../../docs/agent/technical/component-guidelines.md)
 - **shadcn/ui Documentation**: [https://ui.shadcn.com](https://ui.shadcn.com)
 - **Tailwind CSS v4**: [https://tailwindcss.com](https://tailwindcss.com)
+- **Radix UI Documentation**: [https://www.radix-ui.com](https://www.radix-ui.com)
+
+---
+
+## AI Agent Documentation
+
+This package includes AI-friendly documentation in the `docs/` directory, optimized for LLM consumption.
+
+### Included Documentation
+
+- **[Design System](./docs/design/)** - Colors, typography, spacing, borders, and design tokens
+- **[Component Guidelines](./docs/components/guidelines.md)** - Component development patterns and best practices
+- **[Content Guidelines](./docs/content/)** - Content writing guidelines for marketing and product UX
+
+### Accessing Documentation
+
+The documentation is available in your `node_modules` after installation:
+
+```
+node_modules/@equal-experts/kuat-react/docs/
+├── design/              # Design system guidelines
+├── components/          # Component patterns
+└── content/             # Content writing guidelines
+```
+
+### For AI Agents
+
+You can reference this documentation in your `.cursorrules` or similar configuration:
+
+```
+# Kuat Design System Documentation
+- Design tokens: node_modules/@equal-experts/kuat-react/docs/design/
+- Component patterns: node_modules/@equal-experts/kuat-react/docs/components/
+- Brand colors available: EE Blue, Tech Blue, Transform Teal, Equal Ember
+```
 
 ---
 

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.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/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

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

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

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

@@ -1,3 +1,7 @@
 export { cn } from './lib/utils';
 export { Button, buttonVariants } from './components/ui/button';
 export type { ButtonProps } from './components/ui/button';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './components/ui/accordion';
+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';