@nebula-demo/ui 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# @nebula-demo/ui
+
+## 0.1.3
+
+First public release under the `@nebula-demo` package scope.
+
+## 0.1.0
+
+Initial release.
+
+- Inline Notification: contextual feedback with status variants
+- Avatar: user avatar with fallback
+- Badge: status indicators (default, strong, brand, brand-alt, success, warning, error) with auto icons
+- Button: 7 variants, 2 sizes, icon support, polymorphic rendering via `asChild`
+- Checkbox: Radix-based accessible checkbox
+- Input: text input with label, error states, icons
+- Skeleton: loading placeholder with pulse animation
+- Switch: Radix-based toggle button
+- Tag: removable/pinnable labels with close and pin actions
+- Textarea: multi-line input with avatar mentions, error states
+- Toggle: Radix-based sliding on/off switch
+- Tooltip: animated tooltip with arrow and 4 placements
+- `cn()` utility for class name merging

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 willhgoff2-jpg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# @nebula-demo/ui
+
+React component library for the Nebula design system. Built on Radix UI primitives, styled with Tailwind CSS, and fully themed via `@nebula-demo/tokens`.
+
+## Install
+
+```bash
+npm install @nebula-demo/ui @nebula-demo/tokens
+# or
+pnpm add @nebula-demo/ui @nebula-demo/tokens
+```
+
+### Peer dependencies
+
+- `react` >= 18
+- `react-dom` >= 18
+- `@nebula-demo/tokens` >= 0.1.0
+
+## Setup
+
+1. Import the Nebula token stylesheet in your app entry:
+
+```css
+@import '@nebula-demo/tokens/css';
+```
+
+2. If using Tailwind, add the Nebula preset to your config:
+
+```js
+// tailwind.config.js
+import nebulaPreset from '@nebula-demo/tokens/tailwind'
+
+export default {
+  presets: [nebulaPreset],
+  content: ['./src/**/*.{ts,tsx}', './node_modules/@nebula-demo/ui/dist/**/*.{js,cjs}'],
+}
+```
+
+The preset sets Tailwind's global prefix to `cai-` because the component bundle uses both token classes (`cai-bg-primary`) and prefixed core utilities (`cai-flex`, `cai-rounded-md`). That prefix applies to every utility generated by this Tailwind configuration. Do not override it. If your application must retain an existing unprefixed Tailwind build, compile the Nebula/UI entry separately with the Nebula preset and include both resulting stylesheets.
+
+3. Use components:
+
+```tsx
+import { Button, Badge, Tooltip, TooltipProvider } from '@nebula-demo/ui'
+
+function App() {
+  return (
+    <TooltipProvider>
+      <Button variant="primary" size="lg">
+        Get started
+      </Button>
+      <Badge variant="success" size="md">
+        Active
+      </Badge>
+    </TooltipProvider>
+  )
+}
+```
+
+## Components
+
+| Component    | Description                                                                                                                                  |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Inline Notification** | Contextual feedback messages with status variants                                                                                   |
+| **Avatar**   | User avatar with fallback initials                                                                                                           |
+| **Badge**    | Status indicators with auto icons for success, warning, error                                                                                |
+| **Button**   | 7 variants (primary, secondary, tertiary, brand, brand-alt, pagination, pagination-active), 2 sizes, icon support, polymorphic via `asChild` |
+| **Checkbox** | Radix-based accessible checkbox                                                                                                              |
+| **Input**    | Text input with label, error states, and icon support                                                                                        |
+| **Skeleton** | Loading placeholder with pulse animation                                                                                                     |
+| **Switch**   | Radix-based accessible toggle button                                                                                                         |
+| **Tag**      | Removable/pinnable labels with close and pin actions                                                                                         |
+| **Textarea** | Multi-line text input with avatar mentions and error states                                                                                  |
+| **Toggle**   | Radix-based accessible sliding on/off switch                                                                                                 |
+| **Tooltip**  | Radix-based tooltip with arrow, 4 placements, animated                                                                                       |
+
+## Utilities
+
+### `cn(...inputs)`
+
+Merges class names using `clsx` + `tailwind-merge`. Useful for extending component styles:
+
+```tsx
+import { Button, cn } from '@nebula-demo/ui'
+
+function ExampleButton() {
+  return <Button className={cn('my-custom-class', isActive && 'cai-opacity-100')} />
+}
+```
+
+## Theming
+
+All components respond to the active theme automatically. Set `data-theme="light"` on a parent element for the Light theme (defaults to Midnight):
+
+```html
+<html data-theme="light"></html>
+```
+
+## Tree-shaking
+
+Import named components from the package root. The ESM build is tree-shakeable, so bundlers can omit unused component modules:
+
+```tsx
+import { Badge, Button } from '@nebula-demo/ui'
+```
+
+## License
+
+MIT

package/dist/components/Accordion/Accordion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("react"),f=require("@radix-ui/react-accordion"),n=require("../../utils/cn.cjs"),p=require("../Icon/Icon.cjs");function s(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const o=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(i,c,o.get?o:{enumerable:!0,get:()=>e[c]})}}return i.default=e,Object.freeze(i)}const r=s(u),t=s(f),x=t.Root,d=r.forwardRef(({className:e,...i},c)=>a.jsx(t.Item,{ref:c,className:n.cn("cai-border-b-[0.75px] cai-border-disabled cai-transition-colors","data-[state=open]:hover:cai-bg-secondary",e),...i}));d.displayName="AccordionItem";const l=r.forwardRef(({className:e,children:i,...c},o)=>a.jsx(t.Header,{className:"cai-flex",children:a.jsxs(t.Trigger,{ref:o,className:n.cn("cai-flex cai-flex-1 cai-items-center cai-justify-between cai-px-lg cai-py-2xl","cai-text-body2 cai-font-medium cai-text-primary","cai-rounded-xxs cai-transition-all","hover:cai-bg-secondary","focus-visible:cai-outline-2 focus-visible:cai-outline-offset-2 focus-visible:cai-outline-brand-primary","[&[data-state=open]>svg]:cai-rotate-180",e),...c,children:[a.jsx("span",{children:i}),a.jsx(p.Icon,{name:"chevron-down",size:16,className:"cai-text-tertiary"})]})}));l.displayName="AccordionTrigger";const m=r.forwardRef(({className:e,children:i,...c},o)=>a.jsx(t.Content,{ref:o,className:n.cn("cai-overflow-hidden cai-text-subbody cai-text-secondary","data-[state=closed]:cai-animate-accordion-up data-[state=open]:cai-animate-accordion-down",e),...c,children:a.jsx("div",{className:"cai-flex cai-flex-col cai-gap-y-lg cai-px-lg cai-pt-0 cai-pb-xl",children:i})}));m.displayName="AccordionContent";exports.Accordion=x;exports.AccordionContent=m;exports.AccordionItem=d;exports.AccordionTrigger=l;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+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 };
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAQ/D,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAMzC,QAAA,MAAM,aAAa,iKAajB,CAAA;AAQF,QAAA,MAAM,gBAAgB,0KAsBpB,CAAA;AAQF,QAAA,MAAM,gBAAgB,oKAepB,CAAA;AAIF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,59 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import * as r from "react";
+import * as o from "@radix-ui/react-accordion";
+import { cn as n } from "../../utils/cn.js";
+import { Icon as d } from "../Icon/Icon.js";
+const y = o.Root, l = r.forwardRef(({ className: i, ...c }, e) => /* @__PURE__ */ a(
+  o.Item,
+  {
+    ref: e,
+    className: n(
+      "cai-border-b-[0.75px] cai-border-disabled cai-transition-colors",
+      "data-[state=open]:hover:cai-bg-secondary",
+      i
+    ),
+    ...c
+  }
+));
+l.displayName = "AccordionItem";
+const m = r.forwardRef(({ className: i, children: c, ...e }, t) => /* @__PURE__ */ a(o.Header, { className: "cai-flex", children: /* @__PURE__ */ s(
+  o.Trigger,
+  {
+    ref: t,
+    className: n(
+      "cai-flex cai-flex-1 cai-items-center cai-justify-between cai-px-lg cai-py-2xl",
+      "cai-text-body2 cai-font-medium cai-text-primary",
+      "cai-rounded-xxs cai-transition-all",
+      "hover:cai-bg-secondary",
+      "focus-visible:cai-outline-2 focus-visible:cai-outline-offset-2 focus-visible:cai-outline-brand-primary",
+      "[&[data-state=open]>svg]:cai-rotate-180",
+      i
+    ),
+    ...e,
+    children: [
+      /* @__PURE__ */ a("span", { children: c }),
+      /* @__PURE__ */ a(d, { name: "chevron-down", size: 16, className: "cai-text-tertiary" })
+    ]
+  }
+) }));
+m.displayName = "AccordionTrigger";
+const f = r.forwardRef(({ className: i, children: c, ...e }, t) => /* @__PURE__ */ a(
+  o.Content,
+  {
+    ref: t,
+    className: n(
+      "cai-overflow-hidden cai-text-subbody cai-text-secondary",
+      "data-[state=closed]:cai-animate-accordion-up data-[state=open]:cai-animate-accordion-down",
+      i
+    ),
+    ...e,
+    children: /* @__PURE__ */ a("div", { className: "cai-flex cai-flex-col cai-gap-y-lg cai-px-lg cai-pt-0 cai-pb-xl", children: c })
+  }
+));
+f.displayName = "AccordionContent";
+export {
+  y as Accordion,
+  f as AccordionContent,
+  l as AccordionItem,
+  m as AccordionTrigger
+};

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/AlertDialog/AlertDialog.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("react"),h=require("@radix-ui/react-alert-dialog"),c=require("../../utils/cn.cjs"),v=require("../../utils/focusRing.cjs"),s=require("../Button/Button.cjs"),R=require("../Icon/Icon.cjs");function n(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const i in a)if(i!=="default"){const l=Object.getOwnPropertyDescriptor(a,i);Object.defineProperty(e,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}return e.default=a,Object.freeze(e)}const r=n(N),o=n(h),C=o.Root,O=o.Trigger,q=o.Portal,d=r.forwardRef(({className:a,...e},i)=>t.jsx(o.Overlay,{ref:i,className:c.cn("cai-fixed cai-inset-0 cai-z-50 cai-bg-scrim","data-[state=open]:cai-animate-in data-[state=open]:cai-fade-in-0","data-[state=closed]:cai-animate-out data-[state=closed]:cai-fade-out-0",a),...e}));d.displayName="AlertDialogOverlay";const g=r.forwardRef(({className:a,size:e="sm",container:i,children:l,...j},w)=>t.jsxs(q,{container:i,children:[t.jsx(d,{}),t.jsx(o.Content,{ref:w,className:c.cn("cai-fixed cai-left-1/2 cai-top-1/2 cai-z-50 -cai-translate-x-1/2 -cai-translate-y-1/2","cai-flex cai-flex-col cai-w-[90%] cai-max-h-[min(720px,90vh)] cai-overflow-hidden","cai-rounded-[24px] cai-border cai-border-tertiary cai-bg-primary-invert cai-shadow-lg","data-[state=open]:cai-animate-in data-[state=open]:cai-fade-in-0 data-[state=open]:cai-zoom-in-95","data-[state=closed]:cai-animate-out data-[state=closed]:cai-fade-out-0 data-[state=closed]:cai-zoom-out-95",e==="sm"&&"cai-max-w-[540px]",e==="lg"&&"cai-max-w-[766px]",a),...j,children:l})]}));g.displayName="AlertDialogContent";const m=r.forwardRef(({className:a,...e},i)=>t.jsx("div",{ref:i,className:c.cn("cai-relative cai-flex cai-items-center cai-justify-center","cai-border-b cai-border-quaternary cai-px-[56px] cai-py-2xl",a),...e}));m.displayName="AlertDialogHeader";const f=r.forwardRef(({className:a,...e},i)=>t.jsx(o.Title,{ref:i,className:c.cn("cai-text-body1 cai-font-semibold cai-leading-tight cai-text-primary",a),...e}));f.displayName="AlertDialogTitle";const x=r.forwardRef(({className:a,label:e="Close dialog",...i},l)=>t.jsx(o.Cancel,{ref:l,"aria-label":e,className:c.cn("cai-absolute cai-right-md cai-top-1/2 -cai-translate-y-1/2","cai-inline-flex cai-items-center cai-justify-center cai-w-8 cai-h-8","cai-rounded-md cai-bg-transparent cai-text-icon-primary","hover:cai-bg-secondary cai-transition-colors",v.FOCUS_RING,a),...i,children:t.jsx(R.Icon,{name:"x-close",size:20,"aria-hidden":!0})}));x.displayName="AlertDialogClose";const p=r.forwardRef(({className:a,...e},i)=>t.jsx("div",{ref:i,className:c.cn("cai-flex-1 cai-min-h-0 cai-overflow-y-auto","cai-flex cai-flex-col cai-gap-y-xl","cai-px-4xl cai-pt-3xl cai-pb-4xl","[scrollbar-width:thin] [scrollbar-color:var(--bg-scroll)_transparent]","[&::-webkit-scrollbar]:cai-w-2 [&::-webkit-scrollbar-thumb]:cai-bg-scroll [&::-webkit-scrollbar-thumb]:cai-rounded-full",a),...e}));p.displayName="AlertDialogBody";const u=r.forwardRef(({className:a,...e},i)=>t.jsx(o.Description,{ref:i,className:c.cn("cai-text-body2 cai-font-medium cai-leading-relaxed cai-text-secondary",a),...e}));u.displayName="AlertDialogDescription";const D=r.forwardRef(({className:a,...e},i)=>t.jsx("div",{ref:i,className:c.cn("cai-flex cai-items-center cai-justify-between cai-gap-x-xl","cai-border-t cai-border-quaternary cai-px-3xl cai-py-xl",a),...e}));D.displayName="AlertDialogFooter";const y=r.forwardRef(({className:a,...e},i)=>t.jsx("div",{ref:i,className:c.cn("cai-flex cai-items-center cai-gap-x-sm",a),...e}));y.displayName="AlertDialogFooterLeft";const A=r.forwardRef(({className:a,children:e,...i},l)=>t.jsx(o.Action,{asChild:!0,...i,children:t.jsx(s.Button,{ref:l,variant:"primary",size:"sm",className:a,children:e})}));A.displayName="AlertDialogAction";const b=r.forwardRef(({className:a,children:e,...i},l)=>t.jsx(o.Cancel,{asChild:!0,...i,children:t.jsx(s.Button,{ref:l,variant:"tertiary",size:"sm",className:a,children:e})}));b.displayName="AlertDialogCancel";exports.AlertDialog=C;exports.AlertDialogAction=A;exports.AlertDialogBody=p;exports.AlertDialogCancel=b;exports.AlertDialogClose=x;exports.AlertDialogContent=g;exports.AlertDialogDescription=u;exports.AlertDialogFooter=D;exports.AlertDialogFooterLeft=y;exports.AlertDialogHeader=m;exports.AlertDialogTitle=f;exports.AlertDialogTrigger=O;

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,26 @@
+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>>;
+export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+    /** Content max width — 'sm' (540px) or 'lg' (766px) */
+    size?: 'sm' | 'lg';
+    /** Portal container target */
+    container?: HTMLElement;
+}
+declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export interface AlertDialogCloseProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> {
+    /** Accessible label for the close button. Defaults to "Close dialog". */
+    label?: string;
+}
+declare const AlertDialogClose: React.ForwardRefExoticComponent<AlertDialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooterLeft: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+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, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogClose, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogFooterLeft, AlertDialogAction, AlertDialogCancel, };
+//# sourceMappingURL=AlertDialog.d.ts.map

package/dist/components/AlertDialog/AlertDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAYpE,QAAA,MAAM,WAAW,iDAA4B,CAAA;AAM7C,QAAA,MAAM,kBAAkB,wHAA+B,CAAA;AAkCvD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,wBAAwB,CAC7E,OAAO,oBAAoB,CAAC,OAAO,CACpC;IACC,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAA;CACxB;AAED,QAAA,MAAM,kBAAkB,gGAuBtB,CAAA;AAQF,QAAA,MAAM,iBAAiB,6GAYtB,CAAA;AAQD,QAAA,MAAM,gBAAgB,8KAYpB,CAAA;AAQF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC;IAC1E,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,gBAAgB,iGAmBpB,CAAA;AAQF,QAAA,MAAM,eAAe,6GAepB,CAAA;AAQD,QAAA,MAAM,sBAAsB,wLAY1B,CAAA;AAQF,QAAA,MAAM,iBAAiB,6GAYtB,CAAA;AAQD,QAAA,MAAM,qBAAqB,6GASzB,CAAA;AAQF,QAAA,MAAM,iBAAiB,6KASrB,CAAA;AAQF,QAAA,MAAM,iBAAiB,6KASrB,CAAA;AAIF,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}

package/dist/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,160 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import * as r from "react";
+import * as o from "@radix-ui/react-alert-dialog";
+import { cn as l } from "../../utils/cn.js";
+import { FOCUS_RING as p } from "../../utils/focusRing.js";
+import { Button as s } from "../Button/Button.js";
+import { Icon as g } from "../Icon/Icon.js";
+const O = o.Root, k = o.Trigger, x = o.Portal, n = r.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ t(
+  o.Overlay,
+  {
+    ref: e,
+    className: l(
+      "cai-fixed cai-inset-0 cai-z-50 cai-bg-scrim",
+      "data-[state=open]:cai-animate-in data-[state=open]:cai-fade-in-0",
+      "data-[state=closed]:cai-animate-out data-[state=closed]:cai-fade-out-0",
+      i
+    ),
+    ...a
+  }
+));
+n.displayName = "AlertDialogOverlay";
+const y = r.forwardRef(({ className: i, size: a = "sm", container: e, children: c, ...d }, m) => /* @__PURE__ */ f(x, { container: e, children: [
+  /* @__PURE__ */ t(n, {}),
+  /* @__PURE__ */ t(
+    o.Content,
+    {
+      ref: m,
+      className: l(
+        "cai-fixed cai-left-1/2 cai-top-1/2 cai-z-50 -cai-translate-x-1/2 -cai-translate-y-1/2",
+        "cai-flex cai-flex-col cai-w-[90%] cai-max-h-[min(720px,90vh)] cai-overflow-hidden",
+        "cai-rounded-[24px] cai-border cai-border-tertiary cai-bg-primary-invert cai-shadow-lg",
+        "data-[state=open]:cai-animate-in data-[state=open]:cai-fade-in-0 data-[state=open]:cai-zoom-in-95",
+        "data-[state=closed]:cai-animate-out data-[state=closed]:cai-fade-out-0 data-[state=closed]:cai-zoom-out-95",
+        a === "sm" && "cai-max-w-[540px]",
+        a === "lg" && "cai-max-w-[766px]",
+        i
+      ),
+      ...d,
+      children: c
+    }
+  )
+] }));
+y.displayName = "AlertDialogContent";
+const b = r.forwardRef(
+  ({ className: i, ...a }, e) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: e,
+      className: l(
+        "cai-relative cai-flex cai-items-center cai-justify-center",
+        "cai-border-b cai-border-quaternary cai-px-[56px] cai-py-2xl",
+        i
+      ),
+      ...a
+    }
+  )
+);
+b.displayName = "AlertDialogHeader";
+const A = r.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ t(
+  o.Title,
+  {
+    ref: e,
+    className: l(
+      "cai-text-body1 cai-font-semibold cai-leading-tight cai-text-primary",
+      i
+    ),
+    ...a
+  }
+));
+A.displayName = "AlertDialogTitle";
+const D = r.forwardRef(({ className: i, label: a = "Close dialog", ...e }, c) => /* @__PURE__ */ t(
+  o.Cancel,
+  {
+    ref: c,
+    "aria-label": a,
+    className: l(
+      "cai-absolute cai-right-md cai-top-1/2 -cai-translate-y-1/2",
+      "cai-inline-flex cai-items-center cai-justify-center cai-w-8 cai-h-8",
+      "cai-rounded-md cai-bg-transparent cai-text-icon-primary",
+      "hover:cai-bg-secondary cai-transition-colors",
+      p,
+      i
+    ),
+    ...e,
+    children: /* @__PURE__ */ t(g, { name: "x-close", size: 20, "aria-hidden": !0 })
+  }
+));
+D.displayName = "AlertDialogClose";
+const w = r.forwardRef(
+  ({ className: i, ...a }, e) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: e,
+      className: l(
+        "cai-flex-1 cai-min-h-0 cai-overflow-y-auto",
+        "cai-flex cai-flex-col cai-gap-y-xl",
+        "cai-px-4xl cai-pt-3xl cai-pb-4xl",
+        "[scrollbar-width:thin] [scrollbar-color:var(--bg-scroll)_transparent]",
+        "[&::-webkit-scrollbar]:cai-w-2 [&::-webkit-scrollbar-thumb]:cai-bg-scroll [&::-webkit-scrollbar-thumb]:cai-rounded-full",
+        i
+      ),
+      ...a
+    }
+  )
+);
+w.displayName = "AlertDialogBody";
+const u = r.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ t(
+  o.Description,
+  {
+    ref: e,
+    className: l(
+      "cai-text-body2 cai-font-medium cai-leading-relaxed cai-text-secondary",
+      i
+    ),
+    ...a
+  }
+));
+u.displayName = "AlertDialogDescription";
+const N = r.forwardRef(
+  ({ className: i, ...a }, e) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: e,
+      className: l(
+        "cai-flex cai-items-center cai-justify-between cai-gap-x-xl",
+        "cai-border-t cai-border-quaternary cai-px-3xl cai-py-xl",
+        i
+      ),
+      ...a
+    }
+  )
+);
+N.displayName = "AlertDialogFooter";
+const h = r.forwardRef(({ className: i, ...a }, e) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: l("cai-flex cai-items-center cai-gap-x-sm", i),
+    ...a
+  }
+));
+h.displayName = "AlertDialogFooterLeft";
+const v = r.forwardRef(({ className: i, children: a, ...e }, c) => /* @__PURE__ */ t(o.Action, { asChild: !0, ...e, children: /* @__PURE__ */ t(s, { ref: c, variant: "primary", size: "sm", className: i, children: a }) }));
+v.displayName = "AlertDialogAction";
+const R = r.forwardRef(({ className: i, children: a, ...e }, c) => /* @__PURE__ */ t(o.Cancel, { asChild: !0, ...e, children: /* @__PURE__ */ t(s, { ref: c, variant: "tertiary", size: "sm", className: i, children: a }) }));
+R.displayName = "AlertDialogCancel";
+export {
+  O as AlertDialog,
+  v as AlertDialogAction,
+  w as AlertDialogBody,
+  R as AlertDialogCancel,
+  D as AlertDialogClose,
+  y as AlertDialogContent,
+  u as AlertDialogDescription,
+  N as AlertDialogFooter,
+  h as AlertDialogFooterLeft,
+  b as AlertDialogHeader,
+  A as AlertDialogTitle,
+  k as AlertDialogTrigger
+};

package/dist/components/AlertDialog/index.d.ts

@@ -0,0 +1,3 @@
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogClose, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogFooterLeft, AlertDialogAction, AlertDialogCancel, } from './AlertDialog';
+export type { AlertDialogContentProps, AlertDialogCloseProps } from './AlertDialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AlertDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,eAAe,CAAA;AACtB,YAAY,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/AspectRatio/AspectRatio.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("react"),f=require("../../utils/cn.cjs");function p(e){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(c,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return c.default=e,Object.freeze(c)}const g=p(d),m={golden:1.618,"1/1":1,"2/1":2,"1/2":.5,"3/2":1.5,"2/3":2/3,"4/3":4/3,"3/4":3/4,"5/3":5/3,"3/5":3/5,"5/4":5/4,"4/5":4/5,"7/5":7/5,"5/7":5/7,"16/9":16/9,"9/16":9/16,"16/10":16/10,"10/16":10/16,"21/9":21/9,"9/21":9/21},r=g.forwardRef(({ratio:e=16/9,orientation:c="landscape",className:t,children:n,style:s,...i},l)=>{let a;typeof e=="string"?a=m[e]??(parseFloat(e)||16/9):a=e,c==="portrait"&&(a=1/a);const u=`${1/a*100}%`;return o.jsx("div",{ref:l,className:f.cn("cai-relative cai-w-full cai-overflow-hidden",t),style:{paddingBottom:u,...s},...i,children:o.jsx("div",{className:"cai-absolute cai-inset-0",children:n})})});r.displayName="AspectRatio";exports.AspectRatio=r;

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The desired width-to-height ratio.
+     * Accepts a named string like "16/9", "golden", "4/3"
+     * or a numeric value (e.g. 16/9 = 1.778).
+     */
+    ratio?: string | number;
+    /**
+     * Orientation — only affects paired named ratios.
+     * In "portrait" mode, the ratio is inverted (1 / ratio).
+     */
+    orientation?: 'landscape' | 'portrait';
+}
+declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+export { AspectRatio };
+//# sourceMappingURL=AspectRatio.d.ts.map

package/dist/components/AspectRatio/AspectRatio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkC9B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;CACvC;AAMD,QAAA,MAAM,WAAW,yFA4BhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,45 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as p } from "../../utils/cn.js";
+const f = {
+  golden: 1.618,
+  "1/1": 1,
+  "2/1": 2,
+  "1/2": 0.5,
+  "3/2": 1.5,
+  "2/3": 2 / 3,
+  "4/3": 4 / 3,
+  "3/4": 3 / 4,
+  "5/3": 5 / 3,
+  "3/5": 3 / 5,
+  "5/4": 5 / 4,
+  "4/5": 4 / 5,
+  "7/5": 7 / 5,
+  "5/7": 5 / 7,
+  "16/9": 16 / 9,
+  "9/16": 9 / 16,
+  "16/10": 16 / 10,
+  "10/16": 10 / 16,
+  "21/9": 21 / 9,
+  "9/21": 9 / 21
+}, m = n.forwardRef(
+  ({ ratio: t = 16 / 9, orientation: o = "landscape", className: i, children: s, style: c, ...l }, r) => {
+    let e;
+    typeof t == "string" ? e = f[t] ?? (parseFloat(t) || 16 / 9) : e = t, o === "portrait" && (e = 1 / e);
+    const d = `${1 / e * 100}%`;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: r,
+        className: p("cai-relative cai-w-full cai-overflow-hidden", i),
+        style: { paddingBottom: d, ...c },
+        ...l,
+        children: /* @__PURE__ */ a("div", { className: "cai-absolute cai-inset-0", children: s })
+      }
+    );
+  }
+);
+m.displayName = "AspectRatio";
+export {
+  m as AspectRatio
+};

package/dist/components/AspectRatio/index.d.ts

@@ -0,0 +1,3 @@
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps } from './AspectRatio';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AspectRatio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/Avatar/Avatar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),v=require("react"),y=require("../../utils/cn.cjs"),N=require("./Avatar.variants.cjs"),O=require("../Icon/Icon.cjs");function h(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const o=h(v),d=o.forwardRef(({variant:e="initials",size:t,colorTheme:r,src:a,alt:i,initials:n,children:s,className:m,...b},g)=>{const[u,l]=o.useState(!1);o.useEffect(()=>{l(!1)},[a]);const f=!s&&e==="avatar"&&!!a&&!u,p=()=>s||(f?c.jsx("img",{src:a,alt:i??"",onError:()=>l(!0),className:"cai-h-full cai-w-full cai-object-cover"}):(e==="initials"||e==="avatar"&&u)&&n?c.jsx("span",{className:"cai-font-semibold cai-leading-none","aria-hidden":"true",children:n.slice(0,2).toUpperCase()}):c.jsx(O.Icon,{name:"user-01","aria-hidden":"true",className:"cai-h-[60%] cai-w-[60%]"})),j=i??(n?n.slice(0,2).toUpperCase():void 0);return c.jsx("span",{ref:g,role:"img","aria-label":j,className:y.cn(N.avatarVariants({size:t,colorTheme:r}),!f&&"cai-border cai-border-tertiary",m),...b,children:p()})});d.displayName="Avatar";exports.Avatar=d;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,18 @@
+import { AvatarVariantsProps } from './Avatar.variants';
+import * as React from 'react';
+type AvatarVariant = 'avatar' | 'initials' | 'placeholder';
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, AvatarVariantsProps {
+    /** Display mode: image, initials text, or generic placeholder icon. */
+    variant?: AvatarVariant;
+    /** Image source URL (used when variant is "avatar"). */
+    src?: string;
+    /** Alt text for the avatar image or aria-label for non-image variants. */
+    alt?: string;
+    /** One or two character string shown when variant is "initials". */
+    initials?: string;
+    /** Explicit children override the default rendering for fallback content. */
+    children?: React.ReactNode;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar };
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAM5E,KAAK,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAA;AAE1D,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAAE,mBAAmB;IACjF,uEAAuE;IACvE,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAMD,QAAA,MAAM,MAAM,qFAiEX,CAAA;AAID,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,48 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as N } from "../../utils/cn.js";
+import { avatarVariants as h } from "./Avatar.variants.js";
+import { Icon as v } from "../Icon/Icon.js";
+const w = i.forwardRef(
+  ({ variant: e = "initials", size: l, colorTheme: f, src: o, alt: s, initials: r, children: t, className: p, ...u }, d) => {
+    const [c, n] = i.useState(!1);
+    i.useEffect(() => {
+      n(!1);
+    }, [o]);
+    const m = !t && e === "avatar" && !!o && !c, g = () => t || (m ? /* @__PURE__ */ a(
+      "img",
+      {
+        src: o,
+        alt: s ?? "",
+        onError: () => n(!0),
+        className: "cai-h-full cai-w-full cai-object-cover"
+      }
+    ) : (e === "initials" || e === "avatar" && c) && r ? /* @__PURE__ */ a("span", { className: "cai-font-semibold cai-leading-none", "aria-hidden": "true", children: r.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ a(
+      v,
+      {
+        name: "user-01",
+        "aria-hidden": "true",
+        className: "cai-h-[60%] cai-w-[60%]"
+      }
+    )), b = s ?? (r ? r.slice(0, 2).toUpperCase() : void 0);
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        ref: d,
+        role: "img",
+        "aria-label": b,
+        className: N(
+          h({ size: l, colorTheme: f }),
+          !m && "cai-border cai-border-tertiary",
+          p
+        ),
+        ...u,
+        children: g()
+      }
+    );
+  }
+);
+w.displayName = "Avatar";
+export {
+  w as Avatar
+};

package/dist/components/Avatar/Avatar.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("class-variance-authority"),i=a.cva("cai-relative cai-inline-flex cai-items-center cai-justify-center cai-rounded-full cai-overflow-hidden cai-select-none cai-shrink-0",{variants:{size:{xxs:"cai-h-3 cai-w-3 cai-text-[0.375rem]",xs:"cai-h-4 cai-w-4 cai-text-[0.5rem]",sm:"cai-h-5 cai-w-5 cai-text-micro2",md:"cai-h-6 cai-w-6 cai-text-micro1",lg:"cai-h-7 cai-w-7 cai-text-subbody",xl:"cai-h-8 cai-w-8 cai-text-body2","2xl":"cai-h-9 cai-w-9 cai-text-body1","3xl":"cai-h-10 cai-w-10 cai-text-body1","4xl":"cai-h-11 cai-w-11 cai-text-heading4","5xl":"cai-h-12 cai-w-12 cai-text-heading4"},colorTheme:{grey:"cai-bg-tertiary cai-text-primary [&_svg]:cai-text-icon-secondary",brand:"cai-bg-brand-primary cai-text-primary-invert [&_svg]:cai-text-icon-primary-invert","teal-light":"cai-bg-[var(--dv-teal-75)] cai-text-primary-alt [&_svg]:cai-text-icon-primary-alt","teal-dark":"cai-bg-[var(--dv-teal-600)] cai-text-primary-invert-alt [&_svg]:cai-text-icon-primary-invert-alt",lavender:"cai-bg-[var(--dv-lavender-75)] cai-text-primary-alt [&_svg]:cai-text-icon-primary-alt",lime:"cai-bg-[var(--dv-lime-200)] cai-text-primary-alt [&_svg]:cai-text-icon-primary-alt",pink:"cai-bg-[var(--dv-pink-300)] cai-text-primary-invert-alt [&_svg]:cai-text-icon-primary-invert-alt",orange:"cai-bg-[var(--dv-orange-300)] cai-text-primary-invert-alt [&_svg]:cai-text-icon-primary-invert-alt"}},defaultVariants:{size:"md",colorTheme:"grey"}});exports.avatarVariants=i;

package/dist/components/Avatar/Avatar.variants.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const avatarVariants: (props?: ({
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
+    colorTheme?: "grey" | "brand" | "teal-light" | "teal-dark" | "lavender" | "lime" | "pink" | "orange" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AvatarVariantsProps = VariantProps<typeof avatarVariants>;
+//# sourceMappingURL=Avatar.variants.d.ts.map

package/dist/components/Avatar/Avatar.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,eAAO,MAAM,cAAc;;;8EAiC1B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA"}