@sk-web-gui/segmentedcontrol 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Sundsvalls Kommun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+## Installation
+
+```sh
+yarn add @sk-web-gui/segmentedcontrol
+```

package/dist/cjs/context.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SegmentedControlContext", {
+    enumerable: true,
+    get: function() {
+        return SegmentedControlContext;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const SegmentedControlContext = _react.default.createContext({});
+
+//# sourceMappingURL=context.js.map

package/dist/cjs/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context.ts"],"sourcesContent":["import React from 'react';\r\nimport { UseSegmentedControlProps } from './use-segmented-control';\r\n\r\nexport interface UseSegmentedControlContext extends UseSegmentedControlProps {\r\n  /** Array of currently selected indices */\r\n  selected?: number[];\r\n  /** Toggle an item's selection state */\r\n  toggleItem?: (index: number) => void;\r\n  /** Currently focused item index (for keyboard navigation) */\r\n  active?: number;\r\n  /** Set the focused item index */\r\n  setActive?: (index: number) => void;\r\n  /** Total number of items */\r\n  total?: number;\r\n  size?: 'md' | 'lg';\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const SegmentedControlContext = React.createContext<UseSegmentedControlContext>({});\r\n"],"names":["SegmentedControlContext","React","createContext"],"mappings":";;;;+BAkBaA;;;eAAAA;;;8DAlBK;;;;;;AAkBX,MAAMA,0BAA0BC,cAAK,CAACC,aAAa,CAA6B,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get SegmentedControl () {
+        return SegmentedControl;
+    },
+    get default () {
+        return _default;
+    }
+});
+const _segmentedcontrol = /*#__PURE__*/ _interop_require_default(require("./segmented-control"));
+const _segmentedcontrolitem = require("./segmented-control-item");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const SegmentedControl = {
+    ..._segmentedcontrol.default,
+    Component: _segmentedcontrol.default,
+    Item: _segmentedcontrolitem.SegmentedControlItem
+};
+const _default = SegmentedControl;
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import SegmentedControlComponent, { SegmentedControlComponentProps } from \"./segmented-control\";\r\nimport { SegmentedControlItem } from \"./segmented-control-item\";\r\n\r\ninterface SegmentedControlProps extends React.ForwardRefExoticComponent<SegmentedControlComponentProps> {\r\n  Component: typeof SegmentedControlComponent;\r\n  Item: typeof SegmentedControlItem;\r\n}\r\n\r\nconst SegmentedControl = {\r\n  ...SegmentedControlComponent,\r\n  Component: SegmentedControlComponent,\r\n  Item: SegmentedControlItem,\r\n} as SegmentedControlProps;\r\n\r\nexport { SegmentedControl };\r\nexport type { SegmentedControlProps, SegmentedControlComponentProps };\r\nexport default SegmentedControl;\r\n"],"names":["SegmentedControl","SegmentedControlComponent","Component","Item","SegmentedControlItem"],"mappings":";;;;;;;;;;;QAcSA;eAAAA;;QAET;eAAA;;;yEAhB0E;sCACrC;;;;;;AAOrC,MAAMA,mBAAmB;IACvB,GAAGC,yBAAyB;IAC5BC,WAAWD,yBAAyB;IACpCE,MAAMC,0CAAoB;AAC5B;MAIA,WAAeJ"}

package/dist/cjs/segmented-control-item.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SegmentedControlItem", {
+    enumerable: true,
+    get: function() {
+        return SegmentedControlItem;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _utils = require("@sk-web-gui/utils");
+const _popupmenu = require("@sk-web-gui/popup-menu");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _usesegmentedcontrol = require("./use-segmented-control");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const SegmentedControlItem = /*#__PURE__*/ _react.default.forwardRef((props, ref)=>{
+    const { className, children, menuIndex, wrapper, size: _size, disabled: _disabled, ...rest } = props;
+    const { selected, toggleItem, active, setActive, total, size: contextSize, disabled: contextDisabled } = (0, _usesegmentedcontrol.useSegmentedControl)();
+    const menuRef = _react.default.useRef(null);
+    const prevActiveRef = _react.default.useRef(undefined);
+    const size = _size || contextSize || 'lg';
+    const disabled = _disabled || contextDisabled;
+    const isSelected = selected?.includes(menuIndex) ?? false;
+    _react.default.useEffect(()=>{
+        // Only focus when active changes (not on initial mount)
+        if (prevActiveRef.current !== undefined && active === menuIndex && menuRef.current) {
+            walkFocus(menuRef.current.children);
+        }
+        prevActiveRef.current = active;
+    }, [
+        active,
+        menuIndex
+    ]);
+    const walkFocus = (collection)=>{
+        for (const element of Array.from(collection)){
+            if (element.getAttribute('role') === 'button') {
+                element.focus();
+                return true;
+            }
+            if (element.children && walkFocus(element.children)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const handleKeyboard = (event)=>{
+        if (disabled) return;
+        const currentIndex = menuIndex;
+        const itemCount = total || 0;
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            const newIndex = currentIndex === 0 ? itemCount - 1 : currentIndex - 1;
+            setActive?.(newIndex);
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            const newIndex = currentIndex === itemCount - 1 ? 0 : currentIndex + 1;
+            setActive?.(newIndex);
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            toggleItem?.(currentIndex);
+        }
+    };
+    const handleClick = ()=>{
+        if (disabled) return;
+        toggleItem?.(menuIndex);
+    };
+    const getClonedChild = (child)=>{
+        if (child.type === _react.default.Fragment) {
+            const grandchildren = (0, _utils.getValidChildren)(child.props.children).map((grandchild, index)=>{
+                return index === 0 ? getClonedChild(grandchild) : grandchild;
+            });
+            return /*#__PURE__*/ _react.default.cloneElement(child, {
+                ...child.props,
+                children: grandchildren
+            });
+        } else if (child.type === _popupmenu.PopupMenu) {
+            const grandchildren = (0, _utils.getValidChildren)(child.props.children).map((grandchild)=>{
+                if (grandchild.type === _popupmenu.PopupMenu.Button) {
+                    return getClonedChild(grandchild);
+                }
+                return grandchild;
+            });
+            return /*#__PURE__*/ _react.default.cloneElement(child, {
+                ...child.props,
+                children: grandchildren
+            });
+        } else {
+            return /*#__PURE__*/ _react.default.cloneElement(child, {
+                ...child.props,
+                onKeyDown: handleKeyboard,
+                onClick: handleClick,
+                role: 'button',
+                'aria-pressed': isSelected ? 'true' : 'false',
+                'aria-disabled': disabled ? 'true' : undefined,
+                tabIndex: disabled ? -1 : active === menuIndex ? 0 : -1
+            });
+        }
+    };
+    const getChildWithWrapper = ()=>{
+        if (wrapper) {
+            return /*#__PURE__*/ _react.default.cloneElement(wrapper, {
+                ...wrapper.props,
+                children: getClonedChild(children)
+            });
+        } else {
+            return getClonedChild(children);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+        "data-size": size,
+        ref: (0, _utils.useForkRef)(ref, menuRef),
+        className: (0, _utils.cx)('sk-segmentedcontrol-item', className),
+        role: "none",
+        ...rest,
+        children: getChildWithWrapper()
+    });
+});
+
+//# sourceMappingURL=segmented-control-item.js.map

package/dist/cjs/segmented-control-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-control-item.tsx"],"sourcesContent":["import { DefaultProps, cx, getValidChildren, useForkRef } from '@sk-web-gui/utils';\r\nimport { PopupMenu } from '@sk-web-gui/popup-menu';\r\nimport React from 'react';\r\nimport { useSegmentedControl } from './use-segmented-control';\r\n\r\nexport interface SegmentedControlItemProps extends DefaultProps, React.ComponentPropsWithRef<'li'> {\r\n  /** Set automatic by parent */\r\n  menuIndex?: number;\r\n  /** Use <a> or <button>. For dropdown, use <PopupMenu> */\r\n  children: React.JSX.Element;\r\n  /** For e.g. Next Links to work, they need to wrapped this way */\r\n  wrapper?: React.JSX.Element;\r\n  size?: 'md' | 'lg';\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const SegmentedControlItem = React.forwardRef<HTMLLIElement, SegmentedControlItemProps>((props, ref) => {\r\n  const { className, children, menuIndex, wrapper, size: _size, disabled: _disabled, ...rest } = props;\r\n\r\n  const {\r\n    selected,\r\n    toggleItem,\r\n    active,\r\n    setActive,\r\n    total,\r\n    size: contextSize,\r\n    disabled: contextDisabled,\r\n  } = useSegmentedControl();\r\n\r\n  const menuRef = React.useRef<HTMLElement>(null);\r\n  const prevActiveRef = React.useRef<number | undefined>(undefined);\r\n  const size = _size || contextSize || 'lg';\r\n  const disabled = _disabled || contextDisabled;\r\n  const isSelected = selected?.includes(menuIndex as number) ?? false;\r\n\r\n  React.useEffect(() => {\r\n    // Only focus when active changes (not on initial mount)\r\n    if (prevActiveRef.current !== undefined && active === menuIndex && menuRef.current) {\r\n      walkFocus(menuRef.current.children);\r\n    }\r\n    prevActiveRef.current = active;\r\n  }, [active, menuIndex]);\r\n\r\n  const walkFocus = (collection: HTMLCollection): boolean => {\r\n    for (const element of Array.from(collection)) {\r\n      if (element.getAttribute('role') === 'button') {\r\n        (element as HTMLElement).focus();\r\n        return true;\r\n      }\r\n      if (element.children && walkFocus(element.children)) {\r\n        return true;\r\n      }\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const handleKeyboard = (event: React.KeyboardEvent) => {\r\n    if (disabled) return;\r\n\r\n    const currentIndex = menuIndex as number;\r\n    const itemCount = total || 0;\r\n\r\n    if (event.key === 'ArrowLeft') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      const newIndex = currentIndex === 0 ? itemCount - 1 : currentIndex - 1;\r\n      setActive?.(newIndex);\r\n    }\r\n\r\n    if (event.key === 'ArrowRight') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      const newIndex = currentIndex === itemCount - 1 ? 0 : currentIndex + 1;\r\n      setActive?.(newIndex);\r\n    }\r\n\r\n    if (event.key === ' ' || event.key === 'Enter') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      toggleItem?.(currentIndex);\r\n    }\r\n  };\r\n\r\n  const handleClick = () => {\r\n    if (disabled) return;\r\n    toggleItem?.(menuIndex as number);\r\n  };\r\n\r\n  const getClonedChild = (child: React.JSX.Element): React.ReactNode => {\r\n    if (child.type === React.Fragment) {\r\n      const grandchildren = getValidChildren(child.props.children).map((grandchild, index) => {\r\n        return index === 0 ? getClonedChild(grandchild) : grandchild;\r\n      });\r\n      return React.cloneElement(child, { ...child.props, children: grandchildren });\r\n    } else if (child.type === PopupMenu) {\r\n      const grandchildren = getValidChildren(child.props.children).map((grandchild) => {\r\n        if (grandchild.type === PopupMenu.Button) {\r\n          return getClonedChild(grandchild);\r\n        }\r\n        return grandchild;\r\n      });\r\n\r\n      return React.cloneElement(child, { ...child.props, children: grandchildren });\r\n    } else {\r\n      return React.cloneElement(child, {\r\n        ...child.props,\r\n        onKeyDown: handleKeyboard,\r\n        onClick: handleClick,\r\n        role: 'button',\r\n        'aria-pressed': isSelected ? 'true' : 'false',\r\n        'aria-disabled': disabled ? 'true' : undefined,\r\n        tabIndex: disabled ? -1 : active === menuIndex ? 0 : -1,\r\n      });\r\n    }\r\n  };\r\n\r\n  const getChildWithWrapper = () => {\r\n    if (wrapper) {\r\n      return React.cloneElement(wrapper, { ...wrapper.props, children: getClonedChild(children) });\r\n    } else {\r\n      return getClonedChild(children);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <li\r\n      data-size={size}\r\n      ref={useForkRef(ref, menuRef)}\r\n      className={cx('sk-segmentedcontrol-item', className)}\r\n      role=\"none\"\r\n      {...rest}\r\n    >\r\n      {getChildWithWrapper()}\r\n    </li>\r\n  );\r\n});\r\n"],"names":["SegmentedControlItem","React","forwardRef","props","ref","className","children","menuIndex","wrapper","size","_size","disabled","_disabled","rest","selected","toggleItem","active","setActive","total","contextSize","contextDisabled","useSegmentedControl","menuRef","useRef","prevActiveRef","undefined","isSelected","includes","useEffect","current","walkFocus","collection","element","Array","from","getAttribute","focus","handleKeyboard","event","currentIndex","itemCount","key","preventDefault","stopPropagation","newIndex","handleClick","getClonedChild","child","type","Fragment","grandchildren","getValidChildren","map","grandchild","index","cloneElement","PopupMenu","Button","onKeyDown","onClick","role","tabIndex","getChildWithWrapper","li","data-size","useForkRef","cx"],"mappings":"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"}

package/dist/cjs/segmented-control.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get SegmentedControlComponent () {
+        return SegmentedControlComponent;
+    },
+    get default () {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _utils = require("@sk-web-gui/utils");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _context = require("./context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const SegmentedControlComponent = /*#__PURE__*/ _react.default.forwardRef((props, ref)=>{
+    const { className, children, value, defaultValue, onChange, id: _id, disabled = false, size = 'lg', multiSelect = false, ...rest } = props;
+    const [internalSelected, setInternalSelected] = _react.default.useState(defaultValue || []);
+    const isControlled = value !== undefined;
+    const selected = isControlled ? value : internalSelected;
+    const [active, setActive] = _react.default.useState(0);
+    const autoId = _react.default.useId();
+    const id = _id || `sk-segmentedcontrol-${autoId}`;
+    const total = _react.default.Children.count(children);
+    const toggleItem = (index)=>{
+        if (disabled) return;
+        const newSelected = !multiSelect ? [
+            index
+        ] : selected.includes(index) ? selected.filter((i)=>i !== index) : [
+            ...selected,
+            index
+        ];
+        if (!isControlled) {
+            setInternalSelected(newSelected);
+        }
+        onChange?.(newSelected);
+    };
+    const context = {
+        selected,
+        toggleItem,
+        active,
+        setActive,
+        total,
+        size,
+        disabled
+    };
+    const validChildren = (0, _utils.getValidChildren)(children);
+    const menuItems = validChildren.map((child, index)=>{
+        const itemProps = {
+            ...child.props,
+            menuIndex: index
+        };
+        return /*#__PURE__*/ _react.default.cloneElement(child, itemProps);
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.SegmentedControlContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("ul", {
+            id: id,
+            role: "toolbar",
+            ref: ref,
+            className: (0, _utils.cx)('sk-segmentedcontrol', className),
+            "data-size": size,
+            ...rest,
+            children: menuItems
+        })
+    });
+});
+if (_utils.__DEV__) {
+    SegmentedControlComponent.displayName = 'SegmentedControl';
+}
+const _default = SegmentedControlComponent;
+
+//# sourceMappingURL=segmented-control.js.map

package/dist/cjs/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-control.tsx"],"sourcesContent":["import { DefaultProps, __DEV__, cx, getValidChildren } from '@sk-web-gui/utils';\r\nimport React from 'react';\r\nimport { SegmentedControlContext } from './context';\r\nimport { SegmentedControlItemProps } from './segmented-control-item';\r\n\r\nexport interface SegmentedControlComponentProps\r\n  extends DefaultProps,\r\n    Omit<React.ComponentPropsWithRef<'ul'>, 'defaultValue' | 'onChange'> {\r\n  /** Array of selected indices (controlled mode) */\r\n  value?: number[];\r\n  /** Array of initially selected indices (uncontrolled mode) */\r\n  defaultValue?: number[];\r\n  /** Callback when selection changes */\r\n  onChange?: (selected: number[]) => void;\r\n  /** Disable all items */\r\n  disabled?: boolean;\r\n  /** Enables multi select */\r\n  multiSelect?: boolean;\r\n  /** Size variant */\r\n  size?: 'md' | 'lg';\r\n}\r\n\r\nexport const SegmentedControlComponent = React.forwardRef<HTMLUListElement, SegmentedControlComponentProps>(\r\n  (props, ref) => {\r\n    const {\r\n      className,\r\n      children,\r\n      value,\r\n      defaultValue,\r\n      onChange,\r\n      id: _id,\r\n      disabled = false,\r\n      size = 'lg',\r\n      multiSelect = false,\r\n      ...rest\r\n    } = props;\r\n\r\n    const [internalSelected, setInternalSelected] = React.useState<number[]>(defaultValue || []);\r\n    const isControlled = value !== undefined;\r\n    const selected = isControlled ? value : internalSelected;\r\n\r\n    const [active, setActive] = React.useState<number>(0);\r\n\r\n    const autoId = React.useId();\r\n    const id = _id || `sk-segmentedcontrol-${autoId}`;\r\n\r\n    const total = React.Children.count(children);\r\n\r\n    const toggleItem = (index: number) => {\r\n      \r\n      if (disabled) return;\r\n\r\n      const newSelected = !multiSelect ? [index] : selected.includes(index) ? selected.filter((i) => i !== index) : [...selected, index];\r\n\r\n      if (!isControlled) {\r\n        setInternalSelected(newSelected);\r\n      }\r\n      onChange?.(newSelected);\r\n    };\r\n\r\n    const context = {\r\n      selected,\r\n      toggleItem,\r\n      active,\r\n      setActive,\r\n      total,\r\n      size,\r\n      disabled,\r\n    };\r\n\r\n    const validChildren = getValidChildren<SegmentedControlItemProps>(children);\r\n    const menuItems = validChildren.map((child, index) => {\r\n      const itemProps = { ...child.props, menuIndex: index };\r\n      return React.cloneElement(child, itemProps);\r\n    });\r\n\r\n    return (\r\n      <SegmentedControlContext.Provider value={context}>\r\n        <ul id={id} role=\"toolbar\" ref={ref} className={cx('sk-segmentedcontrol', className)} data-size={size} {...rest}>\r\n          {menuItems}\r\n        </ul>\r\n      </SegmentedControlContext.Provider>\r\n    );\r\n  }\r\n);\r\n\r\nif (__DEV__) {\r\n  SegmentedControlComponent.displayName = 'SegmentedControl';\r\n}\r\n\r\nexport default SegmentedControlComponent;\r\n"],"names":["SegmentedControlComponent","React","forwardRef","props","ref","className","children","value","defaultValue","onChange","id","_id","disabled","size","multiSelect","rest","internalSelected","setInternalSelected","useState","isControlled","undefined","selected","active","setActive","autoId","useId","total","Children","count","toggleItem","index","newSelected","includes","filter","i","context","validChildren","getValidChildren","menuItems","map","child","itemProps","menuIndex","cloneElement","SegmentedControlContext","Provider","ul","role","cx","data-size","__DEV__","displayName"],"mappings":";;;;;;;;;;;QAsBaA;eAAAA;;QAoEb;eAAA;;;;uBA1F4D;8DAC1C;yBACsB;;;;;;AAoBjC,MAAMA,0CAA4BC,cAAK,CAACC,UAAU,CACvD,CAACC,OAAOC;IACN,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,IAAIC,GAAG,EACPC,WAAW,KAAK,EAChBC,OAAO,IAAI,EACXC,cAAc,KAAK,EACnB,GAAGC,MACJ,GAAGZ;IAEJ,MAAM,CAACa,kBAAkBC,oBAAoB,GAAGhB,cAAK,CAACiB,QAAQ,CAAWV,gBAAgB,EAAE;IAC3F,MAAMW,eAAeZ,UAAUa;IAC/B,MAAMC,WAAWF,eAAeZ,QAAQS;IAExC,MAAM,CAACM,QAAQC,UAAU,GAAGtB,cAAK,CAACiB,QAAQ,CAAS;IAEnD,MAAMM,SAASvB,cAAK,CAACwB,KAAK;IAC1B,MAAMf,KAAKC,OAAO,CAAC,oBAAoB,EAAEa,QAAQ;IAEjD,MAAME,QAAQzB,cAAK,CAAC0B,QAAQ,CAACC,KAAK,CAACtB;IAEnC,MAAMuB,aAAa,CAACC;QAElB,IAAIlB,UAAU;QAEd,MAAMmB,cAAc,CAACjB,cAAc;YAACgB;SAAM,GAAGT,SAASW,QAAQ,CAACF,SAAST,SAASY,MAAM,CAAC,CAACC,IAAMA,MAAMJ,SAAS;eAAIT;YAAUS;SAAM;QAElI,IAAI,CAACX,cAAc;YACjBF,oBAAoBc;QACtB;QACAtB,WAAWsB;IACb;IAEA,MAAMI,UAAU;QACdd;QACAQ;QACAP;QACAC;QACAG;QACAb;QACAD;IACF;IAEA,MAAMwB,gBAAgBC,IAAAA,uBAAgB,EAA4B/B;IAClE,MAAMgC,YAAYF,cAAcG,GAAG,CAAC,CAACC,OAAOV;QAC1C,MAAMW,YAAY;YAAE,GAAGD,MAAMrC,KAAK;YAAEuC,WAAWZ;QAAM;QACrD,qBAAO7B,cAAK,CAAC0C,YAAY,CAACH,OAAOC;IACnC;IAEA,qBACE,qBAACG,gCAAuB,CAACC,QAAQ;QAACtC,OAAO4B;kBACvC,cAAA,qBAACW;YAAGpC,IAAIA;YAAIqC,MAAK;YAAU3C,KAAKA;YAAKC,WAAW2C,IAAAA,SAAE,EAAC,uBAAuB3C;YAAY4C,aAAWpC;YAAO,GAAGE,IAAI;sBAC5GuB;;;AAIT;AAGF,IAAIY,cAAO,EAAE;IACXlD,0BAA0BmD,WAAW,GAAG;AAC1C;MAEA,WAAenD"}

package/dist/cjs/use-segmented-control.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSegmentedControl", {
+    enumerable: true,
+    get: function() {
+        return useSegmentedControl;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _context = require("./context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const useSegmentedControl = ()=>_react.default.useContext(_context.SegmentedControlContext);
+
+//# sourceMappingURL=use-segmented-control.js.map

package/dist/cjs/use-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-segmented-control.ts"],"sourcesContent":["import React from 'react';\r\nimport { SegmentedControlContext } from './context';\r\n\r\nexport interface UseSegmentedControlProps {\r\n  /** Array of selected indices (controlled) */\r\n  value?: number[];\r\n  /** Array of initially selected indices (uncontrolled) */\r\n  defaultValue?: number[];\r\n  size?: 'md' | 'lg';\r\n}\r\n\r\nexport const useSegmentedControl = () => React.useContext(SegmentedControlContext);\r\n"],"names":["useSegmentedControl","React","useContext","SegmentedControlContext"],"mappings":";;;;+BAWaA;;;eAAAA;;;8DAXK;yBACsB;;;;;;AAUjC,MAAMA,sBAAsB,IAAMC,cAAK,CAACC,UAAU,CAACC,gCAAuB"}

package/dist/esm/context.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const SegmentedControlContext = React.createContext({});
+
+//# sourceMappingURL=context.js.map

package/dist/esm/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context.ts"],"sourcesContent":["import React from 'react';\r\nimport { UseSegmentedControlProps } from './use-segmented-control';\r\n\r\nexport interface UseSegmentedControlContext extends UseSegmentedControlProps {\r\n  /** Array of currently selected indices */\r\n  selected?: number[];\r\n  /** Toggle an item's selection state */\r\n  toggleItem?: (index: number) => void;\r\n  /** Currently focused item index (for keyboard navigation) */\r\n  active?: number;\r\n  /** Set the focused item index */\r\n  setActive?: (index: number) => void;\r\n  /** Total number of items */\r\n  total?: number;\r\n  size?: 'md' | 'lg';\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const SegmentedControlContext = React.createContext<UseSegmentedControlContext>({});\r\n"],"names":["React","SegmentedControlContext","createContext"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAkB1B,OAAO,MAAMC,0BAA0BD,MAAME,aAAa,CAA6B,CAAC,GAAG"}

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import SegmentedControlComponent from './segmented-control.js';
+import { SegmentedControlItem } from './segmented-control-item.js';
+const SegmentedControl = {
+    ...SegmentedControlComponent,
+    Component: SegmentedControlComponent,
+    Item: SegmentedControlItem
+};
+export { SegmentedControl };
+export default SegmentedControl;
+
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import SegmentedControlComponent, { SegmentedControlComponentProps } from \"./segmented-control\";\r\nimport { SegmentedControlItem } from \"./segmented-control-item\";\r\n\r\ninterface SegmentedControlProps extends React.ForwardRefExoticComponent<SegmentedControlComponentProps> {\r\n  Component: typeof SegmentedControlComponent;\r\n  Item: typeof SegmentedControlItem;\r\n}\r\n\r\nconst SegmentedControl = {\r\n  ...SegmentedControlComponent,\r\n  Component: SegmentedControlComponent,\r\n  Item: SegmentedControlItem,\r\n} as SegmentedControlProps;\r\n\r\nexport { SegmentedControl };\r\nexport type { SegmentedControlProps, SegmentedControlComponentProps };\r\nexport default SegmentedControl;\r\n"],"names":["SegmentedControlComponent","SegmentedControlItem","SegmentedControl","Component","Item"],"mappings":"AAAA,OAAOA,+BAAmE,sBAAsB;AAChG,SAASC,oBAAoB,QAAQ,2BAA2B;AAOhE,MAAMC,mBAAmB;IACvB,GAAGF,yBAAyB;IAC5BG,WAAWH;IACXI,MAAMH;AACR;AAEA,SAASC,gBAAgB,GAAG;AAE5B,eAAeA,iBAAiB"}

package/dist/esm/segmented-control-item.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from 'react/jsx-runtime';
+import { cx, getValidChildren, useForkRef } from '@sk-web-gui/utils';
+import { PopupMenu } from '@sk-web-gui/popup-menu';
+import React from 'react';
+import { useSegmentedControl } from './use-segmented-control.js';
+export const SegmentedControlItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { className, children, menuIndex, wrapper, size: _size, disabled: _disabled, ...rest } = props;
+    const { selected, toggleItem, active, setActive, total, size: contextSize, disabled: contextDisabled } = useSegmentedControl();
+    const menuRef = React.useRef(null);
+    const prevActiveRef = React.useRef(undefined);
+    const size = _size || contextSize || 'lg';
+    const disabled = _disabled || contextDisabled;
+    const isSelected = selected?.includes(menuIndex) ?? false;
+    React.useEffect(()=>{
+        // Only focus when active changes (not on initial mount)
+        if (prevActiveRef.current !== undefined && active === menuIndex && menuRef.current) {
+            walkFocus(menuRef.current.children);
+        }
+        prevActiveRef.current = active;
+    }, [
+        active,
+        menuIndex
+    ]);
+    const walkFocus = (collection)=>{
+        for (const element of Array.from(collection)){
+            if (element.getAttribute('role') === 'button') {
+                element.focus();
+                return true;
+            }
+            if (element.children && walkFocus(element.children)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const handleKeyboard = (event)=>{
+        if (disabled) return;
+        const currentIndex = menuIndex;
+        const itemCount = total || 0;
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            const newIndex = currentIndex === 0 ? itemCount - 1 : currentIndex - 1;
+            setActive?.(newIndex);
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            const newIndex = currentIndex === itemCount - 1 ? 0 : currentIndex + 1;
+            setActive?.(newIndex);
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            toggleItem?.(currentIndex);
+        }
+    };
+    const handleClick = ()=>{
+        if (disabled) return;
+        toggleItem?.(menuIndex);
+    };
+    const getClonedChild = (child)=>{
+        if (child.type === React.Fragment) {
+            const grandchildren = getValidChildren(child.props.children).map((grandchild, index)=>{
+                return index === 0 ? getClonedChild(grandchild) : grandchild;
+            });
+            return /*#__PURE__*/ React.cloneElement(child, {
+                ...child.props,
+                children: grandchildren
+            });
+        } else if (child.type === PopupMenu) {
+            const grandchildren = getValidChildren(child.props.children).map((grandchild)=>{
+                if (grandchild.type === PopupMenu.Button) {
+                    return getClonedChild(grandchild);
+                }
+                return grandchild;
+            });
+            return /*#__PURE__*/ React.cloneElement(child, {
+                ...child.props,
+                children: grandchildren
+            });
+        } else {
+            return /*#__PURE__*/ React.cloneElement(child, {
+                ...child.props,
+                onKeyDown: handleKeyboard,
+                onClick: handleClick,
+                role: 'button',
+                'aria-pressed': isSelected ? 'true' : 'false',
+                'aria-disabled': disabled ? 'true' : undefined,
+                tabIndex: disabled ? -1 : active === menuIndex ? 0 : -1
+            });
+        }
+    };
+    const getChildWithWrapper = ()=>{
+        if (wrapper) {
+            return /*#__PURE__*/ React.cloneElement(wrapper, {
+                ...wrapper.props,
+                children: getClonedChild(children)
+            });
+        } else {
+            return getClonedChild(children);
+        }
+    };
+    return /*#__PURE__*/ _jsx("li", {
+        "data-size": size,
+        ref: useForkRef(ref, menuRef),
+        className: cx('sk-segmentedcontrol-item', className),
+        role: "none",
+        ...rest,
+        children: getChildWithWrapper()
+    });
+});
+
+//# sourceMappingURL=segmented-control-item.js.map

package/dist/esm/segmented-control-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-control-item.tsx"],"sourcesContent":["import { DefaultProps, cx, getValidChildren, useForkRef } from '@sk-web-gui/utils';\r\nimport { PopupMenu } from '@sk-web-gui/popup-menu';\r\nimport React from 'react';\r\nimport { useSegmentedControl } from './use-segmented-control';\r\n\r\nexport interface SegmentedControlItemProps extends DefaultProps, React.ComponentPropsWithRef<'li'> {\r\n  /** Set automatic by parent */\r\n  menuIndex?: number;\r\n  /** Use <a> or <button>. For dropdown, use <PopupMenu> */\r\n  children: React.JSX.Element;\r\n  /** For e.g. Next Links to work, they need to wrapped this way */\r\n  wrapper?: React.JSX.Element;\r\n  size?: 'md' | 'lg';\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const SegmentedControlItem = React.forwardRef<HTMLLIElement, SegmentedControlItemProps>((props, ref) => {\r\n  const { className, children, menuIndex, wrapper, size: _size, disabled: _disabled, ...rest } = props;\r\n\r\n  const {\r\n    selected,\r\n    toggleItem,\r\n    active,\r\n    setActive,\r\n    total,\r\n    size: contextSize,\r\n    disabled: contextDisabled,\r\n  } = useSegmentedControl();\r\n\r\n  const menuRef = React.useRef<HTMLElement>(null);\r\n  const prevActiveRef = React.useRef<number | undefined>(undefined);\r\n  const size = _size || contextSize || 'lg';\r\n  const disabled = _disabled || contextDisabled;\r\n  const isSelected = selected?.includes(menuIndex as number) ?? false;\r\n\r\n  React.useEffect(() => {\r\n    // Only focus when active changes (not on initial mount)\r\n    if (prevActiveRef.current !== undefined && active === menuIndex && menuRef.current) {\r\n      walkFocus(menuRef.current.children);\r\n    }\r\n    prevActiveRef.current = active;\r\n  }, [active, menuIndex]);\r\n\r\n  const walkFocus = (collection: HTMLCollection): boolean => {\r\n    for (const element of Array.from(collection)) {\r\n      if (element.getAttribute('role') === 'button') {\r\n        (element as HTMLElement).focus();\r\n        return true;\r\n      }\r\n      if (element.children && walkFocus(element.children)) {\r\n        return true;\r\n      }\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const handleKeyboard = (event: React.KeyboardEvent) => {\r\n    if (disabled) return;\r\n\r\n    const currentIndex = menuIndex as number;\r\n    const itemCount = total || 0;\r\n\r\n    if (event.key === 'ArrowLeft') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      const newIndex = currentIndex === 0 ? itemCount - 1 : currentIndex - 1;\r\n      setActive?.(newIndex);\r\n    }\r\n\r\n    if (event.key === 'ArrowRight') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      const newIndex = currentIndex === itemCount - 1 ? 0 : currentIndex + 1;\r\n      setActive?.(newIndex);\r\n    }\r\n\r\n    if (event.key === ' ' || event.key === 'Enter') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      toggleItem?.(currentIndex);\r\n    }\r\n  };\r\n\r\n  const handleClick = () => {\r\n    if (disabled) return;\r\n    toggleItem?.(menuIndex as number);\r\n  };\r\n\r\n  const getClonedChild = (child: React.JSX.Element): React.ReactNode => {\r\n    if (child.type === React.Fragment) {\r\n      const grandchildren = getValidChildren(child.props.children).map((grandchild, index) => {\r\n        return index === 0 ? getClonedChild(grandchild) : grandchild;\r\n      });\r\n      return React.cloneElement(child, { ...child.props, children: grandchildren });\r\n    } else if (child.type === PopupMenu) {\r\n      const grandchildren = getValidChildren(child.props.children).map((grandchild) => {\r\n        if (grandchild.type === PopupMenu.Button) {\r\n          return getClonedChild(grandchild);\r\n        }\r\n        return grandchild;\r\n      });\r\n\r\n      return React.cloneElement(child, { ...child.props, children: grandchildren });\r\n    } else {\r\n      return React.cloneElement(child, {\r\n        ...child.props,\r\n        onKeyDown: handleKeyboard,\r\n        onClick: handleClick,\r\n        role: 'button',\r\n        'aria-pressed': isSelected ? 'true' : 'false',\r\n        'aria-disabled': disabled ? 'true' : undefined,\r\n        tabIndex: disabled ? -1 : active === menuIndex ? 0 : -1,\r\n      });\r\n    }\r\n  };\r\n\r\n  const getChildWithWrapper = () => {\r\n    if (wrapper) {\r\n      return React.cloneElement(wrapper, { ...wrapper.props, children: getClonedChild(children) });\r\n    } else {\r\n      return getClonedChild(children);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <li\r\n      data-size={size}\r\n      ref={useForkRef(ref, menuRef)}\r\n      className={cx('sk-segmentedcontrol-item', className)}\r\n      role=\"none\"\r\n      {...rest}\r\n    >\r\n      {getChildWithWrapper()}\r\n    </li>\r\n  );\r\n});\r\n"],"names":["cx","getValidChildren","useForkRef","PopupMenu","React","useSegmentedControl","SegmentedControlItem","forwardRef","props","ref","className","children","menuIndex","wrapper","size","_size","disabled","_disabled","rest","selected","toggleItem","active","setActive","total","contextSize","contextDisabled","menuRef","useRef","prevActiveRef","undefined","isSelected","includes","useEffect","current","walkFocus","collection","element","Array","from","getAttribute","focus","handleKeyboard","event","currentIndex","itemCount","key","preventDefault","stopPropagation","newIndex","handleClick","getClonedChild","child","type","Fragment","grandchildren","map","grandchild","index","cloneElement","Button","onKeyDown","onClick","role","tabIndex","getChildWithWrapper","li","data-size"],"mappings":"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"}

package/dist/esm/segmented-control.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from 'react/jsx-runtime';
+import { __DEV__, cx, getValidChildren } from '@sk-web-gui/utils';
+import React from 'react';
+import { SegmentedControlContext } from './context.js';
+export const SegmentedControlComponent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { className, children, value, defaultValue, onChange, id: _id, disabled = false, size = 'lg', multiSelect = false, ...rest } = props;
+    const [internalSelected, setInternalSelected] = React.useState(defaultValue || []);
+    const isControlled = value !== undefined;
+    const selected = isControlled ? value : internalSelected;
+    const [active, setActive] = React.useState(0);
+    const autoId = React.useId();
+    const id = _id || `sk-segmentedcontrol-${autoId}`;
+    const total = React.Children.count(children);
+    const toggleItem = (index)=>{
+        if (disabled) return;
+        const newSelected = !multiSelect ? [
+            index
+        ] : selected.includes(index) ? selected.filter((i)=>i !== index) : [
+            ...selected,
+            index
+        ];
+        if (!isControlled) {
+            setInternalSelected(newSelected);
+        }
+        onChange?.(newSelected);
+    };
+    const context = {
+        selected,
+        toggleItem,
+        active,
+        setActive,
+        total,
+        size,
+        disabled
+    };
+    const validChildren = getValidChildren(children);
+    const menuItems = validChildren.map((child, index)=>{
+        const itemProps = {
+            ...child.props,
+            menuIndex: index
+        };
+        return /*#__PURE__*/ React.cloneElement(child, itemProps);
+    });
+    return /*#__PURE__*/ _jsx(SegmentedControlContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ _jsx("ul", {
+            id: id,
+            role: "toolbar",
+            ref: ref,
+            className: cx('sk-segmentedcontrol', className),
+            "data-size": size,
+            ...rest,
+            children: menuItems
+        })
+    });
+});
+if (__DEV__) {
+    SegmentedControlComponent.displayName = 'SegmentedControl';
+}
+export default SegmentedControlComponent;
+
+//# sourceMappingURL=segmented-control.js.map

package/dist/esm/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-control.tsx"],"sourcesContent":["import { DefaultProps, __DEV__, cx, getValidChildren } from '@sk-web-gui/utils';\r\nimport React from 'react';\r\nimport { SegmentedControlContext } from './context';\r\nimport { SegmentedControlItemProps } from './segmented-control-item';\r\n\r\nexport interface SegmentedControlComponentProps\r\n  extends DefaultProps,\r\n    Omit<React.ComponentPropsWithRef<'ul'>, 'defaultValue' | 'onChange'> {\r\n  /** Array of selected indices (controlled mode) */\r\n  value?: number[];\r\n  /** Array of initially selected indices (uncontrolled mode) */\r\n  defaultValue?: number[];\r\n  /** Callback when selection changes */\r\n  onChange?: (selected: number[]) => void;\r\n  /** Disable all items */\r\n  disabled?: boolean;\r\n  /** Enables multi select */\r\n  multiSelect?: boolean;\r\n  /** Size variant */\r\n  size?: 'md' | 'lg';\r\n}\r\n\r\nexport const SegmentedControlComponent = React.forwardRef<HTMLUListElement, SegmentedControlComponentProps>(\r\n  (props, ref) => {\r\n    const {\r\n      className,\r\n      children,\r\n      value,\r\n      defaultValue,\r\n      onChange,\r\n      id: _id,\r\n      disabled = false,\r\n      size = 'lg',\r\n      multiSelect = false,\r\n      ...rest\r\n    } = props;\r\n\r\n    const [internalSelected, setInternalSelected] = React.useState<number[]>(defaultValue || []);\r\n    const isControlled = value !== undefined;\r\n    const selected = isControlled ? value : internalSelected;\r\n\r\n    const [active, setActive] = React.useState<number>(0);\r\n\r\n    const autoId = React.useId();\r\n    const id = _id || `sk-segmentedcontrol-${autoId}`;\r\n\r\n    const total = React.Children.count(children);\r\n\r\n    const toggleItem = (index: number) => {\r\n      \r\n      if (disabled) return;\r\n\r\n      const newSelected = !multiSelect ? [index] : selected.includes(index) ? selected.filter((i) => i !== index) : [...selected, index];\r\n\r\n      if (!isControlled) {\r\n        setInternalSelected(newSelected);\r\n      }\r\n      onChange?.(newSelected);\r\n    };\r\n\r\n    const context = {\r\n      selected,\r\n      toggleItem,\r\n      active,\r\n      setActive,\r\n      total,\r\n      size,\r\n      disabled,\r\n    };\r\n\r\n    const validChildren = getValidChildren<SegmentedControlItemProps>(children);\r\n    const menuItems = validChildren.map((child, index) => {\r\n      const itemProps = { ...child.props, menuIndex: index };\r\n      return React.cloneElement(child, itemProps);\r\n    });\r\n\r\n    return (\r\n      <SegmentedControlContext.Provider value={context}>\r\n        <ul id={id} role=\"toolbar\" ref={ref} className={cx('sk-segmentedcontrol', className)} data-size={size} {...rest}>\r\n          {menuItems}\r\n        </ul>\r\n      </SegmentedControlContext.Provider>\r\n    );\r\n  }\r\n);\r\n\r\nif (__DEV__) {\r\n  SegmentedControlComponent.displayName = 'SegmentedControl';\r\n}\r\n\r\nexport default SegmentedControlComponent;\r\n"],"names":["__DEV__","cx","getValidChildren","React","SegmentedControlContext","SegmentedControlComponent","forwardRef","props","ref","className","children","value","defaultValue","onChange","id","_id","disabled","size","multiSelect","rest","internalSelected","setInternalSelected","useState","isControlled","undefined","selected","active","setActive","autoId","useId","total","Children","count","toggleItem","index","newSelected","includes","filter","i","context","validChildren","menuItems","map","child","itemProps","menuIndex","cloneElement","Provider","ul","role","data-size","displayName"],"mappings":";AAAA,SAAuBA,OAAO,EAAEC,EAAE,EAAEC,gBAAgB,QAAQ,oBAAoB;AAChF,OAAOC,WAAW,QAAQ;AAC1B,SAASC,uBAAuB,QAAQ,YAAY;AAoBpD,OAAO,MAAMC,0CAA4BF,MAAMG,UAAU,CACvD,CAACC,OAAOC;IACN,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,IAAIC,GAAG,EACPC,WAAW,KAAK,EAChBC,OAAO,IAAI,EACXC,cAAc,KAAK,EACnB,GAAGC,MACJ,GAAGZ;IAEJ,MAAM,CAACa,kBAAkBC,oBAAoB,GAAGlB,MAAMmB,QAAQ,CAAWV,gBAAgB,EAAE;IAC3F,MAAMW,eAAeZ,UAAUa;IAC/B,MAAMC,WAAWF,eAAeZ,QAAQS;IAExC,MAAM,CAACM,QAAQC,UAAU,GAAGxB,MAAMmB,QAAQ,CAAS;IAEnD,MAAMM,SAASzB,MAAM0B,KAAK;IAC1B,MAAMf,KAAKC,OAAO,CAAC,oBAAoB,EAAEa,QAAQ;IAEjD,MAAME,QAAQ3B,MAAM4B,QAAQ,CAACC,KAAK,CAACtB;IAEnC,MAAMuB,aAAa,CAACC;QAElB,IAAIlB,UAAU;QAEd,MAAMmB,cAAc,CAACjB,cAAc;YAACgB;SAAM,GAAGT,SAASW,QAAQ,CAACF,SAAST,SAASY,MAAM,CAAC,CAACC,IAAMA,MAAMJ,SAAS;eAAIT;YAAUS;SAAM;QAElI,IAAI,CAACX,cAAc;YACjBF,oBAAoBc;QACtB;QACAtB,WAAWsB;IACb;IAEA,MAAMI,UAAU;QACdd;QACAQ;QACAP;QACAC;QACAG;QACAb;QACAD;IACF;IAEA,MAAMwB,gBAAgBtC,iBAA4CQ;IAClE,MAAM+B,YAAYD,cAAcE,GAAG,CAAC,CAACC,OAAOT;QAC1C,MAAMU,YAAY;YAAE,GAAGD,MAAMpC,KAAK;YAAEsC,WAAWX;QAAM;QACrD,qBAAO/B,MAAM2C,YAAY,CAACH,OAAOC;IACnC;IAEA,qBACE,KAACxC,wBAAwB2C,QAAQ;QAACpC,OAAO4B;kBACvC,cAAA,KAACS;YAAGlC,IAAIA;YAAImC,MAAK;YAAUzC,KAAKA;YAAKC,WAAWR,GAAG,uBAAuBQ;YAAYyC,aAAWjC;YAAO,GAAGE,IAAI;sBAC5GsB;;;AAIT,GACA;AAEF,IAAIzC,SAAS;IACXK,0BAA0B8C,WAAW,GAAG;AAC1C;AAEA,eAAe9C,0BAA0B"}

package/dist/esm/use-segmented-control.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SegmentedControlContext } from './context.js';
+export const useSegmentedControl = ()=>React.useContext(SegmentedControlContext);
+
+//# sourceMappingURL=use-segmented-control.js.map

package/dist/esm/use-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-segmented-control.ts"],"sourcesContent":["import React from 'react';\r\nimport { SegmentedControlContext } from './context';\r\n\r\nexport interface UseSegmentedControlProps {\r\n  /** Array of selected indices (controlled) */\r\n  value?: number[];\r\n  /** Array of initially selected indices (uncontrolled) */\r\n  defaultValue?: number[];\r\n  size?: 'md' | 'lg';\r\n}\r\n\r\nexport const useSegmentedControl = () => React.useContext(SegmentedControlContext);\r\n"],"names":["React","SegmentedControlContext","useSegmentedControl","useContext"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,uBAAuB,QAAQ,YAAY;AAUpD,OAAO,MAAMC,sBAAsB,IAAMF,MAAMG,UAAU,CAACF,yBAAyB"}

package/dist/types/context.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { UseSegmentedControlProps } from './use-segmented-control';
+export interface UseSegmentedControlContext extends UseSegmentedControlProps {
+    /** Array of currently selected indices */
+    selected?: number[];
+    /** Toggle an item's selection state */
+    toggleItem?: (index: number) => void;
+    /** Currently focused item index (for keyboard navigation) */
+    active?: number;
+    /** Set the focused item index */
+    setActive?: (index: number) => void;
+    /** Total number of items */
+    total?: number;
+    size?: 'md' | 'lg';
+    disabled?: boolean;
+}
+export declare const SegmentedControlContext: React.Context<UseSegmentedControlContext>;

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+import SegmentedControlComponent, { SegmentedControlComponentProps } from "./segmented-control";
+import { SegmentedControlItem } from "./segmented-control-item";
+interface SegmentedControlProps extends React.ForwardRefExoticComponent<SegmentedControlComponentProps> {
+    Component: typeof SegmentedControlComponent;
+    Item: typeof SegmentedControlItem;
+}
+declare const SegmentedControl: SegmentedControlProps;
+export { SegmentedControl };
+export type { SegmentedControlProps, SegmentedControlComponentProps };
+export default SegmentedControl;

package/dist/types/segmented-control-item.d.ts

@@ -0,0 +1,13 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface SegmentedControlItemProps extends DefaultProps, React.ComponentPropsWithRef<'li'> {
+    /** Set automatic by parent */
+    menuIndex?: number;
+    /** Use <a> or <button>. For dropdown, use <PopupMenu> */
+    children: React.JSX.Element;
+    /** For e.g. Next Links to work, they need to wrapped this way */
+    wrapper?: React.JSX.Element;
+    size?: 'md' | 'lg';
+    disabled?: boolean;
+}
+export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<SegmentedControlItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/types/segmented-control.d.ts

@@ -0,0 +1,18 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface SegmentedControlComponentProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'ul'>, 'defaultValue' | 'onChange'> {
+    /** Array of selected indices (controlled mode) */
+    value?: number[];
+    /** Array of initially selected indices (uncontrolled mode) */
+    defaultValue?: number[];
+    /** Callback when selection changes */
+    onChange?: (selected: number[]) => void;
+    /** Disable all items */
+    disabled?: boolean;
+    /** Enables multi select */
+    multiSelect?: boolean;
+    /** Size variant */
+    size?: 'md' | 'lg';
+}
+export declare const SegmentedControlComponent: React.ForwardRefExoticComponent<Omit<SegmentedControlComponentProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export default SegmentedControlComponent;

package/dist/types/use-segmented-control.d.ts

@@ -0,0 +1,8 @@
+export interface UseSegmentedControlProps {
+    /** Array of selected indices (controlled) */
+    value?: number[];
+    /** Array of initially selected indices (uncontrolled) */
+    defaultValue?: number[];
+    size?: 'md' | 'lg';
+}
+export declare const useSegmentedControl: () => import("./context").UseSegmentedControlContext;

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@sk-web-gui/segmentedcontrol",
+  "version": "1.1.0",
+  "sideEffects": false,
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "typings": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "start": "nodemon --watch src --exec yarn build -e ts,tsx",
+    "build": "yarn build:types && yarn build:esm && yarn build:cjs",
+    "test": "jest --env=jsdom --passWithNoTests",
+    "lint": "concurrently yarn:lint:*",
+    "version": "yarn build",
+    "build:esm": "swc src -d dist/esm --config-file ../../.swcrc.esm && node ../../fix-esm-extensions.mjs ./dist/esm",
+    "build:cjs": "swc src -d dist/cjs --config-file ../../.swcrc",
+    "build:types": "tsc -p ./tsconfig.production.json --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "test:cov": "yarn test --coverage",
+    "lint:src": "eslint src"
+  },
+  "devDependencies": {
+    "react": "^19.0.0"
+  },
+  "dependencies": {
+    "@sk-web-gui/button": "2.1.8",
+    "@sk-web-gui/icon": "3.1.2",
+    "@sk-web-gui/utils": "2.2.2",
+    "lucide-react": "^0.537.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.1"
+  },
+  "gitHead": "572bd789b743fdfccb74f6814e6229b2eae867ca"
+}