@fanvue/ui 0.1.0-alpha.3 → 1.1.0

package/dist/cjs/components/Tabs/TabsList.cjs

@@ -0,0 +1,42 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const TabsPrimitive = require("@radix-ui/react-tabs");
+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 TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: cn.cn(
+      "inline-flex",
+      // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens
+      "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]",
+      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+exports.TabsList = TabsList;
+//# sourceMappingURL=TabsList.cjs.map

package/dist/cjs/components/Tabs/TabsList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n      \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;;"}

package/dist/cjs/components/Tabs/TabsTrigger.cjs

@@ -0,0 +1,50 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const TabsPrimitive = require("@radix-ui/react-tabs");
+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 TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn.cn(
+      "inline-flex items-center justify-center",
+      "rounded-xs border-transparent",
+      "typography-body-1-semibold cursor-pointer text-body-100",
+      "data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4",
+      "data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
+      "data-[state=active]:border-brand-green-500",
+      "data-[state=active]:hover:text-hover-100",
+      "data-[state=inactive]:hover:text-hover-200",
+      "data-disabled:pointer-events-none",
+      "data-disabled:data-[state=active]:text-disabled-100",
+      "data-disabled:data-[state=inactive]:text-disabled-400",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+exports.TabsTrigger = TabsTrigger;
+//# sourceMappingURL=TabsTrigger.cjs.map

package/dist/cjs/components/Tabs/TabsTrigger.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs border-transparent\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:border-brand-green-500\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}

package/dist/cjs/components/Toast/Toast.cjs

@@ -0,0 +1,128 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ToastPrimitive = require("@radix-ui/react-toast");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Avatar = require("../Avatar/Avatar.cjs");
+const Button = require("../Button/Button.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+const ErrorIcon = require("../Icons/ErrorIcon.cjs");
+const InfoIcon = require("../Icons/InfoIcon.cjs");
+const SuccessIcon = require("../Icons/SuccessIcon.cjs");
+const WarningIcon = require("../Icons/WarningIcon.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 ToastPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(ToastPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ToastProvider = ToastPrimitive__namespace.Provider;
+const ToastViewport = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToastPrimitive__namespace.Viewport,
+  {
+    ref,
+    className: cn.cn(
+      "fixed top-0 right-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = "ToastViewport";
+const VariantIcon = ({ variant }) => {
+  switch (variant) {
+    case "info":
+      return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon.InfoIcon, { className: "size-5 text-info-500" });
+    case "warning":
+      return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon.WarningIcon, { className: "size-5 text-warning-500" });
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon.SuccessIcon, { className: "size-5 text-success-500" });
+    case "error":
+      return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon.ErrorIcon, { className: "size-5 text-error-500" });
+  }
+};
+const Toast = React__namespace.forwardRef(
+  ({
+    className,
+    variant = "info",
+    title,
+    description,
+    actionLabel,
+    onActionClick,
+    showClose = true,
+    avatarSrc,
+    avatarAlt,
+    avatarFallback,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ToastPrimitive__namespace.Root,
+      {
+        ref,
+        "data-testid": "toast",
+        className: cn.cn(
+          // Base styles
+          "group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all",
+          // Dark mode
+          "dark:border-opacity-100",
+          // Animation
+          "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none",
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start", children: variant === "messageToast" ? avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { src: avatarSrc, alt: avatarAlt, fallback: avatarFallback }) : /* @__PURE__ */ jsxRuntime.jsx(VariantIcon, { variant }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-start", children: [
+              title && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Title, { className: "typography-body-2-semibold", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Description, { className: "typography-body-2-regular mt-1 opacity-90", children: description }),
+              children,
+              onActionClick && /* @__PURE__ */ jsxRuntime.jsx(
+                Button.Button,
+                {
+                  variant: "secondary",
+                  className: "mt-4 border-body-400 text-body-400",
+                  size: "32",
+                  onClick: onActionClick,
+                  children: actionLabel ?? "Action"
+                }
+              )
+            ] })
+          ] }),
+          showClose && /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, {}),
+              "aria-label": "Close notification",
+              className: "absolute top-2 right-2 text-body-300",
+              variant: "tertiary",
+              size: "24"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
+exports.Toast = Toast;
+exports.ToastProvider = ToastProvider;
+exports.ToastViewport = ToastViewport;
+//# sourceMappingURL=Toast.cjs.map

package/dist/cjs/components/Toast/Toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\nexport type ToastVariant = \"info\" | \"warning\" | \"success\" | \"error\" | \"messageToast\";\n\n// Override \"title\" prop to allow React.ReactNode instead of string | undefined\nexport interface ToastProps\n  extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n  /** Variant of the toast */\n  variant?: ToastVariant;\n  /** Toast title */\n  title?: string;\n  /** Toast description/message */\n  description?: React.ReactNode;\n  /** Action button label */\n  actionLabel?: string;\n  /** Action button click handler */\n  onActionClick?: () => void;\n  /** Show close button */\n  showClose?: boolean;\n  /** Avatar image source */\n  avatarSrc?: string;\n  /** Avatar alt text */\n  avatarAlt?: string;\n  /** Avatar fallback text */\n  avatarFallback?: string;\n}\n\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 right-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon className=\"size-5 text-info-500\" />;\n    case \"warning\":\n      return <WarningIcon className=\"size-5 text-warning-500\" />;\n    case \"success\":\n      return <SuccessIcon className=\"size-5 text-success-500\" />;\n    case \"error\":\n      return <ErrorIcon className=\"size-5 text-error-500\" />;\n  }\n};\n\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      description,\n      actionLabel,\n      onActionClick,\n      showClose = true,\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <ToastPrimitive.Root\n        ref={ref}\n        data-testid=\"toast\"\n        className={cn(\n          // Base styles\n          \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all\",\n          // Dark mode\n          \"dark:border-opacity-100\",\n          // Animation\n          \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex w-full items-center gap-3\">\n          <div className=\"self-start\">\n            {variant === \"messageToast\" ? (\n              avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n            ) : (\n              <VariantIcon variant={variant} />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-start\">\n            {title && (\n              <ToastPrimitive.Title className=\"typography-body-2-semibold\">\n                {title}\n              </ToastPrimitive.Title>\n            )}\n            {description && (\n              <ToastPrimitive.Description className=\"typography-body-2-regular mt-1 opacity-90\">\n                {description}\n              </ToastPrimitive.Description>\n            )}\n            {children}\n            {onActionClick && (\n              <Button\n                variant=\"secondary\"\n                // These styles are basically inverted from the selected theme\n                className=\"mt-4 border-body-400 text-body-400\"\n                size=\"32\"\n                onClick={onActionClick}\n              >\n                {actionLabel ?? \"Action\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        {showClose && (\n          <ToastPrimitive.Close asChild>\n            <IconButton\n              icon={<CloseIcon />}\n              aria-label=\"Close notification\"\n              // same as the button above\n              className=\"absolute top-2 right-2 text-body-300\"\n              variant=\"tertiary\"\n              size=\"24\"\n            />\n          </ToastPrimitive.Close>\n        )}\n      </ToastPrimitive.Root>\n    );\n  },\n);\n\nToast.displayName = \"Toast\";\n"],"names":["ToastPrimitive","React","jsx","cn","InfoIcon","WarningIcon","SuccessIcon","ErrorIcon","jsxs","Avatar","Button","IconButton","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,MAAM,gBAA8CA,0BAAe;AAEnE,MAAM,gBAAgBC,iBAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACF,0BAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAWG,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAOD,2BAAAA,IAACE,SAAAA,UAAA,EAAS,WAAU,uBAAA,CAAuB;AAAA,IACpD,KAAK;AACH,aAAOF,2BAAAA,IAACG,YAAAA,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAOH,2BAAAA,IAACI,YAAAA,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAOJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,wBAAA,CAAwB;AAAA,EAAA;AAE1D;AAEO,MAAM,QAAQN,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEO,2BAAAA;AAAAA,MAACR,0BAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWG,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAK,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAAN,2BAAAA,IAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,4CAAcO,eAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/EP,2BAAAA,IAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACAM,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,wCACER,0BAAe,OAAf,EAAqB,WAAU,8BAC7B,UAAA,OACH;AAAA,cAED,eACCE,2BAAAA,IAACF,0BAAe,aAAf,EAA2B,WAAU,6CACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACCE,2BAAAA;AAAAA,gBAACQ,OAAAA;AAAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACCR,2BAAAA,IAACF,0BAAe,OAAf,EAAqB,SAAO,MAC3B,UAAAE,2BAAAA;AAAAA,YAACS,WAAAA;AAAAA,YAAA;AAAA,cACC,qCAAOC,UAAAA,WAAA,EAAU;AAAA,cACjB,cAAW;AAAA,cAEX,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;;;"}

package/dist/cjs/index.cjs

@@ -0,0 +1,111 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Alert = require("./components/Alert/Alert.cjs");
+const Avatar = require("./components/Avatar/Avatar.cjs");
+const Badge = require("./components/Badge/Badge.cjs");
+const Button = require("./components/Button/Button.cjs");
+const Checkbox = require("./components/Checkbox/Checkbox.cjs");
+const Chip = require("./components/Chip/Chip.cjs");
+const Count = require("./components/Count/Count.cjs");
+const DatePicker = require("./components/DatePicker/DatePicker.cjs");
+const Divider = require("./components/Divider/Divider.cjs");
+const IconButton = require("./components/IconButton/IconButton.cjs");
+const ArrowRightIcon = require("./components/Icons/ArrowRightIcon.cjs");
+const ArrowUpRightIcon = require("./components/Icons/ArrowUpRightIcon.cjs");
+const CheckCircleIcon = require("./components/Icons/CheckCircleIcon.cjs");
+const CheckIcon = require("./components/Icons/CheckIcon.cjs");
+const ChevronLeftIcon = require("./components/Icons/ChevronLeftIcon.cjs");
+const ChevronRightIcon = require("./components/Icons/ChevronRightIcon.cjs");
+const CloseIcon = require("./components/Icons/CloseIcon.cjs");
+const CrossIcon = require("./components/Icons/CrossIcon.cjs");
+const CrownIcon = require("./components/Icons/CrownIcon.cjs");
+const ErrorCircleIcon = require("./components/Icons/ErrorCircleIcon.cjs");
+const ErrorIcon = require("./components/Icons/ErrorIcon.cjs");
+const FireIcon = require("./components/Icons/FireIcon.cjs");
+const HomeIcon = require("./components/Icons/HomeIcon.cjs");
+const InfoCircleIcon = require("./components/Icons/InfoCircleIcon.cjs");
+const InfoIcon = require("./components/Icons/InfoIcon.cjs");
+const MicrophoneIcon = require("./components/Icons/MicrophoneIcon.cjs");
+const MinusIcon = require("./components/Icons/MinusIcon.cjs");
+const PlusIcon = require("./components/Icons/PlusIcon.cjs");
+const SpinnerIcon = require("./components/Icons/SpinnerIcon.cjs");
+const StopIcon = require("./components/Icons/StopIcon.cjs");
+const SuccessIcon = require("./components/Icons/SuccessIcon.cjs");
+const VipBadgeIcon = require("./components/Icons/VipBadgeIcon.cjs");
+const WarningIcon = require("./components/Icons/WarningIcon.cjs");
+const WarningTriangleIcon = require("./components/Icons/WarningTriangleIcon.cjs");
+const Logo = require("./components/Logo/Logo.cjs");
+const Pagination = require("./components/Pagination/Pagination.cjs");
+const Pill = require("./components/Pill/Pill.cjs");
+const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
+const Radio = require("./components/Radio/Radio.cjs");
+const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
+const Slider = require("./components/Slider/Slider.cjs");
+const Snackbar = require("./components/Snackbar/Snackbar.cjs");
+const Switch = require("./components/Switch/Switch.cjs");
+const SwitchField = require("./components/SwitchField/SwitchField.cjs");
+const SwitchToggle = require("./components/SwitchToggle/SwitchToggle.cjs");
+const Tabs = require("./components/Tabs/Tabs.cjs");
+const TabsContent = require("./components/Tabs/TabsContent.cjs");
+const TabsList = require("./components/Tabs/TabsList.cjs");
+const TabsTrigger = require("./components/Tabs/TabsTrigger.cjs");
+const Toast = require("./components/Toast/Toast.cjs");
+const cn = require("./utils/cn.cjs");
+exports.Alert = Alert.Alert;
+exports.Avatar = Avatar.Avatar;
+exports.AvatarFallback = Avatar.AvatarFallback;
+exports.AvatarImage = Avatar.AvatarImage;
+exports.AvatarRoot = Avatar.AvatarRoot;
+exports.Badge = Badge.Badge;
+exports.Button = Button.Button;
+exports.Checkbox = Checkbox.Checkbox;
+exports.Chip = Chip.Chip;
+exports.Count = Count.Count;
+exports.DatePicker = DatePicker.DatePicker;
+exports.Divider = Divider.Divider;
+exports.IconButton = IconButton.IconButton;
+exports.ArrowRightIcon = ArrowRightIcon.ArrowRightIcon;
+exports.ArrowUpRightIcon = ArrowUpRightIcon.ArrowUpRightIcon;
+exports.CheckCircleIcon = CheckCircleIcon.CheckCircleIcon;
+exports.CheckIcon = CheckIcon.CheckIcon;
+exports.ChevronLeftIcon = ChevronLeftIcon.ChevronLeftIcon;
+exports.ChevronRightIcon = ChevronRightIcon.ChevronRightIcon;
+exports.CloseIcon = CloseIcon.CloseIcon;
+exports.CrossIcon = CrossIcon.CrossIcon;
+exports.CrownIcon = CrownIcon.CrownIcon;
+exports.ErrorCircleIcon = ErrorCircleIcon.ErrorCircleIcon;
+exports.ErrorIcon = ErrorIcon.ErrorIcon;
+exports.FireIcon = FireIcon.FireIcon;
+exports.HomeIcon = HomeIcon.HomeIcon;
+exports.InfoCircleIcon = InfoCircleIcon.InfoCircleIcon;
+exports.InfoIcon = InfoIcon.InfoIcon;
+exports.MicrophoneIcon = MicrophoneIcon.MicrophoneIcon;
+exports.MinusIcon = MinusIcon.MinusIcon;
+exports.PlusIcon = PlusIcon.PlusIcon;
+exports.SpinnerIcon = SpinnerIcon.SpinnerIcon;
+exports.StopIcon = StopIcon.StopIcon;
+exports.SuccessIcon = SuccessIcon.SuccessIcon;
+exports.VipBadgeIcon = VipBadgeIcon.VipBadgeIcon;
+exports.WarningIcon = WarningIcon.WarningIcon;
+exports.WarningTriangleIcon = WarningTriangleIcon.WarningTriangleIcon;
+exports.Logo = Logo.Logo;
+exports.Pagination = Pagination.Pagination;
+exports.Pill = Pill.Pill;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.Radio = Radio.Radio;
+exports.RadioGroup = RadioGroup.RadioGroup;
+exports.Slider = Slider.Slider;
+exports.Snackbar = Snackbar.Snackbar;
+exports.Switch = Switch.Switch;
+exports.SwitchField = SwitchField.SwitchField;
+exports.SwitchToggle = SwitchToggle.SwitchToggle;
+exports.Tabs = Tabs.Tabs;
+exports.TabsContent = TabsContent.TabsContent;
+exports.TabsList = TabsList.TabsList;
+exports.TabsTrigger = TabsTrigger.TabsTrigger;
+exports.Toast = Toast.Toast;
+exports.ToastProvider = Toast.ToastProvider;
+exports.ToastViewport = Toast.ToastViewport;
+exports.cn = cn.cn;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/utils/cn.cjs

@@ -0,0 +1,10 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+const tailwindMerge = require("tailwind-merge");
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+exports.cn = cn;
+//# sourceMappingURL=cn.cjs.map

package/dist/cjs/utils/cn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.cjs","sources":["../../../src/utils/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"names":["twMerge","clsx"],"mappings":";;;;;AAGO,SAAS,MAAM,QAA8B;AAClD,SAAOA,cAAAA,QAAQC,UAAK,MAAM,CAAC;AAC7B;;"}

package/dist/components/Alert/Alert.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { CrossIcon } from "../Icons/CrossIcon.mjs";
+const Alert = React.forwardRef(
+  ({ className, variant = "info", title, icon, closable = false, onClose, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-testid": "alert",
+        className: 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__ */ jsx("span", { className: "flex shrink-0 items-start", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
+            title && /* @__PURE__ */ jsx("div", { className: "typography-body-2-semibold text-body-100", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "typography-body-2-regular text-body-200", children })
+          ] }),
+          closable && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "24",
+              onClick: onClose,
+              className: "self-start",
+              "aria-label": "Close alert",
+              children: /* @__PURE__ */ jsx(CrossIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+export {
+  Alert
+};
+//# sourceMappingURL=Alert.mjs.map

package/dist/components/Alert/Alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.mjs","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":[],"mappings":";;;;;;AAoBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,QAAQ,OAAO,MAAM,WAAW,OAAO,SAAS,UAAU,GAAG,MAAA,GACpF,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW;AAAA,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,4BACE,QAAA,EAAK,WAAU,6BAA4B,eAAY,QACrD,UAAA,MACH;AAAA,UAGF,qBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,YAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,OAAM;AAAA,YAC3E,oBAAC,OAAA,EAAI,WAAU,2CAA2C,SAAA,CAAS;AAAA,UAAA,GACrE;AAAA,UAEC,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cACV,cAAW;AAAA,cAEX,8BAAC,WAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/Avatar/Avatar.mjs

@@ -0,0 +1,144 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const AvatarContext = React.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.forwardRef(
+  ({
+    className,
+    size = 40,
+    onlineIndicator = false,
+    platinumShow = false,
+    NSFWShow = false,
+    children,
+    ...props
+  }, ref) => {
+    const statusPosition = STATUS_POSITIONS[size];
+    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size, NSFWShow }, children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        AvatarPrimitive.Root,
+        {
+          ref,
+          "data-testid": "avatar",
+          className: 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__ */ 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__ */ 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.forwardRef(({ className, ...props }, ref) => {
+  const { NSFWShow } = React.useContext(AvatarContext);
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      ref,
+      className: cn("size-full bg-neutral-200 object-cover", NSFWShow && "blur-md", className),
+      ...props
+    }
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: 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.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__ */ jsx(AvatarRoot, { ...rootProps, children });
+    }
+    return /* @__PURE__ */ jsxs(AvatarRoot, { ...rootProps, children: [
+      src && /* @__PURE__ */ jsx(AvatarImage, { src, alt: alt ?? "Avatar" }),
+      /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  AvatarRoot
+};
+//# sourceMappingURL=Avatar.mjs.map

package/dist/components/Avatar/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","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":[],"mappings":"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"}