@mila_studios/mycelia-design-system 0.1.1

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

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Spinner = React.forwardRef(
+  function Spinner2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        width: 16,
+        height: 16,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: cn("animate-spin shrink-0", className),
+        "aria-hidden": true,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "8",
+            cy: "8",
+            r: "6.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeDasharray: "31.8 41"
+          }
+        )
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+var buttonOutlineShadow = "shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_0_rgba(0,0,0,0.1)]";
+var buttonVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2 font-sans font-medium whitespace-nowrap",
+    "rounded-lg transition-[color,background-color,border-color,box-shadow,opacity,text-decoration]",
+    "disabled:pointer-events-none disabled:opacity-90 disabled:data-[loading]:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[color:var(--mila-button-primary-bg)] text-[color:var(--mila-button-primary-fg)]",
+          "hover:bg-[color:var(--mila-button-primary-hover)] active:bg-[color:var(--mila-button-primary-hover)]",
+          "focus-visible:bg-[color:var(--mila-button-primary-hover)]",
+          "disabled:bg-[color:var(--mila-button-disabled-bg)] disabled:text-[color:var(--mila-button-disabled-fg)]"
+        ],
+        destructive: [
+          "bg-[color:var(--mila-button-destructive-bg)] text-[color:var(--mila-button-destructive-fg)]",
+          "hover:bg-[color:var(--mila-button-destructive-hover)] active:bg-[color:var(--mila-button-destructive-hover)]",
+          "focus-visible:bg-[color:var(--mila-button-destructive-hover)]",
+          "disabled:bg-[color:var(--mila-button-disabled-bg)] disabled:text-[color:var(--mila-button-disabled-fg)]"
+        ],
+        secondary: [
+          "border border-solid border-[color:var(--mila-button-secondary-border)]",
+          "bg-[color:var(--mila-button-secondary-bg)] text-[color:var(--mila-button-secondary-fg)]",
+          "hover:border-[color:var(--mila-button-secondary-hover-border)] hover:bg-[color:var(--mila-button-secondary-hover-bg)] hover:text-[color:var(--mila-button-secondary-hover-fg)]",
+          "active:border-[color:var(--mila-button-secondary-hover-border)] active:bg-[color:var(--mila-button-secondary-hover-bg)] active:text-[color:var(--mila-button-secondary-hover-fg)]",
+          "disabled:border-[color:var(--mila-button-outline-disabled-border)] disabled:bg-[color:var(--mila-button-outline-disabled-bg)] disabled:text-[color:var(--mila-button-outline-disabled-fg)]"
+        ],
+        outline: [
+          "border border-solid border-[color:var(--mila-button-outline-border)] bg-background",
+          "text-[color:var(--mila-button-outline-fg)]",
+          buttonOutlineShadow,
+          "hover:border-[color:var(--mila-button-outline-hover-border)] hover:bg-[color:var(--mila-button-outline-hover-bg)] hover:text-[color:var(--mila-button-outline-hover-fg)]",
+          "active:border-[color:var(--mila-button-outline-hover-border)] active:bg-[color:var(--mila-button-outline-hover-bg)] active:text-[color:var(--mila-button-outline-hover-fg)]",
+          "disabled:border-[color:var(--mila-button-outline-disabled-border)] disabled:bg-[color:var(--mila-button-outline-disabled-bg)] disabled:text-[color:var(--mila-button-outline-disabled-fg)] disabled:shadow-none"
+        ],
+        ghost: [
+          "bg-transparent text-[color:var(--mila-button-ghost-fg)]",
+          "hover:bg-[color:var(--mila-button-ghost-hover-bg)] hover:text-[color:var(--mila-button-ghost-hover-fg)]",
+          "active:bg-[color:var(--mila-button-ghost-hover-bg)] active:text-[color:var(--mila-button-ghost-hover-fg)]",
+          "disabled:bg-transparent disabled:text-[color:var(--mila-button-disabled-fg)]"
+        ],
+        link: [
+          "border-0 bg-transparent shadow-none",
+          "text-[color:var(--mila-link-button-fg)] underline-offset-4",
+          "hover:underline active:underline",
+          "focus-visible:no-underline",
+          "aria-disabled:no-underline",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-90 aria-disabled:data-[loading]:opacity-50",
+          "[&_svg]:!size-[16.25px]"
+        ]
+      },
+      size: {
+        lg: "min-h-10 gap-2 px-6 py-[9.5px] text-sm leading-normal tracking-[0.07px] [&_svg]:size-[13.25px]",
+        default: "min-h-9 gap-2 px-4 py-[7.5px] text-sm leading-normal tracking-[0.07px] [&_svg]:size-[13.25px]",
+        sm: "min-h-8 gap-1.5 px-3 py-[5.5px] text-sm leading-normal tracking-[0.07px] [&_svg]:size-[13.25px]",
+        mini: "min-h-6 gap-1.5 rounded-[4px] px-2 py-[3px] text-xs leading-normal tracking-[0.18px] [&_svg]:size-[13.25px]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default"
+    },
+    compoundVariants: [
+      {
+        variant: ["primary", "destructive", "secondary", "outline", "ghost"],
+        class: "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-input-ring-focus)]"
+      },
+      {
+        variant: "link",
+        class: [
+          "focus:outline-none focus:ring-0 focus:ring-offset-0",
+          "focus:overflow-clip",
+          "focus:!shadow-[0_0_0_3px_var(--mila-input-ring-focus)]"
+        ]
+      }
+    ]
+  }
+);
+var buttonIconSlotClass = "inline-flex shrink-0 items-center justify-center";
+var Button = React.forwardRef(function Button2({
+  className,
+  variant,
+  size,
+  asChild = false,
+  type = "button",
+  startIcon,
+  endIcon,
+  children,
+  disabled,
+  loading = false,
+  href,
+  ...props
+}, ref) {
+  const effectiveVariant = variant ?? (href !== void 0 && href !== "" ? "link" : void 0);
+  const classes = cn(buttonVariants({ variant: effectiveVariant, size }), className);
+  const showStart = loading ? /* @__PURE__ */ jsx("span", { className: buttonIconSlotClass, children: /* @__PURE__ */ jsx(Spinner, {}) }) : startIcon ? /* @__PURE__ */ jsx("span", { className: buttonIconSlotClass, children: startIcon }) : null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showStart,
+    children,
+    !loading && endIcon ? /* @__PURE__ */ jsx("span", { className: buttonIconSlotClass, children: endIcon }) : null
+  ] });
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        "data-slot": "button",
+        className: classes,
+        ...props,
+        children
+      }
+    );
+  }
+  if (href !== void 0 && href !== "") {
+    const { onClick, ...anchorRest } = props;
+    const inert = Boolean(disabled || loading);
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href,
+        "data-slot": "button",
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": inert || void 0,
+        tabIndex: inert ? -1 : void 0,
+        className: classes,
+        onClick: (e) => {
+          if (inert) {
+            e.preventDefault();
+            return;
+          }
+          onClick?.(e);
+        },
+        ...anchorRest,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      "data-slot": "button",
+      "data-loading": loading || void 0,
+      "aria-busy": loading || void 0,
+      disabled: disabled || loading,
+      className: classes,
+      ...props,
+      children: content
+    }
+  );
+});
+Button.displayName = "Button";
+
+export { Button, buttonIconSlotClass, buttonVariants };
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/spinner.tsx","../../src/components/button.tsx"],"names":["Spinner","React2","Button","jsx"],"mappings":"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","file":"button.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\"\n\nimport { cn } from \"../lib/utils.js\"\n\n/** MILA / Obra (Figma node 274:43182 — .Spinner): 16px frame, ~13px arc, neutral stroke. */\nconst Spinner = React.forwardRef<SVGSVGElement, React.ComponentPropsWithoutRef<\"svg\">>(\n  function Spinner({ className, ...props }, ref) {\n    return (\n      <svg\n        ref={ref}\n        width={16}\n        height={16}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={cn(\"animate-spin shrink-0\", className)}\n        aria-hidden\n        {...props}\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeDasharray=\"31.8 41\"\n        />\n      </svg>\n    )\n  }\n)\nSpinner.displayName = \"Spinner\"\n\nexport { Spinner }\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils.js\"\n\nimport { Spinner } from \"./spinner.js\"\n\nconst buttonOutlineShadow =\n  \"shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_0_rgba(0,0,0,0.1)]\"\n\nconst buttonVariants = cva(\n  [\n    \"inline-flex shrink-0 items-center justify-center gap-2 font-sans font-medium whitespace-nowrap\",\n    \"rounded-lg transition-[color,background-color,border-color,box-shadow,opacity,text-decoration]\",\n    \"disabled:pointer-events-none disabled:opacity-90 disabled:data-[loading]:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-[color:var(--mila-button-primary-bg)] text-[color:var(--mila-button-primary-fg)]\",\n          \"hover:bg-[color:var(--mila-button-primary-hover)] active:bg-[color:var(--mila-button-primary-hover)]\",\n          \"focus-visible:bg-[color:var(--mila-button-primary-hover)]\",\n          \"disabled:bg-[color:var(--mila-button-disabled-bg)] disabled:text-[color:var(--mila-button-disabled-fg)]\",\n        ],\n        destructive: [\n          \"bg-[color:var(--mila-button-destructive-bg)] text-[color:var(--mila-button-destructive-fg)]\",\n          \"hover:bg-[color:var(--mila-button-destructive-hover)] active:bg-[color:var(--mila-button-destructive-hover)]\",\n          \"focus-visible:bg-[color:var(--mila-button-destructive-hover)]\",\n          \"disabled:bg-[color:var(--mila-button-disabled-bg)] disabled:text-[color:var(--mila-button-disabled-fg)]\",\n        ],\n        secondary: [\n          \"border border-solid border-[color:var(--mila-button-secondary-border)]\",\n          \"bg-[color:var(--mila-button-secondary-bg)] text-[color:var(--mila-button-secondary-fg)]\",\n          \"hover:border-[color:var(--mila-button-secondary-hover-border)] hover:bg-[color:var(--mila-button-secondary-hover-bg)] hover:text-[color:var(--mila-button-secondary-hover-fg)]\",\n          \"active:border-[color:var(--mila-button-secondary-hover-border)] active:bg-[color:var(--mila-button-secondary-hover-bg)] active:text-[color:var(--mila-button-secondary-hover-fg)]\",\n          \"disabled:border-[color:var(--mila-button-outline-disabled-border)] disabled:bg-[color:var(--mila-button-outline-disabled-bg)] disabled:text-[color:var(--mila-button-outline-disabled-fg)]\",\n        ],\n        outline: [\n          \"border border-solid border-[color:var(--mila-button-outline-border)] bg-background\",\n          \"text-[color:var(--mila-button-outline-fg)]\",\n          buttonOutlineShadow,\n          \"hover:border-[color:var(--mila-button-outline-hover-border)] hover:bg-[color:var(--mila-button-outline-hover-bg)] hover:text-[color:var(--mila-button-outline-hover-fg)]\",\n          \"active:border-[color:var(--mila-button-outline-hover-border)] active:bg-[color:var(--mila-button-outline-hover-bg)] active:text-[color:var(--mila-button-outline-hover-fg)]\",\n          \"disabled:border-[color:var(--mila-button-outline-disabled-border)] disabled:bg-[color:var(--mila-button-outline-disabled-bg)] disabled:text-[color:var(--mila-button-outline-disabled-fg)] disabled:shadow-none\",\n        ],\n        ghost: [\n          \"bg-transparent text-[color:var(--mila-button-ghost-fg)]\",\n          \"hover:bg-[color:var(--mila-button-ghost-hover-bg)] hover:text-[color:var(--mila-button-ghost-hover-fg)]\",\n          \"active:bg-[color:var(--mila-button-ghost-hover-bg)] active:text-[color:var(--mila-button-ghost-hover-fg)]\",\n          \"disabled:bg-transparent disabled:text-[color:var(--mila-button-disabled-fg)]\",\n        ],\n        link: [\n          \"border-0 bg-transparent shadow-none\",\n          \"text-[color:var(--mila-link-button-fg)] underline-offset-4\",\n          \"hover:underline active:underline\",\n          \"focus-visible:no-underline\",\n          \"aria-disabled:no-underline\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-90 aria-disabled:data-[loading]:opacity-50\",\n          \"[&_svg]:!size-[16.25px]\",\n        ],\n      },\n      size: {\n        lg: \"min-h-10 gap-2 px-6 py-[9.5px] text-sm leading-normal tracking-[0.07px] [&_svg]:size-[13.25px]\",\n        default:\n          \"min-h-9 gap-2 px-4 py-[7.5px] text-sm leading-normal tracking-[0.07px] [&_svg]:size-[13.25px]\",\n        sm: \"min-h-8 gap-1.5 px-3 py-[5.5px] text-sm leading-normal tracking-[0.07px] [&_svg]:size-[13.25px]\",\n        mini:\n          \"min-h-6 gap-1.5 rounded-[4px] px-2 py-[3px] text-xs leading-normal tracking-[0.18px] [&_svg]:size-[13.25px]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"default\",\n    },\n    compoundVariants: [\n      {\n        variant: [\"primary\", \"destructive\", \"secondary\", \"outline\", \"ghost\"],\n        class:\n          \"focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-input-ring-focus)]\",\n      },\n      {\n        variant: \"link\",\n        class: [\n          \"focus:outline-none focus:ring-0 focus:ring-offset-0\",\n          \"focus:overflow-clip\",\n          \"focus:!shadow-[0_0_0_3px_var(--mila-input-ring-focus)]\",\n        ],\n      },\n    ],\n  }\n)\n\nconst buttonIconSlotClass = \"inline-flex shrink-0 items-center justify-center\"\n\nexport type ButtonProps = VariantProps<typeof buttonVariants> & {\n  asChild?: boolean\n  startIcon?: React.ReactNode\n  endIcon?: React.ReactNode\n  /** Shows spinner, disables interaction; Figma MILA loading button (node 274:43182). */\n  loading?: boolean\n  className?: string\n} & Omit<React.ComponentPropsWithoutRef<\"button\">, \"className\"> &\n  Omit<React.ComponentPropsWithoutRef<\"a\">, \"className\"> & {\n    /** Renders as `<a>`; defaults variant to `link` when `variant` is omitted (Figma node 274:52937). */\n    href?: string\n  }\n\nconst Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    asChild = false,\n    type = \"button\",\n    startIcon,\n    endIcon,\n    children,\n    disabled,\n    loading = false,\n    href,\n    ...props\n  },\n  ref\n) {\n  const effectiveVariant =\n    variant ?? (href !== undefined && href !== \"\" ? (\"link\" as const) : undefined)\n\n  const classes = cn(buttonVariants({ variant: effectiveVariant, size }), className)\n\n  const showStart = loading ? (\n    <span className={buttonIconSlotClass}>\n      <Spinner />\n    </span>\n  ) : startIcon ? (\n    <span className={buttonIconSlotClass}>{startIcon}</span>\n  ) : null\n\n  const content = (\n    <>\n      {showStart}\n      {children}\n      {!loading && endIcon ? <span className={buttonIconSlotClass}>{endIcon}</span> : null}\n    </>\n  )\n\n  if (asChild) {\n    return (\n      <Slot\n        ref={ref as React.Ref<HTMLElement>}\n        data-slot=\"button\"\n        className={classes}\n        {...props}\n      >\n        {children}\n      </Slot>\n    )\n  }\n\n  if (href !== undefined && href !== \"\") {\n    const { onClick, ...anchorRest } = props as React.ComponentPropsWithoutRef<\"a\">\n    const inert = Boolean(disabled || loading)\n\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={href}\n        data-slot=\"button\"\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        aria-disabled={inert || undefined}\n        tabIndex={inert ? -1 : undefined}\n        className={classes}\n        onClick={(e) => {\n          if (inert) {\n            e.preventDefault()\n            return\n          }\n          onClick?.(e)\n        }}\n        {...anchorRest}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      ref={ref as React.Ref<HTMLButtonElement>}\n      type={type}\n      data-slot=\"button\"\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      disabled={disabled || loading}\n      className={classes}\n      {...(props as React.ComponentPropsWithoutRef<\"button\">)}\n    >\n      {content}\n    </button>\n  )\n})\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants, buttonIconSlotClass }\n"]}

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+export { Calendar, type CalendarProps };

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

@@ -0,0 +1,27 @@
+import { DayPicker } from 'react-day-picker';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Calendar({ className, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      "data-slot": "calendar",
+      className: cn(
+        "mila-daypicker rounded-lg border border-solid border-[color:var(--mila-combobox-menu-border)] bg-[color:var(--mila-combobox-menu-bg)] p-3 shadow-[var(--mila-combobox-menu-shadow)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
+//# sourceMappingURL=calendar.js.map
+//# sourceMappingURL=calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/calendar.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACIA,SAAS,SAAS,EAAE,SAAA,EAAW,kBAAkB,IAAA,EAAM,GAAG,OAAM,EAAkB;AAChF,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,WAAA,EAAU,UAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qLAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"calendar.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 { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"../lib/utils.js\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({ className, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      data-slot=\"calendar\"\n      className={cn(\n        \"mila-daypicker rounded-lg border border-solid border-[color:var(--mila-combobox-menu-border)] bg-[color:var(--mila-combobox-menu-bg)] p-3 shadow-[var(--mila-combobox-menu-shadow)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"]}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Card = React.forwardRef(function Card2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card",
+      className: cn(
+        "flex flex-col gap-6 rounded-[10px] border border-solid border-[color:var(--mila-card-border)] bg-[color:var(--mila-card-bg)] text-[color:var(--mila-card-title-fg)] shadow-[var(--mila-card-shadow)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(function CardHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-header",
+      className: cn("flex flex-col gap-1 px-6 pt-6", className),
+      ...props
+    }
+  );
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(function CardTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      "data-slot": "card-title",
+      className: cn("font-sans text-base font-medium leading-[1.5] text-[color:var(--mila-card-title-fg)]", className),
+      ...props
+    }
+  );
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(
+  function CardDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        "data-slot": "card-description",
+        className: cn(
+          "font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-card-description-fg)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(function CardContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, "data-slot": "card-content", className: cn("px-6", className), ...props });
+});
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(function CardFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-footer",
+      className: cn("flex flex-col gap-3 px-6 pb-6", className),
+      ...props
+    }
+  );
+});
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/card.tsx"],"names":["Card","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,IAAA,GAAa,iBAAwD,SAASA,KAAAA,CAClF,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EACtB,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,sMAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,IAAA,CAAK,WAAA,GAAc,MAAA;AAEnB,IAAM,UAAA,GAAmB,iBAAwD,SAASC,WAAAA,CACxF,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EACtB,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,IAAM,SAAA,GAAkB,iBAA2D,SAASC,UAAAA,CAC1F,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EACtB,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,sFAAA,EAAwF,SAAS,CAAA;AAAA,MAC9G,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,IAAM,eAAA,GAAwB,KAAA,CAAA,UAAA;AAAA,EAC5B,SAASC,gBAAAA,CAAgB,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,EAAK;AACrD,IAAA,uBACE,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,kBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,4GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAE9B,IAAM,WAAA,GAAoB,iBAAwD,SAASC,YAAAA,CACzF,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EACtB,GAAA,EACA;AACA,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,cAAA,EAAe,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC9F,CAAC;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAE1B,IAAM,UAAA,GAAmB,iBAAwD,SAASC,WAAAA,CACxF,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EACtB,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,YAAA","file":"card.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\"\n\nimport { cn } from \"../lib/utils.js\"\n\nconst Card = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(function Card(\n  { className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-[10px] border border-solid border-[color:var(--mila-card-border)] bg-[color:var(--mila-card-bg)] text-[color:var(--mila-card-title-fg)] shadow-[var(--mila-card-shadow)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(function CardHeader(\n  { className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1 px-6 pt-6\", className)}\n      {...props}\n    />\n  )\n})\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<\"h3\">>(function CardTitle(\n  { className, ...props },\n  ref\n) {\n  return (\n    <h3\n      ref={ref}\n      data-slot=\"card-title\"\n      className={cn(\"font-sans text-base font-medium leading-[1.5] text-[color:var(--mila-card-title-fg)]\", className)}\n      {...props}\n    />\n  )\n})\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, React.ComponentProps<\"p\">>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <p\n        ref={ref}\n        data-slot=\"card-description\"\n        className={cn(\n          \"font-sans text-sm font-medium leading-[1.5] tracking-[0.07px] text-[color:var(--mila-card-description-fg)]\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(function CardContent(\n  { className, ...props },\n  ref\n) {\n  return <div ref={ref} data-slot=\"card-content\" className={cn(\"px-6\", className)} {...props} />\n})\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(function CardFooter(\n  { className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card-footer\"\n      className={cn(\"flex flex-col gap-3 px-6 pb-6\", className)}\n      {...props}\n    />\n  )\n})\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"]}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { EmblaOptionsType, EmblaPluginType, EmblaCarouselType } from 'embla-carousel';
+import { IconButton } from './icon-button.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type CarouselApi = EmblaCarouselType;
+type CarouselContextValue = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: CarouselApi | undefined;
+    opts: EmblaOptionsType | undefined;
+    orientation: "horizontal" | "vertical";
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+};
+declare function useCarousel(): CarouselContextValue;
+type CarouselProps = React.ComponentProps<"div"> & {
+    opts?: EmblaOptionsType;
+    plugins?: EmblaPluginType[];
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type CarouselNavProps = Omit<React.ComponentProps<typeof IconButton>, "children" | "aria-label"> & {
+    "aria-label"?: string;
+};
+declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<CarouselNavProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<CarouselNavProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, useCarousel };