@mila_studios/mycelia-design-system 0.1.1

package/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "@mila_studios/mycelia-design-system",
+  "version": "0.1.1",
+  "type": "module",
+  "private": false,
+  "packageManager": "npm@10.9.2",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mila-studios/mila-design-components.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "cd packages/ui && tsup && postcss ./src/styles/bundle-entry.css -o ./dist/mycelia-ui.css && cp ./dist/mycelia-ui.css ../../mycelia-ui.css",
+    "prepare": "node scripts/prepare-build.mjs",
+    "prepack": "npm run build",
+    "dev:demo:css": "postcss ./packages/ui/src/demo/styles.css -o ./packages/ui/demo-public/styles.css --watch",
+    "dev:demo:js": "esbuild packages/ui/src/demo/main.tsx --bundle --outfile=packages/ui/demo-public/bundle.js --format=esm --jsx=automatic --loader:.tsx=tsx --watch --servedir=packages/ui/demo-public",
+    "dev:demo": "concurrently -k -n css,js \"npm run dev:demo:css\" \"npm run dev:demo:js\"",
+    "dev": "npm run dev:demo",
+    "demo:build": "postcss ./packages/ui/src/demo/styles.css -o ./packages/ui/demo-dist/styles.css && esbuild packages/ui/src/demo/main.tsx --bundle --outfile=packages/ui/demo-dist/bundle.js --format=esm --jsx=automatic --loader:.tsx=tsx --minify && cp packages/ui/demo-public/index.html packages/ui/demo-dist/index.html",
+    "demo:preview": "serve packages/ui/demo-dist -l 4173",
+    "lint": "cd packages/ui && eslint .",
+    "format": "prettier --write \"packages/ui/**/*.{ts,tsx}\"",
+    "typecheck": "cd packages/ui && tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.7.0",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^2.1.9",
+    "recharts": "^2.15.4",
+    "shadcn": "^4.1.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@workspace/eslint-config": "*",
+    "@workspace/typescript-config": "*",
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.25.8",
+    "eslint": "^9.39.2",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "semantic-release": "^24.2.9",
+    "serve": "^14.2.5",
+    "tailwindcss": "^4.1.18",
+    "tinyglobby": "^0.2.15",
+    "tsup": "^8.5.0",
+    "turbo": "^2.8.17",
+    "typescript": "5.9.3"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": {
+      "import": "./mycelia-ui.css",
+      "default": "./mycelia-ui.css"
+    },
+    "./mycelia-ui.css": {
+      "import": "./mycelia-ui.css",
+      "default": "./mycelia-ui.css"
+    },
+    "./globals.css": "./packages/ui/src/styles/globals.css",
+    "./postcss.config": "./packages/ui/postcss.config.mjs",
+    "./lib/*": {
+      "types": "./packages/ui/dist/lib/*.d.mts",
+      "import": "./packages/ui/dist/lib/*.js",
+      "default": "./packages/ui/dist/lib/*.js"
+    },
+    "./components/*": {
+      "types": "./packages/ui/dist/components/*.d.mts",
+      "import": "./packages/ui/dist/components/*.js",
+      "default": "./packages/ui/dist/components/*.js"
+    }
+  },
+  "files": [
+    "mycelia-ui.css",
+    "packages/ui/dist",
+    "packages/ui/src/styles",
+    "packages/ui/postcss.config.mjs",
+    "scripts/prepare-build.mjs"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "workspaces": [
+    "packages/eslint-config",
+    "packages/typescript-config"
+  ]
+}

package/packages/ui/dist/components/accordion.d.mts

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

package/packages/ui/dist/components/accordion.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+import { ChevronDown } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Accordion = Accordion$1.Root;
+var AccordionItem = React.forwardRef(function AccordionItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      ref,
+      "data-slot": "accordion-item",
+      className: cn(
+        "border-b border-solid border-[color:var(--mila-accordion-border)] last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React.forwardRef(function AccordionTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      ref,
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "flex flex-1 items-center gap-2 rounded-lg border-2 border-transparent py-[13.5px] text-left font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-accordion-trigger-fg)] outline-none transition-[color,border-color]",
+        "focus-visible:border-solid focus-visible:border-[color:var(--mila-accordion-trigger-focus-border)]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: "pointer-events-none size-4 shrink-0 transition-transform duration-200",
+            "aria-hidden": true
+          }
+        )
+      ]
+    }
+  ) });
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React.forwardRef(function AccordionContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Content,
+    {
+      ref,
+      "data-slot": "accordion-content",
+      className: cn(
+        "overflow-hidden font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-accordion-content-fg)]",
+        "data-[state=closed]:animate-mila-accordion-up data-[state=open]:animate-mila-accordion-down"
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
+    }
+  );
+});
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+//# sourceMappingURL=accordion.js.map
+//# sourceMappingURL=accordion.js.map

package/packages/ui/dist/components/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/accordion.tsx"],"names":["AccordionPrimitive","AccordionItem","AccordionTrigger","AccordionContent"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGA,IAAM,YAAYA,WAAA,CAAmB;AAErC,IAAM,aAAA,GAAsB,iBAG1B,SAASC,cAAAA,CAAc,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AACrD,EAAA,uBACE,GAAA;AAAA,IAACD,WAAA,CAAmB,IAAA;AAAA,IAAnB;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,gBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,mFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAE5B,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA,CAG7B,SAASE,iBAAAA,CAAiB,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AAClE,EAAA,uBACE,GAAA,CAACF,WAAA,CAAmB,MAAA,EAAnB,EAA0B,WAAU,MAAA,EACnC,QAAA,kBAAA,IAAA;AAAA,IAACA,WAAA,CAAmB,OAAA;AAAA,IAAnB;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,sPAAA;AAAA,QACA,oGAAA;AAAA,QACA,kDAAA;AAAA,QACA,qCAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS,CAAA;AAAA,wBAC3C,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uEAAA;AAAA,YACV,aAAA,EAAW;AAAA;AAAA;AACb;AAAA;AAAA,GACF,EACF,CAAA;AAEJ,CAAC;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAE/B,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA,CAG7B,SAASG,iBAAAA,CAAiB,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AAClE,EAAA,uBACE,GAAA;AAAA,IAACH,WAAA,CAAmB,OAAA;AAAA,IAAnB;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,6HAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,WAAA,EAAa,SAAS,GAAI,QAAA,EAAS;AAAA;AAAA,GACxD;AAEJ,CAAC;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"accordion.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils.js\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(function AccordionItem({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      className={cn(\n        \"border-b border-solid border-[color:var(--mila-accordion-border)] last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(function AccordionTrigger({ className, children, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"flex flex-1 items-center gap-2 rounded-lg border-2 border-transparent py-[13.5px] text-left font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-accordion-trigger-fg)] outline-none transition-[color,border-color]\",\n          \"focus-visible:border-solid focus-visible:border-[color:var(--mila-accordion-trigger-focus-border)]\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"[&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1\">{children}</span>\n        <ChevronDown\n          className=\"pointer-events-none size-4 shrink-0 transition-transform duration-200\"\n          aria-hidden\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\nAccordionTrigger.displayName = \"AccordionTrigger\"\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(function AccordionContent({ className, children, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      data-slot=\"accordion-content\"\n      className={cn(\n        \"overflow-hidden font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-accordion-content-fg)]\",\n        \"data-[state=closed]:animate-mila-accordion-up data-[state=open]:animate-mila-accordion-down\"\n      )}\n      {...props}\n    >\n      <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n})\nAccordionContent.displayName = \"AccordionContent\"\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"]}

package/packages/ui/dist/components/alert-dialog.d.mts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialog$1 } from 'radix-ui';
+
+declare const AlertDialog: React.FC<AlertDialog$1.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialog$1.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialog$1.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialog$1.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Destructive flows (Figma mobile): stack with primary action first; desktop shows Cancel left, action right.
+     * Pass children in order: `AlertDialogAction` (destructive), then `AlertDialogCancel`.
+     */
+    destructiveOrder?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialog$1.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialog$1.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialog$1.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/packages/ui/dist/components/alert-dialog.js

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialog$1 } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var AlertDialog = AlertDialog$1.AlertDialog;
+var AlertDialogTrigger = AlertDialog$1.AlertDialogTrigger;
+var AlertDialogPortal = AlertDialog$1.AlertDialogPortal;
+var AlertDialogOverlay = React.forwardRef(function AlertDialogOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.AlertDialogOverlay,
+    {
+      ref,
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-[color:var(--mila-dialog-overlay-bg)]",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
+var AlertDialogContent = React.forwardRef(function AlertDialogContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.AlertDialogContent,
+      {
+        ref,
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 flex w-[calc(100vw-2rem)] max-w-[320px] translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-[16px] border border-solid border-[color:var(--mila-alert-dialog-border)] bg-[color:var(--mila-alert-dialog-bg)] p-8 shadow-[var(--mila-alert-dialog-shadow)] outline-none sm:max-w-[480px]",
+          "focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-alert-dialog-content-focus-ring)] focus-visible:ring-offset-0",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] });
+});
+AlertDialogContent.displayName = "AlertDialogContent";
+var AlertDialogHeader = React.forwardRef(
+  function AlertDialogHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "alert-dialog-header",
+        className: cn("flex flex-col gap-4", className),
+        ...props
+      }
+    );
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = React.forwardRef(
+  function AlertDialogFooter2({ className, destructiveOrder = false, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "alert-dialog-footer",
+        className: cn(
+          "flex w-full gap-2",
+          destructiveOrder ? "flex-col sm:flex-row-reverse sm:justify-start [&>*]:w-full sm:[&>*]:w-auto" : "flex-col sm:flex-row sm:justify-end [&>*]:w-full sm:[&>*]:w-auto",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React.forwardRef(function AlertDialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.AlertDialogTitle,
+    {
+      ref,
+      "data-slot": "alert-dialog-title",
+      className: cn(
+        "text-center font-sans text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-[color:var(--mila-alert-dialog-title-fg)] sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AlertDialogTitle.displayName = "AlertDialogTitle";
+var AlertDialogDescription = React.forwardRef(function AlertDialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.AlertDialogDescription,
+    {
+      ref,
+      "data-slot": "alert-dialog-description",
+      className: cn(
+        "text-center font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-alert-dialog-description-fg)] sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AlertDialogDescription.displayName = "AlertDialogDescription";
+var AlertDialogAction = AlertDialog$1.AlertDialogAction;
+var AlertDialogCancel = AlertDialog$1.AlertDialogCancel;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+//# sourceMappingURL=alert-dialog.js.map
+//# sourceMappingURL=alert-dialog.js.map

package/packages/ui/dist/components/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/alert-dialog.tsx"],"names":["AlertDialogPrimitive","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogDescription"],"mappings":"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","file":"alert-dialog.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils.js\"\n\nconst AlertDialog = AlertDialogPrimitive.AlertDialog\n\nconst AlertDialogTrigger = AlertDialogPrimitive.AlertDialogTrigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.AlertDialogPortal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.AlertDialogOverlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.AlertDialogOverlay>\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.AlertDialogOverlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-[color:var(--mila-dialog-overlay-bg)]\",\n        \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\"\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.AlertDialogContent>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.AlertDialogContent>\n>(function AlertDialogContent({ className, children, ...props }, ref) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.AlertDialogContent\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"fixed left-[50%] top-[50%] z-50 flex w-[calc(100vw-2rem)] max-w-[320px] translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-[16px] border border-solid border-[color:var(--mila-alert-dialog-border)] bg-[color:var(--mila-alert-dialog-bg)] p-8 shadow-[var(--mila-alert-dialog-shadow)] outline-none sm:max-w-[480px]\",\n          \"focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-alert-dialog-content-focus-ring)] focus-visible:ring-offset-0\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.AlertDialogContent>\n    </AlertDialogPortal>\n  )\n})\nAlertDialogContent.displayName = \"AlertDialogContent\"\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<\"div\">>(\n  function AlertDialogHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-dialog-header\"\n        className={cn(\"flex flex-col gap-4\", className)}\n        {...props}\n      />\n    )\n  }\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\ntype AlertDialogFooterProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /**\n   * Destructive flows (Figma mobile): stack with primary action first; desktop shows Cancel left, action right.\n   * Pass children in order: `AlertDialogAction` (destructive), then `AlertDialogCancel`.\n   */\n  destructiveOrder?: boolean\n}\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, AlertDialogFooterProps>(\n  function AlertDialogFooter({ className, destructiveOrder = false, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-dialog-footer\"\n        className={cn(\n          \"flex w-full gap-2\",\n          destructiveOrder\n            ? \"flex-col sm:flex-row-reverse sm:justify-start [&>*]:w-full sm:[&>*]:w-auto\"\n            : \"flex-col sm:flex-row sm:justify-end [&>*]:w-full sm:[&>*]:w-auto\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.AlertDialogTitle>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.AlertDialogTitle>\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.AlertDialogTitle\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-center font-sans text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-[color:var(--mila-alert-dialog-title-fg)] sm:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAlertDialogTitle.displayName = \"AlertDialogTitle\"\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.AlertDialogDescription>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.AlertDialogDescription>\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.AlertDialogDescription\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-center font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-alert-dialog-description-fg)] sm:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAlertDialogDescription.displayName = \"AlertDialogDescription\"\n\nconst AlertDialogAction = AlertDialogPrimitive.AlertDialogAction\n\nconst AlertDialogCancel = AlertDialogPrimitive.AlertDialogCancel\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"]}

package/packages/ui/dist/components/alert.d.mts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "neutral" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+    icon?: React.ReactNode;
+    /** Figma “Flip icon”: icon after the text block (still inside the main row). */
+    iconPlacement?: "start" | "end";
+    action?: React.ReactNode;
+};
+declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type AlertIconProps = React.ComponentProps<"div">;
+declare const AlertIcon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type AlertTitleProps = React.ComponentProps<"p">;
+declare const AlertTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+type AlertDescriptionProps = React.ComponentProps<"p">;
+declare const AlertDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+type AlertActionProps = React.ComponentProps<"div">;
+declare function AlertAction({ className, ...props }: AlertActionProps): react_jsx_runtime.JSX.Element;
+declare namespace AlertAction {
+    var displayName: string;
+}
+
+export { Alert, AlertAction, type AlertActionProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertTitle, type AlertTitleProps, alertVariants };

package/packages/ui/dist/components/alert.js

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/alert.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var alertVariants = cva(
+  "flex w-full items-center gap-4 rounded-lg border border-solid bg-background p-4 font-sans",
+  {
+    variants: {
+      variant: {
+        neutral: "border-[color:var(--mila-alert-border)]",
+        error: "border-[color:var(--mila-alert-border)]"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+var AlertContext = React.createContext(null);
+function useAlertContext(component) {
+  const ctx = React.useContext(AlertContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Alert>`);
+  }
+  return ctx;
+}
+var Alert = React.forwardRef(function Alert2({
+  className,
+  variant: variantProp = "neutral",
+  icon,
+  iconPlacement = "start",
+  action,
+  children,
+  role = "alert",
+  ...props
+}, ref) {
+  const variant = variantProp ?? "neutral";
+  const value = React.useMemo(() => ({ variant }), [variant]);
+  const iconSlot = icon ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-icon",
+      className: cn(
+        "flex shrink-0 items-center pt-[3px] [&_svg]:size-4 [&_svg]:shrink-0",
+        variant === "error" && "text-[color:var(--mila-alert-error-fg)]",
+        variant === "neutral" && "text-foreground"
+      ),
+      children: icon
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(AlertContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role,
+      "data-slot": "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+          iconPlacement === "start" ? iconSlot : null,
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-px text-sm font-medium leading-normal tracking-[0.07px]", children }),
+          iconPlacement === "end" ? iconSlot : null
+        ] }),
+        action ? /* @__PURE__ */ jsx("div", { "data-slot": "alert-action", className: "shrink-0", children: action }) : null
+      ]
+    }
+  ) });
+});
+Alert.displayName = "Alert";
+var AlertIcon = React.forwardRef(function AlertIcon2({ className, ...props }, ref) {
+  const { variant } = useAlertContext("AlertIcon");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-icon",
+      className: cn(
+        "flex shrink-0 items-center pt-[3px] [&_svg]:size-4 [&_svg]:shrink-0",
+        variant === "error" && "text-[color:var(--mila-alert-error-fg)]",
+        variant === "neutral" && "text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AlertIcon.displayName = "AlertIcon";
+var AlertTitle = React.forwardRef(function AlertTitle2({ className, ...props }, ref) {
+  const { variant } = useAlertContext("AlertTitle");
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "alert-title",
+      className: cn(
+        "w-full shrink-0 font-medium",
+        variant === "neutral" && "text-[color:var(--mila-alert-neutral-title)]",
+        variant === "error" && "text-[color:var(--mila-alert-error-fg)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React.forwardRef(
+  function AlertDescription2({ className, ...props }, ref) {
+    const { variant } = useAlertContext("AlertDescription");
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        "data-slot": "alert-description",
+        className: cn(
+          "w-full shrink-0 font-medium",
+          variant === "neutral" && "text-[color:var(--mila-alert-neutral-description)]",
+          variant === "error" && "text-[color:var(--mila-alert-error-fg)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+AlertDescription.displayName = "AlertDescription";
+function AlertAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "alert-action", className: cn("shrink-0", className), ...props });
+}
+AlertAction.displayName = "AlertAction";
+
+export { Alert, AlertAction, AlertDescription, AlertIcon, AlertTitle, alertVariants };
+//# sourceMappingURL=alert.js.map
+//# sourceMappingURL=alert.js.map

package/packages/ui/dist/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/alert.tsx"],"names":["Alert","AlertIcon","AlertTitle","AlertDescription"],"mappings":"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","file":"alert.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils.js\"\n\nconst alertVariants = cva(\n  \"flex w-full items-center gap-4 rounded-lg border border-solid bg-background p-4 font-sans\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-[color:var(--mila-alert-border)]\",\n        error: \"border-[color:var(--mila-alert-border)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n    },\n  }\n)\n\ntype AlertVariant = \"neutral\" | \"error\"\n\ntype AlertContextValue = {\n  variant: AlertVariant\n}\n\nconst AlertContext = React.createContext<AlertContextValue | null>(null)\n\nfunction useAlertContext(component: string) {\n  const ctx = React.useContext(AlertContext)\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Alert>`)\n  }\n  return ctx\n}\n\nexport type AlertProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof alertVariants> & {\n    icon?: React.ReactNode\n    /** Figma “Flip icon”: icon after the text block (still inside the main row). */\n    iconPlacement?: \"start\" | \"end\"\n    action?: React.ReactNode\n  }\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    className,\n    variant: variantProp = \"neutral\",\n    icon,\n    iconPlacement = \"start\",\n    action,\n    children,\n    role = \"alert\",\n    ...props\n  },\n  ref\n) {\n  const variant: AlertVariant = variantProp ?? \"neutral\"\n  const value = React.useMemo(() => ({ variant }), [variant])\n\n  const iconSlot = icon ? (\n    <div\n      data-slot=\"alert-icon\"\n      className={cn(\n        \"flex shrink-0 items-center pt-[3px] [&_svg]:size-4 [&_svg]:shrink-0\",\n        variant === \"error\" && \"text-[color:var(--mila-alert-error-fg)]\",\n        variant === \"neutral\" && \"text-foreground\"\n      )}\n    >\n      {icon}\n    </div>\n  ) : null\n\n  return (\n    <AlertContext.Provider value={value}>\n      <div\n        ref={ref}\n        role={role}\n        data-slot=\"alert\"\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      >\n        <div className=\"flex min-w-0 flex-1 items-start gap-3\">\n          {iconPlacement === \"start\" ? iconSlot : null}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-px text-sm font-medium leading-normal tracking-[0.07px]\">\n            {children}\n          </div>\n          {iconPlacement === \"end\" ? iconSlot : null}\n        </div>\n        {action ? (\n          <div data-slot=\"alert-action\" className=\"shrink-0\">\n            {action}\n          </div>\n        ) : null}\n      </div>\n    </AlertContext.Provider>\n  )\n})\nAlert.displayName = \"Alert\"\n\nexport type AlertIconProps = React.ComponentProps<\"div\">\n\nconst AlertIcon = React.forwardRef<HTMLDivElement, AlertIconProps>(function AlertIcon(\n  { className, ...props },\n  ref\n) {\n  const { variant } = useAlertContext(\"AlertIcon\")\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-icon\"\n      className={cn(\n        \"flex shrink-0 items-center pt-[3px] [&_svg]:size-4 [&_svg]:shrink-0\",\n        variant === \"error\" && \"text-[color:var(--mila-alert-error-fg)]\",\n        variant === \"neutral\" && \"text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAlertIcon.displayName = \"AlertIcon\"\n\nexport type AlertTitleProps = React.ComponentProps<\"p\">\n\nconst AlertTitle = React.forwardRef<HTMLParagraphElement, AlertTitleProps>(function AlertTitle(\n  { className, ...props },\n  ref\n) {\n  const { variant } = useAlertContext(\"AlertTitle\")\n  return (\n    <p\n      ref={ref}\n      data-slot=\"alert-title\"\n      className={cn(\n        \"w-full shrink-0 font-medium\",\n        variant === \"neutral\" && \"text-[color:var(--mila-alert-neutral-title)]\",\n        variant === \"error\" && \"text-[color:var(--mila-alert-error-fg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAlertTitle.displayName = \"AlertTitle\"\n\nexport type AlertDescriptionProps = React.ComponentProps<\"p\">\n\nconst AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProps>(\n  function AlertDescription({ className, ...props }, ref) {\n    const { variant } = useAlertContext(\"AlertDescription\")\n    return (\n      <p\n        ref={ref}\n        data-slot=\"alert-description\"\n        className={cn(\n          \"w-full shrink-0 font-medium\",\n          variant === \"neutral\" && \"text-[color:var(--mila-alert-neutral-description)]\",\n          variant === \"error\" && \"text-[color:var(--mila-alert-error-fg)]\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nAlertDescription.displayName = \"AlertDescription\"\n\nexport type AlertActionProps = React.ComponentProps<\"div\">\n\nfunction AlertAction({ className, ...props }: AlertActionProps) {\n  return <div data-slot=\"alert-action\" className={cn(\"shrink-0\", className)} {...props} />\n}\nAlertAction.displayName = \"AlertAction\"\n\nexport { Alert, AlertAction, AlertDescription, AlertIcon, AlertTitle, alertVariants }\n"]}

package/packages/ui/dist/components/aspect-ratio.d.mts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+/** Radix places `className` on the inner absolute layer; `max-w-*` there does not shrink the outer padding-bottom box—constrain width on a parent wrapper. */
+declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { AspectRatio };

package/packages/ui/dist/components/aspect-ratio.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var AspectRatio = React.forwardRef(function AspectRatio2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AspectRatioPrimitive.Root,
+    {
+      ref,
+      "data-slot": "aspect-ratio",
+      className: cn(
+        "overflow-hidden [&_img]:block [&_picture]:block [&_picture>img]:block [&_video]:block",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AspectRatio.displayName = AspectRatioPrimitive.Root.displayName;
+
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.js.map
+//# sourceMappingURL=aspect-ratio.js.map

package/packages/ui/dist/components/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/aspect-ratio.tsx"],"names":["AspectRatio"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGA,IAAM,WAAA,GAAoB,iBAGxB,SAASA,YAAAA,CAAY,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AACnD,EAAA,uBACE,GAAA;AAAA,IAAsB,oBAAA,CAAA,IAAA;AAAA,IAArB;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,uFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,WAAA,CAAY,cAAmC,oBAAA,CAAA,IAAA,CAAK,WAAA","file":"aspect-ratio.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nimport { cn } from \"../lib/utils.js\"\n\n/** Radix places `className` on the inner absolute layer; `max-w-*` there does not shrink the outer padding-bottom box—constrain width on a parent wrapper. */\nconst AspectRatio = React.forwardRef<\n  React.ElementRef<typeof AspectRatioPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n>(function AspectRatio({ className, ...props }, ref) {\n  return (\n    <AspectRatioPrimitive.Root\n      ref={ref}\n      data-slot=\"aspect-ratio\"\n      className={cn(\n        \"overflow-hidden [&_img]:block [&_picture]:block [&_picture>img]:block [&_video]:block\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nAspectRatio.displayName = AspectRatioPrimitive.Root.displayName\n\nexport { AspectRatio }\n"]}

package/packages/ui/dist/components/avatar-stack.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const avatarStackVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const avatarStackItemVariants: (props?: ({
+    size?: "small" | "regular" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarStackProps = React.ComponentProps<"div"> & VariantProps<typeof avatarStackItemVariants>;
+declare function AvatarStack({ className, size: sizeProp, children, ...props }: AvatarStackProps): react_jsx_runtime.JSX.Element;
+declare namespace AvatarStack {
+    var displayName: string;
+}
+
+export { AvatarStack, type AvatarStackProps, avatarStackItemVariants, avatarStackVariants };