@fanvue/ui 1.14.1 → 1.16.0

package/dist/cjs/components/Skeleton/Skeleton.cjs

@@ -0,0 +1,61 @@
+"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");
+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 VARIANT_CLASSES = {
+  text: "rounded my-0.5",
+  circular: "rounded-full",
+  rectangular: "",
+  rounded: "rounded-lg"
+};
+const Skeleton = React__namespace.forwardRef(
+  ({ className, variant = "text", animation = "pulse", width, height, style, children, ...props }, ref) => {
+    const hasChildren = React__namespace.Children.count(children) > 0;
+    const sizeStyle = {
+      ...style,
+      ...width !== void 0 && { width: typeof width === "number" ? `${width}px` : width },
+      ...height !== void 0 && { height: typeof height === "number" ? `${height}px` : height }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn.cn(
+          "block bg-neutral-200 dark:bg-neutral-200",
+          VARIANT_CLASSES[variant],
+          variant === "text" && !height && !hasChildren && "h-[1em]",
+          animation === "pulse" && "animate-pulse",
+          animation === "wave" && "fv-skeleton-wave",
+          hasChildren && "relative overflow-hidden [&>*]:invisible",
+          className
+        ),
+        style: sizeStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+exports.Skeleton = Skeleton;
+//# sourceMappingURL=Skeleton.cjs.map

package/dist/cjs/components/Skeleton/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.cjs","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Shape variant of the skeleton placeholder. */\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\n\n/** Animation style of the skeleton. `false` disables animation. */\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | false;\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Shape variant of the skeleton.\n   *\n   * - `text` – a single line of text with slight vertical margin and rounded ends\n   * - `circular` – a circle (width and height should match)\n   * - `rectangular` – a sharp-cornered rectangle\n   * - `rounded` – a rectangle with rounded corners\n   *\n   * @default \"text\"\n   */\n  variant?: SkeletonVariant;\n  /** Animation style. Set to `false` to disable animation. @default \"pulse\" */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton. Accepts a CSS value (number is treated as `px`). */\n  width?: number | string;\n  /** Height of the skeleton. Accepts a CSS value (number is treated as `px`). */\n  height?: number | string;\n}\n\nconst VARIANT_CLASSES: Record<SkeletonVariant, string> = {\n  text: \"rounded my-0.5\",\n  circular: \"rounded-full\",\n  rectangular: \"\",\n  rounded: \"rounded-lg\",\n};\n\n/**\n * A placeholder preview of content before data is loaded, reducing perceived\n * load time. Mirrors common MUI Skeleton props for easy migration.\n *\n * When used as a loading state, wrap the skeleton region with `aria-busy=\"true\"`\n * and provide an accessible label so screen readers can convey the loading state.\n *\n * @example\n * ```tsx\n * <Skeleton variant=\"text\" width={200} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * <Skeleton variant=\"rectangular\" width=\"100%\" height={120} />\n * ```\n */\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n  (\n    { className, variant = \"text\", animation = \"pulse\", width, height, style, children, ...props },\n    ref,\n  ) => {\n    const hasChildren = React.Children.count(children) > 0;\n    const sizeStyle: React.CSSProperties = {\n      ...style,\n      ...(width !== undefined && { width: typeof width === \"number\" ? `${width}px` : width }),\n      ...(height !== undefined && { height: typeof height === \"number\" ? `${height}px` : height }),\n    };\n\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\n          \"block bg-neutral-200 dark:bg-neutral-200\",\n          VARIANT_CLASSES[variant],\n          variant === \"text\" && !height && !hasChildren && \"h-[1em]\",\n          animation === \"pulse\" && \"animate-pulse\",\n          animation === \"wave\" && \"fv-skeleton-wave\",\n          hasChildren && \"relative overflow-hidden [&>*]:invisible\",\n          className,\n        )}\n        style={sizeStyle}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AACX;AAgBO,MAAM,WAAWA,iBAAM;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,QAAQ,YAAY,SAAS,OAAO,QAAQ,OAAO,UAAU,GAAG,MAAA,GACvF,QACG;AACH,UAAM,cAAcA,iBAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,YAAiC;AAAA,MACrC,GAAG;AAAA,MACH,GAAI,UAAU,UAAa,EAAE,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO,MAAA;AAAA,MAC/E,GAAI,WAAW,UAAa,EAAE,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO,OAAA;AAAA,IAAO;AAG5F,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,gBAAgB,OAAO;AAAA,UACvB,YAAY,UAAU,CAAC,UAAU,CAAC,eAAe;AAAA,UACjD,cAAc,WAAW;AAAA,UACzB,cAAc,UAAU;AAAA,UACxB,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,SAAS,cAAc;;"}

package/dist/cjs/components/SwitchToggle/SwitchToggle.cjs

@@ -105,13 +105,13 @@ const SwitchToggle = React__namespace.forwardRef(
                   onClick: () => handleSelect(option.value),
                   onKeyDown: (e) => handleKeyDown(e, index),
                   className: cn.cn(
-                    "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-foreground-default",
+                    "relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-foreground-default",
                     "focus-visible:shadow-focus-ring focus-visible:outline-none",
                     "active:rounded-full active:bg-brand-accent-muted",
                     disabled && "pointer-events-none",
                     sizeClass
                   ),
-                  children: option.label
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
                 },
                 option.value
               )

package/dist/cjs/components/SwitchToggle/SwitchToggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchToggle.cjs","sources":["../../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the switch toggle in pixels. */\nexport type SwitchToggleSize = \"24\" | \"32\" | \"40\";\n\n/** Describes one side of the binary toggle. */\nexport interface SwitchToggleOption {\n  /** Display label for the option. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the toggle in pixels. @default \"24\" */\n  size?: SwitchToggleSize;\n  /** The two options to toggle between (exactly two required). */\n  options: [SwitchToggleOption, SwitchToggleOption];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the toggle is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SwitchToggle: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A binary segmented toggle rendered as a `radiogroup`. The active option is\n * highlighted with a sliding pill indicator. Supports both controlled and\n * uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SwitchToggle\n *   options={[\n *     { label: \"Monthly\", value: \"monthly\" },\n *     { label: \"Yearly\", value: \"yearly\" },\n *   ]}\n *   value={billing}\n *   onChange={setBilling}\n * />\n * ```\n */\nexport const SwitchToggle = React.forwardRef<HTMLDivElement, SwitchToggleProps>(\n  (\n    {\n      className,\n      size = \"24\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const isSecondSelected = currentValue === options[1].value;\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const sizeClass =\n      size === \"24\"\n        ? \"px-2 py-1 typography-semibold-body-sm\"\n        : size === \"32\"\n          ? \"px-3 py-1.75 typography-semibold-body-md\"\n          : \"h-10 px-4 py-2.25 typography-semibold-body-lg\";\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as (typeof options)[number];\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative inline-grid grid-cols-2 rounded-full border border-neutral-200 p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-accent-default bg-brand-accent-muted\",\n            \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n            isSecondSelected && \"translate-x-full\",\n          )}\n        />\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-foreground-default\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                \"active:rounded-full active:bg-brand-accent-muted\",\n                disabled && \"pointer-events-none\",\n                sizeClass,\n              )}\n            >\n              {option.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"SwitchToggle.cjs","sources":["../../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the switch toggle in pixels. */\nexport type SwitchToggleSize = \"24\" | \"32\" | \"40\";\n\n/** Describes one side of the binary toggle. */\nexport interface SwitchToggleOption {\n  /** Display label for the option. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the toggle in pixels. @default \"24\" */\n  size?: SwitchToggleSize;\n  /** The two options to toggle between (exactly two required). */\n  options: [SwitchToggleOption, SwitchToggleOption];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the toggle is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SwitchToggle: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A binary segmented toggle rendered as a `radiogroup`. The active option is\n * highlighted with a sliding pill indicator. Supports both controlled and\n * uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SwitchToggle\n *   options={[\n *     { label: \"Monthly\", value: \"monthly\" },\n *     { label: \"Yearly\", value: \"yearly\" },\n *   ]}\n *   value={billing}\n *   onChange={setBilling}\n * />\n * ```\n */\nexport const SwitchToggle = React.forwardRef<HTMLDivElement, SwitchToggleProps>(\n  (\n    {\n      className,\n      size = \"24\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const isSecondSelected = currentValue === options[1].value;\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const sizeClass =\n      size === \"24\"\n        ? \"px-2 py-1 typography-semibold-body-sm\"\n        : size === \"32\"\n          ? \"px-3 py-1.75 typography-semibold-body-md\"\n          : \"h-10 px-4 py-2.25 typography-semibold-body-lg\";\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as (typeof options)[number];\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative inline-grid grid-cols-2 rounded-full border border-neutral-200 p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-accent-default bg-brand-accent-muted\",\n            \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n            isSecondSelected && \"translate-x-full\",\n          )}\n        />\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative z-10 inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-foreground-default\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                \"active:rounded-full active:bg-brand-accent-muted\",\n                disabled && \"pointer-events-none\",\n                sizeClass,\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}

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

@@ -23,12 +23,12 @@ function _interopNamespaceDefault(e) {
 }
 const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+const TabsTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
     className: cn.cn(
-      "inline-flex items-center justify-center",
+      "inline-flex min-w-0 items-center justify-center",
       "rounded-xs",
       "typography-semibold-body-lg cursor-pointer text-foreground-default",
       "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
@@ -44,7 +44,8 @@ const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) =
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
       className
     ),
-    ...props
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children })
   }
 ));
 TabsTrigger.displayName = "TabsTrigger";

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

@@ -1 +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\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\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\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,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,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}
+{"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\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,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,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}

package/dist/cjs/components/Tooltip/Tooltip.cjs

@@ -76,9 +76,10 @@ const TooltipContent = React__namespace.forwardRef(
       {
         ref,
         sideOffset,
+        collisionPadding: 8,
         style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
         className: cn.cn(
-          "typography-regular-body-md max-w-[320px] overflow-hidden rounded-3xl bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
+          "typography-regular-body-md max-h-[var(--radix-tooltip-content-available-height)] max-w-[320px] overflow-hidden rounded-3xl bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
           isInfobox && "border border-neutral-200",
           className
         ),

package/dist/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\nconst ActionButton = ({\n  action,\n  variant,\n}: {\n  action: TooltipAction;\n  variant: \"brand\" | \"tertiary\";\n}) =>\n  action.element ? (\n    action.element\n  ) : (\n    <Button variant={variant} size=\"32\" onClick={action.onClick}>\n      {action.label}\n    </Button>\n  );\n\nconst InfoboxContent = ({\n  icon,\n  heading,\n  pill,\n  children,\n  primaryAction,\n  secondaryAction,\n  hasHeader,\n  hasActions,\n}: {\n  icon?: React.ReactNode;\n  heading?: React.ReactNode;\n  pill?: React.ReactNode;\n  children?: React.ReactNode;\n  primaryAction?: TooltipAction;\n  secondaryAction?: TooltipAction;\n  hasHeader: boolean;\n  hasActions: boolean;\n}) => (\n  <div className=\"flex flex-col gap-3\">\n    {hasHeader && (\n      <div className=\"flex items-center gap-3\">\n        {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n        {heading && (\n          <p className=\"typography-semibold-body-lg min-w-0 flex-1 text-foreground-inverse\">\n            {heading}\n          </p>\n        )}\n        {pill && <div className=\"shrink-0\">{pill}</div>}\n      </div>\n    )}\n    {children && (\n      <div className=\"typography-regular-body-md text-foreground-inverse\">{children}</div>\n    )}\n    {hasActions && (\n      <div className=\"flex items-center gap-1\">\n        {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n        {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n      </div>\n    )}\n  </div>\n);\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-regular-body-md max-w-[320px] overflow-hidden rounded-3xl bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <InfoboxContent\n              icon={icon}\n              heading={heading}\n              pill={pill}\n              primaryAction={primaryAction}\n              secondaryAction={secondaryAction}\n              hasHeader={hasHeader}\n              hasActions={hasActions}\n            >\n              {children}\n            </InfoboxContent>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\n                \"-translate-y-px! fill-surface-pageinverse stroke-2 stroke-surface-pageinverse\"\n              }\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","jsx","Button","jsxs","React","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,kBAAkBA,4BAAiB;AAgBzC,MAAM,UAAUA,4BAAiB;AAMjC,MAAM,iBAAiBA,4BAAiB;AA+D/C,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,OAAO,UACL,OAAO,UAEPC,2BAAAA,IAACC,OAAAA,QAAA,EAAO,SAAkB,MAAK,MAAK,SAAS,OAAO,SACjD,iBAAO,OACV;AAGJ,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,EAAA,aACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,QAAQF,2BAAAA,IAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,IAC/C,WACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,sEACV,UAAA,SACH;AAAA,IAED,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,EAAA,GAC3C;AAAA,EAED,YACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,sDAAsD,UAAS;AAAA,EAE/E,cACCE,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,iBAAiBF,2BAAAA,IAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,IACtE,mBAAmBA,2BAAAA,IAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,EAAA,EAAA,CAChF;AAAA,GAEJ;AAyBK,MAAM,iBAAiBG,iBAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACEH,2BAAAA,IAACD,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,MAACH,4BAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAWK,GAAAA;AAAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACCJ,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UAAA,IAGH;AAAA,UAED,aACCA,2BAAAA;AAAAA,YAACD,4BAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\nconst ActionButton = ({\n  action,\n  variant,\n}: {\n  action: TooltipAction;\n  variant: \"brand\" | \"tertiary\";\n}) =>\n  action.element ? (\n    action.element\n  ) : (\n    <Button variant={variant} size=\"32\" onClick={action.onClick}>\n      {action.label}\n    </Button>\n  );\n\nconst InfoboxContent = ({\n  icon,\n  heading,\n  pill,\n  children,\n  primaryAction,\n  secondaryAction,\n  hasHeader,\n  hasActions,\n}: {\n  icon?: React.ReactNode;\n  heading?: React.ReactNode;\n  pill?: React.ReactNode;\n  children?: React.ReactNode;\n  primaryAction?: TooltipAction;\n  secondaryAction?: TooltipAction;\n  hasHeader: boolean;\n  hasActions: boolean;\n}) => (\n  <div className=\"flex flex-col gap-3\">\n    {hasHeader && (\n      <div className=\"flex items-center gap-3\">\n        {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n        {heading && (\n          <p className=\"typography-semibold-body-lg min-w-0 flex-1 text-foreground-inverse\">\n            {heading}\n          </p>\n        )}\n        {pill && <div className=\"shrink-0\">{pill}</div>}\n      </div>\n    )}\n    {children && (\n      <div className=\"typography-regular-body-md text-foreground-inverse\">{children}</div>\n    )}\n    {hasActions && (\n      <div className=\"flex items-center gap-1\">\n        {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n        {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n      </div>\n    )}\n  </div>\n);\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          collisionPadding={8}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-regular-body-md max-h-[var(--radix-tooltip-content-available-height)] max-w-[320px] overflow-hidden rounded-3xl bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <InfoboxContent\n              icon={icon}\n              heading={heading}\n              pill={pill}\n              primaryAction={primaryAction}\n              secondaryAction={secondaryAction}\n              hasHeader={hasHeader}\n              hasActions={hasActions}\n            >\n              {children}\n            </InfoboxContent>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\n                \"-translate-y-px! fill-surface-pageinverse stroke-2 stroke-surface-pageinverse\"\n              }\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","jsx","Button","jsxs","React","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,kBAAkBA,4BAAiB;AAgBzC,MAAM,UAAUA,4BAAiB;AAMjC,MAAM,iBAAiBA,4BAAiB;AA+D/C,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,OAAO,UACL,OAAO,UAEPC,2BAAAA,IAACC,OAAAA,QAAA,EAAO,SAAkB,MAAK,MAAK,SAAS,OAAO,SACjD,iBAAO,OACV;AAGJ,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,EAAA,aACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,QAAQF,2BAAAA,IAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,IAC/C,WACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,sEACV,UAAA,SACH;AAAA,IAED,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,EAAA,GAC3C;AAAA,EAED,YACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,sDAAsD,UAAS;AAAA,EAE/E,cACCE,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,iBAAiBF,2BAAAA,IAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,IACtE,mBAAmBA,2BAAAA,IAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,EAAA,EAAA,CAChF;AAAA,GAEJ;AAyBK,MAAM,iBAAiBG,iBAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACEH,2BAAAA,IAACD,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,MAACH,4BAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAWK,GAAAA;AAAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACCJ,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UAAA,IAGH;AAAA,UAED,aACCA,2BAAAA;AAAAA,YAACD,4BAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;;;"}

package/dist/cjs/index.cjs

@@ -6,7 +6,9 @@ const AudioUpload = require("./components/AudioUpload/AudioUpload.cjs");
 const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs");
 const Avatar = require("./components/Avatar/Avatar.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
+const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
+const Card = require("./components/Card/Card.cjs");
 const Checkbox = require("./components/Checkbox/Checkbox.cjs");
 const Chip = require("./components/Chip/Chip.cjs");
 const Count = require("./components/Count/Count.cjs");
@@ -139,6 +141,7 @@ const Radio = require("./components/Radio/Radio.cjs");
 const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
 const SearchField = require("./components/SearchField/SearchField.cjs");
 const Select = require("./components/Select/Select.cjs");
+const Skeleton = require("./components/Skeleton/Skeleton.cjs");
 const Slider = require("./components/Slider/Slider.cjs");
 const Snackbar = require("./components/Snackbar/Snackbar.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
@@ -161,7 +164,19 @@ exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
 exports.AvatarRoot = Avatar.AvatarRoot;
 exports.Badge = Badge.Badge;
+exports.Breadcrumb = Breadcrumb.Breadcrumb;
+exports.BreadcrumbItem = Breadcrumb.BreadcrumbItem;
+exports.BreadcrumbLink = Breadcrumb.BreadcrumbLink;
+exports.BreadcrumbList = Breadcrumb.BreadcrumbList;
+exports.BreadcrumbPage = Breadcrumb.BreadcrumbPage;
+exports.BreadcrumbSeparator = Breadcrumb.BreadcrumbSeparator;
 exports.Button = Button.Button;
+exports.Card = Card.Card;
+exports.CardContent = Card.CardContent;
+exports.CardDescription = Card.CardDescription;
+exports.CardFooter = Card.CardFooter;
+exports.CardHeader = Card.CardHeader;
+exports.CardTitle = Card.CardTitle;
 exports.Checkbox = Checkbox.Checkbox;
 exports.Chip = Chip.Chip;
 exports.Count = Count.Count;
@@ -299,6 +314,7 @@ exports.SelectGroup = Select.SelectGroup;
 exports.SelectItem = Select.SelectItem;
 exports.SelectLabel = Select.SelectLabel;
 exports.SelectSeparator = Select.SelectSeparator;
+exports.Skeleton = Skeleton.Skeleton;
 exports.Slider = Slider.Slider;
 exports.Snackbar = Snackbar.Snackbar;
 exports.Switch = Switch.Switch;

package/dist/cjs/index.cjs.map

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

package/dist/components/Badge/Badge.mjs

@@ -53,7 +53,7 @@ const Badge = React.forwardRef(
         "data-testid": "badge",
         className: cn(
           // Base styles
-          "typography-semibold-body-sm inline-flex h-5 items-center gap-2 rounded-full px-2",
+          "typography-semibold-body-sm inline-flex h-5 min-w-0 items-center gap-2 rounded-full px-2",
           // Variant styles
           badgeVariants.variant[variant],
           // Interactive
@@ -72,7 +72,7 @@ const Badge = React.forwardRef(
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx(Slottable, { children }),
+          asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
           rightIcon && /* @__PURE__ */ jsx("span", { className: "flex size-3", "aria-hidden": "true", children: rightIcon })
         ]
       }

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

@@ -1 +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-foreground-secondary\",\n    dark: \"bg-neutral-50 text-foreground-inverse dark:text-foreground-onaccentinverse\",\n    success: \"bg-neutral-100 text-foreground-secondary\",\n    warning: \"bg-neutral-100 text-foreground-secondary\",\n    error: \"bg-neutral-100 text-foreground-secondary\",\n    special: \"bg-neutral-100 text-foreground-secondary\",\n    info: \"bg-neutral-100 text-foreground-secondary\",\n    online: \"bg-neutral-100 text-brand-accent-default\",\n    brand: \"bg-brand-accent-default text-foreground-onaccent\",\n    pink: \"bg-brand-secondary-default text-foreground-onaccent\",\n    brandLight: \"bg-brand-accent-muted text-foreground-onaccent\",\n    pinkLight: \"bg-brand-secondary-muted text-foreground-onaccent\",\n  },\n  dotColor: {\n    default: \"bg-foreground-onaccent\",\n    dark: \"bg-foreground-inverse dark:bg-foreground-onaccentinverse\",\n    success: \"bg-success-default\",\n    warning: \"bg-warning-default\",\n    error: \"bg-error-default\",\n    special: \"bg-special-default\",\n    info: \"bg-info-default\",\n    online: \"bg-brand-accent-default\",\n    brand: \"bg-foreground-onaccent\",\n    pink: \"bg-foreground-onaccent\",\n    brandLight: \"bg-foreground-onaccent\",\n    pinkLight: \"bg-foreground-onaccent\",\n  },\n} as const;\n\n/** Visual style variant of the badge. */\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. @default \"default\" */\n  variant?: BadgeVariant;\n  /** Whether to show a coloured status dot at the leading edge. @default true */\n  leftDot?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small inline label for status, category, or metadata information.\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\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      onClick,\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-semibold-body-sm inline-flex h-5 items-center gap-2 rounded-full px-2\",\n          // Variant styles\n          badgeVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex size-3\" 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 size-3\" 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;AAsCO,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;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,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,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,eAAc,eAAY,QACvC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}
+{"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-foreground-secondary\",\n    dark: \"bg-neutral-50 text-foreground-inverse dark:text-foreground-onaccentinverse\",\n    success: \"bg-neutral-100 text-foreground-secondary\",\n    warning: \"bg-neutral-100 text-foreground-secondary\",\n    error: \"bg-neutral-100 text-foreground-secondary\",\n    special: \"bg-neutral-100 text-foreground-secondary\",\n    info: \"bg-neutral-100 text-foreground-secondary\",\n    online: \"bg-neutral-100 text-brand-accent-default\",\n    brand: \"bg-brand-accent-default text-foreground-onaccent\",\n    pink: \"bg-brand-secondary-default text-foreground-onaccent\",\n    brandLight: \"bg-brand-accent-muted text-foreground-onaccent\",\n    pinkLight: \"bg-brand-secondary-muted text-foreground-onaccent\",\n  },\n  dotColor: {\n    default: \"bg-foreground-onaccent\",\n    dark: \"bg-foreground-inverse dark:bg-foreground-onaccentinverse\",\n    success: \"bg-success-default\",\n    warning: \"bg-warning-default\",\n    error: \"bg-error-default\",\n    special: \"bg-special-default\",\n    info: \"bg-info-default\",\n    online: \"bg-brand-accent-default\",\n    brand: \"bg-foreground-onaccent\",\n    pink: \"bg-foreground-onaccent\",\n    brandLight: \"bg-foreground-onaccent\",\n    pinkLight: \"bg-foreground-onaccent\",\n  },\n} as const;\n\n/** Visual style variant of the badge. */\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. @default \"default\" */\n  variant?: BadgeVariant;\n  /** Whether to show a coloured status dot at the leading edge. @default true */\n  leftDot?: boolean;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A small inline label for status, category, or metadata information.\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\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      onClick,\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-semibold-body-sm inline-flex h-5 min-w-0 items-center gap-2 rounded-full px-2\",\n          // Variant styles\n          badgeVariants.variant[variant],\n          // Interactive\n          onClick && \"cursor-pointer\",\n          // Manual CSS overrides\n          className,\n        )}\n        onClick={onClick}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex size-3\" 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        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"min-w-0 truncate\">{children}</span>\n        )}\n        {rightIcon && (\n          <span className=\"flex size-3\" 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;AAsCO,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;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,WAAW;AAAA;AAAA,UAEX;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,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,UAGf,8BACE,WAAA,EAAW,SAAA,CAAS,IAErB,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,UAE9C,aACC,oBAAC,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/Breadcrumb/Breadcrumb.mjs

@@ -0,0 +1,79 @@
+"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";
+import { ChevronRightIcon } from "../Icons/ChevronRightIcon.mjs";
+const Breadcrumb = React.forwardRef(
+  ({ "aria-label": ariaLabel = "breadcrumb", ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": ariaLabel, ...props })
+);
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(
+  ({ className, children, separator, ...props }, ref) => {
+    const items = React.Children.toArray(children);
+    const withSeparators = items.flatMap((child, index) => {
+      const childKey = React.isValidElement(child) ? child.key : index;
+      return index === 0 ? [child] : [
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator }, `sep-before-${childKey}`),
+        child
+      ];
+    });
+    return /* @__PURE__ */ jsx("ol", { ref, className: cn("flex flex-wrap items-center gap-2", className), ...props, children: withSeparators });
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center gap-2", className), ...props })
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(
+  ({ asChild = false, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "typography-regular-body-sm rounded-sm text-foreground-secondary underline-offset-2 transition-colors hover:text-foreground-default hover:underline focus-visible:shadow-focus-ring focus-visible:outline-none",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-current": "page",
+      className: cn("typography-semibold-body-sm text-foreground-default", className),
+      ...props
+    }
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn("flex items-center text-foreground-secondary", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+    }
+  )
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};
+//# sourceMappingURL=Breadcrumb.mjs.map

package/dist/components/Breadcrumb/Breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.mjs","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<\"nav\"> {\n  /** Accessible label for the breadcrumb navigation landmark. @default \"breadcrumb\" */\n  \"aria-label\"?: string;\n}\n\n/**\n * Root navigation wrapper for the breadcrumb trail.\n *\n * @example\n * ```tsx\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbPage>Current Page</BreadcrumbPage></BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n * ```\n */\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ \"aria-label\": ariaLabel = \"breadcrumb\", ...props }, ref) => (\n    <nav ref={ref} aria-label={ariaLabel} {...props} />\n  ),\n);\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport interface BreadcrumbListProps extends React.ComponentPropsWithoutRef<\"ol\"> {\n  /** Custom separator element rendered between items. @default ChevronRightIcon */\n  separator?: React.ReactNode;\n}\n\n/**\n * Ordered list container for breadcrumb items. Automatically injects a\n * separator between each child item.\n */\nexport const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  ({ className, children, separator, ...props }, ref) => {\n    const items = React.Children.toArray(children);\n    const withSeparators = items.flatMap((child, index) => {\n      const childKey = React.isValidElement(child) ? child.key : index;\n      return index === 0\n        ? [child]\n        : [\n            <BreadcrumbSeparator key={`sep-before-${childKey}`}>{separator}</BreadcrumbSeparator>,\n            child,\n          ];\n    });\n\n    return (\n      <ol ref={ref} className={cn(\"flex flex-wrap items-center gap-2\", className)} {...props}>\n        {withSeparators}\n      </ol>\n    );\n  },\n);\n\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<\"li\"> {}\n\n/**\n * List item wrapper for a single breadcrumb entry or separator.\n */\nexport const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn(\"inline-flex items-center gap-2\", className)} {...props} />\n  ),\n);\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<\"a\"> {\n  /** Render the link as a child element (e.g. a router `Link`). @default false */\n  asChild?: boolean;\n}\n\n/**\n * Anchor element for a non-current breadcrumb step. Supports `asChild` for\n * router-aware link components.\n */\nexport const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild = false, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"a\";\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-regular-body-sm rounded-sm text-foreground-secondary underline-offset-2 transition-colors hover:text-foreground-default hover:underline focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nexport interface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<\"span\"> {}\n\n/**\n * Non-interactive label representing the current page in the breadcrumb trail.\n */\nexport const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-current=\"page\"\n      className={cn(\"typography-semibold-body-sm text-foreground-default\", className)}\n      {...props}\n    />\n  ),\n);\n\nBreadcrumbPage.displayName = \"BreadcrumbPage\";\n\nexport interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<\"li\"> {}\n\n/**\n * Visual separator rendered between breadcrumb items.\n * Renders a right-pointing chevron icon and is hidden from assistive technology.\n */\nexport const BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ className, children, ...props }, ref) => (\n    <li\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\"flex items-center text-foreground-secondary\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon className=\"size-4\" />}\n    </li>\n  ),\n);\n\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\";\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,cAAc,YAAY,cAAc,GAAG,MAAA,GAAS,4BACpD,OAAA,EAAI,KAAU,cAAY,WAAY,GAAG,MAAA,CAAO;AAErD;AAEA,WAAW,cAAc;AAWlB,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACrD,UAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,UAAM,iBAAiB,MAAM,QAAQ,CAAC,OAAO,UAAU;AACrD,YAAM,WAAW,MAAM,eAAe,KAAK,IAAI,MAAM,MAAM;AAC3D,aAAO,UAAU,IACb,CAAC,KAAK,IACN;AAAA,QACE,oBAAC,qBAAA,EAAoD,UAAA,UAAA,GAA3B,cAAc,QAAQ,EAAe;AAAA,QAC/D;AAAA,MAAA;AAAA,IAER,CAAC;AAED,WACE,oBAAC,MAAA,EAAG,KAAU,WAAW,GAAG,qCAAqC,SAAS,GAAI,GAAG,OAC9E,UAAA,eAAA,CACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAOtB,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB,oBAAC,MAAA,EAAG,KAAU,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,MAAA,CAAO;AAEzF;AAEA,eAAe,cAAc;AAWtB,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,EAAE,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACjD,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;AAOtB,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAa;AAAA,MACb,WAAW,GAAG,uDAAuD,SAAS;AAAA,MAC7E,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,eAAe,cAAc;AAQtB,MAAM,sBAAsB,MAAM;AAAA,EACvC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAClC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACZ,WAAW,GAAG,+CAA+C,SAAS;AAAA,MACrE,GAAG;AAAA,MAEH,UAAA,YAAY,oBAAC,kBAAA,EAAiB,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGxD;AAEA,oBAAoB,cAAc;"}

package/dist/components/Button/Button.mjs

@@ -82,7 +82,10 @@ function renderContent({
         children: leftIcon
       }
     ),
-    children,
+    React.Children.map(
+      children,
+      (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child }) : child
+    ),
     rightIcon && /* @__PURE__ */ jsx(
       "span",
       {
@@ -142,7 +145,7 @@ const Button = React.forwardRef(
         ...loadingLabelProps,
         className: cn(
           // Base styles
-          "inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors",
+          "inline-flex min-w-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors",
           // Focus ring
           "focus-visible:shadow-focus-ring focus-visible:outline-none",
           // Disabled state

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

@@ -1 +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\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n  /** When `true`, the button will take the full width of its container. @default false */\n  fullWidth?: boolean;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-semibold-body-lg\",\n  \"40\": \"h-10 px-4 py-2 typography-semibold-body-lg\",\n  \"32\": \"h-8 px-3 py-2 typography-semibold-body-md\",\n  \"24\": \"h-6 px-2 py-1 typography-semibold-body-md\",\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\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-neutral-solid text-foreground-inverse hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  secondary:\n    \"border-foreground-default border border-1 border-foreground-default bg-transparent text-foreground-default hover:bg-brand-accent-muted active:bg-brand-accent-muted\",\n  tertiary:\n    \"bg-transparent text-foreground-default hover:bg-brand-accent-muted active:bg-brand-accent-muted\",\n  link: \"bg-transparent text-foreground-default underline decoration-solid hover:bg-brand-accent-muted active:bg-brand-accent-muted\",\n  brand:\n    \"bg-brand-accent-default text-foreground-onaccent hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  destructive:\n    \"bg-error-default text-foreground-onaccentinverse hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  white:\n    \"bg-foreground-onaccentinverse text-foreground-onaccent hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-default hover:bg-error-background active:bg-error-background\",\n  text: \"bg-transparent text-foreground-default hover:underline active: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  fullWidth?: boolean;\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      {(price || discount) && (\n        <div>\n          {discount && (\n            <span className=\"typography-regular-body-lg line-through\" aria-hidden=\"true\">\n              {discount}\n            </span>\n          )}\n          {price && (\n            <span className=\"ml-2\" aria-hidden=\"true\">\n              {price}\n            </span>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\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 gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring 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          `${price ? \"justify-between\" : \"justify-center\"}`,\n          fullWidth && \"w-full\",\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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"}
+{"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\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n  /** When `true`, the button will take the full width of its container. @default false */\n  fullWidth?: boolean;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-semibold-body-lg\",\n  \"40\": \"h-10 px-4 py-2 typography-semibold-body-lg\",\n  \"32\": \"h-8 px-3 py-2 typography-semibold-body-md\",\n  \"24\": \"h-6 px-2 py-1 typography-semibold-body-md\",\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\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-neutral-solid text-foreground-inverse hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  secondary:\n    \"border-foreground-default border border-1 border-foreground-default bg-transparent text-foreground-default hover:bg-brand-accent-muted active:bg-brand-accent-muted\",\n  tertiary:\n    \"bg-transparent text-foreground-default hover:bg-brand-accent-muted active:bg-brand-accent-muted\",\n  link: \"bg-transparent text-foreground-default underline decoration-solid hover:bg-brand-accent-muted active:bg-brand-accent-muted\",\n  brand:\n    \"bg-brand-accent-default text-foreground-onaccent hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  destructive:\n    \"bg-error-default text-foreground-onaccentinverse hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  white:\n    \"bg-foreground-onaccentinverse text-foreground-onaccent hover:bg-brand-accent-muted hover:text-foreground-default active:bg-brand-accent-muted active:text-foreground-default\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-default hover:bg-error-background active:bg-error-background\",\n  text: \"bg-transparent text-foreground-default hover:underline active: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  fullWidth?: boolean;\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      {React.Children.map(children, (child) =>\n        typeof child === \"string\" || typeof child === \"number\" ? (\n          <span className=\"min-w-0 truncate\">{child}</span>\n        ) : (\n          child\n        ),\n      )}\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      {(price || discount) && (\n        <div>\n          {discount && (\n            <span className=\"typography-regular-body-lg line-through\" aria-hidden=\"true\">\n              {discount}\n            </span>\n          )}\n          {price && (\n            <span className=\"ml-2\" aria-hidden=\"true\">\n              {price}\n            </span>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\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 min-w-0 cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring 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          `${price ? \"justify-between\" : \"justify-center\"}`,\n          fullWidth && \"w-full\",\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/Card/Card.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const VARIANT_CLASSES = {
+  outlined: "border border-neutral-200 bg-surface-container shadow-cardsubtle",
+  elevated: "border border-neutral-200 bg-surface-container shadow-card",
+  filled: "bg-neutral-500",
+  ghost: "bg-transparent"
+};
+const Card = React.forwardRef(
+  ({ className, variant = "outlined", fullWidth = true, noPadding = false, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col overflow-hidden rounded-2xl",
+          !noPadding && "p-4",
+          fullWidth && "w-full",
+          VARIANT_CLASSES[variant],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(
+  ({ className, action, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-start gap-3", className), ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+      action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+    ] });
+  }
+);
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ref,
+        className: cn("typography-semibold-body-lg text-foreground-default", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn("typography-regular-body-sm text-foreground-secondary", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 py-4", className), ...props, children });
+  }
+);
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-3", className), ...props, children });
+  }
+);
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};
+//# sourceMappingURL=Card.mjs.map