@fanvue/ui 0.1.0-alpha.3 → 1.0.0

package/README.md

@@ -70,7 +70,7 @@ Customize the theme by overriding CSS variables:
 
 ### Prerequisites
 
-- Node.js 24+
+- Node.js 20+
 - pnpm 9+
 
 ## Installation

package/dist/cjs/components/Alert/Alert.cjs

@@ -0,0 +1,72 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Button = require("../Button/Button.cjs");
+const CrossIcon = require("../Icons/CrossIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Alert = React__namespace.forwardRef(
+  ({ className, variant = "info", title, icon, closable = false, onClose, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-testid": "alert",
+        className: cn.cn(
+          "grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]",
+          icon && closable && "grid-cols-[auto_1fr_auto]",
+          icon && !closable && "grid-cols-[auto_1fr]",
+          !icon && closable && "grid-cols-[1fr_auto]",
+          !icon && !closable && "grid-cols-[1fr]",
+          title && children ? "items-start" : "items-center",
+          variant === "info" && "bg-info-50 text-info-500",
+          variant === "success" && "bg-success-50 text-success-500",
+          variant === "warning" && "bg-warning-50 text-warning-500",
+          variant === "error" && "bg-error-50 text-error-500",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-start", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-2-semibold text-body-100", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-2-regular text-body-200", children })
+          ] }),
+          closable && /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              variant: "tertiary",
+              size: "24",
+              onClick: onClose,
+              className: "self-start",
+              "aria-label": "Close alert",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon.CrossIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+exports.Alert = Alert;
+//# sourceMappingURL=Alert.cjs.map

package/dist/cjs/components/Alert/Alert.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the alert (matches Figma \"Variant\" property) */\n  variant?: AlertVariant;\n  /** Optional title text (bold) */\n  title?: string;\n  /** Left icon element */\n  icon?: React.ReactNode;\n  /** Show close button */\n  closable?: boolean;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    { className, variant = \"info\", title, icon, closable = false, onClose, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-testid=\"alert\"\n        className={cn(\n          \"grid gap-x-3 rounded-lg p-4 text-sm leading-[18px]\",\n          icon && closable && \"grid-cols-[auto_1fr_auto]\",\n          icon && !closable && \"grid-cols-[auto_1fr]\",\n          !icon && closable && \"grid-cols-[1fr_auto]\",\n          !icon && !closable && \"grid-cols-[1fr]\",\n          title && children ? \"items-start\" : \"items-center\",\n          variant === \"info\" && \"bg-info-50 text-info-500\",\n          variant === \"success\" && \"bg-success-50 text-success-500\",\n          variant === \"warning\" && \"bg-warning-50 text-warning-500\",\n          variant === \"error\" && \"bg-error-50 text-error-500\",\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className=\"flex shrink-0 items-start\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {title && <div className=\"typography-body-2-semibold text-body-100\">{title}</div>}\n          <div className=\"typography-body-2-regular text-body-200\">{children}</div>\n        </div>\n\n        {closable && (\n          <Button\n            variant=\"tertiary\"\n            size=\"24\"\n            onClick={onClose}\n            className=\"self-start\"\n            aria-label=\"Close alert\"\n          >\n            <CrossIcon />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["React","jsxs","cn","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,QAAQ,OAAO,MAAM,WAAW,OAAO,SAAS,UAAU,GAAG,MAAA,GACpF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,QAAQ,YAAY;AAAA,UACpB,QAAQ,CAAC,YAAY;AAAA,UACrB,CAAC,QAAQ,YAAY;AAAA,UACrB,CAAC,QAAQ,CAAC,YAAY;AAAA,UACtB,SAAS,WAAW,gBAAgB;AAAA,UACpC,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,uCACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,MACH;AAAA,UAGFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAASE,2BAAAA,IAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,OAAM;AAAA,YAC3EA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2CAA2C,SAAA,CAAS;AAAA,UAAA,GACrE;AAAA,UAEC,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cACV,cAAW;AAAA,cAEX,yCAACC,UAAAA,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}

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

@@ -0,0 +1,162 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AvatarPrimitive = require("@radix-ui/react-avatar");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AvatarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AvatarPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AvatarContext = React__namespace.createContext({
+  size: 40,
+  NSFWShow: false
+});
+const STATUS_POSITIONS = {
+  16: { top: -4, right: -4 },
+  24: { top: -3, right: -3 },
+  32: { top: -2, right: -2 },
+  40: { top: -1, right: -1 },
+  48: { top: 0, right: 0 },
+  64: { top: 2, right: 2 },
+  88: { top: 6, right: 6 },
+  148: { top: 15, right: 15 }
+};
+const AvatarRoot = React__namespace.forwardRef(
+  ({
+    className,
+    size = 40,
+    onlineIndicator = false,
+    platinumShow = false,
+    NSFWShow = false,
+    children,
+    ...props
+  }, ref) => {
+    const statusPosition = STATUS_POSITIONS[size];
+    return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { size, NSFWShow }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AvatarPrimitive__namespace.Root,
+        {
+          ref,
+          "data-testid": "avatar",
+          className: cn.cn(
+            "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100",
+            size === 16 && "typography-caption-semibold size-4",
+            size === 24 && "typography-caption-semibold size-6",
+            size === 32 && "typography-body-2-semibold size-8",
+            size === 40 && "typography-body-1-semibold size-10",
+            size === 48 && "typography-heading-4 size-12",
+            size === 64 && "typography-heading-3 size-16",
+            size === 88 && "typography-heading-2 size-[88px]",
+            size === 148 && "typography-heading-1 size-[148px]",
+            className
+          ),
+          ...props,
+          children
+        }
+      ),
+      platinumShow && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-0 rounded-full",
+          style: {
+            background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,
+            WebkitMask: "radial-gradient(circle closest-side, transparent 96%, black 96%)",
+            mask: "radial-gradient(circle closest-side, transparent 96%, black 96%)"
+          },
+          "aria-hidden": "true"
+        }
+      ),
+      onlineIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "absolute size-3 rounded-full border-2 border-background-150 bg-brand-green-500",
+          style: {
+            top: `${statusPosition.top}px`,
+            right: `${statusPosition.right}px`
+          },
+          "aria-hidden": "true"
+        }
+      )
+    ] }) });
+  }
+);
+AvatarRoot.displayName = "AvatarRoot";
+const AvatarImage = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { NSFWShow } = React__namespace.useContext(AvatarContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AvatarPrimitive__namespace.Image,
+    {
+      ref,
+      className: cn.cn("size-full bg-neutral-200 object-cover", NSFWShow && "blur-md", className),
+      ...props
+    }
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Fallback,
+  {
+    ref,
+    className: cn.cn(
+      "flex size-full items-center justify-center bg-neutral-200 text-neutral-400 uppercase leading-none",
+      className
+    ),
+    delayMs: 0,
+    ...props,
+    children
+  }
+));
+AvatarFallback.displayName = "AvatarFallback";
+const Avatar = React__namespace.forwardRef(
+  ({
+    className,
+    size = 40,
+    src,
+    alt,
+    fallback,
+    onlineIndicator = false,
+    platinumShow = false,
+    NSFWShow = false,
+    children,
+    ...props
+  }, ref) => {
+    const rootProps = {
+      ref,
+      size,
+      onlineIndicator,
+      platinumShow,
+      NSFWShow,
+      className,
+      ...props
+    };
+    if (children) {
+      return /* @__PURE__ */ jsxRuntime.jsx(AvatarRoot, { ...rootProps, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(AvatarRoot, { ...rootProps, children: [
+      src && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt: alt ?? "Avatar" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: fallback })
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;
+exports.AvatarRoot = AvatarRoot;
+//# sourceMappingURL=Avatar.cjs.map

package/dist/cjs/components/Avatar/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<AvatarSize, { top: number; right: number }> = {\n  16: { top: -4, right: -4 },\n  24: { top: -3, right: -3 },\n  32: { top: -2, right: -2 },\n  40: { top: -1, right: -1 },\n  48: { top: 0, right: 0 },\n  64: { top: 2, right: 2 },\n  88: { top: 6, right: 6 },\n  148: { top: 15, right: 15 },\n};\n\n/** Shared avatar styling props */\ninterface AvatarStyleProps {\n  /** Size variant of the avatar (matches Figma \"Size\" property) */\n  size?: AvatarSize;\n  /** Show online status indicator */\n  onlineIndicator?: boolean;\n  /** Show platinum gradient border (matches Figma \"Platinum show\" property) */\n  platinumShow?: boolean;\n  /** Show NSFW blur filter (matches Figma \"NSFW show\" property) */\n  NSFWShow?: boolean;\n}\n\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100\",\n              size === 16 && \"typography-caption-semibold size-4\",\n              size === 24 && \"typography-caption-semibold size-6\",\n              size === 32 && \"typography-body-2-semibold size-8\",\n              size === 40 && \"typography-body-1-semibold size-10\",\n              size === 48 && \"typography-heading-4 size-12\",\n              size === 64 && \"typography-heading-3 size-16\",\n              size === 88 && \"typography-heading-2 size-[88px]\",\n              size === 148 && \"typography-heading-1 size-[148px]\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className=\"absolute size-3 rounded-full border-2 border-background-150 bg-brand-green-500\"\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full bg-neutral-200 object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center bg-neutral-200 text-neutral-400 uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image */\n  src?: string;\n  /** Alt text for the avatar image */\n  alt?: string;\n  /** Fallback content (initials, icon, etc.) */\n  fallback?: React.ReactNode;\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":["React","jsx","jsxs","AvatarPrimitive","cn"],"mappings":"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"}

package/dist/cjs/components/Badge/Badge.cjs

@@ -0,0 +1,99 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactSlot = require("@radix-ui/react-slot");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const badgeVariants = {
+  variant: {
+    default: "bg-neutral-100 text-neutral-400",
+    dark: "bg-background-800 text-body-300 dark:text-body-white-solid-constant",
+    success: "bg-neutral-100 text-neutral-400",
+    warning: "bg-neutral-100 text-neutral-400",
+    error: "bg-neutral-100 text-neutral-400",
+    special: "bg-neutral-100 text-neutral-400",
+    info: "bg-neutral-100 text-neutral-400",
+    online: "bg-background-200 text-brand-green-500",
+    brand: "bg-brand-green-500 text-body-black-solid-constant",
+    pink: "bg-brand-pink-500 text-body-black-solid-constant",
+    brandLight: "bg-brand-green-50 text-body-black-solid-constant",
+    pinkLight: "bg-brand-pink-50 text-body-black-solid-constant"
+  },
+  dotColor: {
+    default: "bg-body-black-solid-constant",
+    dark: "bg-body-300 dark:bg-body-white-solid-constant",
+    success: "bg-success-500",
+    warning: "bg-warning-500",
+    error: "bg-error-500",
+    special: "bg-special-500",
+    info: "bg-info-500",
+    online: "bg-brand-green-500",
+    brand: "bg-body-black-solid-constant",
+    pink: "bg-body-black-solid-constant",
+    brandLight: "bg-body-black-solid-constant",
+    pinkLight: "bg-body-black-solid-constant"
+  }
+};
+const Badge = React__namespace.forwardRef(
+  ({
+    className,
+    variant = "default",
+    leftDot = true,
+    leftIcon,
+    rightIcon,
+    asChild = false,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "span";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        ref,
+        "data-testid": "badge",
+        className: cn.cn(
+          // Base styles
+          "typography-caption-semibold inline-flex h-5 items-center gap-2 rounded-full px-2",
+          // Variant styles
+          badgeVariants.variant[variant],
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex", "aria-hidden": "true", children: leftIcon }),
+          leftDot && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn.cn("size-1 shrink-0 rounded-full", badgeVariants.dotColor[variant]),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children }),
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex", "aria-hidden": "true", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.cjs.map

package/dist/cjs/components/Badge/Badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst badgeVariants = {\n  variant: {\n    default: \"bg-neutral-100 text-neutral-400\",\n    dark: \"bg-background-800 text-body-300 dark:text-body-white-solid-constant\",\n    success: \"bg-neutral-100 text-neutral-400\",\n    warning: \"bg-neutral-100 text-neutral-400\",\n    error: \"bg-neutral-100 text-neutral-400\",\n    special: \"bg-neutral-100 text-neutral-400\",\n    info: \"bg-neutral-100 text-neutral-400\",\n    online: \"bg-background-200 text-brand-green-500\",\n    brand: \"bg-brand-green-500 text-body-black-solid-constant\",\n    pink: \"bg-brand-pink-500 text-body-black-solid-constant\",\n    brandLight: \"bg-brand-green-50 text-body-black-solid-constant\",\n    pinkLight: \"bg-brand-pink-50 text-body-black-solid-constant\",\n  },\n  dotColor: {\n    default: \"bg-body-black-solid-constant\",\n    dark: \"bg-body-300 dark:bg-body-white-solid-constant\",\n    success: \"bg-success-500\",\n    warning: \"bg-warning-500\",\n    error: \"bg-error-500\",\n    special: \"bg-special-500\",\n    info: \"bg-info-500\",\n    online: \"bg-brand-green-500\",\n    brand: \"bg-body-black-solid-constant\",\n    pink: \"bg-body-black-solid-constant\",\n    brandLight: \"bg-body-black-solid-constant\",\n    pinkLight: \"bg-body-black-solid-constant\",\n  },\n} as const;\n\nexport type BadgeVariant = keyof typeof badgeVariants.variant;\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the badge */\n  variant?: BadgeVariant;\n  /** Show left status indicator dot */\n  leftDot?: boolean;\n  /** Left icon element */\n  leftIcon?: React.ReactNode;\n  /** Right icon element */\n  rightIcon?: React.ReactNode;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      leftDot = true,\n      leftIcon,\n      rightIcon,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"badge\"\n        className={cn(\n          // Base styles\n          \"typography-caption-semibold inline-flex h-5 items-center gap-2 rounded-full px-2\",\n          // Variant styles\n          badgeVariants.variant[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        {leftDot && (\n          <span\n            className={cn(\"size-1 shrink-0 rounded-full\", badgeVariants.dotColor[variant])}\n            aria-hidden=\"true\"\n          />\n        )}\n        <Slottable>{children}</Slottable>\n        {rightIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"],"names":["React","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf;AAiBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA,cAAc,QAAQ,OAAO;AAAA;AAAA,UAE7B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,2CACE,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UACH;AAAA,UAED,WACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGhBC,+BAACC,UAAAA,aAAW,UAAS;AAAA,UACpB,aACCD,2BAAAA,IAAC,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/Button/Button.cjs

@@ -0,0 +1,172 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactSlot = require("@radix-ui/react-slot");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const SpinnerIcon = require("../Icons/SpinnerIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SIZE_CLASSES = {
+  "48": "h-12 px-4 py-3 typography-button-large",
+  "40": "h-10 px-4 py-2 typography-button-small",
+  "32": "h-8 px-3 py-2 typography-body-2-semibold",
+  "24": "h-6 px-0 py-1 typography-body-2-semibold"
+};
+const ICON_SIZE_CLASS = {
+  "48": "size-5",
+  "40": "size-5",
+  "32": "size-4",
+  "24": "size-3.5"
+};
+const VARIANT_CLASSES = {
+  primary: "bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant",
+  secondary: "border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50",
+  tertiary: "bg-transparent text-body-100 hover:bg-brand-green-50",
+  link: "bg-transparent text-body-100 underline decoration-solid hover:bg-brand-green-50",
+  brand: "bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-pink-500",
+  destructive: "bg-error-500 text-body-white-solid-constant hover:bg-background-solid dark:hover:bg-background-white-solid-constant dark:hover:text-error-500",
+  white: "bg-background-white-solid-constant text-body-black-solid-constant hover:bg-brand-green-500",
+  tertiaryDestructive: "bg-transparent text-error-500 hover:bg-error-50",
+  text: "bg-transparent text-body-100 hover:underline"
+};
+function getTextContent(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (React__namespace.isValidElement(node)) {
+    return getTextContent(node.props.children);
+  }
+  if (Array.isArray(node)) {
+    const text = node.map(getTextContent).filter(Boolean).join("");
+    return text || void 0;
+  }
+  return void 0;
+}
+const LoadingSpinner = ({ size }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon.SpinnerIcon, { className: ICON_SIZE_CLASS[size], children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Loading" }) }) });
+};
+function renderContent({
+  loading,
+  asChild,
+  children,
+  size,
+  leftIcon,
+  rightIcon,
+  iconSizeClass,
+  discount,
+  price
+}) {
+  if (loading) {
+    if (asChild && React__namespace.isValidElement(children)) {
+      return React__namespace.cloneElement(
+        children,
+        void 0,
+        /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { size })
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { size }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children })
+    ] });
+  }
+  if (asChild) return children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn.cn("flex shrink-0 items-center justify-center", iconSizeClass),
+        "aria-hidden": "true",
+        children: leftIcon
+      }
+    ),
+    children,
+    rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn.cn("flex shrink-0 items-center justify-center", iconSizeClass),
+        "aria-hidden": "true",
+        children: rightIcon
+      }
+    ),
+    discount != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-1-regular line-through", "aria-hidden": "true", children: discount }),
+    price != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: price })
+  ] });
+}
+const Button = React__namespace.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    size = "48",
+    leftIcon,
+    rightIcon,
+    loading = false,
+    asChild = false,
+    disabled,
+    children,
+    discount,
+    price,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    const isDisabled = disabled || loading;
+    const iconSizeClass = ICON_SIZE_CLASS[size];
+    const buttonSpecificProps = !asChild ? { "data-testid": "button", disabled: isDisabled } : isDisabled ? { "aria-disabled": true } : {};
+    const loadingLabelProps = loading && asChild ? { "aria-label": getTextContent(children) } : {};
+    const content = renderContent({
+      loading,
+      asChild,
+      children,
+      size,
+      leftIcon,
+      rightIcon,
+      iconSizeClass,
+      discount,
+      price
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        ...buttonSpecificProps,
+        "aria-busy": loading,
+        ...loadingLabelProps,
+        className: cn.cn(
+          // Base styles
+          "inline-flex cursor-pointer items-center justify-center gap-2 rounded-full transition-colors",
+          // Focus ring
+          "focus:shadow-focus focus-visible:outline-none",
+          // Disabled state
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          // Size styles
+          SIZE_CLASSES[size],
+          // Variant styles
+          VARIANT_CLASSES[variant],
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+exports.Button = Button;
+//# sourceMappingURL=Button.cjs.map

package/dist/cjs/components/Button/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button */\n  variant?: ButtonVariant;\n  /** Size of the button in pixels */\n  size?: ButtonSize;\n  /** Left icon element */\n  leftIcon?: React.ReactNode;\n  /** Right icon element */\n  rightIcon?: React.ReactNode;\n  /** Show loading spinner */\n  loading?: boolean;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n  /** Old price shown with strikethrough before the current price */\n  discount?: string;\n  /** Current price shown inside the button after the label/icons */\n  price?: string;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-button-large\",\n  \"40\": \"h-10 px-4 py-2 typography-button-small\",\n  \"32\": \"h-8 px-3 py-2 typography-body-2-semibold\",\n  \"24\": \"h-6 px-0 py-1 typography-body-2-semibold\",\n};\n\nconst ICON_SIZE_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"size-5\",\n  \"40\": \"size-5\",\n  \"32\": \"size-4\",\n  \"24\": \"size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant\",\n  secondary:\n    \"border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50\",\n  tertiary: \"bg-transparent text-body-100 hover:bg-brand-green-50\",\n  link: \"bg-transparent text-body-100 underline decoration-solid hover:bg-brand-green-50\",\n  brand: \"bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-pink-500\",\n  destructive:\n    \"bg-error-500 text-body-white-solid-constant hover:bg-background-solid dark:hover:bg-background-white-solid-constant dark:hover:text-error-500\",\n  white:\n    \"bg-background-white-solid-constant text-body-black-solid-constant hover:bg-brand-green-500\",\n  tertiaryDestructive: \"bg-transparent text-error-500 hover:bg-error-50\",\n  text: \"bg-transparent text-body-100 hover:underline\",\n};\n\n/** Recursively extract text content from React nodes for accessible labels */\nfunction getTextContent(node: React.ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (React.isValidElement(node)) {\n    return getTextContent((node.props as { children?: React.ReactNode }).children);\n  }\n  if (Array.isArray(node)) {\n    const text = node.map(getTextContent).filter(Boolean).join(\"\");\n    return text || undefined;\n  }\n  return undefined;\n}\n\nconst LoadingSpinner = ({ size }: { size: ButtonSize }) => {\n  return (\n    <span className=\"animate-spin\" aria-hidden=\"true\">\n      <SpinnerIcon className={ICON_SIZE_CLASS[size]}>\n        <title>Loading</title>\n      </SpinnerIcon>\n    </span>\n  );\n};\n\nfunction renderContent({\n  loading,\n  asChild,\n  children,\n  size,\n  leftIcon,\n  rightIcon,\n  iconSizeClass,\n  discount,\n  price,\n}: {\n  loading: boolean;\n  asChild: boolean;\n  children: React.ReactNode;\n  size: ButtonSize;\n  leftIcon: React.ReactNode;\n  rightIcon: React.ReactNode;\n  iconSizeClass: string;\n  discount?: string;\n  price?: string;\n}) {\n  if (loading) {\n    // When asChild, clone the child element with spinner content instead of\n    // wrapping in sr-only span (which would nest interactive elements)\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(\n        children as React.ReactElement<{ children?: React.ReactNode }>,\n        undefined,\n        <LoadingSpinner size={size} />,\n      );\n    }\n    return (\n      <>\n        <LoadingSpinner size={size} />\n        <span className=\"sr-only\">{children}</span>\n      </>\n    );\n  }\n\n  if (asChild) return children;\n\n  return (\n    <>\n      {leftIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      {children}\n      {rightIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {rightIcon}\n        </span>\n      )}\n      {discount != null && (\n        <span className=\"typography-body-1-regular line-through\" aria-hidden=\"true\">\n          {discount}\n        </span>\n      )}\n      {price != null && <span aria-hidden=\"true\">{price}</span>}\n    </>\n  );\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"48\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_SIZE_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? { \"data-testid\": \"button\", disabled: isDisabled }\n      : isDisabled\n        ? { \"aria-disabled\": true }\n        : {};\n\n    // When asChild + loading, extract text from children for aria-label since we\n    // can't wrap element children in an sr-only span (creates invalid nested markup)\n    const loadingLabelProps = loading && asChild ? { \"aria-label\": getTextContent(children) } : {};\n\n    const content = renderContent({\n      loading,\n      asChild,\n      children,\n      size,\n      leftIcon,\n      rightIcon,\n      iconSizeClass,\n      discount,\n      price,\n    });\n\n    return (\n      <Comp\n        ref={ref}\n        {...buttonSpecificProps}\n        aria-busy={loading}\n        {...loadingLabelProps}\n        className={cn(\n          // Base styles\n          \"inline-flex cursor-pointer items-center justify-center gap-2 rounded-full transition-colors\",\n          // Focus ring\n          \"focus:shadow-focus focus-visible:outline-none\",\n          // Disabled state\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          // Size styles\n          SIZE_CLASSES[size],\n          // Variant styles\n          VARIANT_CLASSES[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":["React","jsx","SpinnerIcon","jsxs","Fragment","cn","Slot"],"mappings":"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"}