@fanvue/ui 0.1.0-alpha.3 → 1.1.0

package/dist/components/Badge/Badge.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+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.forwardRef(
+  ({
+    className,
+    variant = "default",
+    leftDot = true,
+    leftIcon,
+    rightIcon,
+    asChild = false,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "data-testid": "badge",
+        className: 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__ */ jsx("span", { className: "flex", "aria-hidden": "true", children: leftIcon }),
+          leftDot && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("size-1 shrink-0 rounded-full", badgeVariants.dotColor[variant]),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "flex", "aria-hidden": "true", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.mjs.map

package/dist/components/Badge/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","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 =\n  | \"default\"\n  | \"dark\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"special\"\n  | \"info\"\n  | \"online\"\n  | \"brand\"\n  | \"pink\"\n  | \"brandLight\"\n  | \"pinkLight\";\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":[],"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;AA6BO,MAAM,QAAQ,MAAM;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,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA,cAAc,QAAQ,OAAO;AAAA;AAAA,UAE7B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UACH;AAAA,UAED,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,gCAAgC,cAAc,SAAS,OAAO,CAAC;AAAA,cAC7E,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGhB,oBAAC,aAAW,UAAS;AAAA,UACpB,aACC,oBAAC,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/Button/Button.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { SpinnerIcon } from "../Icons/SpinnerIcon.mjs";
+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.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__ */ jsx("span", { className: "animate-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SpinnerIcon, { className: ICON_SIZE_CLASS[size], children: /* @__PURE__ */ jsx("title", { children: "Loading" }) }) });
+};
+function renderContent({
+  loading,
+  asChild,
+  children,
+  size,
+  leftIcon,
+  rightIcon,
+  iconSizeClass,
+  discount,
+  price
+}) {
+  if (loading) {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(
+        children,
+        void 0,
+        /* @__PURE__ */ jsx(LoadingSpinner, { size })
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(LoadingSpinner, { size }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children })
+    ] });
+  }
+  if (asChild) return children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("flex shrink-0 items-center justify-center", iconSizeClass),
+        "aria-hidden": "true",
+        children: leftIcon
+      }
+    ),
+    children,
+    rightIcon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("flex shrink-0 items-center justify-center", iconSizeClass),
+        "aria-hidden": "true",
+        children: rightIcon
+      }
+    ),
+    discount != null && /* @__PURE__ */ jsx("span", { className: "typography-body-1-regular line-through", "aria-hidden": "true", children: discount }),
+    price != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: price })
+  ] });
+}
+const Button = React.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    size = "48",
+    leftIcon,
+    rightIcon,
+    loading = false,
+    asChild = false,
+    disabled,
+    children,
+    discount,
+    price,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? 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__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...buttonSpecificProps,
+        "aria-busy": loading,
+        ...loadingLabelProps,
+        className: 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";
+export {
+  Button
+};
+//# sourceMappingURL=Button.mjs.map

package/dist/components/Button/Button.mjs.map

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

package/dist/components/Checkbox/Checkbox.mjs

@@ -0,0 +1,139 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { CheckIcon } from "../Icons/CheckIcon.mjs";
+import { MinusIcon } from "../Icons/MinusIcon.mjs";
+const Checkbox = React.forwardRef(
+  ({ className, size = "default", label, helperText, disabled, name, ...props }, ref) => {
+    const id = React.useId();
+    const helperTextId = helperText ? `${id}-helper` : void 0;
+    const hasLabel = Boolean(label || helperText);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const handleCheckedChange = (value) => {
+      const checked = value === true;
+      if (inputRef.current) {
+        inputRef.current.checked = checked;
+        inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      props.onCheckedChange?.(value);
+    };
+    const checkboxElement = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "relative inline-flex size-5 shrink-0",
+          // Alignment when used with label
+          label && (helperText ? "mt-1" : "mt-0.5")
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "checkbox",
+              name,
+              disabled,
+              "aria-hidden": true,
+              tabIndex: -1,
+              onChange: () => {
+              },
+              className: "pointer-events-none absolute size-px overflow-hidden opacity-0",
+              style: { clip: "rect(0,0,0,0)" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CheckboxPrimitive.Root,
+            {
+              id,
+              disabled,
+              "aria-describedby": helperTextId,
+              "data-testid": "checkbox",
+              ...props,
+              onCheckedChange: handleCheckedChange,
+              className: cn(
+                // Base styles
+                "flex size-5 items-center justify-center rounded border-2",
+                "transition-[border-color,background-color,color,box-shadow] duration-150",
+                // Default state
+                "border-body-100 bg-transparent text-transparent",
+                // Checked state
+                "data-[state=checked]:border-body-100 data-[state=checked]:bg-body-100 data-[state=checked]:text-body-300",
+                // Indeterminate state
+                "data-[state=indeterminate]:border-body-100 data-[state=indeterminate]:bg-body-100 data-[state=indeterminate]:text-body-300",
+                // Hover state
+                "hover:ring-2 hover:ring-brand-green-500 group-hover:ring-2 group-hover:ring-brand-green-500",
+                // Focus state
+                "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",
+                // Disabled state
+                "disabled:cursor-not-allowed disabled:border-disabled-400 disabled:ring-0 disabled:group-hover:ring-0",
+                "disabled:data-[state=checked]:border-disabled-400 disabled:data-[state=checked]:bg-disabled-400 disabled:data-[state=checked]:text-disabled-100",
+                !hasLabel && className
+              ),
+              children: /* @__PURE__ */ jsx(
+                CheckboxPrimitive.Indicator,
+                {
+                  forceMount: true,
+                  className: cn(
+                    "flex size-3 items-center justify-center text-body-300",
+                    "data-[state=unchecked]:invisible"
+                  ),
+                  children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+    if (!hasLabel) {
+      return checkboxElement;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex flex-col gap-0.5",
+          disabled && "is-disabled cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "group inline-flex items-start gap-2", children: [
+            checkboxElement,
+            label && /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: id,
+                className: cn(
+                  "cursor-pointer select-none text-body-100",
+                  "group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100",
+                  size === "small" ? "typography-body-2-semibold" : "typography-body-1-semibold"
+                ),
+                children: label
+              }
+            )
+          ] }),
+          helperText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: helperTextId,
+              className: cn(
+                "ml-7 text-body-200",
+                "in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-disabled-100",
+                size === "small" ? "typography-caption-regular" : "typography-body-2-regular"
+              ),
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\nexport type CheckboxSize = \"default\" | \"small\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant for label and helper text */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox */\n  label?: string;\n  /** Helper text displayed below the label */\n  helperText?: string;\n}\n\n/**\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for form library\n * compatibility. Libraries like react-hook-form call `register()` which expects an `HTMLInputElement`\n * ref. A hidden `<input>` is synced to the Radix checkbox state via `useImperativeHandle`.\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"default\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex size-5 shrink-0\",\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex size-5 items-center justify-center rounded border-2\",\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-body-100 bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-body-100 data-[state=checked]:bg-body-100 data-[state=checked]:text-body-300\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-body-100 data-[state=indeterminate]:bg-body-100 data-[state=indeterminate]:text-body-300\",\n            // Hover state\n            \"hover:ring-2 hover:ring-brand-green-500 group-hover:ring-2 group-hover:ring-brand-green-500\",\n            // Focus state\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            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-disabled-400 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-disabled-400 disabled:data-[state=checked]:bg-disabled-400 disabled:data-[state=checked]:text-disabled-100\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex size-3 items-center justify-center text-body-300\",\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-body-100\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100\",\n                size === \"small\" ? \"typography-body-2-semibold\" : \"typography-body-1-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-body-200\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-disabled-100\",\n              size === \"small\" ? \"typography-caption-regular\" : \"typography-body-2-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AACrF,UAAM,KAAK,MAAM,MAAA;AACjB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AACnD,UAAM,WAAW,QAAQ,SAAS,UAAU;AAG5C,UAAM,WAAW,MAAM,OAAyB,IAAI;AACpD,UAAM,oBAAoB,KAAK,MAAM,SAAS,OAA2B;AAEzE,UAAM,sBAAsB,CAAC,UAAqC;AAChE,YAAM,UAAU,UAAU;AAC1B,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,UAAU;AAC3B,iBAAS,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,MACvE;AACA,YAAM,kBAAkB,KAAK;AAAA,IAC/B;AAEA,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA;AAAA,UAEA,UAAU,aAAa,SAAS;AAAA,QAAA;AAAA,QAGlC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,eAAW;AAAA,cACX,UAAU;AAAA,cACV,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,WAAU;AAAA,cACV,OAAO,EAAE,MAAM,gBAAA;AAAA,YAAgB;AAAA,UAAA;AAAA,UAEjC;AAAA,YAAC,kBAAkB;AAAA,YAAlB;AAAA,cACC;AAAA,cACA;AAAA,cACA,oBAAkB;AAAA,cAClB,eAAY;AAAA,cACX,GAAG;AAAA,cACJ,iBAAiB;AAAA,cACjB,WAAW;AAAA;AAAA,gBAET;AAAA,gBACA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA,gBACA;AAAA,gBACA,CAAC,YAAY;AAAA,cAAA;AAAA,cAGf,UAAA;AAAA,gBAAC,kBAAkB;AAAA,gBAAlB;AAAA,kBACC,YAAU;AAAA,kBACV,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAGD,gBAAM,YAAY,sCAAmB,WAAA,EAAU,wBAAM,WAAA,CAAA,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClE;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAIJ,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,YAAA;AAAA,YACA,SACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,SAAS,UAAU,+BAA+B;AAAA,gBAAA;AAAA,gBAGnD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,UAAU,+BAA+B;AAAA,cAAA;AAAA,cAGnD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,SAAS,cAAc;"}

package/dist/components/Chip/Chip.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Chip = React.forwardRef(
+  ({
+    className,
+    variant = "rounded",
+    size = "32",
+    selected = false,
+    disabled = false,
+    leftDot = false,
+    leftIcon,
+    rightIcon,
+    notificationLabel,
+    onClick,
+    asChild = false,
+    children,
+    ...props
+  }, ref) => {
+    const isInteractive = !!onClick && !asChild;
+    const Comp = asChild ? Slot : isInteractive ? "button" : "span";
+    const isDark = variant === "dark";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "data-testid": "chip",
+        className: cn(
+          "typography-caption-semibold relative inline-flex items-center gap-2 px-3 transition-colors",
+          // Shape
+          variant === "square" ? "rounded-lg" : "rounded-full",
+          // Size
+          size === "32" && "h-8 py-1",
+          size === "40" && "h-10 py-2.5",
+          // Variant colors
+          isDark && "bg-background-800 text-body-white-solid-constant",
+          !isDark && selected && "bg-brand-green-50 text-neutral-400",
+          !isDark && !selected && "bg-neutral-100 text-neutral-400",
+          // Hover
+          isInteractive && !disabled && !isDark && selected && "hover:bg-brand-green-500 hover:text-body-black-solid-constant",
+          isInteractive && !disabled && !isDark && !selected && "hover:bg-hover-400",
+          // Focus
+          "focus-visible:shadow-focus-ring focus-visible:outline-none",
+          // Disabled
+          disabled && isDark && "pointer-events-none opacity-50",
+          disabled && !isDark && "pointer-events-none text-neutral-300",
+          className
+        ),
+        ...isInteractive && {
+          type: "button",
+          disabled,
+          "aria-pressed": selected,
+          onClick
+        },
+        ...!isInteractive && disabled && { "aria-disabled": true },
+        ...selected && { "data-selected": "" },
+        ...props,
+        children: [
+          leftDot && /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full bg-current", "aria-hidden": "true" }),
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: leftIcon }),
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: rightIcon }),
+          notificationLabel && /* @__PURE__ */ jsx("span", { className: "typography-caption-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-body-100 px-1 text-body-300", children: notificationLabel })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+export {
+  Chip
+};
+//# sourceMappingURL=Chip.mjs.map

package/dist/components/Chip/Chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.mjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type ChipVariant = \"rounded\" | \"square\" | \"dark\";\nexport type ChipSize = \"32\" | \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n  /** Visual shape variant of the chip */\n  variant?: ChipVariant;\n  /** Size of the chip */\n  size?: ChipSize;\n  /** Whether the chip is in a selected state */\n  selected?: boolean;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Show left status dot */\n  leftDot?: boolean;\n  /** Left icon element */\n  leftIcon?: React.ReactNode;\n  /** Right icon element */\n  rightIcon?: React.ReactNode;\n  /** Notification badge content (e.g., \"99+\"). Passed as a string for i18n support. */\n  notificationLabel?: string;\n  /** Click handler — when provided, the chip renders as a `<button>` for accessibility */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      className,\n      variant = \"rounded\",\n      size = \"32\",\n      selected = false,\n      disabled = false,\n      leftDot = false,\n      leftIcon,\n      rightIcon,\n      notificationLabel,\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"typography-caption-semibold relative inline-flex items-center gap-2 px-3 transition-colors\",\n          // Shape\n          variant === \"square\" ? \"rounded-lg\" : \"rounded-full\",\n          // Size\n          size === \"32\" && \"h-8 py-1\",\n          size === \"40\" && \"h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-background-800 text-body-white-solid-constant\",\n          !isDark && selected && \"bg-brand-green-50 text-neutral-400\",\n          !isDark && !selected && \"bg-neutral-100 text-neutral-400\",\n          // Hover\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            selected &&\n            \"hover:bg-brand-green-500 hover:text-body-black-solid-constant\",\n          isInteractive && !disabled && !isDark && !selected && \"hover:bg-hover-400\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-neutral-300\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {leftDot && <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />}\n        {leftIcon && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        <Slottable>{children}</Slottable>\n        {rightIcon && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n        {notificationLabel && (\n          <span className=\"typography-caption-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-body-100 px-1 text-body-300\">\n            {notificationLabel}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAU,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY;AAAA;AAAA,UAExB,iBACE,CAAC,YACD,CAAC,UACD,YACA;AAAA,UACF,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY;AAAA;AAAA,UAEtD;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,WAAW,oBAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,UACxF,YACC,oBAAC,QAAA,EAAK,WAAU,oDAAmD,eAAY,QAC5E,UAAA,UACH;AAAA,UAEF,oBAAC,aAAW,UAAS;AAAA,UACpB,aACC,oBAAC,QAAA,EAAK,WAAU,oDAAmD,eAAY,QAC5E,UAAA,WACH;AAAA,UAED,qBACC,oBAAC,QAAA,EAAK,WAAU,iJACb,UAAA,kBAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/Count/Count.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+function getDisplayValue(value, max) {
+  return value > max ? `${max}+` : value.toString();
+}
+const Count = React.forwardRef(
+  ({ className, variant = "default", value = 0, max = 99, asChild = false, children, ...props }, ref) => {
+    if (value === 0 && !children) {
+      return null;
+    }
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "typography-caption-semibold inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 tabular-nums leading-none",
+          variant === "default" && "bg-error-500 text-body-white-solid-constant",
+          variant === "brand" && "bg-brand-green-500 text-body-black-solid-constant",
+          variant === "pink" && "bg-brand-pink-500 text-body-black-solid-constant",
+          variant === "info" && "bg-info-500 text-body-white-solid-constant",
+          variant === "success" && "bg-success-500 text-body-white-solid-constant",
+          variant === "warning" && "bg-warning-500 text-body-black-solid-constant",
+          className
+        ),
+        ...props,
+        children: children ?? getDisplayValue(value, max)
+      }
+    );
+  }
+);
+Count.displayName = "Count";
+export {
+  Count
+};
+//# sourceMappingURL=Count.mjs.map

package/dist/components/Count/Count.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Count.mjs","sources":["../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CountVariant = \"default\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the count */\n  variant?: CountVariant;\n  /** The count value to display */\n  value?: number;\n  /** Maximum value to display before showing overflow (e.g., \"99+\") */\n  max?: number;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    { className, variant = \"default\", value = 0, max = 99, asChild = false, children, ...props },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 tabular-nums leading-none\",\n          variant === \"default\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":[],"mappings":";;;;;AAMA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAaO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,WAAW,QAAQ,GAAG,MAAM,IAAI,UAAU,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;"}