npm - @fanvue/ui - Versions diffs - 1.21.0 → 2.1.0 - Mend

@fanvue/ui 1.21.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (272) hide show

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

	@@ -1 +1 @@
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\n/** Position of the slider label relative to the track. /\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. @default \"top\" /\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. @default false /\n showTooltip?: boolean;\n /* Custom formatter for the tooltip value (e.g. to add units or format numbers). /\n formatTooltip?: (value: number) => string;\n}\n\n/\n A range input for selecting one or more numeric values along a track.\n * Supports single and multi-thumb modes, optional labels, and a value tooltip.\n \n Built on Radix UI `Slider`.\n \n @example\n * ```tsx\n * <Slider\n * label=\"Volume\"\n * min={0}\n * max={100}\n * defaultValue={[50]}\n * showTooltip\n * />\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-~~accent~~-default\" />\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,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,~~uDAAA~~,~~CAAuD~~,EAAA,~~CAC1F~~;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;;"}
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\n/** Position of the slider label relative to the track. /\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. @default \"top\" /\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. @default false /\n showTooltip?: boolean;\n /* Custom formatter for the tooltip value (e.g. to add units or format numbers). /\n formatTooltip?: (value: number) => string;\n}\n\n/\n A range input for selecting one or more numeric values along a track.\n * Supports single and multi-thumb modes, optional labels, and a value tooltip.\n \n Built on Radix UI `Slider`.\n \n @example\n * ```tsx\n * <Slider\n * label=\"Volume\"\n * min={0}\n * max={100}\n * defaultValue={[50]}\n * showTooltip\n * />\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-border-primary bg-surface-secondary\">\n <SliderPrimitive.Range className=\"absolute h-full rounded-full bg-brand-primary-default\" />\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,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,sGAC/B,UAAAE,+BAACF,2BAAgB,OAAhB,EAAsB,WAAU,wDAAA,CAAwD,EAAA,CAC3F;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 CHANGED Viewed

@@ -12,22 +12,15 @@ function SliderLayout({
 }) {
   if (labelPosition === "left") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          id: labelId,
-          className: "typography-semibold-body-lg shrink-0 text-foreground-default",
-          children: label
-        }
-      ),
-      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-foreground-secondary", children: minLabel }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg shrink-0 text-content-primary", children: label }),
+      minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-content-secondary", children: minLabel }),
       children,
-      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-foreground-secondary", children: maxLabel })
+      maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md shrink-0 text-content-secondary", 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-semibold-body-lg text-foreground-default", children: label }),
-    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between text-foreground-secondary text-sm leading-[18px]", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "typography-semibold-body-lg text-content-primary", children: label }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start justify-between typography-regular-body-md text-content-secondary", children: [
       minLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: minLabel }),
       maxLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: maxLabel })
     ] }),

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

	@@ -1 +1 @@
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\n id={labelId}\n className=\"typography-semibold-body-lg shrink-0 text-~~foreground~~-~~default~~\"\n >\n {label}\n </span>\n )}\n {minLabel && (\n <span className=\"typography-regular-body-md shrink-0 text-~~foreground~~-secondary\">\n {minLabel}\n </span>\n )}\n {children}\n {maxLabel && (\n <span className=\"typography-regular-body-md shrink-0 text-~~foreground~~-secondary\">\n {maxLabel}\n </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-semibold-body-lg text-~~foreground~~-~~default~~\">\n {label}\n </span>\n )}\n {(minLabel \|\| maxLabel) && (\n <div className=\"flex w-full items-start justify-between ~~text~~-~~foreground~~-~~secondary~~ 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,~~SACCC~~,~~2BAAAA;AAAAA,QAAC;AAAA,~~QAAA~~;AAAA~~,~~UACC~~,IAAI~~;AAAA~~,~~UACJ~~,WAAU~~;AAAA~~,~~UAET~~,UAAA~~;AAAA~~,~~QAAA~~;AAAA,~~MAAA;AAAA~~,~~MAGJ~~,~~YACCA,~~2BAAAA,IAAC,QAAA,EAAK,WAAU,~~iEACb~~,UAAA,UACH;AAAA,MAED;AAAA,MACA,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~iEACb~~,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,~~uDAC1B~~,UAAA,OACH;AAAA,KAEA,YAAY,aACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,~~4FACZ~~,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;;"}
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-semibold-body-lg shrink-0 text-content-primary\">\n {label}\n </span>\n )}\n {minLabel && (\n <span className=\"typography-regular-body-md shrink-0 text-content-secondary\">\n {minLabel}\n </span>\n )}\n {children}\n {maxLabel && (\n <span className=\"typography-regular-body-md shrink-0 text-content-secondary\">\n {maxLabel}\n </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-semibold-body-lg text-content-primary\">\n {label}\n </span>\n )}\n {(minLabel \|\| maxLabel) && (\n <div className=\"flex w-full items-start justify-between typography-regular-body-md text-content-secondary\">\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,6DAC1B,UAAA,OACH;AAAA,MAED,YACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,8DACb,UAAA,UACH;AAAA,MAED;AAAA,MACA,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,8DACb,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,wCACE,QAAA,EAAK,IAAI,SAAS,WAAU,oDAC1B,UAAA,OACH;AAAA,KAEA,YAAY,aACZA,2BAAAA,KAAC,OAAA,EAAI,WAAU,6FACZ,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 CHANGED Viewed

@@ -56,21 +56,21 @@ function SliderThumb({
         }
       },
       className: cn.cn(
-        "flex size-6 items-center justify-center rounded-full border border-neutral-100 bg-surface-page shadow-sm",
+        "flex size-6 items-center justify-center rounded-full border border-border-primary bg-bg-primary shadow-sm",
         "transition-shadow duration-150",
-        "hover:ring-2 hover:ring-brand-accent-default",
-        "not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-accent-default",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+        "hover:ring-2 hover:ring-brand-primary-default",
+        "not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-primary-default",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
         "data-disabled:cursor-not-allowed"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block size-3 rounded-full bg-brand-accent-default shadow-[inset_0px_1px_2px_0px_rgba(0,0,0,0.1)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block size-3 rounded-full bg-brand-primary-default 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-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-3xl bg-surface-pageinverse px-2 py-1 text-foreground-inverse shadow-sm"
+            className: "typography-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-lg bg-surface-primary-inverted px-2 py-1 text-content-primary-inverted shadow-sm"
           }
         )
       ]

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

	@@ -1 +1 @@
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-~~surface~~-~~page~~ shadow-sm\",\n \"transition-shadow duration-150\",\n \"hover:ring-2 hover:ring-brand-~~accent~~-default\",\n \"not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-~~accent~~-default\",\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 \"data-disabled:cursor-not-allowed\",\n )}\n >\n <span className=\"block size-3 rounded-full bg-brand-~~accent~~-default 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-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-~~3xl~~ bg-surface-~~pageinverse~~ px-2 py-1 text-~~foreground~~-~~inverse~~ 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,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,~~mGAAA~~,~~CAAmG~~;AAAA,~~QAElH~~,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;;"}
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-border-primary bg-bg-primary shadow-sm\",\n \"transition-shadow duration-150\",\n \"hover:ring-2 hover:ring-brand-primary-default\",\n \"not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-primary-default\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n \"data-disabled:cursor-not-allowed\",\n )}\n >\n <span className=\"block size-3 rounded-full bg-brand-primary-default 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-semibold-body-sm pointer-events-none absolute bottom-full mb-2 rounded-lg bg-surface-primary-inverted px-2 py-1 text-content-primary-inverted 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,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,oGAAA,CAAoG;AAAA,QAEnH,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 CHANGED Viewed

@@ -65,8 +65,8 @@ function VipEarnContent({
     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-semibold-body-lg text-foreground-default leading-6", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-foreground-secondary", children: description })
+        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-lg text-content-primary leading-6", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", children: description })
       ] }),
       showActions && primary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start", children: primary })
     ] })
@@ -90,9 +90,9 @@ function WelcomeContent({
     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-foreground-default", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-bold-heading-xs text-foreground-default", children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-foreground-secondary", children: description })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 px-8 text-center text-content-primary", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-bold-heading-xs text-content-primary", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-regular-body-md text-content-secondary", 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,
@@ -119,7 +119,7 @@ function DefaultContent({
     size: "40"
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-foreground-default", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-content-primary", children }),
     showActions && (primary || secondary) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-start gap-2", children: [
       primary,
       secondary
@@ -155,11 +155,11 @@ const Snackbar = React__namespace.forwardRef(
           role: "status",
           "data-testid": "snackbar",
           className: cn.cn(
-            "flex gap-4 rounded-2xl",
-            (variant === "default" || variant === "vipEarn") && "border border-neutral-50 bg-surface-container p-4 backdrop-blur-md",
+            "flex gap-4 rounded-md",
+            (variant === "default" || variant === "vipEarn") && "border border-neutral-alphas-50 bg-surface-primary p-4 backdrop-blur-md",
             variant === "default" && "flex-wrap items-start",
             variant === "vipEarn" && "items-start",
-            variant === "welcome" && "relative flex-col items-center bg-surface-page py-6",
+            variant === "welcome" && "relative flex-col items-center bg-bg-primary py-6",
             className
           ),
           ...props,

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

	@@ -1 +1 @@
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 { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/** Layout variant of the snackbar. /\nexport type SnackbarVariant = \"default\" \| \"vipEarn\" \| \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Layout variant of the snackbar. @default \"default\" /\n variant?: SnackbarVariant;\n /* Icon element displayed at the leading edge (used by the `vipEarn` variant). /\n icon?: React.ReactNode;\n /* Title content. /\n title?: React.ReactNode;\n /* Descriptive body text. /\n description?: React.ReactNode;\n /* Whether to show primary/secondary action buttons. @default true /\n showActions?: boolean;\n /* Primary CTA label — renders a default {@link Button}. /\n primaryLabel?: string;\n /* Click handler for the primary CTA (used together with `primaryLabel`). /\n primaryOnClick?: () => void;\n /* Custom element rendered as the primary CTA. Overrides `primaryLabel` / `primaryOnClick`. /\n primarySlot?: React.ReactNode;\n /* Secondary CTA label — renders a default {@link Button}. /\n secondaryLabel?: string;\n /* Click handler for the secondary CTA (used together with `secondaryLabel`). /\n secondaryOnClick?: () => void;\n /* Custom element rendered as the secondary CTA. Overrides `secondaryLabel` / `secondaryOnClick`. /\n secondarySlot?: React.ReactNode;\n /* Whether to show the close button. @default false /\n closable?: boolean;\n /* Callback fired when the close button is clicked. /\n onClose?: () => void;\n /* Accessible label for the close button. @default \"Close snackbar\" /\n closeLabel?: string;\n}\n\nfunction CloseButton({\n onClose,\n className,\n closeLabel = \"Close snackbar\",\n}: {\n onClose?: () => void;\n className?: string;\n closeLabel?: string;\n}) {\n return (\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n onClick={onClose}\n icon={<CrossIcon />}\n className={cn(\"shrink-0\", className)}\n aria-label={closeLabel}\n />\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 && (\n <p className=\"typography-semibold-body-lg text-foreground-default leading-6\">{title}</p>\n )}\n {description && (\n <p className=\"typography-regular-body-md text-foreground-secondary\">{description}</p>\n )}\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-foreground-default\">\n {title && <p className=\"typography-bold-heading-xs text-foreground-default\">{title}</p>}\n {description && (\n <p className=\"typography-regular-body-md text-foreground-secondary\">{description}</p>\n )}\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-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-foreground-default\">\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\n/*\n A prominent inline message with optional title, description, action buttons,\n * and close control. Supports three layout variants: `default`, `vipEarn`, and\n * `welcome`.\n \n @example\n * ```tsx\n * <Snackbar\n * variant=\"default\"\n * primaryLabel=\"Undo\"\n * primaryOnClick={undo}\n * closable\n * onClose={dismiss}\n * >\n * Item deleted\n * </Snackbar>\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 closeLabel,\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-surface-container p-4 backdrop-blur-md\",\n variant === \"default\" && \"flex-wrap items-start\",\n variant === \"vipEarn\" && \"items-start\",\n variant === \"welcome\" && \"relative flex-col items-center bg-surface-page 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 closeLabel={closeLabel}\n className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n />\n )}\n </div>\n );\n },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":["jsx","IconButton","CrossIcon","cn","Button","jsxs","Fragment","React"],"mappings":"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"}
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 { IconButton } from \"../IconButton/IconButton\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\n/** Layout variant of the snackbar. /\nexport type SnackbarVariant = \"default\" \| \"vipEarn\" \| \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /* Layout variant of the snackbar. @default \"default\" /\n variant?: SnackbarVariant;\n /* Icon element displayed at the leading edge (used by the `vipEarn` variant). /\n icon?: React.ReactNode;\n /* Title content. /\n title?: React.ReactNode;\n /* Descriptive body text. /\n description?: React.ReactNode;\n /* Whether to show primary/secondary action buttons. @default true /\n showActions?: boolean;\n /* Primary CTA label — renders a default {@link Button}. /\n primaryLabel?: string;\n /* Click handler for the primary CTA (used together with `primaryLabel`). /\n primaryOnClick?: () => void;\n /* Custom element rendered as the primary CTA. Overrides `primaryLabel` / `primaryOnClick`. /\n primarySlot?: React.ReactNode;\n /* Secondary CTA label — renders a default {@link Button}. /\n secondaryLabel?: string;\n /* Click handler for the secondary CTA (used together with `secondaryLabel`). /\n secondaryOnClick?: () => void;\n /* Custom element rendered as the secondary CTA. Overrides `secondaryLabel` / `secondaryOnClick`. /\n secondarySlot?: React.ReactNode;\n /* Whether to show the close button. @default false /\n closable?: boolean;\n /* Callback fired when the close button is clicked. /\n onClose?: () => void;\n /* Accessible label for the close button. @default \"Close snackbar\" /\n closeLabel?: string;\n}\n\nfunction CloseButton({\n onClose,\n className,\n closeLabel = \"Close snackbar\",\n}: {\n onClose?: () => void;\n className?: string;\n closeLabel?: string;\n}) {\n return (\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n onClick={onClose}\n icon={<CrossIcon />}\n className={cn(\"shrink-0\", className)}\n aria-label={closeLabel}\n />\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 && (\n <p className=\"typography-semibold-body-lg text-content-primary leading-6\">{title}</p>\n )}\n {description && (\n <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n )}\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-content-primary\">\n {title && <p className=\"typography-bold-heading-xs text-content-primary\">{title}</p>}\n {description && (\n <p className=\"typography-regular-body-md text-content-secondary\">{description}</p>\n )}\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-regular-body-lg flex min-w-0 flex-1 items-center self-stretch text-content-primary\">\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\n/*\n A prominent inline message with optional title, description, action buttons,\n * and close control. Supports three layout variants: `default`, `vipEarn`, and\n * `welcome`.\n \n @example\n * ```tsx\n * <Snackbar\n * variant=\"default\"\n * primaryLabel=\"Undo\"\n * primaryOnClick={undo}\n * closable\n * onClose={dismiss}\n * >\n * Item deleted\n * </Snackbar>\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 closeLabel,\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-md\",\n (variant === \"default\" \|\| variant === \"vipEarn\") &&\n \"border border-neutral-alphas-50 bg-surface-primary p-4 backdrop-blur-md\",\n variant === \"default\" && \"flex-wrap items-start\",\n variant === \"vipEarn\" && \"items-start\",\n variant === \"welcome\" && \"relative flex-col items-center bg-bg-primary 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 closeLabel={closeLabel}\n className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n />\n )}\n </div>\n );\n },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":["jsx","IconButton","CrossIcon","cn","Button","jsxs","Fragment","React"],"mappings":"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"}

package/dist/cjs/components/Switch/Switch.cjs CHANGED Viewed

@@ -32,8 +32,8 @@ const Switch = React__namespace.forwardRef(({ className, size = "default", ...pr
       className: cn.cn(
         "inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150",
         "focus-visible:shadow-focus-ring focus-visible:outline-none",
-        "data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-accent-default",
-        "data-[state=unchecked]:bg-neutral-400",
+        "data-[state=checked]:border-neutral-alphas-200 data-[state=checked]:bg-brand-primary-default",
+        "data-[state=unchecked]:bg-neutral-alphas-400",
         "not-disabled:active:opacity-80",
         "disabled:cursor-not-allowed disabled:opacity-50",
         size === "default" && "h-6 w-10.5",
@@ -45,7 +45,7 @@ const Switch = React__namespace.forwardRef(({ className, size = "default", ...pr
         SwitchPrimitive__namespace.Thumb,
         {
           className: cn.cn(
-            "pointer-events-none rounded-full bg-surface-page shadow-sm transition-transform duration-150",
+            "pointer-events-none rounded-full bg-bg-primary shadow-sm transition-transform duration-150",
             thumbSizeClass
           )
         }

package/dist/cjs/components/Switch/Switch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Size variant of the switch toggle. /\nexport type SwitchSize = \"default\" \| \"small\";\n\nexport interface SwitchProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n /* Size variant of the switch. @default \"default\" /\n size?: SwitchSize;\n}\n\n/\n A toggle switch for boolean on/off states. Built on Radix UI `Switch`.\n \n For a labelled switch with helper text, see {@link SwitchField}.\n \n @example\n * ```tsx\n * <Switch checked={on} onCheckedChange={setOn} />\n * ```\n */\nexport const Switch = React.forwardRef<\n React.ComponentRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size = \"default\", ...props }, ref) => {\n const thumbSizeClass =\n size === \"default\"\n ? \"size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75\"\n : \"size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25\";\n\n return (\n <SwitchPrimitive.Root\n ref={ref}\n className={cn(\n \"inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-~~accent~~-default\",\n \"data-[state=unchecked]:bg-neutral-400\",\n \"not-disabled:active:opacity-80\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n size === \"default\" && \"h-6 w-10.5\",\n size === \"small\" && \"h-5 w-9\",\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n \"pointer-events-none rounded-full bg-~~surface~~-~~page~~ shadow-sm transition-transform duration-150\",\n thumbSizeClass,\n )}\n />\n </SwitchPrimitive.Root>\n );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["React","jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAASA,iBAAM,WAG1B,CAAC,EAAE,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACpD,QAAM,iBACJ,SAAS,YACL,oEACA;AAEN,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,aAAa;AAAA,QACtB,SAAS,WAAW;AAAA,QACpB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAAF,2BAAAA;AAAAA,QAACC,2BAAgB;AAAA,QAAhB;AAAA,UACC,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;AAED,OAAO,cAAc;;"}
1	+ {"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Size variant of the switch toggle. /\nexport type SwitchSize = \"default\" \| \"small\";\n\nexport interface SwitchProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n /* Size variant of the switch. @default \"default\" /\n size?: SwitchSize;\n}\n\n/\n A toggle switch for boolean on/off states. Built on Radix UI `Switch`.\n \n For a labelled switch with helper text, see {@link SwitchField}.\n \n @example\n * ```tsx\n * <Switch checked={on} onCheckedChange={setOn} />\n * ```\n */\nexport const Switch = React.forwardRef<\n React.ComponentRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size = \"default\", ...props }, ref) => {\n const thumbSizeClass =\n size === \"default\"\n ? \"size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75\"\n : \"size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25\";\n\n return (\n <SwitchPrimitive.Root\n ref={ref}\n className={cn(\n \"inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"data-[state=checked]:border-neutral-alphas-200 data-[state=checked]:bg-brand-primary-default\",\n \"data-[state=unchecked]:bg-neutral-alphas-400\",\n \"not-disabled:active:opacity-80\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n size === \"default\" && \"h-6 w-10.5\",\n size === \"small\" && \"h-5 w-9\",\n className,\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n \"pointer-events-none rounded-full bg-bg-primary shadow-sm transition-transform duration-150\",\n thumbSizeClass,\n )}\n />\n </SwitchPrimitive.Root>\n );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["React","jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAASA,iBAAM,WAG1B,CAAC,EAAE,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACpD,QAAM,iBACJ,SAAS,YACL,oEACA;AAEN,SACEC,2BAAAA;AAAAA,IAACC,2BAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,aAAa;AAAA,QACtB,SAAS,WAAW;AAAA,QACpB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAAF,2BAAAA;AAAAA,QAACC,2BAAgB;AAAA,QAAhB;AAAA,UACC,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;AAED,OAAO,cAAc;;"}

package/dist/cjs/components/SwitchField/SwitchField.cjs CHANGED Viewed

@@ -65,8 +65,8 @@ const SwitchField = React__namespace.forwardRef(
               {
                 htmlFor: id,
                 className: cn.cn(
-                  "cursor-pointer select-none text-foreground-default",
-                  disabled && "cursor-not-allowed text-neutral-250",
+                  "cursor-pointer select-none text-content-primary",
+                  disabled && "cursor-not-allowed text-content-tertiary",
                   size === "default" ? "typography-semibold-body-lg" : "typography-semibold-body-md"
                 ),
                 children: label
@@ -77,7 +77,7 @@ const SwitchField = React__namespace.forwardRef(
                 InfoCircleIcon.InfoCircleIcon,
                 {
                   "aria-hidden": "true",
-                  className: "size-5 text-foreground-secondary"
+                  className: "size-5 text-content-secondary"
                 }
               ) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipContent, { side: "bottom", children: infoText })
@@ -88,8 +88,8 @@ const SwitchField = React__namespace.forwardRef(
             {
               id: helperTextId,
               className: cn.cn(
-                "text-foreground-secondary",
-                disabled && "text-neutral-250",
+                "text-content-secondary",
+                disabled && "text-content-tertiary",
                 size === "default" ? "typography-regular-body-md" : "typography-regular-body-sm"
               ),
               children: helperText

package/dist/cjs/components/SwitchField/SwitchField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchField.cjs","sources":["../../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. /\nexport type SwitchFieldOrientation = \"right\" \| \"left\";\n\nexport interface SwitchFieldProps\n extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" \| \"className\"> {\n /* Side on which the switch is placed relative to the label. @default \"right\" /\n orientation?: SwitchFieldOrientation;\n /* Size variant of the switch and accompanying text. @default \"default\" /\n size?: SwitchSize;\n /* Label text displayed next to the switch. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n /* Tooltip text shown when hovering the info icon next to the label. /\n infoText?: string;\n /* Accessible label for the info tooltip trigger button. Override for i18n.\n * @default \"More information\"\n /\n infoLabel?: string;\n /* Additional CSS class name for the outer wrapper. /\n className?: string;\n}\n\n/\n A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n \n @example\n * ```tsx\n * <SwitchField\n * label=\"Notifications\"\n * helperText=\"Receive push notifications\"\n * checked={enabled}\n * onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n (\n {\n className,\n orientation = \"right\",\n size = \"default\",\n label,\n helperText,\n infoText,\n infoLabel = \"More information\",\n disabled,\n id: propId,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const id = propId ?? generatedId;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n const switchElement = (\n <Switch\n ref={ref}\n id={id}\n size={size}\n disabled={disabled}\n aria-describedby={helperTextId}\n {...props}\n />\n );\n\n const labelContent = (label \|\| helperText) && (\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col items-start\",\n size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n )}\n >\n {label && (\n <div className=\"flex items-center gap-1\">\n <label\n htmlFor={id}\n className={cn(\n \"cursor-pointer select-none text-~~foreground~~-~~default~~\",\n disabled && \"cursor-not-allowed text-~~neutral~~-~~250~~\",\n size === \"default\" ? \"typography-semibold-body-lg\" : \"typography-semibold-body-md\",\n )}\n >\n {label}\n </label>\n {infoText && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n <InfoCircleIcon\n aria-hidden=\"true\"\n className=\"size-5 text-~~foreground~~-secondary\"\n />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )}\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"text-~~foreground~~-secondary\",\n disabled && \"text-~~neutral~~-~~250~~\",\n size === \"default\" ? \"typography-regular-body-md\" : \"typography-regular-body-sm\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n );\n\n return (\n <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n {orientation === \"left\" && switchElement}\n {labelContent}\n {orientation === \"right\" && switchElement}\n </div>\n );\n },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":["React","jsx","Switch","jsxs","cn","TooltipProvider","Tooltip","TooltipTrigger","InfoCircleIcon","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7BC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWG,GAAAA;AAAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YAAY,gCAAgC;AAAA,gBAAA;AAAA,gBAGtD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAN,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,UAAAA,2BAAAA;AAAAA,gBAACO,eAAAA;AAAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,EAAA,CACF;AAAA,cACAP,2BAAAA,IAACQ,QAAAA,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACCR,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWG,GAAAA;AAAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,+BAA+B;AAAA,cAAA;AAAA,cAGrD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACED,gCAAC,SAAI,WAAWC,GAAAA,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}
1	+ {"version":3,"file":"SwitchField.cjs","sources":["../../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Side on which the switch toggle is positioned relative to the label. /\nexport type SwitchFieldOrientation = \"right\" \| \"left\";\n\nexport interface SwitchFieldProps\n extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" \| \"className\"> {\n /* Side on which the switch is placed relative to the label. @default \"right\" /\n orientation?: SwitchFieldOrientation;\n /* Size variant of the switch and accompanying text. @default \"default\" /\n size?: SwitchSize;\n /* Label text displayed next to the switch. /\n label?: string;\n /* Descriptive text displayed below the label. /\n helperText?: string;\n /* Tooltip text shown when hovering the info icon next to the label. /\n infoText?: string;\n /* Accessible label for the info tooltip trigger button. Override for i18n.\n * @default \"More information\"\n /\n infoLabel?: string;\n /* Additional CSS class name for the outer wrapper. /\n className?: string;\n}\n\n/\n A labelled switch field with optional helper text and info tooltip. Composes\n * the {@link Switch} component with a `<label>` and description.\n \n @example\n * ```tsx\n * <SwitchField\n * label=\"Notifications\"\n * helperText=\"Receive push notifications\"\n * checked={enabled}\n * onCheckedChange={setEnabled}\n * />\n * ```\n */\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n (\n {\n className,\n orientation = \"right\",\n size = \"default\",\n label,\n helperText,\n infoText,\n infoLabel = \"More information\",\n disabled,\n id: propId,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const id = propId ?? generatedId;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n const switchElement = (\n <Switch\n ref={ref}\n id={id}\n size={size}\n disabled={disabled}\n aria-describedby={helperTextId}\n {...props}\n />\n );\n\n const labelContent = (label \|\| helperText) && (\n <div\n className={cn(\n \"flex min-w-0 flex-1 flex-col items-start\",\n size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n )}\n >\n {label && (\n <div className=\"flex items-center gap-1\">\n <label\n htmlFor={id}\n className={cn(\n \"cursor-pointer select-none text-content-primary\",\n disabled && \"cursor-not-allowed text-content-tertiary\",\n size === \"default\" ? \"typography-semibold-body-lg\" : \"typography-semibold-body-md\",\n )}\n >\n {label}\n </label>\n {infoText && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <button type=\"button\" aria-label={infoLabel} className=\"flex shrink-0 pt-0.5\">\n <InfoCircleIcon\n aria-hidden=\"true\"\n className=\"size-5 text-content-secondary\"\n />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">{infoText}</TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n )}\n {helperText && (\n <span\n id={helperTextId}\n className={cn(\n \"text-content-secondary\",\n disabled && \"text-content-tertiary\",\n size === \"default\" ? \"typography-regular-body-md\" : \"typography-regular-body-sm\",\n )}\n >\n {helperText}\n </span>\n )}\n </div>\n );\n\n return (\n <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n {orientation === \"left\" && switchElement}\n {labelContent}\n {orientation === \"right\" && switchElement}\n </div>\n );\n },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":["React","jsx","Switch","jsxs","cn","TooltipProvider","Tooltip","TooltipTrigger","InfoCircleIcon","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7BC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAWG,GAAAA;AAAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YAAY,gCAAgC;AAAA,gBAAA;AAAA,gBAGtD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAN,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,UAAAA,2BAAAA;AAAAA,gBAACO,eAAAA;AAAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,EAAA,CACF;AAAA,cACAP,2BAAAA,IAACQ,QAAAA,gBAAA,EAAe,MAAK,UAAU,UAAA,SAAA,CAAS;AAAA,YAAA,EAAA,CAC1C,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACCR,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAWG,GAAAA;AAAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,+BAA+B;AAAA,cAAA;AAAA,cAGrD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACED,gCAAC,SAAI,WAAWC,GAAAA,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/SwitchToggle/SwitchToggle.cjs CHANGED Viewed

@@ -70,7 +70,7 @@ const SwitchToggle = React__namespace.forwardRef(
         ref,
         role: "radiogroup",
         className: cn.cn(
-          "relative inline-grid grid-cols-2 rounded-full border border-neutral-200 p-1",
+          "relative inline-grid grid-cols-2 rounded-full border border-neutral-alphas-200 p-1",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -81,7 +81,7 @@ const SwitchToggle = React__namespace.forwardRef(
             {
               "aria-hidden": "true",
               className: cn.cn(
-                "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-accent-default bg-brand-accent-muted",
+                "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-primary-default bg-brand-primary-muted",
                 "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out",
                 isSecondSelected && "translate-x-full"
               )
@@ -105,9 +105,9 @@ const SwitchToggle = React__namespace.forwardRef(
                   onClick: () => handleSelect(option.value),
                   onKeyDown: (e) => handleKeyDown(e, index),
                   className: cn.cn(
-                    "relative z-10 inline-flex min-w-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-content-primary",
                     "focus-visible:shadow-focus-ring focus-visible:outline-none",
-                    "active:rounded-full active:bg-brand-accent-muted",
+                    "active:rounded-full active:bg-brand-primary-muted",
                     disabled && "pointer-events-none",
                     sizeClass
                   ),

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

	@@ -1 +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 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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"}
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-alphas-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-primary-default bg-brand-primary-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-content-primary\",\n \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n \"active:rounded-full active:bg-brand-primary-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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"}