@fanvue/ui 0.1.0-alpha.2 → 1.0.0

package/dist/cjs/components/Radio/Radio.cjs

@@ -0,0 +1,74 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const RadioGroupPrimitive = require("@radix-ui/react-radio-group");
+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 RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Radio = React__namespace.forwardRef(({ className, size = "default", label, helperText, id, ...props }, ref) => {
+  const generatedId = React__namespace.useId();
+  const inputId = id || generatedId;
+  const helperTextId = `${inputId}-helper`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("group inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroupPrimitive__namespace.Item,
+      {
+        ref,
+        id: inputId,
+        "data-testid": "radio",
+        "aria-describedby": helperText ? helperTextId : void 0,
+        className: cn.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__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn.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__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: helperTextId,
+          className: cn.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";
+exports.Radio = Radio;
+//# sourceMappingURL=Radio.cjs.map

package/dist/cjs/components/Radio/Radio.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.cjs","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":["React","cn","jsx","RadioGroupPrimitive","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,QAAQA,iBAAM,WAGzB,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,MAAA,GAAS,QAAQ;AAC3E,QAAM,cAAcA,iBAAM,MAAA;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,eAAe,GAAG,OAAO;AAE/B,yCACG,OAAA,EAAI,WAAWC,GAAAA,GAAG,wCAAwC,SAAS,GAClE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,+BAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAWF,GAAAA;AAAAA,UACT;AAAA,UACA,cAAc;AAAA,QAAA;AAAA,QAEf,GAAG;AAAA,QAEJ,UAAAC,2BAAAA,IAACC,+BAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,8HAAA,CAA8H,EAAA,CAChJ;AAAA,MAAA;AAAA,IAAA;AAAA,KAEA,SAAS,eACTE,2BAAAA,KAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,SACCF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,UAAU,+BAA+B;AAAA,UAAA;AAAA,UAGnD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,cACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAWD,GAAAA;AAAAA,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/cjs/components/RadioGroup/RadioGroup.cjs

@@ -0,0 +1,30 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const RadioGroupPrimitive = require("@radix-ui/react-radio-group");
+const React = require("react");
+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 RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const RadioGroup = React__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { ref, ...props });
+});
+RadioGroup.displayName = "RadioGroup";
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=RadioGroup.cjs.map

package/dist/cjs/components/RadioGroup/RadioGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.cjs","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":["React","RadioGroupPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,aAAaA,iBAAM,WAG9B,CAAC,OAAO,QAAQ;AAChB,wCAAQC,+BAAoB,MAApB,EAAyB,KAAW,GAAG,OAAO;AACxD,CAAC;AAED,WAAW,cAAc;;"}

package/dist/cjs/components/Slider/Slider.cjs

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

package/dist/cjs/components/Slider/Slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.cjs","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":["React","jsxs","SliderPrimitive","cn","jsx","SliderThumb","SliderLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,SAASA,iBAAM;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,UAAUA,iBAAM,MAAA;AACtB,UAAM,aAAa,OAAO,UAAU,cAAc,UAAU;AAC5D,UAAM,qBAAqB,mBAAmB,QAAQ,UAAU;AAChE,UAAM,oBAAoB,CAAC,qBAAqB,YAAY;AAE5D,UAAM,cACJC,2BAAAA;AAAAA,MAACC,2BAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAACF,2BAAgB,OAAhB,EAAsB,WAAU,6FAC/B,UAAAE,+BAACF,2BAAgB,OAAhB,EAAsB,WAAU,kDAAA,CAAkD,EAAA,CACrF;AAAA,UAEC,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,GAAG,MACtCE,2BAAAA;AAAAA,YAACC,YAAAA;AAAAA,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,WACED,2BAAAA;AAAAA,MAACE,aAAAA;AAAAA,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/cjs/components/Slider/SliderLayout.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderLayout.cjs","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":["jsxs","jsx"],"mappings":";;;;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,kBAAkB,QAAQ;AAC5B,WACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,qDAC1B,UAAA,OACH;AAAA,MAED,YACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,UAAS;AAAA,MAE9E;AAAA,MACA,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,SAAA,CAAS;AAAA,IAAA,GAEjF;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,4CAC1B,UAAA,OACH;AAAA,KAEA,YAAY,aACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,gFACZ,UAAA;AAAA,MAAA,YAAYC,2BAAAA,IAAC,UAAM,UAAA,SAAA,CAAS;AAAA,MAC5B,YAAYA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,SAAA,CAAS;AAAA,IAAA,GACnD;AAAA,IAED;AAAA,EAAA,GACH;AAEJ;;"}

package/dist/cjs/components/Slider/SliderThumb.cjs

@@ -0,0 +1,87 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const SliderPrimitive = require("@radix-ui/react-slider");
+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 SliderPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SliderPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function SliderThumb({
+  showTooltip,
+  formatTooltip,
+  index,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const thumbRef = React__namespace.useCallback(
+    (el) => {
+      if (!el || !showTooltip) return;
+      syncTooltipText(el, formatTooltip);
+    },
+    [showTooltip, formatTooltip]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SliderPrimitive__namespace.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.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__ */ jsxRuntime.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__ */ jsxRuntime.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);
+}
+exports.SliderThumb = SliderThumb;
+//# sourceMappingURL=SliderThumb.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.cjs","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":["React","jsxs","SliderPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AACrB,GAAqB;AACnB,QAAM,WAAWA,iBAAM;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,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;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,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,8FAAA,CAA8F;AAAA,QAE7G,eACCA,2BAAAA;AAAAA,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;;"}

package/dist/cjs/components/Snackbar/Snackbar.cjs

@@ -0,0 +1,215 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Button = require("../Button/Button.cjs");
+const CrossIcon = require("../Icons/CrossIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function CloseButton({ onClose, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      variant: "tertiary",
+      size: "24",
+      onClick: onClose,
+      className: cn.cn("h-auto shrink-0", className),
+      "aria-label": "Close snackbar",
+      children: /* @__PURE__ */ jsxRuntime.jsx(CrossIcon.CrossIcon, {})
+    }
+  );
+}
+function resolveCtaSlot(slot, label, onClick, buttonProps) {
+  if (slot) return slot;
+  if (label) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick, ...buttonProps, children: label });
+  }
+  return null;
+}
+function VipEarnContent({
+  icon,
+  title,
+  description,
+  showActions,
+  primarySlot,
+  primaryLabel,
+  primaryOnClick
+}) {
+  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {
+    variant: "text",
+    size: "24"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-1-semibold text-body-100 leading-6", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-2-regular text-body-200", children: description })
+      ] }),
+      showActions && primary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start", children: primary })
+    ] })
+  ] });
+}
+function WelcomeContent({
+  title,
+  description,
+  showActions,
+  primarySlot,
+  primaryLabel,
+  primaryOnClick,
+  secondarySlot,
+  secondaryLabel,
+  secondaryOnClick
+}) {
+  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {
+    variant: "primary"
+  });
+  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {
+    variant: "secondary"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 px-8 text-center text-body-100", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-heading-4 text-body-100", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-2-regular text-body-200", children: description })
+    ] }),
+    showActions && (primary || secondary) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1", children: [
+      secondary,
+      primary
+    ] })
+  ] });
+}
+function DefaultContent({
+  children,
+  showActions,
+  primarySlot,
+  primaryLabel,
+  primaryOnClick,
+  secondarySlot,
+  secondaryLabel,
+  secondaryOnClick
+}) {
+  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {
+    variant: "primary",
+    size: "40"
+  });
+  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {
+    variant: "tertiary",
+    size: "40"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-1-medium flex min-w-0 flex-1 items-center self-stretch text-body-100", children }),
+    showActions && (primary || secondary) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-start gap-2", children: [
+      primary,
+      secondary
+    ] })
+  ] });
+}
+const Snackbar = React__namespace.forwardRef(
+  ({
+    className,
+    variant = "default",
+    icon,
+    title,
+    description,
+    showActions = true,
+    primaryLabel,
+    primaryOnClick,
+    primarySlot,
+    secondaryLabel,
+    secondaryOnClick,
+    secondarySlot,
+    closable = false,
+    onClose,
+    children,
+    ...props
+  }, ref) => {
+    return (
+      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role: "status",
+          "data-testid": "snackbar",
+          className: cn.cn(
+            "flex gap-4 rounded-2xl",
+            (variant === "default" || variant === "vipEarn") && "border border-neutral-50 bg-background-200 p-4 backdrop-blur-md",
+            variant === "default" && "flex-wrap items-start",
+            variant === "vipEarn" && "items-start",
+            variant === "welcome" && "relative flex-col items-center bg-background-inverse-solid py-6",
+            className
+          ),
+          ...props,
+          children: [
+            variant === "vipEarn" && /* @__PURE__ */ jsxRuntime.jsx(
+              VipEarnContent,
+              {
+                icon,
+                title,
+                description,
+                showActions,
+                primarySlot,
+                primaryLabel,
+                primaryOnClick
+              }
+            ),
+            variant === "welcome" && /* @__PURE__ */ jsxRuntime.jsx(
+              WelcomeContent,
+              {
+                title,
+                description,
+                showActions,
+                primarySlot,
+                primaryLabel,
+                primaryOnClick,
+                secondarySlot,
+                secondaryLabel,
+                secondaryOnClick
+              }
+            ),
+            variant === "default" && /* @__PURE__ */ jsxRuntime.jsx(
+              DefaultContent,
+              {
+                showActions,
+                primarySlot,
+                primaryLabel,
+                primaryOnClick,
+                secondarySlot,
+                secondaryLabel,
+                secondaryOnClick,
+                children
+              }
+            ),
+            closable && /* @__PURE__ */ jsxRuntime.jsx(
+              CloseButton,
+              {
+                onClose,
+                className: variant === "welcome" ? "absolute top-2 right-2" : void 0
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+);
+Snackbar.displayName = "Snackbar";
+exports.Snackbar = Snackbar;
+//# sourceMappingURL=Snackbar.cjs.map

package/dist/cjs/components/Snackbar/Snackbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.cjs","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\nexport type SnackbarVariant = \"default\" | \"vipEarn\" | \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Snackbar layout variant */\n  variant?: SnackbarVariant;\n  /** Left icon element */\n  icon?: React.ReactNode;\n  /** Title text */\n  title?: React.ReactNode;\n  /** Description text */\n  description?: React.ReactNode;\n  /** Whether to show the actions section */\n  showActions?: boolean;\n  /** Primary CTA label (renders a default Button) */\n  primaryLabel?: string;\n  /** Primary CTA click handler (used with primaryLabel) */\n  primaryOnClick?: () => void;\n  /** Custom element to render as primary CTA (overrides primaryLabel/primaryOnClick) */\n  primarySlot?: React.ReactNode;\n  /** Secondary CTA label (renders a default Button) */\n  secondaryLabel?: string;\n  /** Secondary CTA click handler (used with secondaryLabel) */\n  secondaryOnClick?: () => void;\n  /** Custom element to render as secondary CTA (overrides secondaryLabel/secondaryOnClick) */\n  secondarySlot?: React.ReactNode;\n  /** Show close button */\n  closable?: boolean;\n  /** Close button click handler */\n  onClose?: () => void;\n}\n\nfunction CloseButton({ onClose, className }: { onClose?: () => void; className?: string }) {\n  return (\n    <Button\n      variant=\"tertiary\"\n      size=\"24\"\n      onClick={onClose}\n      className={cn(\"h-auto shrink-0\", className)}\n      aria-label=\"Close snackbar\"\n    >\n      <CrossIcon />\n    </Button>\n  );\n}\n\n/**\n * Resolves a CTA slot. If a custom slot is provided it takes precedence,\n * otherwise a default Button is rendered from label + onClick.\n */\nfunction resolveCtaSlot(\n  slot: React.ReactNode | undefined,\n  label: string | undefined,\n  onClick: (() => void) | undefined,\n  buttonProps: React.ComponentProps<typeof Button>,\n): React.ReactNode | null {\n  if (slot) return slot;\n  if (label) {\n    return (\n      <Button onClick={onClick} {...buttonProps}>\n        {label}\n      </Button>\n    );\n  }\n  return null;\n}\n\nfunction VipEarnContent({\n  icon,\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"icon\"\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"text\",\n    size: \"24\",\n  });\n\n  return (\n    <>\n      {icon && (\n        <span className=\"flex shrink-0\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n        <div className=\"flex flex-col\">\n          {title && <p className=\"typography-body-1-semibold text-body-100 leading-6\">{title}</p>}\n          {description && <p className=\"typography-body-2-regular text-body-200\">{description}</p>}\n        </div>\n        {showActions && primary && <div className=\"self-start\">{primary}</div>}\n      </div>\n    </>\n  );\n}\n\nfunction WelcomeContent({\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"secondary\",\n  });\n\n  return (\n    <>\n      <div className=\"flex flex-col items-center gap-2 px-8 text-center text-body-100\">\n        {title && <p className=\"typography-heading-4 text-body-100\">{title}</p>}\n        {description && <p className=\"typography-body-2-regular text-body-200\">{description}</p>}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1\">\n          {secondary}\n          {primary}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction DefaultContent({\n  children,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"children\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n    size: \"40\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"tertiary\",\n    size: \"40\",\n  });\n\n  return (\n    <>\n      <div className=\"typography-body-1-medium flex min-w-0 flex-1 items-center self-stretch text-body-100\">\n        {children}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex shrink-0 items-start gap-2\">\n          {primary}\n          {secondary}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      icon,\n      title,\n      description,\n      showActions = true,\n      primaryLabel,\n      primaryOnClick,\n      primarySlot,\n      secondaryLabel,\n      secondaryOnClick,\n      secondarySlot,\n      closable = false,\n      onClose,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */\n      <div\n        ref={ref}\n        role=\"status\"\n        data-testid=\"snackbar\"\n        className={cn(\n          \"flex gap-4 rounded-2xl\",\n          (variant === \"default\" || variant === \"vipEarn\") &&\n            \"border border-neutral-50 bg-background-200 p-4 backdrop-blur-md\",\n          variant === \"default\" && \"flex-wrap items-start\",\n          variant === \"vipEarn\" && \"items-start\",\n          variant === \"welcome\" &&\n            \"relative flex-col items-center bg-background-inverse-solid py-6\",\n          className,\n        )}\n        {...props}\n      >\n        {variant === \"vipEarn\" && (\n          <VipEarnContent\n            icon={icon}\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n          />\n        )}\n        {variant === \"welcome\" && (\n          <WelcomeContent\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          />\n        )}\n        {variant === \"default\" && (\n          <DefaultContent\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          >\n            {children}\n          </DefaultContent>\n        )}\n        {closable && (\n          <CloseButton\n            onClose={onClose}\n            className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":["jsx","Button","cn","CrossIcon","jsxs","Fragment","React"],"mappings":"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"}