@semcore/pills 17.2.1 → 18.0.0-prerelease.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [18.0.0] - 2026-09-28
+
+### BREAK
+
+- New theme applied.
+
 ## [17.2.1] - 2026-06-26
 
 ### Fixed

package/lib/cjs/Pills.js

@@ -9,28 +9,37 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _core = require("@semcore/core");
 var _baseComponents = require("@semcore/base-components");
 var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
+var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
 var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
+var _rafTrottle = _interopRequireDefault(require("@semcore/core/lib/utils/rafTrottle"));
+var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/pills.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPills_1o2wa_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded,6px)}.___SPills_1o2wa_gg_ .___SPill_1o2wa_gg_.__selected_1o2wa_gg_{background:var(--intergalactic-control-secondary-info,#0051ff0a);border-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2));z-index:3}@media (color-gamut:p3){.___SPills_1o2wa_gg_ .___SPill_1o2wa_gg_.__selected_1o2wa_gg_{background:var(--intergalactic-control-secondary-info,oklch(.527 .264 262.9/.039))}}.___SPills_1o2wa_gg_ .___SPill_1o2wa_gg_.__selected_1o2wa_gg_,.___SPills_1o2wa_gg_ .___SPill_1o2wa_gg_:focus-visible{z-index:3}.___SPills_1o2wa_gg_ .___SPill_1o2wa_gg_:active{z-index:2}@media (hover:hover){.___SPills_1o2wa_gg_ .___SPill_1o2wa_gg_:hover{z-index:2}}.___SPill_1o2wa_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));border:1px solid var(--intergalactic-border-primary,#000c0829);border-radius:var(--intergalactic-control-rounded,6px)}@media (color-gamut:p3){.___SPill_1o2wa_gg_{border:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SPill_1o2wa_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1o2wa_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1o2wa_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover,oklch(.98 .001 180))}}.___SPill_1o2wa_gg_.__disabled_1o2wa_gg_{cursor:default;pointer-events:none}.___SPill_1o2wa_gg_.__disabled_1o2wa_gg_>*{opacity:var(--intergalactic-disabled-opacity,.4)}.___SText_1o2wa_gg_{color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));display:inline-flex}.___SAddon_1o2wa_gg_{color:var(--intergalactic-text-secondary,#00030095);display:inline-flex;align-items:center;justify-content:center}@media (color-gamut:p3){.___SAddon_1o2wa_gg_{color:var(--intergalactic-text-secondary,oklch(.088 .026 147.7/.583))}}.___SPill_1o2wa_gg_._size_m_1o2wa_gg_{height:var(--intergalactic-form-control-m,28px);min-width:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px)}.___SPill_1o2wa_gg_._size_m_1o2wa_gg_ .___SText_1o2wa_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_1o2wa_gg_._size_m_1o2wa_gg_ .___SAddon_1o2wa_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SPill_1o2wa_gg_._size_m_1o2wa_gg_ .___SAddon_1o2wa_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_1o2wa_gg_._size_m_1o2wa_gg_ .___SAddon_1o2wa_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_1o2wa_gg_._size_l_1o2wa_gg_{height:var(--intergalactic-form-control-l,40px);min-width:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px)}.___SPill_1o2wa_gg_._size_l_1o2wa_gg_ .___SText_1o2wa_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_1o2wa_gg_._size_l_1o2wa_gg_ .___SText_1o2wa_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_1o2wa_gg_._size_l_1o2wa_gg_ .___SAddon_1o2wa_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x,12px)}.___SPill_1o2wa_gg_._size_l_1o2wa_gg_ .___SAddon_1o2wa_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_1o2wa_gg_._size_l_1o2wa_gg_ .___SAddon_1o2wa_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_1o2wa_gg_._neighborLocation_right_1o2wa_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1o2wa_gg_._neighborLocation_both_1o2wa_gg_{border-radius:0;margin-left:-1px}.___SPill_1o2wa_gg_._neighborLocation_left_1o2wa_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"1o2wa_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPills_1jzu3_gg_{position:relative;display:inline-flex;padding:var(--intergalactic-spacing-content-padding-xxsmall,2px);min-height:var(--intergalactic-form-control-m,32px);border-radius:var(--intergalactic-pills-rounded,6px);background:var(--intergalactic-control-pills-bg-normal,oklch(.166 .031 175.8/.097));box-sizing:border-box;--transition-fast:left calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),width calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),top calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),height calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12));--transition-slow:left calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),width calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),top calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),height calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09))}.___SPills_1jzu3_gg_._size_l_1jzu3_gg_{min-height:var(--intergalactic-form-control-l,44px)}.___SPills_1jzu3_gg_ .___SPillContainer_1jzu3_gg_:last-of-type .___SPillSeparator_1jzu3_gg_{display:none}.___SPill_1jzu3_gg_{position:relative;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:var(--intergalactic-spacing-content-gap-medium,6px);padding:0 var(--intergalactic-spacing-content-padding-medium,12px);border-style:solid;border-color:#0000;border-radius:var(--intergalactic-rounded-small,4px);background-color:initial}@media (hover:hover){.___SPill_1jzu3_gg_[aria-checked=false]:hover:after,.___SPill_1jzu3_gg_[aria-selected=false]:hover:after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--intergalactic-rounded-small,4px);background:var(--intergalactic-control-pills-bg-hover,oklch(.151 .028 176.1/.123))}}.___SPill_1jzu3_gg_.__disabled_1jzu3_gg_{cursor:default;pointer-events:none}.___SPill_1jzu3_gg_.__disabled_1jzu3_gg_>*{opacity:var(--intergalactic-disabled-opacity,.4)}.___SPill_1jzu3_gg_._size_m_1jzu3_gg_{min-width:calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));border-width:2px 3px}.___SPill_1jzu3_gg_._size_l_1jzu3_gg_{min-width:calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));border-width:3px}.___SPillContainer_1jzu3_gg_{display:inline-flex}.___SPillContainer_1jzu3_gg_:has(+.___SPillContainer_1jzu3_gg_ .___SPill_1jzu3_gg_[aria-checked=true],+.___SPillContainer_1jzu3_gg_ .___SPill_1jzu3_gg_[aria-selected=true]) .___SPillSeparator_1jzu3_gg_,.___SPillContainer_1jzu3_gg_:has(.___SPill_1jzu3_gg_[aria-checked=true],.___SPill_1jzu3_gg_[aria-selected=true]) .___SPillSeparator_1jzu3_gg_{background-color:initial}.___SPillSeparator_1jzu3_gg_{align-self:center;width:1px;height:calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px)*2);background-color:var(--intergalactic-control-pills-border,#000c0829)}@media (color-gamut:p3){.___SPillSeparator_1jzu3_gg_{background-color:var(--intergalactic-control-pills-border,oklch(.137 .026 175.7/.161))}}.___SPillSeparator_1jzu3_gg_._size_l_1jzu3_gg_{height:calc(100% - var(--intergalactic-spacing-content-padding-small, 8px)*2)}.___SSegmentIndicator_1jzu3_gg_{position:absolute;left:var(--global-left);width:var(--global-width);height:var(--global-height);transition:var(--global-speed);background:var(--intergalactic-control-pills-bg-selected,oklch(1 0 0));box-shadow:var(--intergalactic-box-shadow-control-elevated,0 0 1px 0 #00151012,0 1px 3px 0 #00151012);border-radius:var(--intergalactic-rounded-small,4px)}@media (color-gamut:p3){.___SSegmentIndicator_1jzu3_gg_{box-shadow:var(--intergalactic-box-shadow-control-elevated,0 0 1px 0 oklch(.176 .033 175.7/.07),0 1px 3px 0 oklch(.176 .033 175.7/.07))}}.___SText_1jzu3_gg_{color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));min-width:.8em}.___SAddon_1jzu3_gg_{color:var(--intergalactic-text-secondary,oklch(.097 .023 156.5/.468));display:inline-flex;align-items:center;justify-content:center}@media (prefers-reduced-motion){.___SSegmentIndicator_1jzu3_gg_{transition:none}}", /*__inner_css_end__*/"1jzu3_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_1o2wa_gg_",
-  "__SAddon": "___SAddon_1o2wa_gg_",
-  "__SPill": "___SPill_1o2wa_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1o2wa_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1o2wa_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1o2wa_gg_",
-  "__SPills": "___SPills_1o2wa_gg_",
-  "_selected": "__selected_1o2wa_gg_",
-  "_disabled": "__disabled_1o2wa_gg_",
-  "_size_m": "_size_m_1o2wa_gg_",
-  "_size_l": "_size_l_1o2wa_gg_"
+  "__SSegmentIndicator": "___SSegmentIndicator_1jzu3_gg_",
+  "__SText": "___SText_1jzu3_gg_",
+  "__SAddon": "___SAddon_1jzu3_gg_",
+  "__SPills": "___SPills_1jzu3_gg_",
+  "_size_l": "_size_l_1jzu3_gg_",
+  "__SPillContainer": "___SPillContainer_1jzu3_gg_",
+  "__SPillSeparator": "___SPillSeparator_1jzu3_gg_",
+  "__SPill": "___SPill_1jzu3_gg_",
+  "_disabled": "__disabled_1jzu3_gg_",
+  "_size_m": "_size_m_1jzu3_gg_"
 });
+const TRANSITION_SLOW_THRESHOLD = 1;
 class RootPills extends _core.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     (0, _defineProperty2.default)(this, "itemValues", []);
+    (0, _defineProperty2.default)(this, "lastSelectedIndex", null);
+    (0, _defineProperty2.default)(this, "currentSelectedIndex", null);
+    (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "pills", []);
+    (0, _defineProperty2.default)(this, "segmentIndicatorRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "ro", null);
     (0, _defineProperty2.default)(this, "bindHandlerClick", value => e => {
       this.handlers.value(value, e);
     });
@@ -40,12 +49,56 @@ class RootPills extends _core.Component {
         this.handlers.value(value, e);
       }
     });
+    if ((0, _canUseDOM.default)()) {
+      this.ro = new ResizeObserver((0, _rafTrottle.default)(() => this.updateSegmentIndicator()));
+    }
   }
   uncontrolledProps() {
     return {
       value: null
     };
   }
+  componentDidUpdate() {
+    this.updateSelectedIndexes();
+    this.updateSegmentIndicator();
+  }
+  componentDidMount() {
+    this.updateSegmentIndicator();
+  }
+  componentWillUnmount() {
+    this.ro?.disconnect();
+  }
+  updateSelectedIndexes() {
+    if (this.currentSelectedIndex === null) return;
+    if (this.currentSelectedIndex <= this.pills.length - 1) return;
+    this.currentSelectedIndex = null;
+    this.lastSelectedIndex = null;
+  }
+  updateSegmentIndicator() {
+    const indicator = this.segmentIndicatorRef?.current;
+    if (!indicator) return;
+    if (this.currentSelectedIndex === null) {
+      indicator.style.removeProperty('--global-speed');
+      indicator.style.removeProperty('--global-left');
+      indicator.style.removeProperty('--global-width');
+      indicator.style.removeProperty('--global-height');
+      return;
+    }
+    ;
+    const root = this.rootRef?.current;
+    const pill = this.pills[this.currentSelectedIndex];
+    if (!pill || !root) return;
+    const pillRect = pill.getBoundingClientRect();
+    const rootRect = root.getBoundingClientRect();
+    const speed = this.lastSelectedIndex === null ? '--transition-slow' : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD ? '--transition-slow' : '--transition-fast';
+    const left = pillRect.left - rootRect.left;
+    const width = pillRect.width;
+    const height = pillRect.height;
+    indicator.style.setProperty('--global-speed', `var(${speed})`);
+    indicator.style.setProperty('--global-left', `${left}px`);
+    indicator.style.setProperty('--global-width', `${width}px`);
+    indicator.style.setProperty('--global-height', `${height}px`);
+  }
   getItemProps(props, index) {
     const {
       value,
@@ -55,6 +108,10 @@ class RootPills extends _core.Component {
     } = this.asProps;
     const isSelected = value === props.value;
     this.itemValues[index] = props.value;
+    if (isSelected) {
+      this.lastSelectedIndex = this.currentSelectedIndex;
+      this.currentSelectedIndex = index;
+    }
     return {
       index: index,
       size,
@@ -63,17 +120,38 @@ class RootPills extends _core.Component {
       behavior,
       tabIndex: isSelected ? 0 : -1,
       onClick: this.bindHandlerClick(props.value),
-      onKeyDown: this.bindHandleKeyDown(props.value)
+      onKeyDown: this.bindHandleKeyDown(props.value),
+      ref: node => {
+        const prevPill = this.pills[index];
+        if (prevPill) {
+          this.ro?.unobserve(prevPill);
+        }
+        if (node === null) {
+          this.pills = this.pills.filter((_, pillIndex) => pillIndex !== index);
+          return;
+        }
+        ;
+        this.pills[index] = node;
+        this.ro?.observe(node);
+      }
+    };
+  }
+  getItemTextProps() {
+    const {
+      size
+    } = this.asProps;
+    return {
+      size: size === 'm' ? 200 : 300
     };
   }
   render() {
     var _ref = this.asProps,
       _ref5;
     const SPills = _baseComponents.Box;
+    const SSegmentIndicator = _baseComponents.Box;
     const {
       Children,
       styles,
-      controlsLength,
       disabled,
       behavior,
       value
@@ -82,11 +160,14 @@ class RootPills extends _core.Component {
       ...(0, _core.assignProps)({
         "role": behavior === 'auto' ? 'radiogroup' : 'tablist',
         "aria-disabled": disabled,
-        "use:tabIndex": value !== null ? -1 : 0
+        "use:tabIndex": value !== null ? -1 : 0,
+        "ref": this.rootRef
       }, _ref)
-    }), /*#__PURE__*/_react.default.createElement(_baseComponents.NeighborLocation, _ref5.cn("NeighborLocation", {
-      "controlsLength": controlsLength
-    }), /*#__PURE__*/_react.default.createElement(Children, _ref5.cn("Children", {}))));
+    }), /*#__PURE__*/_react.default.createElement(SSegmentIndicator, _ref5.cn("SSegmentIndicator", {
+      "tag": 'span',
+      "ref": this.segmentIndicatorRef,
+      "aria-hidden": true
+    })), /*#__PURE__*/_react.default.createElement(Children, _ref5.cn("Children", {})));
   }
 }
 (0, _defineProperty2.default)(RootPills, "displayName", 'Pills');
@@ -116,6 +197,8 @@ function Pill(props) {
   var _ref2 = arguments[0],
     _ref6;
   const SPill = _baseComponents.Box;
+  const SPillContainer = _baseComponents.Box;
+  const SPillSeparator = _baseComponents.Box;
   const {
     Children,
     styles,
@@ -123,21 +206,19 @@ function Pill(props) {
     addonRight,
     selected,
     disabled,
-    index,
-    behavior
+    behavior,
+    size
   } = props;
-  const neighborLocation = (0, _baseComponents.useNeighborLocationDetect)(index);
   const roleAreaProps = {
     'role': behavior === 'auto' ? 'radio' : 'tab',
     'aria-checked': behavior === 'auto' ? selected : undefined,
     'aria-selected': behavior !== 'auto' ? selected : undefined
   };
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPill, _ref6.cn("SPill", {
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPillContainer, _ref6.cn("SPillContainer", {}), /*#__PURE__*/_react.default.createElement(SPill, _ref6.cn("SPill", {
     ...(0, _core.assignProps)({
       "tag": 'button',
       "type": 'button',
       "tabIndex": 0,
-      "neighborLocation": neighborLocation,
       "aria-disabled": disabled,
       ...roleAreaProps
     }, _ref2)
@@ -145,16 +226,19 @@ function Pill(props) {
     tag: addonLeft
   }) : null, (0, _addonTextChildren.default)(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/_react.default.createElement(Pills.Item.Addon, {
     tag: addonRight
-  }) : null);
+  }) : null), /*#__PURE__*/_react.default.createElement(SPillSeparator
+  // @ts-ignore
+  , _ref6.cn("SPillSeparator", {
+    "size": size,
+    "aria-hidden": true
+  })));
 }
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;
-  const SText = _baseComponents.Box;
+  const SText = _typography.Text;
   return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SText, _ref7.cn("SText", {
-    ...(0, _core.assignProps)({
-      "tag": 'span'
-    }, _ref3)
+    ...(0, _core.assignProps)({}, _ref3)
   }));
 }
 function Addon(props) {

package/lib/cjs/Pills.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pills.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_react","style","sstyled","insert","RootPills","Component","constructor","args","_defineProperty2","default","value","e","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","size","disabled","behavior","asProps","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","Children","styles","controlsLength","createElement","cn","assignProps","NeighborLocation","defaultValue","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","undefined","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","wrapPills","wrapper","exports","createComponent","_default"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport React from 'react';\n\nimport type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>,\n  typeof RootPills.enhance,\n  NSPills.Handlers,\n  {},\n  {},\n  NSPills.DefaultProps\n> {\n  static displayName = 'Pills';\n  static style = style;\n  static defaultProps = ({ behavior }: Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>) => ({\n    size: 'm',\n    defaultValue: null,\n    behavior: behavior ?? 'auto',\n  } as const);\n\n  itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n  static enhance = [a11yEnhance({\n    onNeighborChange: (neighborElement, props) => {\n      if (neighborElement) {\n        neighborElement.focus();\n        if (props.behavior === 'auto') {\n          neighborElement.click();\n        }\n      }\n    },\n    childSelector: (props) => {\n      const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n      return selector as [string, string];\n    },\n  })] as const;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handlers.value(value, e);\n    }\n  };\n\n  getItemProps(props: NSPills.Pill.Props, index: number) {\n    const { value, size, disabled, behavior } = this.asProps;\n    const isSelected = value === props.value;\n\n    this.itemValues[index] = props.value;\n\n    return {\n      index: index,\n      size,\n      disabled,\n      selected: isSelected,\n      behavior,\n      tabIndex: isSelected ? 0 : -1,\n      onClick: this.bindHandlerClick(props.value),\n      onKeyDown: this.bindHandleKeyDown(props.value),\n    };\n  }\n\n  render() {\n    const SPills = Root;\n    const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n    return sstyled(styles)(\n      <SPills\n        render={Box}\n        role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n        aria-disabled={disabled}\n        use:tabIndex={value !== null ? -1 : 0}\n      >\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n      </SPills>,\n    );\n  }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n  const SPill = Root;\n  const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n  const neighborLocation = useNeighborLocationDetect(index);\n\n  const roleAreaProps = {\n    'role': behavior === 'auto' ? 'radio' : 'tab',\n    'aria-checked': behavior === 'auto' ? selected : undefined,\n    'aria-selected': behavior !== 'auto' ? selected : undefined,\n  };\n\n  return sstyled(styles)(\n    <SPill\n      render={Box}\n      tag='button'\n      type='button'\n      tabIndex={0}\n      neighborLocation={neighborLocation}\n      aria-disabled={disabled}\n      {...roleAreaProps}\n    >\n      {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n      {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n    </SPill>,\n  );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\n/**\n * Pills\n *\n * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}\n */\nconst Pills = createComponent<\n  NSPills.Component,\n  typeof RootPills\n>(RootPills, {\n  Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Pills.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_canUseDOM","_a11yEnhance","_rafTrottle","_typography","_react","style","sstyled","insert","TRANSITION_SLOW_THRESHOLD","RootPills","Component","constructor","props","_defineProperty2","default","React","createRef","value","e","handlers","key","preventDefault","canUseDOM","ro","ResizeObserver","trottle","updateSegmentIndicator","uncontrolledProps","componentDidUpdate","updateSelectedIndexes","componentDidMount","componentWillUnmount","disconnect","currentSelectedIndex","pills","length","lastSelectedIndex","indicator","segmentIndicatorRef","current","removeProperty","root","rootRef","pill","pillRect","getBoundingClientRect","rootRect","speed","Math","abs","left","width","height","setProperty","getItemProps","index","size","disabled","behavior","asProps","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","ref","node","prevPill","unobserve","filter","_","pillIndex","observe","getItemTextProps","render","_ref","_ref5","SPills","Box","SSegmentIndicator","Children","styles","createElement","cn","assignProps","defaultValue","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","SPillContainer","SPillSeparator","addonLeft","addonRight","roleAreaProps","undefined","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","SemcoreText","_ref4","_ref8","SAddon","wrapPills","wrapper","exports","createComponent","_default"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport trottle from '@semcore/core/lib/utils/rafTrottle';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nconst TRANSITION_SLOW_THRESHOLD = 1;\n\ntype RootProps = Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>;\nclass RootPills extends Component<\n  RootProps,\n  typeof RootPills.enhance,\n  NSPills.Handlers,\n  {},\n  {},\n  NSPills.DefaultProps\n> {\n  static displayName = 'Pills';\n  static style = style;\n  static defaultProps = ({ behavior }: RootProps) => ({\n    size: 'm',\n    defaultValue: null,\n    behavior: behavior ?? 'auto',\n  } as const);\n\n  itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n  lastSelectedIndex: number | null = null;\n  currentSelectedIndex: number | null = null;\n\n  rootRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef();\n  pills: Array<HTMLButtonElement> = [];\n  segmentIndicatorRef: React.MutableRefObject<HTMLSpanElement | null> = React.createRef();\n\n  ro: ResizeObserver | null = null;\n\n  static enhance = [a11yEnhance({\n    onNeighborChange: (neighborElement, props) => {\n      if (neighborElement) {\n        neighborElement.focus();\n        if (props.behavior === 'auto') {\n          neighborElement.click();\n        }\n      }\n    },\n    childSelector: (props) => {\n      const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n      return selector as [string, string];\n    },\n  })] as const;\n\n  constructor(props: RootProps) {\n    super(props);\n    if (canUseDOM()) {\n      this.ro = new ResizeObserver(trottle(() => this.updateSegmentIndicator()));\n    }\n  }\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    this.updateSelectedIndexes();\n    this.updateSegmentIndicator();\n  }\n\n  componentDidMount() {\n    this.updateSegmentIndicator();\n  }\n\n  componentWillUnmount() {\n    this.ro?.disconnect();\n  }\n\n  updateSelectedIndexes() {\n    if (this.currentSelectedIndex === null) return;\n    if (this.currentSelectedIndex <= this.pills.length - 1) return;\n\n    this.currentSelectedIndex = null;\n    this.lastSelectedIndex = null;\n  }\n\n  updateSegmentIndicator() {\n    const indicator = this.segmentIndicatorRef?.current;\n\n    if (!indicator) return;\n\n    if (this.currentSelectedIndex === null) {\n      indicator.style.removeProperty('--global-speed');\n      indicator.style.removeProperty('--global-left');\n      indicator.style.removeProperty('--global-width');\n      indicator.style.removeProperty('--global-height');\n\n      return;\n    };\n\n    const root = this.rootRef?.current;\n    const pill = this.pills[this.currentSelectedIndex];\n\n    if (!pill || !root) return;\n\n    const pillRect = pill.getBoundingClientRect();\n    const rootRect = root.getBoundingClientRect();\n\n    const speed = this.lastSelectedIndex === null\n      ? '--transition-slow'\n      : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD\n        ? '--transition-slow'\n        : '--transition-fast';\n    const left = pillRect.left - rootRect.left;\n    const width = pillRect.width;\n    const height = pillRect.height;\n\n    indicator.style.setProperty('--global-speed', `var(${speed})`);\n    indicator.style.setProperty('--global-left', `${left}px`);\n    indicator.style.setProperty('--global-width', `${width}px`);\n    indicator.style.setProperty('--global-height', `${height}px`);\n  }\n\n  bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handlers.value(value, e);\n    }\n  };\n\n  getItemProps(props: NSPills.Pill.Props, index: number) {\n    const { value, size, disabled, behavior } = this.asProps;\n    const isSelected = value === props.value;\n\n    this.itemValues[index] = props.value;\n\n    if (isSelected) {\n      this.lastSelectedIndex = this.currentSelectedIndex;\n      this.currentSelectedIndex = index;\n    }\n\n    return {\n      index: index,\n      size,\n      disabled,\n      selected: isSelected,\n      behavior,\n      tabIndex: isSelected ? 0 : -1,\n      onClick: this.bindHandlerClick(props.value),\n      onKeyDown: this.bindHandleKeyDown(props.value),\n      ref: (node: HTMLButtonElement | null) => {\n        const prevPill = this.pills[index];\n\n        if (prevPill) {\n          this.ro?.unobserve(prevPill);\n        }\n\n        if (node === null) {\n          this.pills = this.pills.filter((_, pillIndex) => pillIndex !== index);\n          return;\n        };\n\n        this.pills[index] = node;\n\n        this.ro?.observe(node);\n      },\n    };\n  }\n\n  getItemTextProps() {\n    const { size } = this.asProps;\n\n    return {\n      size: size === 'm' ? 200 : 300,\n    };\n  }\n\n  render() {\n    const SPills = Root;\n    const SSegmentIndicator = Box;\n    const { Children, styles, disabled, behavior, value } = this.asProps;\n\n    return sstyled(styles)(\n      <SPills\n        render={Box}\n        role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n        aria-disabled={disabled}\n        use:tabIndex={value !== null ? -1 : 0}\n        ref={this.rootRef}\n      >\n        <SSegmentIndicator\n          tag='span'\n          ref={this.segmentIndicatorRef}\n          aria-hidden\n        />\n        <Children />\n      </SPills>,\n    );\n  }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n  const SPill = Root;\n  const SPillContainer = Box;\n  const SPillSeparator = Box;\n  const { Children, styles, addonLeft, addonRight, selected, disabled, behavior, size } = props;\n\n  const roleAreaProps = {\n    'role': behavior === 'auto' ? 'radio' : 'tab',\n    'aria-checked': behavior === 'auto' ? selected : undefined,\n    'aria-selected': behavior !== 'auto' ? selected : undefined,\n  };\n\n  return sstyled(styles)(\n    <SPillContainer>\n      <SPill\n        render={Box}\n        tag='button'\n        type='button'\n        tabIndex={0}\n        aria-disabled={disabled}\n        {...roleAreaProps}\n      >\n        {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n        {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n      </SPill>\n      <SPillSeparator\n        // @ts-ignore\n        size={size}\n        aria-hidden\n      />\n    </SPillContainer>,\n  );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={SemcoreText} />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\n/**\n * Pills\n *\n * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}\n */\nconst Pills = createComponent<\n  NSPills.Component,\n  typeof RootPills\n>(RootPills, {\n  Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"mappings":";;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAFA,IAAAC,eAAA,GAAAD,OAAA;AAGA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,UAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,YAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,WAAA,GAAAH,sBAAA,CAAAH,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAL,sBAAA,CAAAH,OAAA;AAA0B;AAAA,MAAAS,KAAA,8BAAAV,KAAA,CAAAW,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAK1B,MAAMC,yBAAyB,GAAG,CAAC;AAGnC,MAAMC,SAAS,SAASC,eAAS,CAO/B;EAoCAC,WAAWA,CAACC,KAAgB,EAAE;IAC5B,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,sBA5BkC,EAAE;IAAA,IAAAD,gBAAA,CAAAC,OAAA,6BAEhB,IAAI;IAAA,IAAAD,gBAAA,CAAAC,OAAA,gCACD,IAAI;IAAA,IAAAD,gBAAA,CAAAC,OAAA,gCAEeC,cAAK,CAACC,SAAS,CAAC,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,iBACxC,EAAE;IAAA,IAAAD,gBAAA,CAAAC,OAAA,4CACkCC,cAAK,CAACC,SAAS,CAAC,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,cAE3D,IAAI;IAAA,IAAAD,gBAAA,CAAAC,OAAA,4BAyFZG,KAAkC,IAAMC,CAAmB,IAAK;MAClF,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;IAC/B,CAAC;IAAA,IAAAL,gBAAA,CAAAC,OAAA,6BAEoBG,KAAkC,IAAMC,CAAsB,IAAK;MACtF,IAAIA,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;QACtCF,CAAC,CAACG,cAAc,CAAC,CAAC;QAClB,IAAI,CAACF,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;MAC/B;IACF,CAAC;IA9EC,IAAI,IAAAI,kBAAS,EAAC,CAAC,EAAE;MACf,IAAI,CAACC,EAAE,GAAG,IAAIC,cAAc,CAAC,IAAAC,mBAAO,EAAC,MAAM,IAAI,CAACC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC5E;EACF;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLV,KAAK,EAAE;IACT,CAAC;EACH;EAEAW,kBAAkBA,CAAA,EAAG;IACnB,IAAI,CAACC,qBAAqB,CAAC,CAAC;IAC5B,IAAI,CAACH,sBAAsB,CAAC,CAAC;EAC/B;EAEAI,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACJ,sBAAsB,CAAC,CAAC;EAC/B;EAEAK,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACR,EAAE,EAAES,UAAU,CAAC,CAAC;EACvB;EAEAH,qBAAqBA,CAAA,EAAG;IACtB,IAAI,IAAI,CAACI,oBAAoB,KAAK,IAAI,EAAE;IACxC,IAAI,IAAI,CAACA,oBAAoB,IAAI,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,CAAC,EAAE;IAExD,IAAI,CAACF,oBAAoB,GAAG,IAAI;IAChC,IAAI,CAACG,iBAAiB,GAAG,IAAI;EAC/B;EAEAV,sBAAsBA,CAAA,EAAG;IACvB,MAAMW,SAAS,GAAG,IAAI,CAACC,mBAAmB,EAAEC,OAAO;IAEnD,IAAI,CAACF,SAAS,EAAE;IAEhB,IAAI,IAAI,CAACJ,oBAAoB,KAAK,IAAI,EAAE;MACtCI,SAAS,CAAChC,KAAK,CAACmC,cAAc,CAAC,gBAAgB,CAAC;MAChDH,SAAS,CAAChC,KAAK,CAACmC,cAAc,CAAC,eAAe,CAAC;MAC/CH,SAAS,CAAChC,KAAK,CAACmC,cAAc,CAAC,gBAAgB,CAAC;MAChDH,SAAS,CAAChC,KAAK,CAACmC,cAAc,CAAC,iBAAiB,CAAC;MAEjD;IACF;IAAC;IAED,MAAMC,IAAI,GAAG,IAAI,CAACC,OAAO,EAAEH,OAAO;IAClC,MAAMI,IAAI,GAAG,IAAI,CAACT,KAAK,CAAC,IAAI,CAACD,oBAAoB,CAAC;IAElD,IAAI,CAACU,IAAI,IAAI,CAACF,IAAI,EAAE;IAEpB,MAAMG,QAAQ,GAAGD,IAAI,CAACE,qBAAqB,CAAC,CAAC;IAC7C,MAAMC,QAAQ,GAAGL,IAAI,CAACI,qBAAqB,CAAC,CAAC;IAE7C,MAAME,KAAK,GAAG,IAAI,CAACX,iBAAiB,KAAK,IAAI,GACzC,mBAAmB,GACnBY,IAAI,CAACC,GAAG,CAAC,IAAI,CAAChB,oBAAoB,GAAG,IAAI,CAACG,iBAAiB,CAAC,GAAG5B,yBAAyB,GACtF,mBAAmB,GACnB,mBAAmB;IACzB,MAAM0C,IAAI,GAAGN,QAAQ,CAACM,IAAI,GAAGJ,QAAQ,CAACI,IAAI;IAC1C,MAAMC,KAAK,GAAGP,QAAQ,CAACO,KAAK;IAC5B,MAAMC,MAAM,GAAGR,QAAQ,CAACQ,MAAM;IAE9Bf,SAAS,CAAChC,KAAK,CAACgD,WAAW,CAAC,gBAAgB,EAAE,OAAON,KAAK,GAAG,CAAC;IAC9DV,SAAS,CAAChC,KAAK,CAACgD,WAAW,CAAC,eAAe,EAAE,GAAGH,IAAI,IAAI,CAAC;IACzDb,SAAS,CAAChC,KAAK,CAACgD,WAAW,CAAC,gBAAgB,EAAE,GAAGF,KAAK,IAAI,CAAC;IAC3Dd,SAAS,CAAChC,KAAK,CAACgD,WAAW,CAAC,iBAAiB,EAAE,GAAGD,MAAM,IAAI,CAAC;EAC/D;EAaAE,YAAYA,CAAC1C,KAAyB,EAAE2C,KAAa,EAAE;IACrD,MAAM;MAAEtC,KAAK;MAAEuC,IAAI;MAAEC,QAAQ;MAAEC;IAAS,CAAC,GAAG,IAAI,CAACC,OAAO;IACxD,MAAMC,UAAU,GAAG3C,KAAK,KAAKL,KAAK,CAACK,KAAK;IAExC,IAAI,CAAC4C,UAAU,CAACN,KAAK,CAAC,GAAG3C,KAAK,CAACK,KAAK;IAEpC,IAAI2C,UAAU,EAAE;MACd,IAAI,CAACxB,iBAAiB,GAAG,IAAI,CAACH,oBAAoB;MAClD,IAAI,CAACA,oBAAoB,GAAGsB,KAAK;IACnC;IAEA,OAAO;MACLA,KAAK,EAAEA,KAAK;MACZC,IAAI;MACJC,QAAQ;MACRK,QAAQ,EAAEF,UAAU;MACpBF,QAAQ;MACRK,QAAQ,EAAEH,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC7BI,OAAO,EAAE,IAAI,CAACC,gBAAgB,CAACrD,KAAK,CAACK,KAAK,CAAC;MAC3CiD,SAAS,EAAE,IAAI,CAACC,iBAAiB,CAACvD,KAAK,CAACK,KAAK,CAAC;MAC9CmD,GAAG,EAAGC,IAA8B,IAAK;QACvC,MAAMC,QAAQ,GAAG,IAAI,CAACpC,KAAK,CAACqB,KAAK,CAAC;QAElC,IAAIe,QAAQ,EAAE;UACZ,IAAI,CAAC/C,EAAE,EAAEgD,SAAS,CAACD,QAAQ,CAAC;QAC9B;QAEA,IAAID,IAAI,KAAK,IAAI,EAAE;UACjB,IAAI,CAACnC,KAAK,GAAG,IAAI,CAACA,KAAK,CAACsC,MAAM,CAAC,CAACC,CAAC,EAAEC,SAAS,KAAKA,SAAS,KAAKnB,KAAK,CAAC;UACrE;QACF;QAAC;QAED,IAAI,CAACrB,KAAK,CAACqB,KAAK,CAAC,GAAGc,IAAI;QAExB,IAAI,CAAC9C,EAAE,EAAEoD,OAAO,CAACN,IAAI,CAAC;MACxB;IACF,CAAC;EACH;EAEAO,gBAAgBA,CAAA,EAAG;IACjB,MAAM;MAAEpB;IAAK,CAAC,GAAG,IAAI,CAACG,OAAO;IAE7B,OAAO;MACLH,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,GAAG,GAAG;IAC7B,CAAC;EACH;EAEAqB,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAnB,OAAA;MAAAoB,KAAA;IACP,MAAMC,MAAM,GAMAC,mBAAG;IALf,MAAMC,iBAAiB,GAAGD,mBAAG;IAC7B,MAAM;MAAEE,QAAQ;MAAEC,MAAM;MAAE3B,QAAQ;MAAEC,QAAQ;MAAEzC;IAAM,CAAC,GAAG,IAAI,CAAC0C,OAAO;IAEpE,OAAAoB,KAAA,GAAO,IAAAzE,aAAO,EAAC8E,MAAM,CAAC,eACpBhF,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACL,MAAM,EAAAD,KAAA,CAAAO,EAAA;MAAA,OAAA3F,KAAA,CAAA4F,WAAA;QAAA,QAEC7B,QAAQ,KAAK,MAAM,GAAG,YAAY,GAAG,SAAS;QAAA,iBACrCD,QAAQ;QAAA,gBACTxC,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC;QAAA,OAChC,IAAI,CAACyB;MAAO,GAAAoC,IAAA;IAAA,iBAEjB1E,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACH,iBAAiB,EAAAH,KAAA,CAAAO,EAAA;MAAA,OACZ,MAAM;MAAA,OACL,IAAI,CAAChD,mBAAmB;MAAA;IAAA,EAE9B,CAAC,eACFlC,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACF,QAAQ,EAAAJ,KAAA,CAAAO,EAAA,gBAAE,CACL,CAAC;EAEb;AACF;AAAC,IAAAzE,gBAAA,CAAAC,OAAA,EAlMKL,SAAS,iBAQQ,OAAO;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EARxBL,SAAS,WASEJ,KAAK;AAAA,IAAAQ,gBAAA,CAAAC,OAAA,EAThBL,SAAS,kBAUS,CAAC;EAAEiD;AAAoB,CAAC,MAAM;EAClDF,IAAI,EAAE,GAAG;EACTgC,YAAY,EAAE,IAAI;EAClB9B,QAAQ,EAAEA,QAAQ,IAAI;AACxB,CAAC,CAAU;AAAA,IAAA7C,gBAAA,CAAAC,OAAA,EAdPL,SAAS,aA2BI,CAAC,IAAAgF,oBAAW,EAAC;EAC5BC,gBAAgB,EAAEA,CAACC,eAAe,EAAE/E,KAAK,KAAK;IAC5C,IAAI+E,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,CAAC,CAAC;MACvB,IAAIhF,KAAK,CAAC8C,QAAQ,KAAK,MAAM,EAAE;QAC7BiC,eAAe,CAACE,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAGlF,KAAK,IAAK;IACxB,MAAMmF,QAAQ,GAAGnF,KAAK,CAAC8C,QAAQ,KAAK,MAAM,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC;IAEhF,OAAOqC,QAAQ;EACjB;AACF,CAAC,CAAC,CAAC;AA2JL,SAASC,IAAIA,CAACpF,KAA+G,EAAE;EAAA,IAAAqF,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC7H,MAAMC,KAAK,GAcGnB,mBAAG;EAbjB,MAAMoB,cAAc,GAAGpB,mBAAG;EAC1B,MAAMqB,cAAc,GAAGrB,mBAAG;EAC1B,MAAM;IAAEE,QAAQ;IAAEC,MAAM;IAAEmB,SAAS;IAAEC,UAAU;IAAE1C,QAAQ;IAAEL,QAAQ;IAAEC,QAAQ;IAAEF;EAAK,CAAC,GAAG5C,KAAK;EAE7F,MAAM6F,aAAa,GAAG;IACpB,MAAM,EAAE/C,QAAQ,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;IAC7C,cAAc,EAAEA,QAAQ,KAAK,MAAM,GAAGI,QAAQ,GAAG4C,SAAS;IAC1D,eAAe,EAAEhD,QAAQ,KAAK,MAAM,GAAGI,QAAQ,GAAG4C;EACpD,CAAC;EAED,OAAAP,KAAA,GAAO,IAAA7F,aAAO,EAAC8E,MAAM,CAAC,eACpBhF,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACgB,cAAc,EAAAF,KAAA,CAAAb,EAAA,qCACblF,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACe,KAAK,EAAAD,KAAA,CAAAb,EAAA;IAAA,OAAA3F,KAAA,CAAA4F,WAAA;MAAA,OAEA,QAAQ;MAAA,QACP,QAAQ;MAAA,YACH,CAAC;MAAA,iBACI9B,QAAQ;MAAA,GACnBgD;IAAa,GAAAR,KAAA;EAAA,IAEhBM,SAAS,gBAAGnG,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACsB,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEP;EAAU,CAAE,CAAC,GAAG,IAAI,EACvD,IAAAQ,0BAAiB,EAAC5B,QAAQ,EAAEwB,KAAK,CAACC,IAAI,CAACI,IAAI,EAAEL,KAAK,CAACC,IAAI,CAACC,KAAK,CAAC,EAC9DL,UAAU,gBAAGpG,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACsB,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEN;EAAW,CAAE,CAAC,GAAG,IACjD,CAAC,eACRpG,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACiB;EACC;EAAA,EAAAH,KAAA,CAAAb,EAAA;IAAA,QACM9B,IAAI;IAAA;EAAA,EAEX,CACa,CAAC;AAErB;AAEA,SAASwD,IAAIA,CAACpG,KAAqF,EAAE;EAAA,IAAAqG,KAAA,GAAAf,YAAA;IAAAgB,KAAA;EACnG,MAAMC,KAAK,GACiCC,gBAAW;EAAvD,OAAAF,KAAA,GAAO,IAAA5G,aAAO,EAACM,KAAK,CAACwE,MAAM,CAAC,eAAChF,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAAC8B,KAAK,EAAAD,KAAA,CAAA5B,EAAA;IAAA,OAAA3F,KAAA,CAAA4F,WAAA,MAAA0B,KAAA;EAAA,EAAuB,CAAC;AAC7D;AAEA,SAASJ,KAAKA,CAACjG,KAAsF,EAAE;EAAA,IAAAyG,KAAA,GAAAnB,YAAA;IAAAoB,KAAA;EACrG,MAAMC,MAAM,GACiCtC,mBAAG;EAAhD,OAAAqC,KAAA,GAAO,IAAAhH,aAAO,EAACM,KAAK,CAACwE,MAAM,CAAC,eAAChF,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACkC,MAAM,EAAAD,KAAA,CAAAhC,EAAA;IAAA,OAAA3F,KAAA,CAAA4F,WAAA;MAAA,OAAkB;IAAM,GAAA8B,KAAA;EAAA,EAAE,CAAC;AACjE;AAEO,MAAMG,SAAS,GAA+BC,OAKjC,IAAKA,OAAgD;;AAEzE;AACA;AACA;AACA;AACA;AAJAC,OAAA,CAAAF,SAAA,GAAAA,SAAA;AAKA,MAAMb,KAAK,GAAG,IAAAgB,qBAAe,EAG3BlH,SAAS,EAAE;EACXmG,IAAI,EAAE,CAACZ,IAAI,EAAE;IAAEgB,IAAI;IAAEH;EAAM,CAAC;AAC9B,CAAC,CAAC;AAAC,IAAAe,QAAA,GAAAF,OAAA,CAAA5G,OAAA,GAEY6F,KAAK","ignoreList":[]}

package/lib/cjs/Pills.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n  // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n  type Value = string | number | boolean | null;\n  type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {\n    /** Pills size */\n    size?: 'l' | 'm';\n    /** Disabled state */\n    disabled?: boolean;\n    /** Called when the selection is changed */\n    onChange?:\n      | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n      | React.Dispatch<React.SetStateAction<T>>;\n    /** Value for the selected pill */\n    value?: T;\n    /** Default value for the selected pill */\n    defaultValue?: T;\n    /** Sets semantic role for corresponding behavior,\n     * when set to `auto` pressing left and right arrows\n     * selects corresponding sibling pill.\n     *\n     * It's recommended to use `auto` behavior in forms\n     * while `manual` behavior for navigation and layout.\n     * @default tabs\n     */\n    behavior?:\n      | 'auto'\n      | 'manual';\n  };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n  type DefaultProps = {\n    size: 'm';\n    defaultValue: null;\n    behavior: Props['behavior'];\n  };\n  namespace Pill {\n    type Props = BoxProps & NeighborItemProps & {\n      /** Pill value */\n      value?: NSPills.Value;\n      /** Disabled state */\n      disabled?: boolean;\n      /** Selected state */\n      selected?: boolean;\n      /** Left addon text */\n      addonLeft?: React.ElementType;\n      /** Right addon tag */\n      addonRight?: React.ElementType;\n    };\n    namespace Text {\n      type Component = typeof Box;\n    }\n    namespace Addon {\n      type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n  }\n\n  type WrapComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapComponent & {\n    Item: Pill.Component & {\n      Text: Pill.Text.Component;\n      Addon: Pill.Addon.Component;\n    };\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type PillsValue = NSPills.Value;\n/** @deprecated It will be removed in v18. */\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type PillProps = NSPills.Pill.Props;\n/** @deprecated It will be removed in v18. */\nexport type PillsContext = NSPills.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n  // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n  type Value = string | number | boolean | null;\n  type Props<T extends NSPills.Value = NSPills.Value> = NSBox.Props & {\n    /** Pills size */\n    size?: 'l' | 'm';\n    /** Disabled state */\n    disabled?: boolean;\n    /** Called when the selection is changed */\n    onChange?:\n      | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n      | React.Dispatch<React.SetStateAction<T>>;\n    /** Value for the selected pill */\n    value?: T;\n    /** Default value for the selected pill */\n    defaultValue?: T;\n    /** Sets semantic role for corresponding behavior,\n     * when set to `auto` pressing left and right arrows\n     * selects corresponding sibling pill.\n     *\n     * It's recommended to use `auto` behavior in forms\n     * while `manual` behavior for navigation and layout.\n     * @default tabs\n     */\n    behavior?:\n      | 'auto'\n      | 'manual';\n  };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n  type DefaultProps = {\n    size: 'm';\n    defaultValue: null;\n    behavior: Props['behavior'];\n  };\n  namespace Pill {\n    type Props = NSBox.Props & NSNeighborLocation.Detect.Props & {\n      /** Pill value */\n      value?: NSPills.Value;\n      /** Disabled state */\n      disabled?: boolean;\n      /** Selected state */\n      selected?: boolean;\n      /** Left addon text */\n      addonLeft?: React.ElementType;\n      /** Right addon tag */\n      addonRight?: React.ElementType;\n    };\n    namespace Text {\n      type Component = NSText.Component;\n    }\n    namespace Addon {\n      type Component = NSBox.Component;\n    }\n\n    type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n  }\n\n  type WrapComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapComponent & {\n    Item: Pill.Component & {\n      Text: Pill.Text.Component;\n      Addon: Pill.Addon.Component;\n    };\n  };\n}\n\n/** @deprecated It will be removed in v19. */\nexport type PillsValue = NSPills.Value;\n/** @deprecated It will be removed in v19. */\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/** @deprecated It will be removed in v19. */\nexport type PillProps = NSPills.Pill.Props;\n/** @deprecated It will be removed in v19. */\nexport type PillsContext = NSPills.Ctx;\n/** @deprecated It will be removed in v19. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}