@pk-design/react-tailwind 1.6.0 → 1.7.1

package/dist/es/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Radio } from '../Radio'\nimport { Label } from '../Label'\nimport { buildClassName } from '../../utils/build-classname'\nimport { TextContent } from '../TextContent'\nimport type { RadioGroupProps, RadionGroupItem } from './RadioGroup.types'\n\nconst COLUMN_GRID_MAP: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-1 md:grid-cols-2',\n  3: 'grid-cols-1 md:grid-cols-3',\n  4: 'grid-cols-1 md:grid-cols-4',\n}\n\nexport const RadioGroup: React.FC<RadioGroupProps> = (props) => {\n  const {\n    name,\n    variant = 'default',\n    size = 'md',\n    theme = 'primary',\n    label,\n    labelClass,\n    labelWrapperClass,\n    labelHint,\n    containerClass,\n    options,\n    value,\n    columns,\n    disabled = false,\n    row,\n    error,\n    showErrorMessage = true,\n    onChange,\n  } = props\n\n  const items = useMemo(\n    () =>\n      options?.map((option) =>\n        typeof option === 'string'\n          ? {\n              label: option,\n              value: option,\n              description: undefined,\n              icon: undefined,\n              disabled: undefined,\n            }\n          : option,\n      ) ?? [],\n    [options],\n  )\n\n  const isCards = variant === 'cards'\n\n  return (\n    <div className={buildClassName(containerClass)}>\n      {label && (\n        <div\n          className={buildClassName('flex items-center justify-between mb-3', labelWrapperClass)}\n        >\n          <Label className={labelClass}>{label}</Label>\n          {labelHint}\n        </div>\n      )}\n\n      <div\n        className={buildClassName(\n          columns\n            ? buildClassName('grid gap-3', COLUMN_GRID_MAP[columns])\n            : row || isCards\n              ? 'flex flex-wrap gap-3'\n              : 'flex flex-col gap-3',\n        )}\n      >\n        {items.map((item) => {\n          const isSelected = value === item.value\n          const isItemDisabled = disabled || Boolean(item.disabled)\n\n          if (isCards) {\n            return (\n              <label\n                key={item.value}\n                htmlFor={`${name}-${item.value}`}\n                className={buildClassName(\n                  'relative flex items-start gap-3 p-4 rounded-xl border transition-all cursor-pointer select-none min-w-[200px] flex-1',\n                  isSelected\n                    ? 'border-[var(--ui-primary)] bg-blue-50/40 dark:bg-blue-950/30 ring-2 ring-[var(--ui-primary-ring)]/30'\n                    : 'border-[var(--ui-border)] bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600',\n                  isItemDisabled &&\n                    'opacity-50 cursor-not-allowed pointer-events-none bg-gray-50 dark:bg-gray-800/50',\n                )}\n              >\n                <Radio\n                  name={name}\n                  id={`${name}-${item.value}`}\n                  value={item.value}\n                  aria-label={item.label}\n                  size={size}\n                  theme={theme}\n                  checked={isSelected}\n                  disabled={isItemDisabled}\n                  onChange={onChange}\n                  containerClass=\"pt-0.5\"\n                />\n\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2\">\n                    {item.icon && (\n                      <span className=\"shrink-0 text-gray-500 dark:text-gray-400\">{item.icon}</span>\n                    )}\n                    <span className=\"text-sm font-semibold text-gray-900 dark:text-white truncate\">\n                      {item.label}\n                    </span>\n                  </div>\n                  {item.description && (\n                    <p className=\"mt-1 text-xs text-gray-500 dark:text-gray-400 font-normal leading-relaxed\">\n                      {item.description}\n                    </p>\n                  )}\n                </div>\n              </label>\n            )\n          }\n\n          return (\n            <Radio\n              key={item.value}\n              name={name}\n              id={`${name}-${item.value}`}\n              label={item.label}\n              description={item.description}\n              value={item.value}\n              size={size}\n              theme={theme}\n              checked={isSelected}\n              disabled={isItemDisabled}\n              onChange={onChange}\n            />\n          )\n        })}\n      </div>\n\n      {showErrorMessage && error && (\n        <div className=\"mt-1.5\">\n          <TextContent error small>\n            {error}\n          </TextContent>\n        </div>\n      )}\n    </div>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/RadioSwitch/RadioSwitch.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const SIZE_CONTAINER_CLASS = {
+    sm: 'p-1.5 gap-1 rounded-lg text-xs',
+    md: 'p-2 gap-1.5 rounded-xl text-sm',
+    lg: 'p-2 gap-2 rounded-2xl text-base',
+};
+const SIZE_ITEM_CLASS = {
+    sm: 'px-4 py-2 text-xs rounded-md min-w-[64px]',
+    md: 'px-5 py-2.5 text-sm rounded-lg min-w-[76px]',
+    lg: 'px-7 py-3 text-base rounded-xl min-w-[92px]',
+};
+const SIZE_ITEM_DESC_CLASS = {
+    sm: 'px-4 py-2.5 text-xs rounded-md min-w-[80px]',
+    md: 'px-5 py-3 text-sm rounded-lg min-w-[96px]',
+    lg: 'px-7 py-3.5 text-base rounded-xl min-w-[112px]',
+};
+const THEME_SWITCH_CLASS = {
+    primary: 'bg-[var(--ui-primary)] text-white shadow-xs',
+    secondary: 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-xs',
+    dark: 'bg-gray-900 dark:bg-black text-white shadow-xs',
+};
+const RadioSwitch = ({ label, items, selected, size = 'md', theme = 'primary', disabled = false, onChange, wrapperClass, switchClass, contentClass, descriptionClass, }) => {
+    const containerRef = useRef(null);
+    const [style, setStyle] = useState({ left: 0, top: 0, width: 0, height: 0, ready: false });
+    const getLabel = (i) => (typeof i === 'string' ? i : i.label);
+    const getValue = (i) => (typeof i === 'string' ? i : i.value);
+    const getDescription = (i) => { var _a; return typeof i === 'string' ? '' : ((_a = i.description) !== null && _a !== void 0 ? _a : ''); };
+    const isItemDisabled = (i) => disabled || (typeof i === 'string' ? false : Boolean(i.disabled));
+    const hasDescription = items.some((i) => typeof i !== 'string' && Boolean(i.description));
+    // Position calculation for GPU sliding highlight
+    useLayoutEffect(() => {
+        if (!containerRef.current)
+            return;
+        const updatePosition = () => {
+            if (!containerRef.current)
+                return;
+            const activeEl = containerRef.current.querySelector('[data-selected="true"]');
+            if (!activeEl)
+                return;
+            const parentRect = containerRef.current.getBoundingClientRect();
+            const rect = activeEl.getBoundingClientRect();
+            const left = activeEl.offsetLeft || rect.left - parentRect.left;
+            const top = activeEl.offsetTop || rect.top - parentRect.top;
+            const width = activeEl.offsetWidth || rect.width;
+            const height = activeEl.offsetHeight || rect.height;
+            setStyle({
+                left,
+                top,
+                width,
+                height,
+                ready: true,
+            });
+        };
+        updatePosition();
+        const resizeObserver = new ResizeObserver(updatePosition);
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, [selected, items, size]);
+    // ARIA Keyboard navigation handler
+    const handleGroupKeyDown = (e) => {
+        const enabledItems = items.filter((it) => !isItemDisabled(it));
+        if (enabledItems.length === 0)
+            return;
+        const currentVal = selected;
+        const currentEnabledIndex = enabledItems.findIndex((it) => getValue(it) === currentVal);
+        let nextItem = null;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const nextIdx = (currentEnabledIndex + 1) % enabledItems.length;
+            nextItem = enabledItems[nextIdx];
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prevIdx = (currentEnabledIndex - 1 + enabledItems.length) % enabledItems.length;
+            nextItem = enabledItems[prevIdx];
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            nextItem = enabledItems[0];
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            nextItem = enabledItems[enabledItems.length - 1];
+        }
+        if (nextItem) {
+            onChange(getValue(nextItem));
+        }
+    };
+    return (jsxs("div", { ref: containerRef, role: "radiogroup", tabIndex: 0, "aria-label": label, onKeyDown: handleGroupKeyDown, className: buildClassName('relative inline-grid grid-flow-col auto-cols-fr items-stretch bg-gray-100 dark:bg-gray-800/80 border border-[var(--ui-border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_CONTAINER_CLASS[size], disabled && 'opacity-60 pointer-events-none', wrapperClass), children: [jsx("div", { className: buildClassName('absolute transition-all duration-200 ease-[cubic-bezier(.25,.8,.25,1)] pointer-events-none', THEME_SWITCH_CLASS[theme], size === 'sm' ? 'rounded-md' : 'rounded-lg', style.ready ? 'opacity-100' : 'opacity-0', switchClass), style: {
+                    transform: `translate(${style.left}px, ${style.top}px)`,
+                    width: style.width,
+                    height: style.height,
+                } }), items.map((item) => {
+                const itemVal = getValue(item);
+                const isSelected = selected === itemVal;
+                const disabledState = isItemDisabled(item);
+                return (jsx("button", { type: "button", role: "radio", "aria-checked": isSelected, "aria-disabled": disabledState, tabIndex: isSelected && !disabledState ? 0 : -1, disabled: disabledState, "data-radio-item": true, "data-value": itemVal, "data-selected": isSelected ? 'true' : undefined, onClick: () => {
+                        if (!disabledState) {
+                            onChange(itemVal);
+                        }
+                    }, className: buildClassName('relative z-10 appearance-none m-0 select-none group transition-colors flex flex-col items-center justify-center w-full text-center font-semibold focus:outline-none', hasDescription ? SIZE_ITEM_DESC_CLASS[size] : SIZE_ITEM_CLASS[size], disabledState ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                        ? theme === 'secondary'
+                            ? 'text-gray-900 dark:text-white'
+                            : 'text-white'
+                        : buildClassName('text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white', !disabledState && 'hover:bg-black/[0.04] dark:hover:bg-white/[0.06]')), children: getDescription(item) ? (jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsx("span", { className: "font-semibold leading-tight text-center truncate", children: getLabel(item) }), jsx("span", { className: buildClassName('text-[12px] leading-tight opacity-80 font-normal text-center truncate', descriptionClass), children: getDescription(item) })] })) : (jsx("span", { className: buildClassName('truncate leading-tight text-center', contentClass), children: getLabel(item) })) }, itemVal));
+            })] }));
+};
+RadioSwitch.displayName = 'RadioSwitch';
+
+export { RadioSwitch };
+//# sourceMappingURL=RadioSwitch.js.map

package/dist/es/components/RadioSwitch/RadioSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioSwitch.js","sources":["../../../../../src/components/RadioSwitch/RadioSwitch.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type {\n  RadioSwitchItem,\n  RadioSwitchProps,\n  RadioSwitchSize,\n  RadioSwitchTheme,\n} from './RadioSwitch.types'\n\nconst SIZE_CONTAINER_CLASS: Record<RadioSwitchSize, string> = {\n  sm: 'p-1.5 gap-1 rounded-lg text-xs',\n  md: 'p-2 gap-1.5 rounded-xl text-sm',\n  lg: 'p-2 gap-2 rounded-2xl text-base',\n}\n\nconst SIZE_ITEM_CLASS: Record<RadioSwitchSize, string> = {\n  sm: 'px-4 py-2 text-xs rounded-md min-w-[64px]',\n  md: 'px-5 py-2.5 text-sm rounded-lg min-w-[76px]',\n  lg: 'px-7 py-3 text-base rounded-xl min-w-[92px]',\n}\n\nconst SIZE_ITEM_DESC_CLASS: Record<RadioSwitchSize, string> = {\n  sm: 'px-4 py-2.5 text-xs rounded-md min-w-[80px]',\n  md: 'px-5 py-3 text-sm rounded-lg min-w-[96px]',\n  lg: 'px-7 py-3.5 text-base rounded-xl min-w-[112px]',\n}\n\nconst THEME_SWITCH_CLASS: Record<RadioSwitchTheme, string> = {\n  primary: 'bg-[var(--ui-primary)] text-white shadow-xs',\n  secondary: 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-xs',\n  dark: 'bg-gray-900 dark:bg-black text-white shadow-xs',\n}\n\nexport const RadioSwitch: React.FC<RadioSwitchProps> = ({\n  label,\n  items,\n  selected,\n  size = 'md',\n  theme = 'primary',\n  disabled = false,\n  onChange,\n  wrapperClass,\n  switchClass,\n  contentClass,\n  descriptionClass,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [style, setStyle] = useState({ left: 0, top: 0, width: 0, height: 0, ready: false })\n\n  const getLabel = (i: RadioSwitchItem) => (typeof i === 'string' ? i : i.label)\n  const getValue = (i: RadioSwitchItem) => (typeof i === 'string' ? i : i.value)\n  const getDescription = (i: RadioSwitchItem) =>\n    typeof i === 'string' ? '' : (i.description ?? '')\n  const isItemDisabled = (i: RadioSwitchItem) =>\n    disabled || (typeof i === 'string' ? false : Boolean(i.disabled))\n\n  const hasDescription = items.some((i) => typeof i !== 'string' && Boolean(i.description))\n\n  // Position calculation for GPU sliding highlight\n  useLayoutEffect(() => {\n    if (!containerRef.current) return\n\n    const updatePosition = () => {\n      if (!containerRef.current) return\n\n      const activeEl = containerRef.current.querySelector(\n        '[data-selected=\"true\"]',\n      ) as HTMLElement | null\n\n      if (!activeEl) return\n\n      const parentRect = containerRef.current.getBoundingClientRect()\n      const rect = activeEl.getBoundingClientRect()\n\n      const left = activeEl.offsetLeft || rect.left - parentRect.left\n      const top = activeEl.offsetTop || rect.top - parentRect.top\n      const width = activeEl.offsetWidth || rect.width\n      const height = activeEl.offsetHeight || rect.height\n\n      setStyle({\n        left,\n        top,\n        width,\n        height,\n        ready: true,\n      })\n    }\n\n    updatePosition()\n\n    const resizeObserver = new ResizeObserver(updatePosition)\n    resizeObserver.observe(containerRef.current)\n\n    return () => resizeObserver.disconnect()\n  }, [selected, items, size])\n\n  // ARIA Keyboard navigation handler\n  const handleGroupKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    const enabledItems = items.filter((it) => !isItemDisabled(it))\n    if (enabledItems.length === 0) return\n\n    const currentVal = selected\n    const currentEnabledIndex = enabledItems.findIndex((it) => getValue(it) === currentVal)\n\n    let nextItem: RadioSwitchItem | null = null\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      const nextIdx = (currentEnabledIndex + 1) % enabledItems.length\n      nextItem = enabledItems[nextIdx]\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      const prevIdx = (currentEnabledIndex - 1 + enabledItems.length) % enabledItems.length\n      nextItem = enabledItems[prevIdx]\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      nextItem = enabledItems[0]\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      nextItem = enabledItems[enabledItems.length - 1]\n    }\n\n    if (nextItem) {\n      onChange(getValue(nextItem))\n    }\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      role=\"radiogroup\"\n      tabIndex={0}\n      aria-label={label}\n      onKeyDown={handleGroupKeyDown}\n      className={buildClassName(\n        'relative inline-grid grid-flow-col auto-cols-fr items-stretch bg-gray-100 dark:bg-gray-800/80 border border-[var(--ui-border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n        SIZE_CONTAINER_CLASS[size],\n        disabled && 'opacity-60 pointer-events-none',\n        wrapperClass,\n      )}\n    >\n      {/* GPU Sliding highlight background */}\n      <div\n        className={buildClassName(\n          'absolute transition-all duration-200 ease-[cubic-bezier(.25,.8,.25,1)] pointer-events-none',\n          THEME_SWITCH_CLASS[theme],\n          size === 'sm' ? 'rounded-md' : 'rounded-lg',\n          style.ready ? 'opacity-100' : 'opacity-0',\n          switchClass,\n        )}\n        style={{\n          transform: `translate(${style.left}px, ${style.top}px)`,\n          width: style.width,\n          height: style.height,\n        }}\n      />\n\n      {/* Item Buttons */}\n      {items.map((item) => {\n        const itemVal = getValue(item)\n        const isSelected = selected === itemVal\n        const disabledState = isItemDisabled(item)\n\n        return (\n          <button\n            key={itemVal}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-disabled={disabledState}\n            tabIndex={isSelected && !disabledState ? 0 : -1}\n            disabled={disabledState}\n            data-radio-item\n            data-value={itemVal}\n            data-selected={isSelected ? 'true' : undefined}\n            onClick={() => {\n              if (!disabledState) {\n                onChange(itemVal)\n              }\n            }}\n            className={buildClassName(\n              'relative z-10 appearance-none m-0 select-none group transition-colors flex flex-col items-center justify-center w-full text-center font-semibold focus:outline-none',\n              hasDescription ? SIZE_ITEM_DESC_CLASS[size] : SIZE_ITEM_CLASS[size],\n              disabledState ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              isSelected\n                ? theme === 'secondary'\n                  ? 'text-gray-900 dark:text-white'\n                  : 'text-white'\n                : buildClassName(\n                    'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white',\n                    !disabledState && 'hover:bg-black/[0.04] dark:hover:bg-white/[0.06]',\n                  ),\n            )}\n          >\n            {getDescription(item) ? (\n              <div\n                className={buildClassName(\n                  'flex flex-col items-center justify-center gap-1',\n                  contentClass,\n                )}\n              >\n                <span className=\"font-semibold leading-tight text-center truncate\">\n                  {getLabel(item)}\n                </span>\n                <span\n                  className={buildClassName(\n                    'text-[12px] leading-tight opacity-80 font-normal text-center truncate',\n                    descriptionClass,\n                  )}\n                >\n                  {getDescription(item)}\n                </span>\n              </div>\n            ) : (\n              <span className={buildClassName('truncate leading-tight text-center', contentClass)}>\n                {getLabel(item)}\n              </span>\n            )}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\nRadioSwitch.displayName = 'RadioSwitch'\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AASA,MAAM,oBAAoB,GAAoC;AAC5D,IAAA,EAAE,EAAE,gCAAgC;AACpC,IAAA,EAAE,EAAE,gCAAgC;AACpC,IAAA,EAAE,EAAE,iCAAiC;CACtC;AAED,MAAM,eAAe,GAAoC;AACvD,IAAA,EAAE,EAAE,2CAA2C;AAC/C,IAAA,EAAE,EAAE,6CAA6C;AACjD,IAAA,EAAE,EAAE,6CAA6C;CAClD;AAED,MAAM,oBAAoB,GAAoC;AAC5D,IAAA,EAAE,EAAE,6CAA6C;AACjD,IAAA,EAAE,EAAE,2CAA2C;AAC/C,IAAA,EAAE,EAAE,gDAAgD;CACrD;AAED,MAAM,kBAAkB,GAAqC;AAC3D,IAAA,OAAO,EAAE,6CAA6C;AACtD,IAAA,SAAS,EAAE,mEAAmE;AAC9E,IAAA,IAAI,EAAE,gDAAgD;CACvD;AAEM,MAAM,WAAW,GAA+B,CAAC,EACtD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,gBAAgB,GACjB,KAAI;AACH,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IAE1F,MAAM,QAAQ,GAAG,CAAC,CAAkB,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;IAC9E,MAAM,QAAQ,GAAG,CAAC,CAAkB,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AAC9E,IAAA,MAAM,cAAc,GAAG,CAAC,CAAkB,KAAI,EAAA,IAAA,EAAA,CAAA,CAC5C,OAAA,OAAO,CAAC,KAAK,QAAQ,GAAG,EAAE,IAAI,CAAA,EAAA,GAAA,CAAC,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE,CAAC,CAAA,EAAA;AACpD,IAAA,MAAM,cAAc,GAAG,CAAC,CAAkB,KACxC,QAAQ,KAAK,OAAO,CAAC,KAAK,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEnE,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;;IAGzF,eAAe,CAAC,MAAK;QACnB,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAE3B,MAAM,cAAc,GAAG,MAAK;YAC1B,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE;YAE3B,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,CACjD,wBAAwB,CACH;AAEvB,YAAA,IAAI,CAAC,QAAQ;gBAAE;YAEf,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE;AAC/D,YAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,qBAAqB,EAAE;AAE7C,YAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI;AAC/D,YAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,SAAS,IAAI,IAAI,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG;YAC3D,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK;YAChD,MAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM;AAEnD,YAAA,QAAQ,CAAC;gBACP,IAAI;gBACJ,GAAG;gBACH,KAAK;gBACL,MAAM;AACN,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA,CAAC;AACJ,QAAA,CAAC;AAED,QAAA,cAAc,EAAE;AAEhB,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC;AACzD,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAE5C,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;IAC1C,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;;AAG3B,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAmC,KAAI;AACjE,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;AAC9D,QAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE;QAE/B,MAAM,UAAU,GAAG,QAAQ;AAC3B,QAAA,MAAM,mBAAmB,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC;QAEvF,IAAI,QAAQ,GAA2B,IAAI;AAE3C,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACnD,CAAC,CAAC,cAAc,EAAE;YAClB,MAAM,OAAO,GAAG,CAAC,mBAAmB,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM;AAC/D,YAAA,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC;QAClC;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;YACvD,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,OAAO,GAAG,CAAC,mBAAmB,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,IAAI,YAAY,CAAC,MAAM;AACrF,YAAA,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC;QAClC;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC;QAC5B;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YAC1B,CAAC,CAAC,cAAc,EAAE;YAClB,QAAQ,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAClD;QAEA,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC9B;AACF,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,CAAC,EAAA,YAAA,EACC,KAAK,EACjB,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,cAAc,CACvB,oNAAoN,EACpN,oBAAoB,CAAC,IAAI,CAAC,EAC1B,QAAQ,IAAI,gCAAgC,EAC5C,YAAY,CACb,EAAA,QAAA,EAAA,CAGDC,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,4FAA4F,EAC5F,kBAAkB,CAAC,KAAK,CAAC,EACzB,IAAI,KAAK,IAAI,GAAG,YAAY,GAAG,YAAY,EAC3C,KAAK,CAAC,KAAK,GAAG,aAAa,GAAG,WAAW,EACzC,WAAW,CACZ,EACD,KAAK,EAAE;oBACL,SAAS,EAAE,aAAa,KAAK,CAAC,IAAI,CAAA,IAAA,EAAO,KAAK,CAAC,GAAG,CAAA,GAAA,CAAK;oBACvD,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;iBACrB,EAAA,CACD,EAGD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AAClB,gBAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC;AAC9B,gBAAA,MAAM,UAAU,GAAG,QAAQ,KAAK,OAAO;AACvC,gBAAA,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC;gBAE1C,QACEA,gBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EAAA,cAAA,EACE,UAAU,mBACT,aAAa,EAC5B,QAAQ,EAAE,UAAU,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,EAAE,EAC/C,QAAQ,EAAE,aAAa,EAAA,iBAAA,EAAA,IAAA,EAAA,YAAA,EAEX,OAAO,EAAA,eAAA,EACJ,UAAU,GAAG,MAAM,GAAG,SAAS,EAC9C,OAAO,EAAE,MAAK;wBACZ,IAAI,CAAC,aAAa,EAAE;4BAClB,QAAQ,CAAC,OAAO,CAAC;wBACnB;AACF,oBAAA,CAAC,EACD,SAAS,EAAE,cAAc,CACvB,qKAAqK,EACrK,cAAc,GAAG,oBAAoB,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,EACnE,aAAa,GAAG,+BAA+B,GAAG,gBAAgB,EAClE;0BACI,KAAK,KAAK;AACV,8BAAE;AACF,8BAAE;AACJ,0BAAE,cAAc,CACZ,4EAA4E,EAC5E,CAAC,aAAa,IAAI,kDAAkD,CACrE,CACN,EAAA,QAAA,EAEA,cAAc,CAAC,IAAI,CAAC,IACnBD,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,iDAAiD,EACjD,YAAY,CACb,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC/D,QAAQ,CAAC,IAAI,CAAC,EAAA,CACV,EACPA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,uEAAuE,EACvE,gBAAgB,CACjB,EAAA,QAAA,EAEA,cAAc,CAAC,IAAI,CAAC,EAAA,CAChB,IACH,KAENA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,cAAc,CAAC,oCAAoC,EAAE,YAAY,CAAC,EAAA,QAAA,EAChF,QAAQ,CAAC,IAAI,CAAC,EAAA,CACV,CACR,IApDI,OAAO,CAqDL;YAEb,CAAC,CAAC,CAAA,EAAA,CACE;AAEV;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/es/components/RangeInput/RangeInput.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { Label } from '../Label/Label.js';
+import { buildClassName } from '../../utils/build-classname.js';
+import { isEmpty } from '../../utils/is-empty.js';
+import { TextContent } from '../TextContent/TextContent.js';
+
+const sizeClasses = {
+    sm: {
+        track: 'h-1.5',
+        thumb: '[&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5',
+        text: 'text-xs',
+    },
+    md: {
+        track: 'h-2',
+        thumb: '[&::-webkit-slider-thumb]:h-4.5 [&::-webkit-slider-thumb]:w-4.5 [&::-moz-range-thumb]:h-4.5 [&::-moz-range-thumb]:w-4.5',
+        text: 'text-sm',
+    },
+    lg: {
+        track: 'h-3',
+        thumb: '[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-6',
+        text: 'text-base',
+    },
+};
+const RangeInput = forwardRef((props, ref) => {
+    const { label, labelClass = '', labelHint = null, containerClass = '', className = '', size = 'md', showValue = true, valueSuffix = '', showTooltip = false, marks, error = null, helperText, showErrorMessage = true, id, min = 0, max = 100, value, defaultValue, onChange, ...inputProps } = props;
+    const [hovering, setHovering] = useState(false);
+    const [internalValue, setInternalValue] = useState(Number(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min));
+    const isControlled = value !== undefined;
+    const currentVal = Number(isControlled ? value : internalValue);
+    const numMin = Number(min);
+    const numMax = Number(max);
+    const percent = numMax > numMin ? ((currentVal - numMin) / (numMax - numMin)) * 100 : 0;
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    const hasError = !isEmpty(error);
+    const handleSliderChange = (e) => {
+        if (!isControlled) {
+            setInternalValue(Number(e.target.value));
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    // Parse custom marks if object provided
+    const markEntries = typeof marks === 'object' && marks !== null
+        ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))
+        : typeof marks === 'boolean' && marks
+            ? [
+                { value: numMin, label: String(numMin) },
+                { value: (numMin + numMax) / 2, label: String(Math.round((numMin + numMax) / 2)) },
+                { value: numMax, label: String(numMax) },
+            ]
+            : null;
+    return (jsxs("div", { className: buildClassName('group space-y-2', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { htmlFor: id, className: labelClass, children: label }), labelHint] })), jsxs("div", { className: "relative flex items-center gap-3", children: [jsxs("div", { className: "relative flex-1 py-2", children: [showTooltip && hovering && (jsxs("div", { className: "absolute -top-7 transform -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none transition-all z-20", style: { left: `${percent}%` }, children: [currentVal, valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })), jsx("input", { ref: ref, type: "range", id: id, min: min, max: max, value: currentVal, onChange: handleSliderChange, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), ...inputProps, style: {
+                                    background: `linear-gradient(to right, ${hasError ? '#ef4444' : '#2563eb'} 0%, ${hasError ? '#ef4444' : '#2563eb'} ${percent}%, ${document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'} ${percent}%, ${document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'} 100%)`,
+                                }, className: buildClassName('w-full rounded-lg appearance-none cursor-pointer transition-all', currentSize.track, currentSize.thumb, '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full', '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:shadow-md', hasError
+                                    ? '[&::-webkit-slider-thumb]:border-red-600 [&::-moz-range-thumb]:border-red-600'
+                                    : '[&::-webkit-slider-thumb]:border-blue-600 [&::-moz-range-thumb]:border-blue-600', '[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:shadow-md', className) }), markEntries && (jsx("div", { className: "relative w-full h-4 mt-1", children: markEntries.map((m) => {
+                                    const markPercent = ((m.value - numMin) / (numMax - numMin)) * 100;
+                                    return (jsxs("div", { className: "absolute top-0 transform -translate-x-1/2 flex flex-col items-center", style: { left: `${markPercent}%` }, children: [jsx("span", { className: "w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full" }), jsx("span", { className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5", children: m.label })] }, m.value));
+                                }) }))] }), showValue && (jsxs("span", { className: buildClassName('font-medium text-gray-700 dark:text-gray-300 min-w-[3rem] text-right shrink-0', currentSize.text), children: [currentVal, valueSuffix] }))] }), (showErrorMessage && hasError) || helperText ? (jsx("div", { className: "mt-1", children: showErrorMessage && hasError ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null })) : null] }));
+});
+RangeInput.displayName = 'RangeInput';
+
+export { RangeInput };
+//# sourceMappingURL=RangeInput.js.map

package/dist/es/components/RangeInput/RangeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInput.js","sources":["../../../../../src/components/RangeInput/RangeInput.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { Label } from '../Label'\nimport { buildClassName } from '../../utils/build-classname'\nimport { isEmpty } from '../../utils/is-empty'\nimport { TextContent } from '../TextContent'\nimport type { RangeInputProps, RangeInputSize } from './RangeInput.types'\n\nconst sizeClasses: Record<RangeInputSize, { track: string; thumb: string; text: string }> = {\n  sm: {\n    track: 'h-1.5',\n    thumb:\n      '[&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5',\n    text: 'text-xs',\n  },\n  md: {\n    track: 'h-2',\n    thumb:\n      '[&::-webkit-slider-thumb]:h-4.5 [&::-webkit-slider-thumb]:w-4.5 [&::-moz-range-thumb]:h-4.5 [&::-moz-range-thumb]:w-4.5',\n    text: 'text-sm',\n  },\n  lg: {\n    track: 'h-3',\n    thumb:\n      '[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-6',\n    text: 'text-base',\n  },\n}\n\nexport const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>((props, ref) => {\n  const {\n    label,\n    labelClass = '',\n    labelHint = null,\n    containerClass = '',\n    className = '',\n    size = 'md',\n    showValue = true,\n    valueSuffix = '',\n    showTooltip = false,\n    marks,\n    error = null,\n    helperText,\n    showErrorMessage = true,\n    id,\n    min = 0,\n    max = 100,\n    value,\n    defaultValue,\n    onChange,\n    ...inputProps\n  } = props\n\n  const [hovering, setHovering] = useState(false)\n  const [internalValue, setInternalValue] = useState<number>(Number(defaultValue ?? min))\n\n  const isControlled = value !== undefined\n  const currentVal = Number(isControlled ? value : internalValue)\n  const numMin = Number(min)\n  const numMax = Number(max)\n\n  const percent = numMax > numMin ? ((currentVal - numMin) / (numMax - numMin)) * 100 : 0\n  const currentSize = sizeClasses[size] || sizeClasses.md\n  const hasError = !isEmpty(error)\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setInternalValue(Number(e.target.value))\n    }\n    onChange?.(e)\n  }\n\n  // Parse custom marks if object provided\n  const markEntries =\n    typeof marks === 'object' && marks !== null\n      ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))\n      : typeof marks === 'boolean' && marks\n        ? [\n            { value: numMin, label: String(numMin) },\n            { value: (numMin + numMax) / 2, label: String(Math.round((numMin + numMax) / 2)) },\n            { value: numMax, label: String(numMax) },\n          ]\n        : null\n\n  return (\n    <div className={buildClassName('group space-y-2', containerClass)}>\n      {label && (\n        <div className=\"flex items-center justify-between mb-1\">\n          <Label htmlFor={id} className={labelClass}>\n            {label}\n          </Label>\n          {labelHint}\n        </div>\n      )}\n\n      <div className=\"relative flex items-center gap-3\">\n        <div className=\"relative flex-1 py-2\">\n          {/* Floating Tooltip Popup Badge */}\n          {showTooltip && hovering && (\n            <div\n              className=\"absolute -top-7 transform -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none transition-all z-20\"\n              style={{ left: `${percent}%` }}\n            >\n              {currentVal}\n              {valueSuffix}\n              <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100\" />\n            </div>\n          )}\n\n          <input\n            ref={ref}\n            type=\"range\"\n            id={id}\n            min={min}\n            max={max}\n            value={currentVal}\n            onChange={handleSliderChange}\n            onMouseEnter={() => setHovering(true)}\n            onMouseLeave={() => setHovering(false)}\n            {...inputProps}\n            style={{\n              background: `linear-gradient(to right, ${hasError ? '#ef4444' : '#2563eb'} 0%, ${\n                hasError ? '#ef4444' : '#2563eb'\n              } ${percent}%, ${\n                document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'\n              } ${percent}%, ${\n                document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'\n              } 100%)`,\n            }}\n            className={buildClassName(\n              'w-full rounded-lg appearance-none cursor-pointer transition-all',\n              currentSize.track,\n              currentSize.thumb,\n              '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full',\n              '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:shadow-md',\n              hasError\n                ? '[&::-webkit-slider-thumb]:border-red-600 [&::-moz-range-thumb]:border-red-600'\n                : '[&::-webkit-slider-thumb]:border-blue-600 [&::-moz-range-thumb]:border-blue-600',\n              '[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:shadow-md',\n              className,\n            )}\n          />\n\n          {/* Tick Marks & Labels */}\n          {markEntries && (\n            <div className=\"relative w-full h-4 mt-1\">\n              {markEntries.map((m) => {\n                const markPercent = ((m.value - numMin) / (numMax - numMin)) * 100\n                return (\n                  <div\n                    key={m.value}\n                    className=\"absolute top-0 transform -translate-x-1/2 flex flex-col items-center\"\n                    style={{ left: `${markPercent}%` }}\n                  >\n                    <span className=\"w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full\" />\n                    <span className=\"text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5\">\n                      {m.label}\n                    </span>\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </div>\n\n        {showValue && (\n          <span\n            className={buildClassName(\n              'font-medium text-gray-700 dark:text-gray-300 min-w-[3rem] text-right shrink-0',\n              currentSize.text,\n            )}\n          >\n            {currentVal}\n            {valueSuffix}\n          </span>\n        )}\n      </div>\n\n      {/* Footer Error or Helper Text */}\n      {(showErrorMessage && hasError) || helperText ? (\n        <div className=\"mt-1\">\n          {showErrorMessage && hasError ? (\n            <TextContent error small>\n              {error}\n            </TextContent>\n          ) : helperText ? (\n            <TextContent muted small>\n              {helperText}\n            </TextContent>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nRangeInput.displayName = 'RangeInput'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/RangeSlider/RangeSlider.js

@@ -0,0 +1,165 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { Label } from '../Label/Label.js';
+import { buildClassName } from '../../utils/build-classname.js';
+import { isEmpty } from '../../utils/is-empty.js';
+import { TextContent } from '../TextContent/TextContent.js';
+
+const sizeClasses = {
+    sm: {
+        track: 'h-1.5',
+        thumb: 'h-4 w-4',
+        thumbPx: 16,
+        text: 'text-xs',
+    },
+    md: {
+        track: 'h-2',
+        thumb: 'h-5 w-5',
+        thumbPx: 20,
+        text: 'text-sm',
+    },
+    lg: {
+        track: 'h-3',
+        thumb: 'h-6 w-6',
+        thumbPx: 24,
+        text: 'text-base',
+    },
+};
+const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', className = '', size = 'md', min, max, step = 1, valueMin, valueMax, onChange, valueSuffix = '', showTooltips = false, marks, error = null, helperText, showErrorMessage = true, }) => {
+    const trackRef = useRef(null);
+    const activeThumbRef = useRef(null);
+    const [activeThumbState, setActiveThumbState] = useState(null);
+    const [hoveringThumb, setHoveringThumb] = useState(null);
+    const valueMinRef = useRef(valueMin);
+    const valueMaxRef = useRef(valueMax);
+    const onChangeRef = useRef(onChange);
+    valueMinRef.current = valueMin;
+    valueMaxRef.current = valueMax;
+    onChangeRef.current = onChange;
+    const hasError = !isEmpty(error);
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    const clampValue = (val) => Math.min(Math.max(val, min), max);
+    const snapToStep = (val) => {
+        const clamped = clampValue(val);
+        const steps = Math.round((clamped - min) / step);
+        return Math.min(Math.max(min + steps * step, min), max);
+    };
+    const percent = (v) => ((clampValue(v) - min) / (max - min)) * 100;
+    const stablePointerMoveRef = useRef((e) => {
+        if (!trackRef.current || !activeThumbRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+        const rawVal = min + (x / rect.width) * (max - min);
+        const snappedVal = snapToStep(rawVal);
+        if (activeThumbRef.current === 'min') {
+            const nextMin = Math.min(snappedVal, valueMaxRef.current - step);
+            onChangeRef.current(nextMin, valueMaxRef.current);
+        }
+        else {
+            const nextMax = Math.max(snappedVal, valueMinRef.current + step);
+            onChangeRef.current(valueMinRef.current, nextMax);
+        }
+    });
+    const stablePointerUpRef = useRef(() => {
+        activeThumbRef.current = null;
+        setActiveThumbState(null);
+        window.removeEventListener('pointermove', stablePointerMoveRef.current);
+        window.removeEventListener('pointerup', stablePointerUpRef.current);
+    });
+    useEffect(() => {
+        const move = stablePointerMoveRef.current;
+        const up = stablePointerUpRef.current;
+        return () => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+        };
+    }, []);
+    const startDrag = (thumb) => (_e) => {
+        activeThumbRef.current = thumb;
+        setActiveThumbState(thumb);
+        window.addEventListener('pointermove', stablePointerMoveRef.current);
+        window.addEventListener('pointerup', stablePointerUpRef.current);
+    };
+    const handleTrackClick = (e) => {
+        if (!trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+        const rawVal = min + (x / rect.width) * (max - min);
+        const snappedVal = snapToStep(rawVal);
+        const pxMin = (percent(valueMin) / 100) * rect.width;
+        const pxMax = (percent(valueMax) / 100) * rect.width;
+        if (x <= pxMin) {
+            onChange(Math.min(snappedVal, valueMax - step), valueMax);
+            return;
+        }
+        if (x >= pxMax) {
+            onChange(valueMin, Math.max(snappedVal, valueMin + step));
+            return;
+        }
+        const distMin = Math.abs(snappedVal - valueMin);
+        const distMax = Math.abs(snappedVal - valueMax);
+        if (distMin < distMax) {
+            onChange(Math.min(snappedVal, valueMax - step), valueMax);
+        }
+        else {
+            onChange(valueMin, Math.max(snappedVal, valueMin + step));
+        }
+    };
+    // Keyboard accessibility handler for thumbs
+    const handleKeyDown = (thumb) => (e) => {
+        let delta = 0;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown')
+            delta = -step;
+        else if (e.key === 'ArrowRight' || e.key === 'ArrowUp')
+            delta = step;
+        else if (e.key === 'Home') {
+            if (thumb === 'min')
+                onChange(min, valueMax);
+            else
+                onChange(valueMin, valueMin + step);
+            return;
+        }
+        else if (e.key === 'End') {
+            if (thumb === 'min')
+                onChange(valueMax - step, valueMax);
+            else
+                onChange(valueMin, max);
+            return;
+        }
+        if (delta !== 0) {
+            e.preventDefault();
+            if (thumb === 'min') {
+                const next = snapToStep(valueMin + delta);
+                onChange(Math.min(next, valueMax - step), valueMax);
+            }
+            else {
+                const next = snapToStep(valueMax + delta);
+                onChange(valueMin, Math.max(next, valueMin + step));
+            }
+        }
+    };
+    const markEntries = marks
+        ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))
+        : null;
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsxs("div", { ref: trackRef, onMouseDown: handleTrackClick, className: "relative h-8 select-none w-full flex items-center cursor-pointer", "data-testid": "range-track", children: [jsx("div", { className: buildClassName('absolute top-1/2 left-0 right-0 rounded-full bg-gray-200 dark:bg-gray-700 -translate-y-1/2', currentSize.track) }), jsx("div", { className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 ease-out', hasError ? 'bg-red-500' : 'bg-blue-600 dark:bg-blue-500', currentSize.track), style: {
+                            left: `${percent(valueMin)}%`,
+                            width: `${percent(valueMax) - percent(valueMin)}%`,
+                        } }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Minimum value", "aria-valuenow": valueMin, "aria-valuemin": min, "aria-valuemax": valueMax - step, onPointerDown: startDrag('min'), onMouseEnter: () => setHoveringThumb('min'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('min'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'min' || hoveringThumb === 'min') &&
+                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
+                            left: `calc(${percent(valueMin)}% - ${currentSize.thumbPx / 2}px)`,
+                            zIndex: activeThumbState === 'min' ? 50 : 30,
+                        }, "data-testid": "thumb-min", children: showTooltips && (activeThumbState === 'min' || hoveringThumb === 'min') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMin), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) }), jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Maximum value", "aria-valuenow": valueMax, "aria-valuemin": valueMin + step, "aria-valuemax": max, onPointerDown: startDrag('max'), onMouseEnter: () => setHoveringThumb('max'), onMouseLeave: () => setHoveringThumb(null), onKeyDown: handleKeyDown('max'), className: buildClassName('absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none', 'bg-white border-2 shadow-md cursor-pointer touch-none', hasError ? 'border-red-600' : 'border-blue-600', 'transition-all duration-150 ease-out', currentSize.thumb, (activeThumbState === 'max' || hoveringThumb === 'max') &&
+                            (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'), className), style: {
+                            left: `calc(${percent(valueMax)}% - ${currentSize.thumbPx / 2}px)`,
+                            zIndex: activeThumbState === 'max' ? 50 : 40,
+                        }, "data-testid": "thumb-max", children: showTooltips && (activeThumbState === 'max' || hoveringThumb === 'max') && (jsxs("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap", children: [Math.round(valueMax), valueSuffix, jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" })] })) })] }), markEntries && (jsx("div", { className: "relative w-full h-4 mt-1", children: markEntries.map((m) => {
+                    const markPercent = percent(m.value);
+                    return (jsxs("div", { className: "absolute top-0 transform -translate-x-1/2 flex flex-col items-center", style: { left: `${markPercent}%` }, children: [jsx("span", { className: "w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full" }), jsx("span", { className: "text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5", children: m.label })] }, m.value));
+                }) })), jsxs("div", { className: buildClassName('flex justify-between font-medium text-gray-700 dark:text-gray-300', currentSize.text), children: [jsxs("span", { children: [Math.round(valueMin), valueSuffix] }), jsxs("span", { children: [Math.round(valueMax), valueSuffix] })] }), (showErrorMessage && hasError) || helperText ? (jsx("div", { className: "mt-1", children: showErrorMessage && hasError ? (jsx(TextContent, { error: true, small: true, children: error })) : helperText ? (jsx(TextContent, { muted: true, small: true, children: helperText })) : null })) : null] }));
+};
+RangeSlider.displayName = 'RangeSlider';
+
+export { RangeSlider };
+//# sourceMappingURL=RangeSlider.js.map

package/dist/es/components/RangeSlider/RangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.js","sources":["../../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { Label } from '../Label'\nimport { buildClassName } from '../../utils/build-classname'\nimport { isEmpty } from '../../utils/is-empty'\nimport type { RangeSliderProps, RangeSliderSize } from './RangeSlider.types'\nimport { TextContent } from '../TextContent'\n\nconst sizeClasses: Record<\n  RangeSliderSize,\n  { track: string; thumb: string; thumbPx: number; text: string }\n> = {\n  sm: {\n    track: 'h-1.5',\n    thumb: 'h-4 w-4',\n    thumbPx: 16,\n    text: 'text-xs',\n  },\n  md: {\n    track: 'h-2',\n    thumb: 'h-5 w-5',\n    thumbPx: 20,\n    text: 'text-sm',\n  },\n  lg: {\n    track: 'h-3',\n    thumb: 'h-6 w-6',\n    thumbPx: 24,\n    text: 'text-base',\n  },\n}\n\nexport const RangeSlider: React.FC<RangeSliderProps> = ({\n  label,\n  labelHint,\n  labelClass = '',\n  containerClass = '',\n  className = '',\n  size = 'md',\n  min,\n  max,\n  step = 1,\n  valueMin,\n  valueMax,\n  onChange,\n  valueSuffix = '',\n  showTooltips = false,\n  marks,\n  error = null,\n  helperText,\n  showErrorMessage = true,\n}) => {\n  const trackRef = useRef<HTMLDivElement | null>(null)\n  const activeThumbRef = useRef<'min' | 'max' | null>(null)\n  const [activeThumbState, setActiveThumbState] = useState<'min' | 'max' | null>(null)\n  const [hoveringThumb, setHoveringThumb] = useState<'min' | 'max' | null>(null)\n\n  const valueMinRef = useRef(valueMin)\n  const valueMaxRef = useRef(valueMax)\n  const onChangeRef = useRef(onChange)\n  valueMinRef.current = valueMin\n  valueMaxRef.current = valueMax\n  onChangeRef.current = onChange\n\n  const hasError = !isEmpty(error)\n  const currentSize = sizeClasses[size] || sizeClasses.md\n\n  const clampValue = (val: number) => Math.min(Math.max(val, min), max)\n  const snapToStep = (val: number) => {\n    const clamped = clampValue(val)\n    const steps = Math.round((clamped - min) / step)\n    return Math.min(Math.max(min + steps * step, min), max)\n  }\n\n  const percent = (v: number) => ((clampValue(v) - min) / (max - min)) * 100\n\n  const stablePointerMoveRef = useRef((e: PointerEvent) => {\n    if (!trackRef.current || !activeThumbRef.current) return\n    const rect = trackRef.current.getBoundingClientRect()\n    const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width)\n    const rawVal = min + (x / rect.width) * (max - min)\n    const snappedVal = snapToStep(rawVal)\n\n    if (activeThumbRef.current === 'min') {\n      const nextMin = Math.min(snappedVal, valueMaxRef.current - step)\n      onChangeRef.current(nextMin, valueMaxRef.current)\n    } else {\n      const nextMax = Math.max(snappedVal, valueMinRef.current + step)\n      onChangeRef.current(valueMinRef.current, nextMax)\n    }\n  })\n\n  const stablePointerUpRef = useRef(() => {\n    activeThumbRef.current = null\n    setActiveThumbState(null)\n    window.removeEventListener('pointermove', stablePointerMoveRef.current)\n    window.removeEventListener('pointerup', stablePointerUpRef.current)\n  })\n\n  useEffect(() => {\n    const move = stablePointerMoveRef.current\n    const up = stablePointerUpRef.current\n    return () => {\n      window.removeEventListener('pointermove', move)\n      window.removeEventListener('pointerup', up)\n    }\n  }, [])\n\n  const startDrag = (thumb: 'min' | 'max') => (_e: React.PointerEvent) => {\n    activeThumbRef.current = thumb\n    setActiveThumbState(thumb)\n    window.addEventListener('pointermove', stablePointerMoveRef.current)\n    window.addEventListener('pointerup', stablePointerUpRef.current)\n  }\n\n  const handleTrackClick = (e: React.MouseEvent) => {\n    if (!trackRef.current) return\n\n    const rect = trackRef.current.getBoundingClientRect()\n    const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width)\n    const rawVal = min + (x / rect.width) * (max - min)\n    const snappedVal = snapToStep(rawVal)\n\n    const pxMin = (percent(valueMin) / 100) * rect.width\n    const pxMax = (percent(valueMax) / 100) * rect.width\n\n    if (x <= pxMin) {\n      onChange(Math.min(snappedVal, valueMax - step), valueMax)\n      return\n    }\n\n    if (x >= pxMax) {\n      onChange(valueMin, Math.max(snappedVal, valueMin + step))\n      return\n    }\n\n    const distMin = Math.abs(snappedVal - valueMin)\n    const distMax = Math.abs(snappedVal - valueMax)\n\n    if (distMin < distMax) {\n      onChange(Math.min(snappedVal, valueMax - step), valueMax)\n    } else {\n      onChange(valueMin, Math.max(snappedVal, valueMin + step))\n    }\n  }\n\n  // Keyboard accessibility handler for thumbs\n  const handleKeyDown = (thumb: 'min' | 'max') => (e: React.KeyboardEvent) => {\n    let delta = 0\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -step\n    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = step\n    else if (e.key === 'Home') {\n      if (thumb === 'min') onChange(min, valueMax)\n      else onChange(valueMin, valueMin + step)\n      return\n    } else if (e.key === 'End') {\n      if (thumb === 'min') onChange(valueMax - step, valueMax)\n      else onChange(valueMin, max)\n      return\n    }\n\n    if (delta !== 0) {\n      e.preventDefault()\n      if (thumb === 'min') {\n        const next = snapToStep(valueMin + delta)\n        onChange(Math.min(next, valueMax - step), valueMax)\n      } else {\n        const next = snapToStep(valueMax + delta)\n        onChange(valueMin, Math.max(next, valueMin + step))\n      }\n    }\n  }\n\n  const markEntries = marks\n    ? Object.entries(marks).map(([k, v]) => ({ value: Number(k), label: v }))\n    : null\n\n  return (\n    <div className={buildClassName('group space-y-2', hasError && 'has-error', containerClass)}>\n      {label && (\n        <div className=\"flex items-center justify-between mb-1\">\n          <Label className={labelClass}>{label}</Label>\n          {labelHint}\n        </div>\n      )}\n\n      {/* TRACK CONTAINER */}\n      <div\n        ref={trackRef}\n        onMouseDown={handleTrackClick}\n        className=\"relative h-8 select-none w-full flex items-center cursor-pointer\"\n        data-testid=\"range-track\"\n      >\n        {/* Track background */}\n        <div\n          className={buildClassName(\n            'absolute top-1/2 left-0 right-0 rounded-full bg-gray-200 dark:bg-gray-700 -translate-y-1/2',\n            currentSize.track,\n          )}\n        />\n\n        {/* Highlight active range section */}\n        <div\n          className={buildClassName(\n            'absolute top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 ease-out',\n            hasError ? 'bg-red-500' : 'bg-blue-600 dark:bg-blue-500',\n            currentSize.track,\n          )}\n          style={{\n            left: `${percent(valueMin)}%`,\n            width: `${percent(valueMax) - percent(valueMin)}%`,\n          }}\n        />\n\n        {/* MIN THUMB */}\n        <div\n          role=\"slider\"\n          tabIndex={0}\n          aria-label=\"Minimum value\"\n          aria-valuenow={valueMin}\n          aria-valuemin={min}\n          aria-valuemax={valueMax - step}\n          onPointerDown={startDrag('min')}\n          onMouseEnter={() => setHoveringThumb('min')}\n          onMouseLeave={() => setHoveringThumb(null)}\n          onKeyDown={handleKeyDown('min')}\n          className={buildClassName(\n            'absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none',\n            'bg-white border-2 shadow-md cursor-pointer touch-none',\n            hasError ? 'border-red-600' : 'border-blue-600',\n            'transition-all duration-150 ease-out',\n            currentSize.thumb,\n            (activeThumbState === 'min' || hoveringThumb === 'min') &&\n              (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'),\n            className,\n          )}\n          style={{\n            left: `calc(${percent(valueMin)}% - ${currentSize.thumbPx / 2}px)`,\n            zIndex: activeThumbState === 'min' ? 50 : 30,\n          }}\n          data-testid=\"thumb-min\"\n        >\n          {/* Floating Tooltip Min */}\n          {showTooltips && (activeThumbState === 'min' || hoveringThumb === 'min') && (\n            <div className=\"absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap\">\n              {Math.round(valueMin)}\n              {valueSuffix}\n              <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100\" />\n            </div>\n          )}\n        </div>\n\n        {/* MAX THUMB */}\n        <div\n          role=\"slider\"\n          tabIndex={0}\n          aria-label=\"Maximum value\"\n          aria-valuenow={valueMax}\n          aria-valuemin={valueMin + step}\n          aria-valuemax={max}\n          onPointerDown={startDrag('max')}\n          onMouseEnter={() => setHoveringThumb('max')}\n          onMouseLeave={() => setHoveringThumb(null)}\n          onKeyDown={handleKeyDown('max')}\n          className={buildClassName(\n            'absolute top-1/2 -translate-y-1/2 rounded-full focus:outline-none',\n            'bg-white border-2 shadow-md cursor-pointer touch-none',\n            hasError ? 'border-red-600' : 'border-blue-600',\n            'transition-all duration-150 ease-out',\n            currentSize.thumb,\n            (activeThumbState === 'max' || hoveringThumb === 'max') &&\n              (hasError ? 'ring-4 ring-red-200' : 'ring-4 ring-blue-200'),\n            className,\n          )}\n          style={{\n            left: `calc(${percent(valueMax)}% - ${currentSize.thumbPx / 2}px)`,\n            zIndex: activeThumbState === 'max' ? 50 : 40,\n          }}\n          data-testid=\"thumb-max\"\n        >\n          {/* Floating Tooltip Max */}\n          {showTooltips && (activeThumbState === 'max' || hoveringThumb === 'max') && (\n            <div className=\"absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-[11px] font-semibold shadow-md pointer-events-none z-50 whitespace-nowrap\">\n              {Math.round(valueMax)}\n              {valueSuffix}\n              <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100\" />\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Step Marks & Labels */}\n      {markEntries && (\n        <div className=\"relative w-full h-4 mt-1\">\n          {markEntries.map((m) => {\n            const markPercent = percent(m.value)\n            return (\n              <div\n                key={m.value}\n                className=\"absolute top-0 transform -translate-x-1/2 flex flex-col items-center\"\n                style={{ left: `${markPercent}%` }}\n              >\n                <span className=\"w-1 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full\" />\n                <span className=\"text-[10px] font-medium text-gray-400 dark:text-gray-500 mt-0.5\">\n                  {m.label}\n                </span>\n              </div>\n            )\n          })}\n        </div>\n      )}\n\n      {/* Number Range Indicators */}\n      <div\n        className={buildClassName(\n          'flex justify-between font-medium text-gray-700 dark:text-gray-300',\n          currentSize.text,\n        )}\n      >\n        <span>\n          {Math.round(valueMin)}\n          {valueSuffix}\n        </span>\n        <span>\n          {Math.round(valueMax)}\n          {valueSuffix}\n        </span>\n      </div>\n\n      {/* Footer Error or Helper Text */}\n      {(showErrorMessage && hasError) || helperText ? (\n        <div className=\"mt-1\">\n          {showErrorMessage && hasError ? (\n            <TextContent error small>\n              {error}\n            </TextContent>\n          ) : helperText ? (\n            <TextContent muted small>\n              {helperText}\n            </TextContent>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nRangeSlider.displayName = 'RangeSlider'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const SIZE_CONTAINER_CLASS = {
+    sm: 'p-0.5 gap-0.5 rounded-lg text-xs',
+    md: 'p-1 gap-1 rounded-xl text-sm',
+    lg: 'p-1.5 gap-1.5 rounded-xl text-base',
+};
+const SIZE_OPTION_CLASS = {
+    sm: 'px-2 py-1 text-xs font-medium rounded-md',
+    md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',
+    lg: 'px-4 py-2 text-base font-semibold rounded-lg',
+};
+const SIZE_ICON_CLASS = {
+    sm: 'size-3.5',
+    md: 'size-4',
+    lg: 'size-5',
+};
+const SegmentedControl = forwardRef((props, ref) => {
+    const { options, value, onChange, disabled = false, size = 'md', fullWidth = false, className, ...restProps } = props;
+    const handleKeyDown = (e, currentIndex) => {
+        const enabledOptions = options.filter((opt) => !opt.disabled && !disabled);
+        if (enabledOptions.length === 0)
+            return;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const currentPos = enabledOptions.findIndex((opt) => opt.value === options[currentIndex].value);
+            const nextPos = (currentPos + 1) % enabledOptions.length;
+            onChange(enabledOptions[nextPos].value);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const currentPos = enabledOptions.findIndex((opt) => opt.value === options[currentIndex].value);
+            const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length;
+            onChange(enabledOptions[prevPos].value);
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            onChange(enabledOptions[0].value);
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            onChange(enabledOptions[enabledOptions.length - 1].value);
+        }
+    };
+    return (jsx("div", { ref: ref, role: "tablist", "aria-orientation": "horizontal", className: buildClassName('inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80', SIZE_CONTAINER_CLASS[size], fullWidth ? 'w-full flex' : '', disabled ? 'opacity-60 cursor-not-allowed' : '', className), "data-testid": "segmented-control", ...restProps, children: options.map((option, index) => {
+            const isSelected = value === option.value;
+            const isOptionDisabled = disabled || option.disabled;
+            return (jsxs("button", { type: "button", role: "tab", "aria-selected": isSelected, "aria-disabled": isOptionDisabled, tabIndex: isSelected && !isOptionDisabled ? 0 : -1, disabled: isOptionDisabled, title: option.title, onClick: () => {
+                    if (!isOptionDisabled) {
+                        onChange(option.value);
+                    }
+                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], fullWidth ? 'flex-1' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                    ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { children: option.label })] }, option.value));
+        }) }));
+});
+SegmentedControl.displayName = 'SegmentedControl';
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/es/components/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n  sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n  md: 'p-1 gap-1 rounded-xl text-sm',\n  lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n  sm: 'px-2 py-1 text-xs font-medium rounded-md',\n  md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n  lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n  sm: 'size-3.5',\n  md: 'size-4',\n  lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n  const {\n    options,\n    value,\n    onChange,\n    disabled = false,\n    size = 'md',\n    fullWidth = false,\n    className,\n    ...restProps\n  } = props\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n    const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n    if (enabledOptions.length === 0) return\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const nextPos = (currentPos + 1) % enabledOptions.length\n      onChange(enabledOptions[nextPos].value)\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n      onChange(enabledOptions[prevPos].value)\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      onChange(enabledOptions[0].value)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      onChange(enabledOptions[enabledOptions.length - 1].value)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      className={buildClassName(\n        'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n        SIZE_CONTAINER_CLASS[size],\n        fullWidth ? 'w-full flex' : '',\n        disabled ? 'opacity-60 cursor-not-allowed' : '',\n        className,\n      )}\n      data-testid=\"segmented-control\"\n      {...restProps}\n    >\n      {options.map((option, index) => {\n        const isSelected = value === option.value\n        const isOptionDisabled = disabled || option.disabled\n\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            aria-disabled={isOptionDisabled}\n            tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n            disabled={isOptionDisabled}\n            title={option.title}\n            onClick={() => {\n              if (!isOptionDisabled) {\n                onChange(option.value)\n              }\n            }}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n            className={buildClassName(\n              'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n              SIZE_OPTION_CLASS[size],\n              fullWidth ? 'flex-1' : '',\n              isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              isSelected\n                ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n            )}\n            data-testid={`segmented-option-${option.value}`}\n          >\n            {option.icon && (\n              <span\n                className={buildClassName(\n                  'shrink-0 inline-flex items-center justify-center',\n                  SIZE_ICON_CLASS[size],\n                )}\n              >\n                {option.icon}\n              </span>\n            )}\n            <span>{option.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}