@fanvue/ui 1.2.0 → 1.2.1

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

@@ -1 +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;;"}
+{"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\n/** Props for the {@link RadioGroup} component. Extends the Radix `RadioGroup.Root` props. */\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;\n\n/**\n * Groups {@link Radio} items into a single controlled or uncontrolled selection.\n * Built on Radix UI `RadioGroup.Root`.\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <Radio value=\"a\" label=\"Option A\" />\n *   <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\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":";;;;;;;;;;;;;;;;;;;;;;;;AAkBO,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.map

@@ -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\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;;"}
+{"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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;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,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/SliderThumb.cjs

@@ -59,6 +59,7 @@ function SliderThumb({
         "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",
+        "not-data-disabled:active:ring-2 not-data-disabled:active: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"
       ),

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

@@ -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-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;;"}
+{"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        \"not-data-disabled:active:ring-2 not-data-disabled:active: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,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.map

@@ -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\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  /** 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 && <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      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-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            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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"}
+{"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 && <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\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-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            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

@@ -34,6 +34,7 @@ const Switch = React__namespace.forwardRef(({ className, size = "default", ...pr
         "focus-visible:shadow-focus-ring focus-visible:outline-none",
         "data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-green-500",
         "data-[state=unchecked]:bg-neutral-400",
+        "not-disabled:active:opacity-80",
         "disabled:cursor-not-allowed disabled:opacity-50",
         size === "default" && "h-6 w-10.5",
         size === "small" && "h-5 w-9",

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

@@ -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\nexport type SwitchSize = \"default\" | \"small\";\n\nexport interface SwitchProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n  /** Size variant of the switch */\n  size?: SwitchSize;\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-green-500\",\n        \"data-[state=unchecked]:bg-neutral-400\",\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-body-white-solid-constant shadow-sm transition-transform duration-150 dark:bg-body-black-solid-constant\",\n          thumbSizeClass,\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["React","jsx","SwitchPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,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,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;;"}
+{"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-green-500\",\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-body-white-solid-constant shadow-sm transition-transform duration-150 dark:bg-body-black-solid-constant\",\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.map

@@ -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\nexport type SwitchFieldOrientation = \"right\" | \"left\";\n\nexport interface SwitchFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" | \"className\"> {\n  /** Position of the switch relative to the label */\n  orientation?: SwitchFieldOrientation;\n  /** Size variant of the switch and text */\n  size?: SwitchSize;\n  /** Label text displayed next to the switch */\n  label?: string;\n  /** Helper text displayed below the label */\n  helperText?: string;\n  /** Info tooltip text displayed on hover of the info icon */\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 className for the wrapper */\n  className?: string;\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-body-100\",\n                disabled && \"cursor-not-allowed text-disabled-100\",\n                size === \"default\" ? \"typography-body-1-semibold\" : \"typography-body-2-semibold\",\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 aria-hidden=\"true\" className=\"size-5 text-body-200\" />\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-body-200\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n              disabled && \"text-disabled-100\",\n              size === \"default\" ? \"typography-body-2-regular\" : \"typography-caption-regular\",\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,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,+BAA+B;AAAA,gBAAA;AAAA,gBAGrD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,kBAAe,SAAO,MACrB,yCAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,yCAACC,eAAAA,gBAAA,EAAe,eAAY,QAAO,WAAU,wBAAuB,GACtE,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;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,8BAA8B;AAAA,cAAA;AAAA,cAGpD,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;;"}
+{"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-body-100\",\n                disabled && \"cursor-not-allowed text-disabled-100\",\n                size === \"default\" ? \"typography-body-1-semibold\" : \"typography-body-2-semibold\",\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 aria-hidden=\"true\" className=\"size-5 text-body-200\" />\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-body-200\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n              disabled && \"text-disabled-100\",\n              size === \"default\" ? \"typography-body-2-regular\" : \"typography-caption-regular\",\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,+BAA+B;AAAA,gBAAA;AAAA,gBAGrD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACCH,2BAAAA,IAACI,yBAAA,EACC,UAAAF,gCAACG,QAAAA,SAAA,EACC,UAAA;AAAA,cAAAL,2BAAAA,IAACM,QAAAA,kBAAe,SAAO,MACrB,yCAAC,UAAA,EAAO,MAAK,UAAS,cAAY,WAAW,WAAU,wBACrD,yCAACC,eAAAA,gBAAA,EAAe,eAAY,QAAO,WAAU,wBAAuB,GACtE,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;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,8BAA8B;AAAA,cAAA;AAAA,cAGpD,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

@@ -21,6 +21,15 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function warnMissingAccessibleName(ariaLabel, ariaLabelledBy) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        "SwitchToggle: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop."
+      );
+    }
+  }
+}
 const SwitchToggle = React__namespace.forwardRef(
   ({
     className,
@@ -32,19 +41,29 @@ const SwitchToggle = React__namespace.forwardRef(
     disabled = false,
     ...props
   }, ref) => {
-    const groupName = React__namespace.useId();
+    warnMissingAccessibleName(props["aria-label"], props["aria-labelledby"]);
     const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? options[0].value);
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? controlledValue : internalValue;
+    const anySelected = options.some((o) => o.value === currentValue);
     const isSecondSelected = currentValue === options[1].value;
+    const buttonRefs = React__namespace.useRef([]);
     const sizeClass = size === "24" ? "px-2 py-1 typography-caption-semibold" : size === "32" ? "px-3 py-1.75 typography-body-2-semibold" : "h-10 px-4 py-2.25 typography-button-small";
     const handleSelect = (optionValue) => {
-      if (disabled) return;
+      if (disabled || optionValue === currentValue) return;
       if (!isControlled) {
         setInternalValue(optionValue);
       }
       onChange?.(optionValue);
     };
+    const handleKeyDown = (e, index) => {
+      const nextIndex = e.key === "ArrowRight" || e.key === "ArrowDown" ? (index + 1) % options.length : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (index - 1 + options.length) % options.length : null;
+      if (nextIndex === null) return;
+      e.preventDefault();
+      const nextOption = options[nextIndex];
+      handleSelect(nextOption.value);
+      buttonRefs.current[nextIndex]?.focus();
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -68,36 +87,34 @@ const SwitchToggle = React__namespace.forwardRef(
               )
             }
           ),
-          options.map((option) => {
-            const optionId = `${groupName}-${option.value}`;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "label",
-              {
-                htmlFor: optionId,
-                className: cn.cn(
-                  "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-body-100",
-                  "has-focus-visible:shadow-focus-ring has-focus-visible:outline-none",
-                  disabled && "pointer-events-none",
-                  sizeClass
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      id: optionId,
-                      type: "radio",
-                      name: groupName,
-                      value: option.value,
-                      checked: currentValue === option.value,
-                      disabled,
-                      onChange: () => handleSelect(option.value),
-                      className: "sr-only"
-                    }
+          options.map((option, index) => {
+            const isSelected = currentValue === option.value;
+            return (
+              // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  ref: (el) => {
+                    buttonRefs.current[index] = el;
+                  },
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": isSelected,
+                  tabIndex: isSelected || !anySelected && index === 0 ? 0 : -1,
+                  disabled,
+                  onClick: () => handleSelect(option.value),
+                  onKeyDown: (e) => handleKeyDown(e, index),
+                  className: cn.cn(
+                    "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-body-100",
+                    "focus-visible:shadow-focus-ring focus-visible:outline-none",
+                    "active:rounded-full active:bg-brand-green-50",
+                    disabled && "pointer-events-none",
+                    sizeClass
                   ),
-                  option.label
-                ]
-              },
-              option.value
+                  children: option.label
+                },
+                option.value
+              )
             );
           })
         ]

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

@@ -1 +1 @@
-{"version":3,"file":"SwitchToggle.cjs","sources":["../../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type SwitchToggleSize = \"24\" | \"32\" | \"40\";\n\nexport interface SwitchToggleOption {\n  /** Display label for the option */\n  label: string;\n  /** Value identifier for the option */\n  value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Size variant */\n  size?: SwitchToggleSize;\n  /** The two options to toggle between */\n  options: [SwitchToggleOption, SwitchToggleOption];\n  /** Currently selected value */\n  value?: string;\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when the selected value changes */\n  onChange?: (value: string) => void;\n  /** Whether the toggle is disabled */\n  disabled?: boolean;\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    const groupName = React.useId();\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 isSecondSelected = currentValue === options[1].value;\n\n    const sizeClass =\n      size === \"24\"\n        ? \"px-2 py-1 typography-caption-semibold\"\n        : size === \"32\"\n          ? \"px-3 py-1.75 typography-body-2-semibold\"\n          : \"h-10 px-4 py-2.25 typography-button-small\";\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\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-green-500 bg-brand-green-50\",\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) => {\n          const optionId = `${groupName}-${option.value}`;\n          return (\n            <label\n              key={option.value}\n              htmlFor={optionId}\n              className={cn(\n                \"relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-body-100\",\n                \"has-focus-visible:shadow-focus-ring has-focus-visible:outline-none\",\n                disabled && \"pointer-events-none\",\n                sizeClass,\n              )}\n            >\n              <input\n                id={optionId}\n                type=\"radio\"\n                name={groupName}\n                value={option.value}\n                checked={currentValue === option.value}\n                disabled={disabled}\n                onChange={() => handleSelect(option.value)}\n                className=\"sr-only\"\n              />\n              {option.label}\n            </label>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,eAAeA,iBAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAYA,iBAAM,MAAA;AAExB,UAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,gBAAgB,QAAQ,CAAC,EAAE,KAAK;AACzF,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,mBAAmB,iBAAiB,QAAQ,CAAC,EAAE;AAErD,UAAM,YACJ,SAAS,OACL,0CACA,SAAS,OACP,4CACA;AAER,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,SAAU;AACd,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,gBACA,oBAAoB;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAED,QAAQ,IAAI,CAAC,WAAW;AACvB,kBAAM,WAAW,GAAG,SAAS,IAAI,OAAO,KAAK;AAC7C,mBACED,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,SAAS;AAAA,gBACT,WAAWC,GAAAA;AAAAA,kBACT;AAAA,kBACA;AAAA,kBACA,YAAY;AAAA,kBACZ;AAAA,gBAAA;AAAA,gBAGF,UAAA;AAAA,kBAAAC,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,IAAI;AAAA,sBACJ,MAAK;AAAA,sBACL,MAAM;AAAA,sBACN,OAAO,OAAO;AAAA,sBACd,SAAS,iBAAiB,OAAO;AAAA,sBACjC;AAAA,sBACA,UAAU,MAAM,aAAa,OAAO,KAAK;AAAA,sBACzC,WAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEX,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,cAnBH,OAAO;AAAA,YAAA;AAAA,UAsBlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
+{"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-caption-semibold\"\n        : size === \"32\"\n          ? \"px-3 py-1.75 typography-body-2-semibold\"\n          : \"h-10 px-4 py-2.25 typography-button-small\";\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-green-500 bg-brand-green-50\",\n            \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n            isSecondSelected && \"translate-x-full\",\n          )}\n        />\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-body-100\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                \"active:rounded-full active:bg-brand-green-50\",\n                disabled && \"pointer-events-none\",\n                sizeClass,\n              )}\n            >\n              {option.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport type * as React from \"react\";\n\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;\n\nexport const Tabs = TabsPrimitive.Root;\n"],"names":["TabsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,OAAOA,yBAAc;;"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport type * as React from \"react\";\n\n/** Props for the {@link Tabs} root component. Extends Radix `Tabs.Root` props. */\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;\n\n/**\n * Root container for a tabbed interface. Manages the active tab state and\n * coordinates {@link TabsList}, {@link TabsTrigger}, and {@link TabsContent}.\n *\n * Built on Radix UI `Tabs`.\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"tab1\">\n *   <TabsList>\n *     <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n *     <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"tab1\">Content 1</TabsContent>\n *   <TabsContent value=\"tab2\">Content 2</TabsContent>\n * </Tabs>\n * ```\n */\nexport const Tabs = TabsPrimitive.Root;\n"],"names":["TabsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,OAAOA,yBAAc;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabsContent.cjs","sources":["../../../../src/components/Tabs/TabsContent.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\"focus-visible:outline-none\", className)}\n    {...props}\n  />\n));\n\nTabsContent.displayName = \"TabsContent\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}
+{"version":3,"file":"TabsContent.cjs","sources":["../../../../src/components/Tabs/TabsContent.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsContent} panel component. */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\n/** Renders the content panel for a given tab `value`. Only visible when its value matches the active tab. */\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\"focus-visible:outline-none\", className)}\n    {...props}\n  />\n));\n\nTabsContent.displayName = \"TabsContent\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n      \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;;"}
+{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\n/** Container for {@link TabsTrigger} elements. Supports both horizontal and vertical orientations. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n      \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;;"}

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

@@ -37,6 +37,8 @@ const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) =
       "data-[state=active]:border-brand-green-500",
       "data-[state=active]:hover:text-hover-100",
       "data-[state=inactive]:hover:text-hover-200",
+      "data-[state=active]:active:text-hover-100",
+      "data-[state=inactive]:active:text-hover-200",
       "data-disabled:pointer-events-none",
       "data-disabled:data-[state=active]:text-disabled-100",
       "data-disabled:data-[state=inactive]:text-disabled-400",

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

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs border-transparent\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:border-brand-green-500\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\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      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}
+{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs border-transparent\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:border-brand-green-500\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-[state=active]:active:text-hover-100\",\n      \"data-[state=inactive]:active:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\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      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}

package/dist/cjs/components/TextField/TextField.cjs

@@ -62,7 +62,7 @@ function getContainerClassName(size, error, disabled) {
 }
 function getInputClassName(size, hasLeftIcon, hasRightIcon) {
   return cn.cn(
-    "h-full w-full rounded-xl bg-transparent text-body-100 placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+    "h-full w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
     INPUT_SIZE_CLASSES[size],
     PADDING_LEFT[size][hasLeftIcon ? 1 : 0],
     PADDING_RIGHT[size][hasRightIcon ? 1 : 0]

package/dist/cjs/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Size variant of the text field */\n  size?: TextFieldSize;\n  /** Error state of the text field */\n  error?: boolean;\n  /** Error message displayed below the input. Overrides helper text when error is true. */\n  errorMessage?: string;\n  /** Icon displayed on the left side of the input */\n  leftIcon?: React.ReactNode;\n  /** Icon displayed on the right side of the input */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field should take the full width of its container */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-body-1-regular\",\n  \"40\": \"py-2 typography-body-1-regular\",\n  \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_LEFT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n  \"48\": [\"pl-4\", \"pl-11\"],\n  \"40\": [\"pl-4\", \"pl-11\"],\n  \"32\": [\"pl-3\", \"pl-10\"],\n};\n\nconst PADDING_RIGHT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n  \"48\": [\"pr-4\", \"pr-11\"],\n  \"40\": [\"pr-4\", \"pr-11\"],\n  \"32\": [\"pr-3\", \"pr-10\"],\n};\n\nconst ICON_LEFT: Record<TextFieldSize, string> = {\n  \"48\": \"left-4\",\n  \"40\": \"left-4\",\n  \"32\": \"left-3\",\n};\n\nconst ICON_RIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"right-4\",\n  \"40\": \"right-4\",\n  \"32\": \"right-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-xl border bg-neutral-100 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-500\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-xl bg-transparent text-body-100 placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    PADDING_LEFT[size][hasLeftIcon ? 1 : 0],\n    PADDING_RIGHT[size][hasRightIcon ? 1 : 0],\n  );\n}\n\nconst ICON_BASE =\n  \"pointer-events-none absolute top-1/2 flex size-5 -translate-y-1/2 items-center justify-center text-body-200\";\n\nfunction TextFieldIcon({\n  children,\n  size,\n  side,\n}: {\n  children: React.ReactNode;\n  size: TextFieldSize;\n  side: \"left\" | \"right\";\n}) {\n  return (\n    <div className={cn(ICON_BASE, side === \"left\" ? ICON_LEFT[size] : ICON_RIGHT[size])}>\n      {children}\n    </div>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-caption-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-500\" : \"text-body-200\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          {leftIcon && (\n            <TextFieldIcon size={size} side=\"left\">\n              {leftIcon}\n            </TextFieldIcon>\n          )}\n\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={getInputClassName(size, !!leftIcon, !!rightIcon)}\n            {...props}\n          />\n\n          {rightIcon && (\n            <TextFieldIcon size={size} side=\"right\">\n              {rightIcon}\n            </TextFieldIcon>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,mBAAkD;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,qBAAoD;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,eAAwE;AAAA,EAC5E,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AACxB;AAEA,MAAM,gBAAyE;AAAA,EAC7E,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AAAA,EACtB,MAAM,CAAC,QAAQ,OAAO;AACxB;AAEA,MAAM,YAA2C;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,aAA4C;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,sBAAsB,MAAqB,OAAgB,UAAoB;AACtF,SAAOA,GAAAA;AAAAA,IACL;AAAA,IACA,QAAQ,qBAAqB;AAAA,IAC7B,CAAC,YAAY,CAAC,SAAS;AAAA,IACvB,iBAAiB,IAAI;AAAA,IACrB,YAAY;AAAA,EAAA;AAEhB;AAEA,SAAS,kBAAkB,MAAqB,aAAsB,cAAuB;AAC3F,SAAOA,GAAAA;AAAAA,IACL;AAAA,IACA,mBAAmB,IAAI;AAAA,IACvB,aAAa,IAAI,EAAE,cAAc,IAAI,CAAC;AAAA,IACtC,cAAc,IAAI,EAAE,eAAe,IAAI,CAAC;AAAA,EAAA;AAE5C;AAEA,MAAM,YACJ;AAEF,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACEC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,GAAAA,GAAG,WAAW,SAAS,SAAS,UAAU,IAAI,IAAI,WAAW,IAAI,CAAC,GAC/E,UACH;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWD,GAAAA;AAAAA,QACT;AAAA,QACA,QAAQ,mBAAmB;AAAA,MAAA;AAAA,MAG5B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,0BAA0B,OAAgB,WAAoB,gBAAyB;AAC9F,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,SAAS,CAAC,aAAa,CAAC,gBAAgB;AAC3C,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAEO,MAAM,YAAYE,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,MAAA;AAC1B,UAAM,UAAU,MAAM;AACtB,UAAM,eAAe,GAAG,OAAO;AAC/B,UAAM,aAAa,SAAS,eAAe,eAAe;AAE1D,8BAA0B,OAAO,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAE9E,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH,GAAAA,GAAG,iBAAiB,aAAa,UAAU,SAAS;AAAA,QAC/D,iBAAe,WAAW,KAAK;AAAA,QAC/B,cAAY,QAAQ,KAAK;AAAA,QAExB,UAAA;AAAA,UAAA,SACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,0CAIJ,OAAA,EAAI,WAAW,sBAAsB,MAAM,OAAO,QAAQ,GACxD,UAAA;AAAA,YAAA,YACCA,2BAAAA,IAAC,eAAA,EAAc,MAAY,MAAK,QAC7B,UAAA,UACH;AAAA,YAGFA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,IAAI;AAAA,gBACJ;AAAA,gBACA,oBAAkB,aAAa,eAAe;AAAA,gBAC9C,gBAAc,SAAS;AAAA,gBACvB,WAAW,kBAAkB,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS;AAAA,gBACzD,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,YAGL,aACCA,2BAAAA,IAAC,eAAA,EAAc,MAAY,MAAK,SAC7B,UAAA,UAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UAEC,cACCA,2BAAAA,IAAC,qBAAA,EAAoB,IAAI,cAAc,OACpC,UAAA,WAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-body-1-regular\",\n  \"40\": \"py-2 typography-body-1-regular\",\n  \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_LEFT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n  \"48\": [\"pl-4\", \"pl-11\"],\n  \"40\": [\"pl-4\", \"pl-11\"],\n  \"32\": [\"pl-3\", \"pl-10\"],\n};\n\nconst PADDING_RIGHT: Record<TextFieldSize, [base: string, withIcon: string]> = {\n  \"48\": [\"pr-4\", \"pr-11\"],\n  \"40\": [\"pr-4\", \"pr-11\"],\n  \"32\": [\"pr-3\", \"pr-10\"],\n};\n\nconst ICON_LEFT: Record<TextFieldSize, string> = {\n  \"48\": \"left-4\",\n  \"40\": \"left-4\",\n  \"32\": \"left-3\",\n};\n\nconst ICON_RIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"right-4\",\n  \"40\": \"right-4\",\n  \"32\": \"right-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-xl border bg-neutral-100 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-500\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    PADDING_LEFT[size][hasLeftIcon ? 1 : 0],\n    PADDING_RIGHT[size][hasRightIcon ? 1 : 0],\n  );\n}\n\nconst ICON_BASE =\n  \"pointer-events-none absolute top-1/2 flex size-5 -translate-y-1/2 items-center justify-center text-body-200\";\n\nfunction TextFieldIcon({\n  children,\n  size,\n  side,\n}: {\n  children: React.ReactNode;\n  size: TextFieldSize;\n  side: \"left\" | \"right\";\n}) {\n  return (\n    <div className={cn(ICON_BASE, side === \"left\" ? ICON_LEFT[size] : ICON_RIGHT[size])}>\n      {children}\n    </div>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-caption-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-500\" : \"text-body-200\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          {leftIcon && (\n            <TextFieldIcon size={size} side=\"left\">\n              {leftIcon}\n            </TextFieldIcon>\n          )}\n\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={getInputClassName(size, !!leftIcon, !!rightIcon)}\n            {...props}\n          />\n\n          {rightIcon && (\n            <TextFieldIcon size={size} side=\"right\">\n              {rightIcon}\n            </TextFieldIcon>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs"],"mappings":"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"}

package/dist/cjs/components/Toast/Toast.cjs

@@ -37,7 +37,7 @@ const ToastViewport = React__namespace.forwardRef(({ className, ...props }, ref)
   {
     ref,
     className: cn.cn(
-      "fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]",
+      "pointer-events-none fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]",
       className
     ),
     ...props

package/dist/cjs/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\nexport type ToastVariant = \"info\" | \"warning\" | \"success\" | \"error\" | \"messageToast\";\n\n// Override \"title\" prop to allow React.ReactNode instead of string | undefined\nexport interface ToastProps\n  extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n  /** Variant of the toast */\n  variant?: ToastVariant;\n  /** Toast title */\n  title?: string;\n  /** Toast description/message */\n  description?: React.ReactNode;\n  /** Action button label */\n  actionLabel?: string;\n  /** Action button click handler */\n  onActionClick?: () => void;\n  /** Show close button */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close notification\" */\n  closeLabel?: string;\n  /** Avatar image source */\n  avatarSrc?: string;\n  /** Avatar alt text */\n  avatarAlt?: string;\n  /** Avatar fallback text */\n  avatarFallback?: string;\n}\n\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon className=\"size-5 text-info-500\" />;\n    case \"warning\":\n      return <WarningIcon className=\"size-5 text-warning-500\" />;\n    case \"success\":\n      return <SuccessIcon className=\"size-5 text-success-500\" />;\n    case \"error\":\n      return <ErrorIcon className=\"size-5 text-error-500\" />;\n  }\n};\n\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      description,\n      actionLabel,\n      onActionClick,\n      showClose = true,\n      closeLabel = \"Close notification\",\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <ToastPrimitive.Root\n        ref={ref}\n        data-testid=\"toast\"\n        className={cn(\n          // Base styles\n          \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all\",\n          // Dark mode\n          \"dark:border-opacity-100\",\n          // Animation\n          \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex w-full items-center gap-3\">\n          <div className=\"self-start\">\n            {variant === \"messageToast\" ? (\n              avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n            ) : (\n              <VariantIcon variant={variant} />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-start\">\n            {title && (\n              <ToastPrimitive.Title className=\"typography-body-2-semibold\">\n                {title}\n              </ToastPrimitive.Title>\n            )}\n            {description && (\n              <ToastPrimitive.Description className=\"typography-body-2-regular mt-1 opacity-90\">\n                {description}\n              </ToastPrimitive.Description>\n            )}\n            {children}\n            {onActionClick && (\n              <Button\n                variant=\"secondary\"\n                // These styles are basically inverted from the selected theme\n                className=\"mt-4 border-body-400 text-body-400\"\n                size=\"32\"\n                onClick={onActionClick}\n              >\n                {actionLabel ?? \"Action\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        {showClose && (\n          <ToastPrimitive.Close asChild>\n            <IconButton\n              icon={<CloseIcon />}\n              aria-label={closeLabel}\n              // same as the button above\n              className=\"absolute top-2 right-2 text-body-300\"\n              variant=\"tertiary\"\n              size=\"24\"\n            />\n          </ToastPrimitive.Close>\n        )}\n      </ToastPrimitive.Root>\n    );\n  },\n);\n\nToast.displayName = \"Toast\";\n"],"names":["ToastPrimitive","React","jsx","cn","InfoIcon","WarningIcon","SuccessIcon","ErrorIcon","jsxs","Avatar","Button","IconButton","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,gBAA8CA,0BAAe;AAEnE,MAAM,gBAAgBC,iBAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACF,0BAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAWG,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAOD,2BAAAA,IAACE,SAAAA,UAAA,EAAS,WAAU,uBAAA,CAAuB;AAAA,IACpD,KAAK;AACH,aAAOF,2BAAAA,IAACG,YAAAA,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAOH,2BAAAA,IAACI,YAAAA,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAOJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,wBAAA,CAAwB;AAAA,EAAA;AAE1D;AAEO,MAAM,QAAQN,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEO,2BAAAA;AAAAA,MAACR,0BAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWG,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAK,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAAN,2BAAAA,IAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,4CAAcO,eAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/EP,2BAAAA,IAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACAM,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,wCACER,0BAAe,OAAf,EAAqB,WAAU,8BAC7B,UAAA,OACH;AAAA,cAED,eACCE,2BAAAA,IAACF,0BAAe,aAAf,EAA2B,WAAU,6CACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACCE,2BAAAA;AAAAA,gBAACQ,OAAAA;AAAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACCR,2BAAAA,IAACF,0BAAe,OAAf,EAAqB,SAAO,MAC3B,UAAAE,2BAAAA;AAAAA,YAACS,WAAAA;AAAAA,YAAA;AAAA,cACC,qCAAOC,UAAAA,WAAA,EAAU;AAAA,cACjB,cAAY;AAAA,cAEZ,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;;;"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/** Visual/semantic variant of the toast notification. */\nexport type ToastVariant = \"info\" | \"warning\" | \"success\" | \"error\" | \"messageToast\";\n\nexport interface ToastProps\n  extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n  /** Visual/semantic variant of the toast. @default \"info\" */\n  variant?: ToastVariant;\n  /** Title text displayed in bold at the top of the toast. */\n  title?: string;\n  /** Description or body content displayed below the title. */\n  description?: React.ReactNode;\n  /** Label for the optional action button. @default \"Action\" */\n  actionLabel?: string;\n  /** Click handler for the action button. When provided, the action button is rendered. */\n  onActionClick?: () => void;\n  /** Whether to show the close button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close notification\" */\n  closeLabel?: string;\n  /** Avatar image URL (used by the `messageToast` variant). */\n  avatarSrc?: string;\n  /** Alt text for the avatar image. */\n  avatarAlt?: string;\n  /** Fallback content for the avatar (e.g. initials). */\n  avatarFallback?: string;\n}\n\n/** Props for the {@link ToastProvider}. Wraps Radix `Toast.Provider`. */\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\n/** Props for the {@link ToastViewport}. Controls where toasts are rendered on screen. */\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\n/** Provides toast context. Wrap your application (or a subtree) with this provider. */\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\n/** Fixed-position container that renders active toasts. Place once at the root of your app. */\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Viewport\n    ref={ref}\n    className={cn(\n      \"pointer-events-none fixed right-0 bottom-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 md:max-w-[420px]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon className=\"size-5 text-info-500\" />;\n    case \"warning\":\n      return <WarningIcon className=\"size-5 text-warning-500\" />;\n    case \"success\":\n      return <SuccessIcon className=\"size-5 text-success-500\" />;\n    case \"error\":\n      return <ErrorIcon className=\"size-5 text-error-500\" />;\n  }\n};\n\n/**\n * A dismissible notification that appears temporarily. Supports `info`,\n * `warning`, `success`, `error`, and `messageToast` variants with optional\n * action button, close control, and avatar.\n *\n * Use inside a {@link ToastProvider} with a {@link ToastViewport}.\n *\n * @example\n * ```tsx\n * <Toast variant=\"success\" title=\"Saved\" description=\"Your changes are live.\" />\n * ```\n */\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      description,\n      actionLabel,\n      onActionClick,\n      showClose = true,\n      closeLabel = \"Close notification\",\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <ToastPrimitive.Root\n        ref={ref}\n        data-testid=\"toast\"\n        className={cn(\n          // Base styles\n          \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all\",\n          // Dark mode\n          \"dark:border-opacity-100\",\n          // Animation\n          \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex w-full items-center gap-3\">\n          <div className=\"self-start\">\n            {variant === \"messageToast\" ? (\n              avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n            ) : (\n              <VariantIcon variant={variant} />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-start\">\n            {title && (\n              <ToastPrimitive.Title className=\"typography-body-2-semibold\">\n                {title}\n              </ToastPrimitive.Title>\n            )}\n            {description && (\n              <ToastPrimitive.Description className=\"typography-body-2-regular mt-1 opacity-90\">\n                {description}\n              </ToastPrimitive.Description>\n            )}\n            {children}\n            {onActionClick && (\n              <Button\n                variant=\"secondary\"\n                // These styles are basically inverted from the selected theme\n                className=\"mt-4 border-body-400 text-body-400\"\n                size=\"32\"\n                onClick={onActionClick}\n              >\n                {actionLabel ?? \"Action\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        {showClose && (\n          <ToastPrimitive.Close asChild>\n            <IconButton\n              icon={<CloseIcon />}\n              aria-label={closeLabel}\n              // same as the button above\n              className=\"absolute top-2 right-2 text-body-300\"\n              variant=\"tertiary\"\n              size=\"24\"\n            />\n          </ToastPrimitive.Close>\n        )}\n      </ToastPrimitive.Root>\n    );\n  },\n);\n\nToast.displayName = \"Toast\";\n"],"names":["ToastPrimitive","React","jsx","cn","InfoIcon","WarningIcon","SuccessIcon","ErrorIcon","jsxs","Avatar","Button","IconButton","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CO,MAAM,gBAA8CA,0BAAe;AAGnE,MAAM,gBAAgBC,iBAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACF,0BAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAWG,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAOD,2BAAAA,IAACE,SAAAA,UAAA,EAAS,WAAU,uBAAA,CAAuB;AAAA,IACpD,KAAK;AACH,aAAOF,2BAAAA,IAACG,YAAAA,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAOH,2BAAAA,IAACI,YAAAA,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAOJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,wBAAA,CAAwB;AAAA,EAAA;AAE1D;AAcO,MAAM,QAAQN,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEO,2BAAAA;AAAAA,MAACR,0BAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWG,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAK,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAAN,2BAAAA,IAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,4CAAcO,eAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/EP,2BAAAA,IAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACAM,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,wCACER,0BAAe,OAAf,EAAqB,WAAU,8BAC7B,UAAA,OACH;AAAA,cAED,eACCE,2BAAAA,IAACF,0BAAe,aAAf,EAA2B,WAAU,6CACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACCE,2BAAAA;AAAAA,gBAACQ,OAAAA;AAAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACCR,2BAAAA,IAACF,0BAAe,OAAf,EAAqB,SAAO,MAC3B,UAAAE,2BAAAA;AAAAA,YAACS,WAAAA;AAAAA,YAAA;AAAA,cACC,qCAAOC,UAAAA,WAAA,EAAU;AAAA,cACjB,cAAY;AAAA,cAEZ,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * !TODO: This is a temporary component to fix a bug in the <Switch />, this needs rebuilding once design is ready https://linear.app/fanvue/issue/ENG-7226/component-library-tooltip-component\n */\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /** Whether to show the arrow pointer */\n  showArrow?: boolean;\n}\n\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showArrow && (\n        <TooltipPrimitive.Arrow className=\"fill-background-solid\" width={12} height={6} />\n      )}\n    </TooltipPrimitive.Content>\n  </TooltipPrimitive.Portal>\n));\n\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","React","jsx","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,kBAAkBA,4BAAiB;AAIzC,MAAM,UAAUA,4BAAiB;AAIjC,MAAM,iBAAiBA,4BAAiB;AAQxC,MAAM,iBAAiBC,iBAAM,WAGlC,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,GAAG,UAAU,GAAG,MAAA,GAAS,QACtEC,2BAAAA,IAACF,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,EAACH,4BAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAWI,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,aACCF,2BAAAA,IAACF,4BAAiB,OAAjB,EAAuB,WAAU,yBAAwB,OAAO,IAAI,QAAQ,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAEpF,GACF,CACD;AAED,eAAe,cAAc;;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * @internal Temporary tooltip implementation — will be rebuilt once design is\n * finalised. See https://linear.app/fanvue/issue/ENG-7226\n */\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /** Whether to show the arrow pointer. @default true */\n  showArrow?: boolean;\n}\n\n/** The popup content of the tooltip. Renders inside a portal. */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showArrow && (\n        <TooltipPrimitive.Arrow className=\"fill-background-solid\" width={12} height={6} />\n      )}\n    </TooltipPrimitive.Content>\n  </TooltipPrimitive.Portal>\n));\n\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","React","jsx","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,kBAAkBA,4BAAiB;AAMzC,MAAM,UAAUA,4BAAiB;AAMjC,MAAM,iBAAiBA,4BAAiB;AASxC,MAAM,iBAAiBC,iBAAM,WAGlC,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,GAAG,UAAU,GAAG,MAAA,GAAS,QACtEC,2BAAAA,IAACF,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,EAACH,4BAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAWI,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,aACCF,2BAAAA,IAACF,4BAAiB,OAAjB,EAAuB,WAAU,yBAAwB,OAAO,IAAI,QAAQ,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAEpF,GACF,CACD;AAED,eAAe,cAAc;;;;;"}

package/dist/components/Alert/Alert.mjs

@@ -5,10 +5,10 @@ import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { CrossIcon } from "../Icons/CrossIcon.mjs";
 const CLOSE_BUTTON_CLASSES = {
-  info: "hover:bg-info-500/10 text-info-500 motion-safe:transition-colors motion-safe:duration-150",
-  success: "hover:bg-success-500/10 text-success-500 motion-safe:transition-colors motion-safe:duration-150",
-  warning: "hover:bg-warning-500/10 text-warning-500 motion-safe:transition-colors motion-safe:duration-150",
-  error: "hover:bg-error-500/10 text-error-500 motion-safe:transition-colors motion-safe:duration-150"
+  info: "hover:bg-info-500/10 active:bg-info-500/10 text-info-500 motion-safe:transition-colors motion-safe:duration-150",
+  success: "hover:bg-success-500/10 active:bg-success-500/10 text-success-500 motion-safe:transition-colors motion-safe:duration-150",
+  warning: "hover:bg-warning-500/10 active:bg-warning-500/10 text-warning-500 motion-safe:transition-colors motion-safe:duration-150",
+  error: "hover:bg-error-500/10 active:bg-error-500/10 text-error-500 motion-safe:transition-colors motion-safe:duration-150"
 };
 const Alert = React.forwardRef(
   ({