@fanvue/ui 0.1.0-alpha.2 → 1.0.0

package/dist/components/Pill/Pill.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const pillVariants = {
+  variant: {
+    green: "bg-success-50 text-success-500",
+    grey: "bg-neutral-100 text-body-200",
+    blue: "bg-info-50 text-info-500",
+    gold: "bg-warning-50 text-warning-500",
+    pinkLight: "bg-brand-pink-50 text-body-100",
+    base: "bg-neutral-400 text-body-300",
+    brand: "bg-brand-green-500 text-body-black-solid-constant",
+    brandLight: "bg-brand-green-50 text-body-black-solid-constant",
+    beta: "bg-brand-pink-500 text-body-black-solid-constant",
+    error: "bg-error-500 text-error-50"
+  }
+};
+const Pill = React.forwardRef(
+  ({ className, variant = "green", leftIcon, rightIcon, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "data-testid": "pill",
+        className: cn(
+          // Base styles
+          "inline-flex items-center justify-center gap-2 rounded-full px-3 py-1",
+          // Typography
+          "typography-caption-semibold",
+          // Variant styles
+          pillVariants.variant[variant],
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "flex", "aria-hidden": "true", children: leftIcon }),
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "flex", "aria-hidden": "true", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Pill.displayName = "Pill";
+export {
+  Pill
+};
+//# sourceMappingURL=Pill.mjs.map

package/dist/components/Pill/Pill.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.mjs","sources":["../../../src/components/Pill/Pill.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nconst pillVariants = {\n  variant: {\n    green: \"bg-success-50 text-success-500\",\n    grey: \"bg-neutral-100 text-body-200\",\n    blue: \"bg-info-50 text-info-500\",\n    gold: \"bg-warning-50 text-warning-500\",\n    pinkLight: \"bg-brand-pink-50 text-body-100\",\n    base: \"bg-neutral-400 text-body-300\",\n    brand: \"bg-brand-green-500 text-body-black-solid-constant\",\n    brandLight: \"bg-brand-green-50 text-body-black-solid-constant\",\n    beta: \"bg-brand-pink-500 text-body-black-solid-constant\",\n    error: \"bg-error-500 text-error-50\",\n  },\n} as const;\n\nexport type PillVariant = keyof typeof pillVariants.variant;\n\nexport interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the pill */\n  variant?: PillVariant;\n  /** Left icon element */\n  leftIcon?: React.ReactNode;\n  /** Right icon element */\n  rightIcon?: React.ReactNode;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(\n  (\n    { className, variant = \"green\", leftIcon, rightIcon, asChild = false, children, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"pill\"\n        className={cn(\n          // Base styles\n          \"inline-flex items-center justify-center gap-2 rounded-full px-3 py-1\",\n          // Typography\n          \"typography-caption-semibold\",\n          // Variant styles\n          pillVariants.variant[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        <Slottable>{children}</Slottable>\n        {rightIcon && (\n          <span className=\"flex\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nPill.displayName = \"Pill\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAeO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,SAAS,UAAU,WAAW,UAAU,OAAO,UAAU,GAAG,MAAA,GACnF,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;AAAA;AAAA,UAEA,aAAa,QAAQ,OAAO;AAAA;AAAA,UAE5B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gCACE,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UACH;AAAA,UAEF,oBAAC,aAAW,UAAS;AAAA,UACpB,aACC,oBAAC,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/ProgressBar/ProgressBar.mjs

@@ -0,0 +1,95 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const TRACK_HEIGHT = {
+  default: "h-3",
+  small: "h-1.5"
+};
+const GAP = {
+  default: "gap-3",
+  small: "gap-1"
+};
+function getDefaultBarColor(value) {
+  if (value >= 100) return "bg-success-500";
+  if (value >= 40) return "bg-warning-500";
+  return "bg-error-500";
+}
+function getDefaultTextColor(value) {
+  if (value >= 100) return "text-success-500";
+  if (value >= 40) return "text-warning-500";
+  return "text-error-500";
+}
+const ProgressBar = React.forwardRef(
+  ({
+    value,
+    size = "default",
+    variant = "default",
+    title,
+    showCompletion = false,
+    stepsLabel,
+    helperLeft,
+    helperRight,
+    leftIcon,
+    ariaLabel,
+    className,
+    ...props
+  }, ref) => {
+    const clampedValue = Math.min(100, Math.max(0, value));
+    const isGeneric = variant === "generic";
+    const isSmall = size === "small";
+    const barColor = isGeneric ? "bg-brand-green-500" : getDefaultBarColor(clampedValue);
+    const textColor = isGeneric ? "text-brand-green-500" : getDefaultTextColor(clampedValue);
+    const showHeader = title != null || showCompletion || stepsLabel != null;
+    const showFooter = leftIcon != null || helperLeft != null || helperRight != null;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex w-full flex-col", GAP[size], className), ...props, children: [
+      showHeader && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-end justify-between", children: [
+        title != null && /* @__PURE__ */ jsx("p", { className: "typography-caption-semibold text-body-100", children: title }),
+        showCompletion && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(textColor, isSmall ? "typography-heading-3" : "typography-heading-1"),
+            children: [
+              Math.round(clampedValue),
+              "%"
+            ]
+          }
+        ),
+        stepsLabel != null && /* @__PURE__ */ jsx("span", { className: "typography-caption-regular text-body-100", children: stepsLabel })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "progressbar",
+          "aria-label": ariaLabel ?? "Progress",
+          "aria-valuenow": clampedValue,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          className: cn("relative w-full rounded-full bg-neutral-100", TRACK_HEIGHT[size]),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out",
+                barColor
+              ),
+              style: { width: `${clampedValue}%` }
+            }
+          )
+        }
+      ),
+      showFooter && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          leftIcon != null && /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center", "aria-hidden": "true", children: leftIcon }),
+          helperLeft != null && /* @__PURE__ */ jsx("span", { className: "typography-caption-regular text-primary-500", children: helperLeft })
+        ] }),
+        helperRight != null && /* @__PURE__ */ jsx("span", { className: "typography-caption-regular text-primary-500", children: helperRight })
+      ] })
+    ] });
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+export {
+  ProgressBar
+};
+//# sourceMappingURL=ProgressBar.mjs.map

package/dist/components/ProgressBar/ProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.mjs","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\nexport type ProgressBarSize = \"default\" | \"small\";\nexport type ProgressBarVariant = \"default\" | \"generic\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current progress value (0-100) */\n  value: number;\n  /** Size variant - \"default\" (12px track) or \"small\" (6px track) */\n  size?: ProgressBarSize;\n  /** Color variant - \"default\" uses color-coded progress, \"generic\" always green */\n  variant?: ProgressBarVariant;\n  /** Title content shown at top left */\n  title?: React.ReactNode;\n  /** Show the completion percentage at top */\n  showCompletion?: boolean;\n  /** Steps label shown at top right (e.g. \"2/8 steps\") */\n  stepsLabel?: React.ReactNode;\n  /** Helper content at bottom left */\n  helperLeft?: React.ReactNode;\n  /** Helper content at bottom right */\n  helperRight?: React.ReactNode;\n  /** Icon shown at bottom left before helper text */\n  leftIcon?: React.ReactNode;\n  /** Accessible label for the progress bar (defaults to \"Progress\"). Use this for i18n. */\n  ariaLabel?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  default: \"h-3\",\n  small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n  default: \"gap-3\",\n  small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n  if (value >= 100) return \"bg-success-500\";\n  if (value >= 40) return \"bg-warning-500\";\n  return \"bg-error-500\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n  if (value >= 100) return \"text-success-500\";\n  if (value >= 40) return \"text-warning-500\";\n  return \"text-error-500\";\n}\n\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      size = \"default\",\n      variant = \"default\",\n      title,\n      showCompletion = false,\n      stepsLabel,\n      helperLeft,\n      helperRight,\n      leftIcon,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const isGeneric = variant === \"generic\";\n    const isSmall = size === \"small\";\n\n    const barColor = isGeneric ? \"bg-brand-green-500\" : getDefaultBarColor(clampedValue);\n    const textColor = isGeneric ? \"text-brand-green-500\" : getDefaultTextColor(clampedValue);\n\n    const showHeader = title != null || showCompletion || stepsLabel != null;\n    const showFooter = leftIcon != null || helperLeft != null || helperRight != null;\n\n    return (\n      <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n        {showHeader && (\n          <div className=\"flex w-full items-end justify-between\">\n            {title != null && <p className=\"typography-caption-semibold text-body-100\">{title}</p>}\n            {showCompletion && (\n              <span\n                className={cn(textColor, isSmall ? \"typography-heading-3\" : \"typography-heading-1\")}\n              >\n                {Math.round(clampedValue)}%\n              </span>\n            )}\n            {stepsLabel != null && (\n              <span className=\"typography-caption-regular text-body-100\">{stepsLabel}</span>\n            )}\n          </div>\n        )}\n\n        <div\n          role=\"progressbar\"\n          aria-label={ariaLabel ?? \"Progress\"}\n          aria-valuenow={clampedValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          className={cn(\"relative w-full rounded-full bg-neutral-100\", TRACK_HEIGHT[size])}\n        >\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n              barColor,\n            )}\n            style={{ width: `${clampedValue}%` }}\n          />\n        </div>\n\n        {showFooter && (\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"flex items-center gap-1\">\n              {leftIcon != null && (\n                <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              {helperLeft != null && (\n                <span className=\"typography-caption-regular text-primary-500\">{helperLeft}</span>\n              )}\n            </div>\n            {helperRight != null && (\n              <span className=\"typography-caption-regular text-primary-500\">{helperRight}</span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":[],"mappings":";;;;AA6BA,MAAM,eAAgD;AAAA,EACpD,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,MAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAuB;AACjD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEA,SAAS,oBAAoB,OAAuB;AAClD,MAAI,SAAS,IAAK,QAAO;AACzB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,YAAY,YAAY;AAC9B,UAAM,UAAU,SAAS;AAEzB,UAAM,WAAW,YAAY,uBAAuB,mBAAmB,YAAY;AACnF,UAAM,YAAY,YAAY,yBAAyB,oBAAoB,YAAY;AAEvF,UAAM,aAAa,SAAS,QAAQ,kBAAkB,cAAc;AACpE,UAAM,aAAa,YAAY,QAAQ,cAAc,QAAQ,eAAe;AAE5E,WACE,qBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,wBAAwB,IAAI,IAAI,GAAG,SAAS,GAAI,GAAG,OAC7E,UAAA;AAAA,MAAA,cACC,qBAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,QAAA,SAAS,QAAQ,oBAAC,KAAA,EAAE,WAAU,6CAA6C,UAAA,OAAM;AAAA,QACjF,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,WAAW,UAAU,yBAAyB,sBAAsB;AAAA,YAEjF,UAAA;AAAA,cAAA,KAAK,MAAM,YAAY;AAAA,cAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG7B,cAAc,QACb,oBAAC,QAAA,EAAK,WAAU,4CAA4C,UAAA,WAAA,CAAW;AAAA,MAAA,GAE3E;AAAA,MAGF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,aAAa;AAAA,UACzB,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,WAAW,GAAG,+CAA+C,aAAa,IAAI,CAAC;AAAA,UAE/E,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,YAAI;AAAA,UAAA;AAAA,QACrC;AAAA,MAAA;AAAA,MAGD,cACC,qBAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,UAAA,YAAY,QACX,oBAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QACnE,UAAA,SAAA,CACH;AAAA,UAED,cAAc,QACb,oBAAC,QAAA,EAAK,WAAU,+CAA+C,UAAA,WAAA,CAAW;AAAA,QAAA,GAE9E;AAAA,QACC,eAAe,QACd,oBAAC,QAAA,EAAK,WAAU,+CAA+C,UAAA,YAAA,CAAY;AAAA,MAAA,EAAA,CAE/E;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/Radio/Radio.mjs

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Radio = React.forwardRef(({ className, size = "default", label, helperText, id, ...props }, ref) => {
+  const generatedId = React.useId();
+  const inputId = id || generatedId;
+  const helperTextId = `${inputId}-helper`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("group inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      RadioGroupPrimitive.Item,
+      {
+        ref,
+        id: inputId,
+        "data-testid": "radio",
+        "aria-describedby": helperText ? helperTextId : void 0,
+        className: cn(
+          "relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-body-100 bg-transparent outline-brand-purple-500 transition-colors hover:bg-brand-green-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:border-disabled-400 disabled:bg-transparent data-[state=checked]:border-body-100 data-[state=checked]:bg-transparent dark:border-body-100 dark:disabled:border-disabled-400",
+          helperText && "mt-1 self-start"
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-body-100 group-has-disabled:bg-disabled-400 dark:bg-body-100 dark:group-has-disabled:bg-disabled-400" }) })
+      }
+    ),
+    (label || helperText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "cursor-pointer select-none text-body-100 group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100",
+            size === "small" ? "typography-body-2-semibold" : "typography-body-1-semibold"
+          ),
+          children: label
+        }
+      ),
+      helperText && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: helperTextId,
+          className: cn(
+            "text-body-200 group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100",
+            size === "small" ? "typography-body-2-semibold" : "typography-caption-regular"
+          ),
+          children: helperText
+        }
+      )
+    ] })
+  ] });
+});
+Radio.displayName = "Radio";
+export {
+  Radio
+};
+//# sourceMappingURL=Radio.mjs.map

package/dist/components/Radio/Radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface RadioProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"asChild\"> {\n  /** Size variant of the radio button */\n  size?: \"default\" | \"small\";\n  /** Label text for the radio button */\n  label?: string;\n  /** Optional helper text displayed below the label */\n  helperText?: string;\n}\n\nexport const Radio = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(({ className, size = \"default\", label, helperText, id, ...props }, ref) => {\n  const generatedId = React.useId();\n  const inputId = id || generatedId;\n  const helperTextId = `${inputId}-helper`;\n\n  return (\n    <div className={cn(\"group inline-flex items-center gap-2\", className)}>\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        id={inputId}\n        data-testid=\"radio\"\n        aria-describedby={helperText ? helperTextId : undefined}\n        className={cn(\n          \"relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-body-100 bg-transparent outline-brand-purple-500 transition-colors hover:bg-brand-green-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:border-disabled-400 disabled:bg-transparent data-[state=checked]:border-body-100 data-[state=checked]:bg-transparent dark:border-body-100 dark:disabled:border-disabled-400\",\n          helperText && \"mt-1 self-start\",\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"size-2 rounded-full bg-body-100 group-has-disabled:bg-disabled-400 dark:bg-body-100 dark:group-has-disabled:bg-disabled-400\" />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n      {(label || helperText) && (\n        <div className=\"flex flex-col gap-0.5\">\n          {label && (\n            <label\n              htmlFor={inputId}\n              className={cn(\n                \"cursor-pointer select-none text-body-100 group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100\",\n                size === \"small\" ? \"typography-body-2-semibold\" : \"typography-body-1-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n          {helperText && (\n            <span\n              id={helperTextId}\n              className={cn(\n                \"text-body-200 group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100\",\n                size === \"small\" ? \"typography-body-2-semibold\" : \"typography-caption-regular\",\n              )}\n            >\n              {helperText}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nRadio.displayName = \"Radio\";\n"],"names":[],"mappings":";;;;;AAcO,MAAM,QAAQ,MAAM,WAGzB,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,MAAA,GAAS,QAAQ;AAC3E,QAAM,cAAc,MAAM,MAAA;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,eAAe,GAAG,OAAO;AAE/B,8BACG,OAAA,EAAI,WAAW,GAAG,wCAAwC,SAAS,GAClE,UAAA;AAAA,IAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,cAAc;AAAA,QAAA;AAAA,QAEf,GAAG;AAAA,QAEJ,UAAA,oBAAC,oBAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAA,oBAAC,QAAA,EAAK,WAAU,8HAAA,CAA8H,EAAA,CAChJ;AAAA,MAAA;AAAA,IAAA;AAAA,KAEA,SAAS,eACT,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,SACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,SAAS,UAAU,+BAA+B;AAAA,UAAA;AAAA,UAGnD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,cACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA,SAAS,UAAU,+BAA+B;AAAA,UAAA;AAAA,UAGnD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;"}

package/dist/components/RadioGroup/RadioGroup.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+const RadioGroup = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, ...props });
+});
+RadioGroup.displayName = "RadioGroup";
+export {
+  RadioGroup
+};
+//# sourceMappingURL=RadioGroup.mjs.map

package/dist/components/RadioGroup/RadioGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.mjs","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\n\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>((props, ref) => {\n  return <RadioGroupPrimitive.Root ref={ref} {...props} />;\n});\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"names":[],"mappings":";;;;AAKO,MAAM,aAAa,MAAM,WAG9B,CAAC,OAAO,QAAQ;AAChB,6BAAQ,oBAAoB,MAApB,EAAyB,KAAW,GAAG,OAAO;AACxD,CAAC;AAED,WAAW,cAAc;"}

package/dist/components/Slider/Slider.mjs

@@ -0,0 +1,78 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { SliderLayout } from "./SliderLayout.mjs";
+import { SliderThumb } from "./SliderThumb.mjs";
+const Slider = React.forwardRef(
+  ({
+    className,
+    label,
+    labelPosition = "top",
+    minLabel,
+    maxLabel,
+    showTooltip = false,
+    formatTooltip,
+    disabled,
+    value,
+    defaultValue,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) => {
+    const labelId = React.useId();
+    const thumbCount = value?.length ?? defaultValue?.length ?? 1;
+    const resolvedLabelledBy = ariaLabelledBy ?? (label ? labelId : void 0);
+    const resolvedAriaLabel = !resolvedLabelledBy ? ariaLabel : void 0;
+    const sliderTrack = /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        ref,
+        disabled,
+        value,
+        defaultValue,
+        "aria-label": resolvedAriaLabel,
+        "aria-labelledby": resolvedLabelledBy,
+        className: cn(
+          "group/slider relative flex w-full touch-none select-none items-center",
+          disabled && "pointer-events-none opacity-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-3 w-full overflow-hidden rounded-full border border-neutral-100 bg-neutral-100", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full rounded-full bg-brand-green-500" }) }),
+          Array.from({ length: thumbCount }, (_, i) => /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              showTooltip,
+              formatTooltip,
+              index: i,
+              "aria-label": resolvedAriaLabel,
+              "aria-labelledby": resolvedLabelledBy
+            },
+            i
+          ))
+        ]
+      }
+    );
+    const hasLayout = Boolean(label || minLabel || maxLabel);
+    if (!hasLayout) return sliderTrack;
+    return /* @__PURE__ */ jsx(
+      SliderLayout,
+      {
+        label,
+        labelId,
+        labelPosition,
+        minLabel,
+        maxLabel,
+        children: sliderTrack
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+export {
+  Slider
+};
+//# sourceMappingURL=Slider.mjs.map

package/dist/components/Slider/Slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.mjs","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SliderLayout } from \"./SliderLayout\";\nimport { SliderThumb } from \"./SliderThumb\";\n\nexport type SliderLabelPosition = \"top\" | \"left\";\n\nexport interface SliderProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n    \"asChild\" | \"children\"\n  > {\n  /** Label text displayed alongside the slider */\n  label?: string;\n  /** Position of the label relative to the slider track */\n  labelPosition?: SliderLabelPosition;\n  /** Text shown at the minimum end of the track */\n  minLabel?: string;\n  /** Text shown at the maximum end of the track */\n  maxLabel?: string;\n  /** Whether to show a tooltip with the current value above the thumb */\n  showTooltip?: boolean;\n  /** Override the displayed tooltip value (e.g. for formatting) */\n  formatTooltip?: (value: number) => string;\n}\n\nexport const Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(\n  (\n    {\n      className,\n      label,\n      labelPosition = \"top\",\n      minLabel,\n      maxLabel,\n      showTooltip = false,\n      formatTooltip,\n      disabled,\n      value,\n      defaultValue,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelId = React.useId();\n    const thumbCount = value?.length ?? defaultValue?.length ?? 1;\n    const resolvedLabelledBy = ariaLabelledBy ?? (label ? labelId : undefined);\n    const resolvedAriaLabel = !resolvedLabelledBy ? ariaLabel : undefined;\n\n    const sliderTrack = (\n      <SliderPrimitive.Root\n        ref={ref}\n        disabled={disabled}\n        value={value}\n        defaultValue={defaultValue}\n        aria-label={resolvedAriaLabel}\n        aria-labelledby={resolvedLabelledBy}\n        className={cn(\n          \"group/slider relative flex w-full touch-none select-none items-center\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-3 w-full overflow-hidden rounded-full border border-neutral-100 bg-neutral-100\">\n          <SliderPrimitive.Range className=\"absolute h-full rounded-full bg-brand-green-500\" />\n        </SliderPrimitive.Track>\n\n        {Array.from({ length: thumbCount }, (_, i) => (\n          <SliderThumb\n            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are fixed-count and never reorder\n            key={i}\n            showTooltip={showTooltip}\n            formatTooltip={formatTooltip}\n            index={i}\n            aria-label={resolvedAriaLabel}\n            aria-labelledby={resolvedLabelledBy}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    );\n\n    const hasLayout = Boolean(label || minLabel || maxLabel);\n\n    if (!hasLayout) return sliderTrack;\n\n    return (\n      <SliderLayout\n        label={label}\n        labelId={labelId}\n        labelPosition={labelPosition}\n        minLabel={minLabel}\n        maxLabel={maxLabel}\n      >\n        {sliderTrack}\n      </SliderLayout>\n    );\n  },\n);\n\nSlider.displayName = \"Slider\";\n"],"names":[],"mappings":";;;;;;;AA2BO,MAAM,SAAS,MAAM;AAAA,EAI1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,MAAM,MAAA;AACtB,UAAM,aAAa,OAAO,UAAU,cAAc,UAAU;AAC5D,UAAM,qBAAqB,mBAAmB,QAAQ,UAAU;AAChE,UAAM,oBAAoB,CAAC,qBAAqB,YAAY;AAE5D,UAAM,cACJ;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,6FAC/B,UAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,kDAAA,CAAkD,EAAA,CACrF;AAAA,UAEC,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA,YAAA;AAAA,cAGC;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,cAAY;AAAA,cACZ,mBAAiB;AAAA,YAAA;AAAA,YALZ;AAAA,UAAA,CAOR;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIL,UAAM,YAAY,QAAQ,SAAS,YAAY,QAAQ;AAEvD,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,OAAO,cAAc;"}

package/dist/components/Slider/SliderLayout.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+function SliderLayout({
+  label,
+  labelId,
+  labelPosition,
+  minLabel,
+  maxLabel,
+  children
+}) {
+  if (labelPosition === "left") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      label && /* @__PURE__ */ jsx("span", { id: labelId, className: "typography-body-1-semibold shrink-0 text-body-100", children: label }),
+      minLabel && /* @__PURE__ */ jsx("span", { className: "typography-body-2-regular shrink-0 text-body-200", children: minLabel }),
+      children,
+      maxLabel && /* @__PURE__ */ jsx("span", { className: "typography-body-2-regular shrink-0 text-body-200", children: maxLabel })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-3", children: [
+    label && /* @__PURE__ */ jsx("span", { id: labelId, className: "typography-body-1-semibold text-body-100", children: label }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start justify-between text-body-200 text-sm leading-[18px]", children: [
+      minLabel && /* @__PURE__ */ jsx("span", { children: minLabel }),
+      maxLabel && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: maxLabel })
+    ] }),
+    children
+  ] });
+}
+export {
+  SliderLayout
+};
+//# sourceMappingURL=SliderLayout.mjs.map

package/dist/components/Slider/SliderLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderLayout.mjs","sources":["../../../src/components/Slider/SliderLayout.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport type { SliderLabelPosition } from \"./Slider\";\n\ninterface SliderLayoutProps {\n  label?: string;\n  labelId: string;\n  labelPosition: SliderLabelPosition;\n  minLabel?: string;\n  maxLabel?: string;\n  children: React.ReactNode;\n}\n\nexport function SliderLayout({\n  label,\n  labelId,\n  labelPosition,\n  minLabel,\n  maxLabel,\n  children,\n}: SliderLayoutProps) {\n  if (labelPosition === \"left\") {\n    return (\n      <div className=\"flex items-center gap-3\">\n        {label && (\n          <span id={labelId} className=\"typography-body-1-semibold shrink-0 text-body-100\">\n            {label}\n          </span>\n        )}\n        {minLabel && (\n          <span className=\"typography-body-2-regular shrink-0 text-body-200\">{minLabel}</span>\n        )}\n        {children}\n        {maxLabel && (\n          <span className=\"typography-body-2-regular shrink-0 text-body-200\">{maxLabel}</span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-3\">\n      {label && (\n        <span id={labelId} className=\"typography-body-1-semibold text-body-100\">\n          {label}\n        </span>\n      )}\n      {(minLabel || maxLabel) && (\n        <div className=\"flex w-full items-start justify-between text-body-200 text-sm leading-[18px]\">\n          {minLabel && <span>{minLabel}</span>}\n          {maxLabel && <span className=\"ml-auto\">{maxLabel}</span>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,kBAAkB,QAAQ;AAC5B,WACE,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,6BACE,QAAA,EAAK,IAAI,SAAS,WAAU,qDAC1B,UAAA,OACH;AAAA,MAED,YACC,oBAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,UAAS;AAAA,MAE9E;AAAA,MACA,YACC,oBAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,SAAA,CAAS;AAAA,IAAA,GAEjF;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,6BACE,QAAA,EAAK,IAAI,SAAS,WAAU,4CAC1B,UAAA,OACH;AAAA,KAEA,YAAY,aACZ,qBAAC,OAAA,EAAI,WAAU,gFACZ,UAAA;AAAA,MAAA,YAAY,oBAAC,UAAM,UAAA,SAAA,CAAS;AAAA,MAC5B,YAAY,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,IAAA,GACnD;AAAA,IAED;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/Slider/SliderThumb.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+function SliderThumb({
+  showTooltip,
+  formatTooltip,
+  index,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const thumbRef = React.useCallback(
+    (el) => {
+      if (!el || !showTooltip) return;
+      syncTooltipText(el, formatTooltip);
+    },
+    [showTooltip, formatTooltip]
+  );
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Thumb,
+    {
+      ref: thumbRef,
+      "data-index": index,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      onPointerDown: (e) => {
+        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);
+      },
+      onPointerMove: (e) => {
+        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);
+      },
+      onKeyDown: (e) => {
+        if (showTooltip) {
+          requestAnimationFrame(() => syncTooltipText(e.currentTarget, formatTooltip));
+        }
+      },
+      className: cn(
+        "flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-background-inverse-solid shadow-sm",
+        "transition-shadow duration-150",
+        "hover:ring-2 hover:ring-brand-green-500",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid",
+        "data-disabled:cursor-not-allowed"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "block size-3 rounded-full bg-brand-green-500 shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]" }),
+        showTooltip && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "tooltip",
+            "data-slider-tooltip": true,
+            className: "typography-caption-semibold pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-background-solid px-2 py-1 text-background-inverse-solid shadow-sm"
+          }
+        )
+      ]
+    }
+  );
+}
+function syncTooltipText(thumb, formatTooltip) {
+  const raw = thumb.getAttribute("aria-valuenow");
+  const tooltip = thumb.querySelector("[data-slider-tooltip]");
+  if (raw == null || !tooltip) return;
+  const num = Number(raw);
+  tooltip.textContent = formatTooltip ? formatTooltip(num) : String(num);
+}
+export {
+  SliderThumb
+};
+//# sourceMappingURL=SliderThumb.mjs.map

package/dist/components/Slider/SliderThumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.mjs","sources":["../../../src/components/Slider/SliderThumb.tsx"],"sourcesContent":["import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface SliderThumbProps {\n  showTooltip: boolean;\n  formatTooltip?: (value: number) => string;\n  index: number;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport function SliderThumb({\n  showTooltip,\n  formatTooltip,\n  index,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}: SliderThumbProps) {\n  const thumbRef = React.useCallback(\n    (el: HTMLSpanElement | null) => {\n      if (!el || !showTooltip) return;\n      syncTooltipText(el, formatTooltip);\n    },\n    [showTooltip, formatTooltip],\n  );\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      data-index={index}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      onPointerDown={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onPointerMove={(e) => {\n        if (showTooltip) syncTooltipText(e.currentTarget, formatTooltip);\n      }}\n      onKeyDown={(e) => {\n        if (showTooltip) {\n          requestAnimationFrame(() => syncTooltipText(e.currentTarget, formatTooltip));\n        }\n      }}\n      className={cn(\n        \"flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-background-inverse-solid shadow-sm\",\n        \"transition-shadow duration-150\",\n        \"hover:ring-2 hover:ring-brand-green-500\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n        \"data-disabled:cursor-not-allowed\",\n      )}\n    >\n      <span className=\"block size-3 rounded-full bg-brand-green-500 shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]\" />\n\n      {showTooltip && (\n        <span\n          role=\"tooltip\"\n          data-slider-tooltip\n          className=\"typography-caption-semibold pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-background-solid px-2 py-1 text-background-inverse-solid shadow-sm\"\n        />\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction syncTooltipText(thumb: HTMLElement, formatTooltip?: (value: number) => string) {\n  const raw = thumb.getAttribute(\"aria-valuenow\");\n  const tooltip = thumb.querySelector<HTMLSpanElement>(\"[data-slider-tooltip]\");\n  if (raw == null || !tooltip) return;\n  const num = Number(raw);\n  tooltip.textContent = formatTooltip ? formatTooltip(num) : String(num);\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AACrB,GAAqB;AACnB,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,OAA+B;AAC9B,UAAI,CAAC,MAAM,CAAC,YAAa;AACzB,sBAAgB,IAAI,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,aAAa,aAAa;AAAA,EAAA;AAG7B,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,eAAe,CAAC,MAAM;AACpB,YAAI,YAAa,iBAAgB,EAAE,eAAe,aAAa;AAAA,MACjE;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,aAAa;AACf,gCAAsB,MAAM,gBAAgB,EAAE,eAAe,aAAa,CAAC;AAAA,QAC7E;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,8FAAA,CAA8F;AAAA,QAE7G,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,uBAAmB;AAAA,YACnB,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,gBAAgB,OAAoB,eAA2C;AACtF,QAAM,MAAM,MAAM,aAAa,eAAe;AAC9C,QAAM,UAAU,MAAM,cAA+B,uBAAuB;AAC5E,MAAI,OAAO,QAAQ,CAAC,QAAS;AAC7B,QAAM,MAAM,OAAO,GAAG;AACtB,UAAQ,cAAc,gBAAgB,cAAc,GAAG,IAAI,OAAO,GAAG;AACvE;"}