@mila_studios/mycelia-design-system 0.1.1

package/packages/ui/dist/components/avatar-stack.js

@@ -0,0 +1,57 @@
+import { Children, isValidElement, cloneElement } from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/avatar-stack.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var avatarStackVariants = cva("flex items-center pr-2");
+var avatarStackItemVariants = cva(
+  "box-border shrink-0 overflow-hidden rounded-full border-2 border-background bg-background -mr-2",
+  {
+    variants: {
+      size: {
+        small: "size-8",
+        regular: "size-10"
+      }
+    },
+    defaultVariants: {
+      size: "small"
+    }
+  }
+);
+function AvatarStack({
+  className,
+  size: sizeProp = "small",
+  children,
+  ...props
+}) {
+  const size = sizeProp ?? "small";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "avatar-stack",
+      className: cn(avatarStackVariants(), className),
+      ...props,
+      children: Children.map(children, (child, index) => /* @__PURE__ */ jsx("div", { className: avatarStackItemVariants({ size }), children: isValidElement(child) ? cloneElement(
+        child,
+        {
+          size,
+          shape: "round",
+          className: cn(
+            "size-full min-h-0 min-w-0 rounded-full",
+            child.props.className
+          )
+        }
+      ) : child }, index))
+    }
+  );
+}
+AvatarStack.displayName = "AvatarStack";
+
+export { AvatarStack, avatarStackItemVariants, avatarStackVariants };
+//# sourceMappingURL=avatar-stack.js.map
+//# sourceMappingURL=avatar-stack.js.map

package/packages/ui/dist/components/avatar-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/avatar-stack.tsx"],"names":[],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,mBAAA,GAAsB,IAAI,wBAAwB;AAExD,IAAM,uBAAA,GAA0B,GAAA;AAAA,EAC9B,iGAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO,QAAA;AAAA,QACP,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,MAAM,QAAA,GAAW,OAAA;AAAA,EACjB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,OAAO,QAAA,IAAY,OAAA;AACzB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAoB,EAAG,SAAS,CAAA;AAAA,MAC7C,GAAG,KAAA;AAAA,MAEH,mBAAS,GAAA,CAAI,QAAA,EAAU,CAAC,KAAA,EAAO,0BAC9B,GAAA,CAAC,KAAA,EAAA,EAAgB,SAAA,EAAW,uBAAA,CAAwB,EAAE,IAAA,EAAM,CAAA,EACzD,QAAA,EAAA,cAAA,CAAe,KAAK,CAAA,GACjB,YAAA;AAAA,QACE,KAAA;AAAA,QAKA;AAAA,UACE,IAAA;AAAA,UACA,KAAA,EAAO,OAAA;AAAA,UACP,SAAA,EAAW,EAAA;AAAA,YACT,wCAAA;AAAA,YACC,MAAM,KAAA,CAAiC;AAAA;AAC1C;AACF,OACF,GACA,KAAA,EAAA,EAjBI,KAkBV,CACD;AAAA;AAAA,GACH;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"avatar-stack.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 { Children, cloneElement, isValidElement } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils.js\"\n\nconst avatarStackVariants = cva(\"flex items-center pr-2\")\n\nconst avatarStackItemVariants = cva(\n  \"box-border shrink-0 overflow-hidden rounded-full border-2 border-background bg-background -mr-2\",\n  {\n    variants: {\n      size: {\n        small: \"size-8\",\n        regular: \"size-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"small\",\n    },\n  }\n)\n\nexport type AvatarStackProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof avatarStackItemVariants>\n\nfunction AvatarStack({\n  className,\n  size: sizeProp = \"small\",\n  children,\n  ...props\n}: AvatarStackProps) {\n  const size = sizeProp ?? \"small\"\n  return (\n    <div\n      data-slot=\"avatar-stack\"\n      className={cn(avatarStackVariants(), className)}\n      {...props}\n    >\n      {Children.map(children, (child, index) => (\n        <div key={index} className={avatarStackItemVariants({ size })}>\n          {isValidElement(child)\n            ? cloneElement(\n                child as React.ReactElement<{\n                  className?: string\n                  size?: \"regular\" | \"small\"\n                  shape?: \"round\" | \"roundrect\"\n                }>,\n                {\n                  size,\n                  shape: \"round\",\n                  className: cn(\n                    \"size-full min-h-0 min-w-0 rounded-full\",\n                    (child.props as { className?: string }).className\n                  ),\n                }\n              )\n            : child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nAvatarStack.displayName = \"AvatarStack\"\n\nexport { AvatarStack, avatarStackItemVariants, avatarStackVariants }\n"]}

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

@@ -0,0 +1,16 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const avatarVariants: (props?: ({
+    size?: "small" | "regular" | null | undefined;
+    shape?: "round" | "roundrect" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarProps = React.ComponentProps<"div"> & VariantProps<typeof avatarVariants>;
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type AvatarImageProps = React.ComponentProps<"img">;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+type AvatarFallbackProps = React.ComponentProps<"span">;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, avatarVariants };

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

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/avatar.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var avatarVariants = cva(
+  "relative inline-flex shrink-0 overflow-hidden bg-[color:var(--mila-avatar-fallback-bg)] font-sans font-medium text-[color:var(--mila-avatar-fallback-fg)] select-none",
+  {
+    variants: {
+      size: {
+        regular: "size-10 text-sm tracking-[0.07px]",
+        small: "size-8 text-sm tracking-[0.07px]"
+      },
+      shape: {
+        round: "rounded-full",
+        roundrect: "rounded-lg"
+      }
+    },
+    defaultVariants: {
+      size: "regular",
+      shape: "round"
+    }
+  }
+);
+var AvatarContext = React.createContext(void 0);
+function useAvatarContext(component) {
+  const ctx = React.useContext(AvatarContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Avatar>`);
+  }
+  return ctx;
+}
+var Avatar = React.forwardRef(function Avatar2({ className, size, shape, ...props }, ref) {
+  const [imageStatus, setImageStatus] = React.useState("idle");
+  const value = React.useMemo(
+    () => ({ imageStatus, setImageStatus }),
+    [imageStatus]
+  );
+  return /* @__PURE__ */ jsx(AvatarContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "avatar",
+      className: cn(avatarVariants({ size, shape }), className),
+      ...props
+    }
+  ) });
+});
+Avatar.displayName = "Avatar";
+var AvatarImage = React.forwardRef(function AvatarImage2({ className, src, onLoad, onError, ...props }, ref) {
+  const { imageStatus, setImageStatus } = useAvatarContext("AvatarImage");
+  React.useEffect(() => {
+    setImageStatus("idle");
+  }, [src, setImageStatus]);
+  const visible = imageStatus === "loaded";
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      "data-slot": "avatar-image",
+      src,
+      className: cn(
+        "absolute inset-0 z-10 aspect-square size-full object-cover",
+        !visible && "hidden",
+        className
+      ),
+      onLoad: (e) => {
+        setImageStatus("loaded");
+        onLoad?.(e);
+      },
+      onError: (e) => {
+        setImageStatus("error");
+        onError?.(e);
+      },
+      ...props
+    }
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React.forwardRef(
+  function AvatarFallback2({ className, ...props }, ref) {
+    const { imageStatus } = useAvatarContext("AvatarFallback");
+    const visible = imageStatus !== "loaded";
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-slot": "avatar-fallback",
+        className: cn(
+          "absolute inset-0 z-0 flex items-center justify-center",
+          !visible && "hidden",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarFallback, AvatarImage, avatarVariants };
+//# sourceMappingURL=avatar.js.map
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/avatar.tsx"],"names":["Avatar","AvatarImage","AvatarFallback"],"mappings":"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","file":"avatar.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 avatarVariants = cva(\n  \"relative inline-flex shrink-0 overflow-hidden bg-[color:var(--mila-avatar-fallback-bg)] font-sans font-medium text-[color:var(--mila-avatar-fallback-fg)] select-none\",\n  {\n    variants: {\n      size: {\n        regular: \"size-10 text-sm tracking-[0.07px]\",\n        small: \"size-8 text-sm tracking-[0.07px]\",\n      },\n      shape: {\n        round: \"rounded-full\",\n        roundrect: \"rounded-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"regular\",\n      shape: \"round\",\n    },\n  }\n)\n\ntype AvatarContextValue = {\n  imageStatus: \"idle\" | \"loaded\" | \"error\"\n  setImageStatus: React.Dispatch<React.SetStateAction<\"idle\" | \"loaded\" | \"error\">>\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nfunction useAvatarContext(component: string) {\n  const ctx = React.useContext(AvatarContext)\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Avatar>`)\n  }\n  return ctx\n}\n\nexport type AvatarProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof avatarVariants>\n\nconst Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  { className, size, shape, ...props },\n  ref\n) {\n  const [imageStatus, setImageStatus] = React.useState<\"idle\" | \"loaded\" | \"error\">(\"idle\")\n\n  const value = React.useMemo(\n    () => ({ imageStatus, setImageStatus }),\n    [imageStatus]\n  )\n\n  return (\n    <AvatarContext.Provider value={value}>\n      <div\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      />\n    </AvatarContext.Provider>\n  )\n})\nAvatar.displayName = \"Avatar\"\n\nexport type AvatarImageProps = React.ComponentProps<\"img\">\n\nconst AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(function AvatarImage(\n  { className, src, onLoad, onError, ...props },\n  ref\n) {\n  const { imageStatus, setImageStatus } = useAvatarContext(\"AvatarImage\")\n\n  React.useEffect(() => {\n    setImageStatus(\"idle\")\n  }, [src, setImageStatus])\n\n  const visible = imageStatus === \"loaded\"\n\n  return (\n    <img\n      ref={ref}\n      data-slot=\"avatar-image\"\n      src={src}\n      className={cn(\n        \"absolute inset-0 z-10 aspect-square size-full object-cover\",\n        !visible && \"hidden\",\n        className\n      )}\n      onLoad={(e) => {\n        setImageStatus(\"loaded\")\n        onLoad?.(e)\n      }}\n      onError={(e) => {\n        setImageStatus(\"error\")\n        onError?.(e)\n      }}\n      {...props}\n    />\n  )\n})\nAvatarImage.displayName = \"AvatarImage\"\n\nexport type AvatarFallbackProps = React.ComponentProps<\"span\">\n\nconst AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n  function AvatarFallback({ className, ...props }, ref) {\n    const { imageStatus } = useAvatarContext(\"AvatarFallback\")\n    const visible = imageStatus !== \"loaded\"\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"avatar-fallback\"\n        className={cn(\n          \"absolute inset-0 z-0 flex items-center justify-center\",\n          !visible && \"hidden\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nAvatarFallback.displayName = \"AvatarFallback\"\n\nexport { Avatar, AvatarImage, AvatarFallback, avatarVariants }\n"]}

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

@@ -0,0 +1,16 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "errorNumber" | "info" | null | undefined;
+    layout?: "default" | "dot" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const badgeIconClass = "size-3 shrink-0 [&_svg]:size-3";
+type BadgeProps = React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+};
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps, badgeIconClass, badgeVariants };

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/badge.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var badgeVariants = cva(
+  [
+    "inline-flex min-h-6 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2 py-[3px]",
+    "font-sans text-xs font-medium leading-normal tracking-[0.18px] whitespace-nowrap",
+    "transition-[box-shadow,color,background-color,border-color]",
+    "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-input-ring-focus)]"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-[color:var(--mila-badge-primary-bg)] text-[color:var(--mila-badge-primary-fg)]",
+        secondary: "bg-[color:var(--mila-badge-secondary-bg)] text-[color:var(--mila-badge-secondary-fg)]",
+        outline: "border border-solid border-[color:var(--mila-badge-outline-border)] bg-transparent text-[color:var(--mila-badge-secondary-fg)]",
+        ghost: "bg-transparent text-[color:var(--mila-badge-secondary-fg)]",
+        destructive: "bg-[color:var(--mila-badge-destructive-bg)] text-[color:var(--mila-badge-destructive-fg)]",
+        errorNumber: "border border-solid border-[color:var(--mila-badge-error-number-border)] bg-[color:var(--mila-badge-error-number-bg)] text-[color:var(--mila-badge-error-number-fg)] focus-visible:text-[color:var(--mila-badge-error-number-fg-focus)]",
+        info: "bg-[color:var(--mila-badge-info-bg)] text-[color:var(--mila-badge-info-fg)]"
+      },
+      layout: {
+        default: "",
+        dot: "size-6 min-h-6 min-w-6 gap-0 rounded-full p-0 px-0 leading-none"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      layout: "default"
+    }
+  }
+);
+var badgeIconClass = "size-3 shrink-0 [&_svg]:size-3";
+var Badge = React.forwardRef(function Badge2({ className, variant, layout, startIcon, endIcon, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant, layout }), className),
+      ...props,
+      children: [
+        startIcon ? /* @__PURE__ */ jsx("span", { className: badgeIconClass, children: startIcon }) : null,
+        children,
+        endIcon ? /* @__PURE__ */ jsx("span", { className: badgeIconClass, children: endIcon }) : null
+      ]
+    }
+  );
+});
+Badge.displayName = "Badge";
+
+export { Badge, badgeIconClass, badgeVariants };
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/badge.tsx"],"names":["Badge"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB;AAAA,IACE,2FAAA;AAAA,IACA,kFAAA;AAAA,IACA,6DAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,mFAAA;AAAA,QACF,SAAA,EACE,uFAAA;AAAA,QACF,OAAA,EACE,gIAAA;AAAA,QACF,KAAA,EAAO,4DAAA;AAAA,QACP,WAAA,EACE,2FAAA;AAAA,QACF,WAAA,EACE,yOAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,OAAA,EAAS,EAAA;AAAA,QACT,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,MAAA,EAAQ;AAAA;AACV;AAEJ;AAEA,IAAM,cAAA,GAAiB;AAQvB,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA,CAAwC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,OAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,OAAA,EAAS,QAAA,EAAU,GAAG,KAAA,IAC/D,GAAA,EACA;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,GAAG,aAAA,CAAc,EAAE,SAAS,MAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MAC1D,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,mBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,EAAiB,qBAAU,CAAA,GAAU,IAAA;AAAA,QAClE,QAAA;AAAA,QACA,0BAAU,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,EAAiB,mBAAQ,CAAA,GAAU;AAAA;AAAA;AAAA,GACjE;AAEJ,CAAC;AACD,KAAA,CAAM,WAAA,GAAc,OAAA","file":"badge.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 badgeVariants = cva(\n  [\n    \"inline-flex min-h-6 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2 py-[3px]\",\n    \"font-sans text-xs font-medium leading-normal tracking-[0.18px] whitespace-nowrap\",\n    \"transition-[box-shadow,color,background-color,border-color]\",\n    \"focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[color:var(--mila-input-ring-focus)]\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-[color:var(--mila-badge-primary-bg)] text-[color:var(--mila-badge-primary-fg)]\",\n        secondary:\n          \"bg-[color:var(--mila-badge-secondary-bg)] text-[color:var(--mila-badge-secondary-fg)]\",\n        outline:\n          \"border border-solid border-[color:var(--mila-badge-outline-border)] bg-transparent text-[color:var(--mila-badge-secondary-fg)]\",\n        ghost: \"bg-transparent text-[color:var(--mila-badge-secondary-fg)]\",\n        destructive:\n          \"bg-[color:var(--mila-badge-destructive-bg)] text-[color:var(--mila-badge-destructive-fg)]\",\n        errorNumber:\n          \"border border-solid border-[color:var(--mila-badge-error-number-border)] bg-[color:var(--mila-badge-error-number-bg)] text-[color:var(--mila-badge-error-number-fg)] focus-visible:text-[color:var(--mila-badge-error-number-fg-focus)]\",\n        info: \"bg-[color:var(--mila-badge-info-bg)] text-[color:var(--mila-badge-info-fg)]\",\n      },\n      layout: {\n        default: \"\",\n        dot: \"size-6 min-h-6 min-w-6 gap-0 rounded-full p-0 px-0 leading-none\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      layout: \"default\",\n    },\n  }\n)\n\nconst badgeIconClass = \"size-3 shrink-0 [&_svg]:size-3\"\n\nexport type BadgeProps = React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & {\n    startIcon?: React.ReactNode\n    endIcon?: React.ReactNode\n  }\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant, layout, startIcon, endIcon, children, ...props },\n  ref\n) {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, layout }), className)}\n      {...props}\n    >\n      {startIcon ? <span className={badgeIconClass}>{startIcon}</span> : null}\n      {children}\n      {endIcon ? <span className={badgeIconClass}>{endIcon}</span> : null}\n    </span>\n  )\n})\nBadge.displayName = \"Badge\"\n\nexport { Badge, badgeVariants, badgeIconClass }\n"]}

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

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+declare function Breadcrumb({ className, ...props }: React.ComponentPropsWithoutRef<"nav">): react_jsx_runtime.JSX.Element;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+};
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+type BreadcrumbSeparatorProps = React.ComponentPropsWithoutRef<"li"> & {
+    variant?: "chevron" | "slash";
+};
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    variant?: "chevron" | "slash";
+} & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbSeparatorProps };

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

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { Slash, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", "data-slot": "breadcrumb", className: cn("", className), ...props });
+}
+var BreadcrumbList = React.forwardRef(
+  function BreadcrumbList2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        "data-slot": "breadcrumb-list",
+        className: cn(
+          "flex min-h-9 list-none flex-wrap items-center gap-2 px-3 py-0 font-sans text-sm font-medium leading-[1.5] tracking-[0.07px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React.forwardRef(
+  function BreadcrumbItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        "data-slot": "breadcrumb-item",
+        className: cn("inline-flex items-center", className),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React.forwardRef(function BreadcrumbLink2({ className, asChild, ...props }, ref) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "breadcrumb-link",
+      className: cn(
+        "rounded-sm text-[color:var(--mila-breadcrumb-muted-fg)] outline-none transition-colors",
+        "hover:text-[color:var(--mila-breadcrumb-current-fg)]",
+        "focus-visible:ring-2 focus-visible:ring-[color:var(--mila-input-ring-focus)] focus-visible:ring-offset-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React.forwardRef(
+  function BreadcrumbPage2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-current": "page",
+        "data-slot": "breadcrumb-page",
+        className: cn("font-medium text-[color:var(--mila-breadcrumb-current-fg)]", className),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = React.forwardRef(
+  function BreadcrumbSeparator2({ className, variant = "chevron", children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-slot": "breadcrumb-separator",
+        className: cn("[&_svg]:size-4 text-[color:var(--mila-breadcrumb-separator-fg)]", className),
+        ...props,
+        children: children ?? (variant === "slash" ? /* @__PURE__ */ jsx(Slash, { className: "shrink-0", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { className: "shrink-0", "aria-hidden": true }))
+      }
+    );
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = React.forwardRef(
+  function BreadcrumbEllipsis2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        "data-slot": "breadcrumb-ellipsis",
+        className: cn(
+          "inline-flex size-4 shrink-0 items-center justify-center text-[color:var(--mila-breadcrumb-muted-fg)]",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4 shrink-0", "aria-hidden": true })
+      }
+    );
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+//# sourceMappingURL=breadcrumb.js.map
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/breadcrumb.tsx"],"names":["BreadcrumbList","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","BreadcrumbEllipsis"],"mappings":"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","file":"breadcrumb.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 { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal, Slash } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils.js\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentPropsWithoutRef<\"nav\">) {\n  return (\n    <nav aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" className={cn(\"\", className)} {...props} />\n  )\n}\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<\"ol\">>(\n  function BreadcrumbList({ className, ...props }, ref) {\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"breadcrumb-list\"\n        className={cn(\n          \"flex min-h-9 list-none flex-wrap items-center gap-2 px-3 py-0 font-sans text-sm font-medium leading-[1.5] tracking-[0.07px]\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<\"li\">>(\n  function BreadcrumbItem({ className, ...props }, ref) {\n    return (\n      <li\n        ref={ref}\n        data-slot=\"breadcrumb-item\"\n        className={cn(\"inline-flex items-center\", className)}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nexport type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<\"a\"> & {\n  asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(function BreadcrumbLink(\n  { className, asChild, ...props },\n  ref\n) {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref as React.Ref<HTMLAnchorElement>}\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        \"rounded-sm text-[color:var(--mila-breadcrumb-muted-fg)] outline-none transition-colors\",\n        \"hover:text-[color:var(--mila-breadcrumb-current-fg)]\",\n        \"focus-visible:ring-2 focus-visible:ring-[color:var(--mila-input-ring-focus)] focus-visible:ring-offset-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<\"span\">>(\n  function BreadcrumbPage({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        aria-current=\"page\"\n        data-slot=\"breadcrumb-page\"\n        className={cn(\"font-medium text-[color:var(--mila-breadcrumb-current-fg)]\", className)}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nexport type BreadcrumbSeparatorProps = React.ComponentPropsWithoutRef<\"li\"> & {\n  variant?: \"chevron\" | \"slash\"\n}\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  function BreadcrumbSeparator({ className, variant = \"chevron\", children, ...props }, ref) {\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        data-slot=\"breadcrumb-separator\"\n        className={cn(\"[&_svg]:size-4 text-[color:var(--mila-breadcrumb-separator-fg)]\", className)}\n        {...props}\n      >\n        {children ??\n          (variant === \"slash\" ? (\n            <Slash className=\"shrink-0\" aria-hidden />\n          ) : (\n            <ChevronRight className=\"shrink-0\" aria-hidden />\n          ))}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<\"span\">>(\n  function BreadcrumbEllipsis({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        data-slot=\"breadcrumb-ellipsis\"\n        className={cn(\n          \"inline-flex size-4 shrink-0 items-center justify-center text-[color:var(--mila-breadcrumb-muted-fg)]\",\n          className\n        )}\n        {...props}\n      >\n        <MoreHorizontal className=\"size-4 shrink-0\" aria-hidden />\n      </span>\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n}\n"]}

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

@@ -0,0 +1,36 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "lg" | "sm" | "mini" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const buttonIconSlotClass = "inline-flex shrink-0 items-center justify-center";
+type ButtonProps = VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    /** Shows spinner, disables interaction; Figma MILA loading button (node 274:43182). */
+    loading?: boolean;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<"button">, "className"> & Omit<React.ComponentPropsWithoutRef<"a">, "className"> & {
+    /** Renders as `<a>`; defaults variant to `link` when `variant` is omitted (Figma node 274:52937). */
+    href?: string;
+};
+declare const Button: React.ForwardRefExoticComponent<VariantProps<(props?: ({
+    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "lg" | "sm" | "mini" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    /** Shows spinner, disables interaction; Figma MILA loading button (node 274:43182). */
+    loading?: boolean;
+    className?: string;
+} & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "className"> & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "className"> & {
+    /** Renders as `<a>`; defaults variant to `link` when `variant` is omitted (Figma node 274:52937). */
+    href?: string;
+} & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+
+export { Button, type ButtonProps, buttonIconSlotClass, buttonVariants };