@veracity/vui 5.2.2 → 5.2.3-alpha.400759.2606230846

package/dist/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { disabled } from '../checkbox/consts'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined } from '../utils'\nimport { radioColors } from './consts'\nimport { useRadioGroupContext } from './context'\nimport type { RadioProps, RadioStyleProps } from './radio.types'\n\nconst RadioControl = styled.spanBox`\n  border-radius: 50%;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`\n\nconst RadioInput = styled.input`\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`\n\nexport const RadioBase = styled.labelBox<RadioStyleProps>`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  .vui-radioControl:focus-within {\n    color: ${radioColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabled.text};\n    cursor: not-allowed;\n\n    .vui-radioControl {\n      color: ${disabled.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.\n * Uses icons to display itself in different states.\n */\nexport const Radio = vui<'span', RadioProps>((props, ref) => {\n  const {\n    defaultValue: groupDefaultValue,\n    isChecked: groupIsChecked,\n    onChange: groupOnChange,\n    value: groupValue,\n    ...radioGroupProps\n  } = useRadioGroupContext() ?? {}\n  const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined\n\n  const mergedProps = { ...radioGroupProps, ...props }\n  const {\n    checked = groupValue !== undefined ? props.value === groupValue : undefined,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,\n    disabled,\n    icon: iconProp = 'uiRadioUnselected',\n    iconChecked = 'uiRadioSelected',\n    id,\n    inputProps,\n    inputRef,\n    label,\n    name,\n    onChange,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n\n  const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)\n  const styles = useStyleConfig('Radio', mergedProps)\n  const { color: controlColor, hoverColor, ...controlStyles } = styles.control\n\n  const icon = isChecked ? iconChecked : iconProp\n  const controlMr = children || label ? 1 : 0\n  const color = isChecked ? radioColors.checked : controlColor\n  const controlHoverColor = hoverColor ? hoverColor : radioColors.hover\n\n  useEffect(() => {\n    if (groupIsChecked !== undefined) setIsChecked(groupIsChecked === value)\n    else if (checked !== undefined) setIsChecked(checked)\n  }, [checked, groupIsChecked])\n\n  function handleOnChange(e: React.MouseEvent<HTMLInputElement>) {\n    groupOnChange?.(e)\n    onChange?.(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <RadioBase\n      className={cs('vui-radio', className)}\n      controlHoverColor={controlHoverColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadioControl\n        bg=\"white\"\n        className=\"vui-radioControl\"\n        color={color}\n        focusWithinRing={3}\n        mr={controlMr}\n        {...controlStyles}\n      >\n        <RadioInput\n          className=\"vui-radioInput\"\n          onClick={handleOnChange}\n          ref={inputRef}\n          type=\"radio\"\n          {...{ defaultChecked: checked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        <Icon className=\"vui-radioIcon\" h=\"100%\" name={icon} w=\"100%\" />\n      </RadioControl>\n\n      {children ??\n        (label && (\n          <T className=\"vui-radioLabel\" lineHeight=\"normal\" {...styles.label}>\n            {label}\n          </T>\n        ))}\n    </RadioBase>\n  )\n})\n\nRadio.displayName = 'Radio'\n\nexport default Radio\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,eAAe,OAAO,OAAO;;;;;;;AAQnC,MAAM,aAAa,OAAO,KAAK;;;;;;;;;;;;AAa/B,MAAa,YAAY,OAAO,QAAyB;;;;;;;cAO5C,MAAK,GAAG,MAAM,EAAE,iBAAiB,EAAE;;;;aAInC,YAAY,MAAM;;;;aAIlB,SAAS,KAAK;;;;eAIZ,SAAS,KAAK;;;;;;;;AAS7B,MAAa,QAAQ,KAAyB,OAAO,QAAQ;CAC3D,MAAM,EACJ,cAAc,mBACd,WAAW,gBACX,UAAU,eACV,OAAO,YACP,GAAG,oBACD,qBAAqB,KAAK,CAAC;CAC/B,MAAM,mBAAmB,mBAAmB,SAAY,mBAAmB,MAAM,QAAQ;CAEzF,MAAM,cAAc;EAAE,GAAG;EAAiB,GAAG;CAAM;CACnD,MAAM,EACJ,UAAU,eAAe,SAAY,MAAM,UAAU,aAAa,QAClE,UACA,WACA,iBAAiB,sBAAsB,SAAY,MAAM,UAAU,oBAAoB,QACvF,UACA,MAAM,WAAW,qBACjB,cAAc,mBACd,IACA,YACA,UACA,OACA,MACA,UACA,UACA,OACA,GAAG,SACD,iBAAiB,WAAW;CAEhC,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,WAAW,cAAc;CACxF,MAAM,SAAS,eAAe,SAAS,WAAW;CAClD,MAAM,EAAE,OAAO,cAAc,YAAY,GAAG,kBAAkB,OAAO;CAErE,MAAM,OAAO,YAAY,cAAc;CACvC,MAAM,YAAY,YAAY,QAAQ,IAAI;CAC1C,MAAM,QAAQ,YAAY,YAAY,UAAU;CAChD,MAAM,oBAAoB,aAAa,aAAa,YAAY;CAEhE,gBAAgB;EACd,IAAI,mBAAmB,QAAW,aAAa,mBAAmB,KAAK;OAClE,IAAI,YAAY,QAAW,aAAa,OAAO;CACtD,GAAG,CAAC,SAAS,cAAc,CAAC;CAE5B,SAAS,eAAe,GAAuC;EAC7D,gBAAgB,CAAC;EACjB,WAAW,CAA2B;CACxC;CAEA,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CAED,OACE,qBAAC,WAAD;EACE,WAAW,GAAG,aAAa,SAAS;EACjB;EACd;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YANN,CAQE,qBAAC,cAAD;GACE,IAAG;GACH,WAAU;GACH;GACP,iBAAiB;GACjB,IAAI;GACJ,GAAI;aANN,CAQE,oBAAC,YAAD;IACE,WAAU;IACV,SAAS;IACT,KAAK;IACL,MAAK;IACC,gBAAgB;IAAS;IAAU;IAAI;IAAM;IAAU;IAC7D,GAAI;GACL,IACD,oBAAC,MAAD;IAAM,WAAU;IAAgB,GAAE;IAAO,MAAM;IAAM,GAAE;GAAQ,EACnD;MAEb,aACE,SACC,oBAAC,GAAD;GAAG,WAAU;GAAiB,YAAW;GAAS,GAAI,OAAO;aAC1D;EACA,GAEE;;AAEf,CAAC;AAED,MAAM,cAAc"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioProps, RadioStyleProps } from './radio.types'\n\nimport { disabled } from '../checkbox/consts'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { radioColors } from './consts'\nimport { useRadioGroupContext } from './context'\n\nconst RadioControl = styled.spanBox`\n  border-radius: 50%;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`\n\nconst RadioInput = styled.input`\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`\n\nexport const RadioBase = styled.labelBox<RadioStyleProps>`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  .vui-radioControl:focus-within {\n    color: ${radioColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabled.text};\n    cursor: not-allowed;\n\n    .vui-radioControl {\n      color: ${disabled.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.\n * Uses icons to display itself in different states.\n */\nexport const Radio = vui<'span', RadioProps>((props, ref) => {\n  const {\n    defaultValue: groupDefaultValue,\n    isChecked: groupIsChecked,\n    onChange: groupOnChange,\n    value: groupValue,\n    ...radioGroupProps\n  } = useRadioGroupContext() ?? {}\n  const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined\n\n  const mergedProps = { ...radioGroupProps, ...props }\n  const {\n    checked = groupValue !== undefined ? props.value === groupValue : undefined,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,\n    disabled,\n    icon: iconProp = 'uiRadioUnselected',\n    iconChecked = 'uiRadioSelected',\n    id,\n    inputProps,\n    inputRef,\n    label,\n    name,\n    onChange,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n\n  const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)\n  const styles = useStyleConfig('Radio', mergedProps)\n  const { color: controlColor, hoverColor, ...controlStyles } = styles.control\n\n  const icon = isChecked ? iconChecked : iconProp\n  const controlMr = children || label ? 1 : 0\n  const color = isChecked ? radioColors.checked : controlColor\n  const controlHoverColor = hoverColor ? hoverColor : radioColors.hover\n\n  useEffect(() => {\n    if (groupIsChecked !== undefined) setIsChecked(groupIsChecked === value)\n    else if (checked !== undefined) setIsChecked(checked)\n  }, [checked, groupIsChecked])\n\n  function handleOnChange(e: React.MouseEvent<HTMLInputElement>) {\n    groupOnChange?.(e)\n    onChange?.(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <RadioBase\n      className={cs('vui-radio', className)}\n      controlHoverColor={controlHoverColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadioControl\n        bg=\"white\"\n        className=\"vui-radioControl\"\n        color={color}\n        focusWithinRing={3}\n        mr={controlMr}\n        {...controlStyles}\n      >\n        <RadioInput\n          className=\"vui-radioInput\"\n          onClick={handleOnChange}\n          ref={inputRef}\n          type=\"radio\"\n          {...{ defaultChecked: checked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        <Icon className=\"vui-radioIcon\" h=\"100%\" name={icon} w=\"100%\" />\n      </RadioControl>\n\n      {children ??\n        (label && (\n          <T className=\"vui-radioLabel\" lineHeight=\"normal\" {...styles.label}>\n            {label}\n          </T>\n        ))}\n    </RadioBase>\n  )\n})\n\nRadio.displayName = 'Radio'\n\nexport default Radio\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,eAAe,OAAO,OAAO;;;;;;;AAQnC,MAAM,aAAa,OAAO,KAAK;;;;;;;;;;;;AAa/B,MAAa,YAAY,OAAO,QAAyB;;;;;;;cAO5C,MAAK,GAAG,MAAM,EAAE,iBAAiB,EAAE;;;;aAInC,YAAY,MAAM;;;;aAIlB,SAAS,KAAK;;;;eAIZ,SAAS,KAAK;;;;;;;;AAS7B,MAAa,QAAQ,KAAyB,OAAO,QAAQ;CAC3D,MAAM,EACJ,cAAc,mBACd,WAAW,gBACX,UAAU,eACV,OAAO,YACP,GAAG,oBACD,qBAAqB,KAAK,CAAC;CAC/B,MAAM,mBAAmB,mBAAmB,SAAY,mBAAmB,MAAM,QAAQ;CAEzF,MAAM,cAAc;EAAE,GAAG;EAAiB,GAAG;CAAM;CACnD,MAAM,EACJ,UAAU,eAAe,SAAY,MAAM,UAAU,aAAa,QAClE,UACA,WACA,iBAAiB,sBAAsB,SAAY,MAAM,UAAU,oBAAoB,QACvF,UACA,MAAM,WAAW,qBACjB,cAAc,mBACd,IACA,YACA,UACA,OACA,MACA,UACA,UACA,OACA,GAAG,SACD,iBAAiB,WAAW;CAEhC,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,WAAW,cAAc;CACxF,MAAM,SAAS,eAAe,SAAS,WAAW;CAClD,MAAM,EAAE,OAAO,cAAc,YAAY,GAAG,kBAAkB,OAAO;CAErE,MAAM,OAAO,YAAY,cAAc;CACvC,MAAM,YAAY,YAAY,QAAQ,IAAI;CAC1C,MAAM,QAAQ,YAAY,YAAY,UAAU;CAChD,MAAM,oBAAoB,aAAa,aAAa,YAAY;CAEhE,gBAAgB;EACd,IAAI,mBAAmB,QAAW,aAAa,mBAAmB,KAAK;OAClE,IAAI,YAAY,QAAW,aAAa,OAAO;CACtD,GAAG,CAAC,SAAS,cAAc,CAAC;CAE5B,SAAS,eAAe,GAAuC;EAC7D,gBAAgB,CAAC;EACjB,WAAW,CAA2B;CACxC;CAEA,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CAED,OACE,qBAAC,WAAD;EACE,WAAW,GAAG,aAAa,SAAS;EACjB;EACd;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YANN,CAQE,qBAAC,cAAD;GACE,IAAG;GACH,WAAU;GACH;GACP,iBAAiB;GACjB,IAAI;GACJ,GAAI;aANN,CAQE,oBAAC,YAAD;IACE,WAAU;IACV,SAAS;IACT,KAAK;IACL,MAAK;IACC,gBAAgB;IAAS;IAAU;IAAI;IAAM;IAAU;IAC7D,GAAI;GACL,IACD,oBAAC,MAAD;IAAM,WAAU;IAAgB,GAAE;IAAO,MAAM;IAAM,GAAE;GAAQ,EACnD;MAEb,aACE,SACC,oBAAC,GAAD;GAAG,WAAU;GAAiB,YAAW;GAAS,GAAI,OAAO;aAC1D;EACA,GAEE;;AAEf,CAAC;AAED,MAAM,cAAc"}

package/dist/radio/radioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.d.ts","names":[],"sources":["../../src/radio/radioGroup.tsx"],"mappings":";;;;cAQa,cAAA,8BAAc,eAAA,oCAAA,YAAA,EAI1B,WAJ0B;;;;;cAUd,UAAA,EAAU,YAAA,QAAA,eAAA"}
+{"version":3,"file":"radioGroup.d.ts","names":[],"sources":["../../src/radio/radioGroup.tsx"],"mappings":";;;;cASa,cAAA,8BAAc,eAAA,oCAAA,YAAA,EAI1B,WAJ0B;;;;;cAUd,UAAA,EAAU,YAAA,QAAA,eAAA"}

package/dist/radio/radioGroup.js

@@ -61,5 +61,5 @@ RadioGroup.displayName = "RadioGroup";
 
 //#endregion
 export { RadioGroupBase, RadioGroup as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=radioGroup.js.map

package/dist/radio/radioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.js","names":[],"sources":["../../src/radio/radioGroup.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport { styled, vui } from '../core'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined } from '../utils'\nimport { RadioGroupProvider } from './context'\nimport type { RadioGroupProps } from './radioGroup.types'\n\nexport const RadioGroupBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n  gap: 1;\n`\n\n/**\n * Organizes layout and display of multiple radio buttons as a row or column.\n * Exposes some props to the children via context.\n */\nexport const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {\n  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } =\n    props\n  const [isChecked, setIsChecked] = useState(value ?? defaultValue)\n\n  const handleOnChange = useCallback(\n    (e: ChangeEvent) => {\n      setIsChecked(e.target.value)\n      onChange?.(e)\n    },\n    [onChange],\n  )\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        defaultValue,\n        disabled,\n        isChecked,\n        name,\n        onBlur,\n        onChange: handleOnChange,\n        onFocus,\n        size,\n        value,\n        variant,\n      }),\n    [defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant],\n  )\n\n  const aliasedProps = filterUndefined({\n    flexDirection: isRow ? 'row' : undefined,\n  } as const)\n\n  return (\n    <RadioGroupProvider value={context}>\n      <RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest} />\n    </RadioGroupProvider>\n  )\n})\n\nRadioGroup.displayName = 'RadioGroup'\n\nexport default RadioGroup\n"],"mappings":";;;;;;;;;AAQA,MAAa,iBAAiB,OAAO,MAAM;;;;;;;;;AAU3C,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,cAAc,UAAU,OAAO,MAAM,QAAQ,UAAU,SAAS,MAAM,OAAO,SAAS,GAAG,SAC1G;CACF,MAAM,CAAC,WAAW,gBAAgB,SAAS,SAAS,YAAY;CAEhE,MAAM,iBAAiB,aACpB,MAAmB;EAClB,aAAa,EAAE,OAAO,KAAK;EAC3B,WAAW,CAAC;CACd,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAc;EAAU;EAAgB;EAAW;EAAM;EAAQ;EAAS;EAAM;EAAO;CAAO,CACjG;CAEA,MAAM,eAAe,gBAAgB,EACnC,eAAe,QAAQ,QAAQ,OACjC,CAAU;CAEV,OACE,oBAAC,oBAAD;EAAoB,OAAO;YACzB,oBAAC,gBAAD;GAAgB,WAAW,GAAG,kBAAkB,SAAS;GAAQ;GAAK,GAAI;GAAc,GAAI;EAAO;CACjF;AAExB,CAAC;AAED,WAAW,cAAc"}
+{"version":3,"file":"radioGroup.js","names":[],"sources":["../../src/radio/radioGroup.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioGroupProps } from './radioGroup.types'\n\nimport { styled, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { RadioGroupProvider } from './context'\n\nexport const RadioGroupBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n  gap: 1;\n`\n\n/**\n * Organizes layout and display of multiple radio buttons as a row or column.\n * Exposes some props to the children via context.\n */\nexport const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {\n  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } =\n    props\n  const [isChecked, setIsChecked] = useState(value ?? defaultValue)\n\n  const handleOnChange = useCallback(\n    (e: ChangeEvent) => {\n      setIsChecked(e.target.value)\n      onChange?.(e)\n    },\n    [onChange],\n  )\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        defaultValue,\n        disabled,\n        isChecked,\n        name,\n        onBlur,\n        onChange: handleOnChange,\n        onFocus,\n        size,\n        value,\n        variant,\n      }),\n    [defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant],\n  )\n\n  const aliasedProps = filterUndefined({\n    flexDirection: isRow ? 'row' : undefined,\n  } as const)\n\n  return (\n    <RadioGroupProvider value={context}>\n      <RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest} />\n    </RadioGroupProvider>\n  )\n})\n\nRadioGroup.displayName = 'RadioGroup'\n\nexport default RadioGroup\n"],"mappings":";;;;;;;;;AASA,MAAa,iBAAiB,OAAO,MAAM;;;;;;;;;AAU3C,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,cAAc,UAAU,OAAO,MAAM,QAAQ,UAAU,SAAS,MAAM,OAAO,SAAS,GAAG,SAC1G;CACF,MAAM,CAAC,WAAW,gBAAgB,SAAS,SAAS,YAAY;CAEhE,MAAM,iBAAiB,aACpB,MAAmB;EAClB,aAAa,EAAE,OAAO,KAAK;EAC3B,WAAW,CAAC;CACd,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAc;EAAU;EAAgB;EAAW;EAAM;EAAQ;EAAS;EAAM;EAAO;CAAO,CACjG;CAEA,MAAM,eAAe,gBAAgB,EACnC,eAAe,QAAQ,QAAQ,OACjC,CAAU;CAEV,OACE,oBAAC,oBAAD;EAAoB,OAAO;YACzB,oBAAC,gBAAD;GAAgB,WAAW,GAAG,kBAAkB,SAAS;GAAQ;GAAK,GAAI;GAAc,GAAI;EAAO;CACjF;AAExB,CAAC;AAED,WAAW,cAAc"}

package/dist/radio/theme.js

@@ -45,5 +45,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=theme.js.map

package/dist/range/consts.js

@@ -7,5 +7,5 @@ const rangeColors = {
 
 //#endregion
 export { rangeColors };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=consts.js.map

package/dist/range/range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range.d.ts","names":[],"sources":["../../src/range/range.tsx"],"mappings":";;;;cA8Ea,KAAA,EAAK,YAAA,QAAA,UAAA"}
+{"version":3,"file":"range.d.ts","names":[],"sources":["../../src/range/range.tsx"],"mappings":";;;;cA+Ea,KAAA,EAAK,YAAA,QAAA,UAAA"}

package/dist/range/range.js

@@ -128,5 +128,5 @@ Range.displayName = "Range";
 
 //#endregion
 export { Range as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=range.js.map

package/dist/range/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","names":[],"sources":["../../src/range/range.tsx"],"sourcesContent":["import * as RadixSlider from '@radix-ui/react-slider'\nimport { useMemo, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs, filterUndefined } from '../utils'\nimport { rangeColors } from './consts'\nimport type { RangeProps } from './range.types'\n\nconst SliderRoot = styled(Box)<{ $disabled?: boolean }>`\n  align-items: center;\n  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};\n  display: flex;\n  position: relative;\n  touch-action: none;\n  user-select: none;\n  width: 100%;\n`\n\nconst SliderTrack = styled(Box)`\n  flex-grow: 1;\n  height: 4px;\n  position: relative;\n`\n\nconst SliderRange = styled(Box)`\n  height: 100%;\n  position: absolute;\n`\n\nconst SliderThumb = styled(Box)<{ $disabled?: boolean }>`\n  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'grab')};\n  display: block;\n`\n\nconst defaultFormatter = (value: string) => `${value}`\n\ninterface RangeThumbProps {\n  disabled?: boolean\n  formatter: (value: string) => string\n  mainColor: string\n  showTooltip?: boolean\n  showValue: boolean\n  styles: ReturnType<typeof useStyleConfig>\n  val: number\n}\n\nconst RangeThumb = ({ disabled, formatter, mainColor, showTooltip, showValue, styles, val }: RangeThumbProps) => {\n  const formattedVal = formatter(String(val))\n\n  const thumbContent = (\n    <SliderThumb $disabled={disabled} className=\"vui-range-thumb\" {...styles.thumb} borderColor={mainColor}>\n      {showValue && (\n        <Box center className=\"vui-range-thumb-value\" {...styles.thumbValue}>\n          {formattedVal}\n        </Box>\n      )}\n    </SliderThumb>\n  )\n\n  const radixThumb = <RadixSlider.Thumb asChild>{thumbContent}</RadixSlider.Thumb>\n\n  if (showTooltip === false || (showTooltip === undefined && showValue)) return radixThumb\n\n  return (\n    <Tooltip disabled={disabled} text={formattedVal} visible={showTooltip}>\n      {radixThumb}\n    </Tooltip>\n  )\n}\n\nconst toArray = (val: number | readonly number[] | undefined): number[] | undefined => {\n  if (val === undefined) return undefined\n  return Array.isArray(val) ? Array.from(val as readonly number[]) : [val as number]\n}\n\n/** Implements a range input. */\nexport const Range = vui<'div', RangeProps>((props, ref) => {\n  const {\n    className,\n    value,\n    defaultValue = 0,\n    disabled,\n    min = 0,\n    minDistance = 0,\n    max = 100,\n    step = 1,\n    showTooltip,\n    showValue = false,\n    formatter = defaultFormatter,\n    onChange,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Range', props)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n  const isSingleValue = typeof defaultValue !== 'object' && typeof value !== 'object'\n  const mainColor = disabled ? rangeColors.disabled : rangeColors.main\n\n  const defaultArr = useMemo(() => toArray(defaultValue) ?? [0], [defaultValue])\n  const valueArr = toArray(value)\n\n  const [internalValues, setInternalValues] = useState<number[]>(defaultArr)\n  const currentValues = valueArr ?? internalValues\n\n  const handleValueChange = (vals: number[]) => {\n    if (!valueArr) setInternalValues(vals)\n    onChange?.(isSingleValue ? vals[0] : vals)\n  }\n\n  return (\n    <Box\n      className={cs('vui-range', isSingleValue ? 'vui-range-single' : 'vui-range-range', className)}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadixSlider.Root\n        asChild\n        disabled={disabled}\n        max={max}\n        min={min}\n        minStepsBetweenThumbs={minDistance}\n        onValueChange={handleValueChange}\n        step={step}\n        {...(valueArr ? { value: valueArr } : { defaultValue: defaultArr })}\n      >\n        <SliderRoot $disabled={disabled} className=\"vui-range-slider\">\n          <RadixSlider.Track asChild>\n            <SliderTrack bg={rangeColors.track} borderRadius=\"24px\" className=\"vui-range-track\">\n              <RadixSlider.Range asChild>\n                <SliderRange {...styles.track} bg={mainColor} />\n              </RadixSlider.Range>\n            </SliderTrack>\n          </RadixSlider.Track>\n          {currentValues.map((val, index) => (\n            <RangeThumb\n              key={index}\n              disabled={disabled}\n              formatter={formatter}\n              mainColor={mainColor}\n              showTooltip={showTooltip}\n              showValue={showValue}\n              styles={styles}\n              val={val}\n            />\n          ))}\n        </SliderRoot>\n      </RadixSlider.Root>\n    </Box>\n  )\n})\n\nRange.displayName = 'Range'\nexport default Range\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,GAAG,CAAC,AAAyB;;aAE1C,EAAE,gBAAiB,YAAY,gBAAgB,UAAW;;;;;;;AAQvE,MAAM,cAAc,OAAO,GAAG,CAAC;;;;;AAM/B,MAAM,cAAc,OAAO,GAAG,CAAC;;;;AAK/B,MAAM,cAAc,OAAO,GAAG,CAAC,AAAyB;aAC3C,EAAE,gBAAiB,YAAY,gBAAgB,OAAQ;;;AAIpE,MAAM,oBAAoB,UAAkB,GAAG;AAY/C,MAAM,cAAc,EAAE,UAAU,WAAW,WAAW,aAAa,WAAW,QAAQ,UAA2B;CAC/G,MAAM,eAAe,UAAU,OAAO,GAAG,CAAC;CAE1C,MAAM,eACJ,oBAAC,aAAD;EAAa,WAAW;EAAU,WAAU;EAAkB,GAAI,OAAO;EAAO,aAAa;YAC1F,aACC,oBAAC,KAAD;GAAK;GAAO,WAAU;GAAwB,GAAI,OAAO;aACtD;EACE;CAEI;CAGf,MAAM,aAAa,oBAAC,YAAY,OAAb;EAAmB;YAAS;CAAgC;CAE/E,IAAI,gBAAgB,SAAU,gBAAgB,UAAa,WAAY,OAAO;CAE9E,OACE,oBAAC,SAAD;EAAmB;EAAU,MAAM;EAAc,SAAS;YACvD;CACM;AAEb;AAEA,MAAM,WAAW,QAAsE;CACrF,IAAI,QAAQ,QAAW,OAAO;CAC9B,OAAO,MAAM,QAAQ,GAAG,IAAI,MAAM,KAAK,GAAwB,IAAI,CAAC,GAAa;AACnF;;AAGA,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,WACA,OACA,eAAe,GACf,UACA,MAAM,GACN,cAAc,GACd,MAAM,KACN,OAAO,GACP,aACA,YAAY,OACZ,YAAY,kBACZ,UACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,SAAS,KAAK;CAC5C,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CACD,MAAM,gBAAgB,OAAO,iBAAiB,YAAY,OAAO,UAAU;CAC3E,MAAM,YAAY,WAAW,YAAY,WAAW,YAAY;CAEhE,MAAM,aAAa,cAAc,QAAQ,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC;CAC7E,MAAM,WAAW,QAAQ,KAAK;CAE9B,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,UAAU;CACzE,MAAM,gBAAgB,YAAY;CAElC,MAAM,qBAAqB,SAAmB;EAC5C,IAAI,CAAC,UAAU,kBAAkB,IAAI;EACrC,WAAW,gBAAgB,KAAK,KAAK,IAAI;CAC3C;CAEA,OACE,oBAAC,KAAD;EACE,WAAW,GAAG,aAAa,gBAAgB,qBAAqB,mBAAmB,SAAS;EACvF;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEJ,oBAAC,YAAY,MAAb;GACE;GACU;GACL;GACA;GACL,uBAAuB;GACvB,eAAe;GACT;GACN,GAAK,WAAW,EAAE,OAAO,SAAS,IAAI,EAAE,cAAc,WAAW;aAEjE,qBAAC,YAAD;IAAY,WAAW;IAAU,WAAU;cAA3C,CACE,oBAAC,YAAY,OAAb;KAAmB;eACjB,oBAAC,aAAD;MAAa,IAAI,YAAY;MAAO,cAAa;MAAO,WAAU;gBAChE,oBAAC,YAAY,OAAb;OAAmB;iBACjB,oBAAC,aAAD;QAAa,GAAI,OAAO;QAAO,IAAI;OAAY;MAC9B;KACR;IACI,IAClB,cAAc,KAAK,KAAK,UACvB,oBAAC,YAAD;KAEY;KACC;KACA;KACE;KACF;KACH;KACH;IACN,GARM,KAQN,CACF,CACS;;EACI;CACf;AAET,CAAC;AAED,MAAM,cAAc"}
+{"version":3,"file":"range.js","names":[],"sources":["../../src/range/range.tsx"],"sourcesContent":["import * as RadixSlider from '@radix-ui/react-slider'\nimport { useMemo, useState } from 'react'\n\nimport type { RangeProps } from './range.types'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs, filterUndefined } from '../utils'\nimport { rangeColors } from './consts'\n\nconst SliderRoot = styled(Box)<{ $disabled?: boolean }>`\n  align-items: center;\n  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};\n  display: flex;\n  position: relative;\n  touch-action: none;\n  user-select: none;\n  width: 100%;\n`\n\nconst SliderTrack = styled(Box)`\n  flex-grow: 1;\n  height: 4px;\n  position: relative;\n`\n\nconst SliderRange = styled(Box)`\n  height: 100%;\n  position: absolute;\n`\n\nconst SliderThumb = styled(Box)<{ $disabled?: boolean }>`\n  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'grab')};\n  display: block;\n`\n\nconst defaultFormatter = (value: string) => `${value}`\n\ninterface RangeThumbProps {\n  disabled?: boolean\n  formatter: (value: string) => string\n  mainColor: string\n  showTooltip?: boolean\n  showValue: boolean\n  styles: ReturnType<typeof useStyleConfig>\n  val: number\n}\n\nconst RangeThumb = ({ disabled, formatter, mainColor, showTooltip, showValue, styles, val }: RangeThumbProps) => {\n  const formattedVal = formatter(String(val))\n\n  const thumbContent = (\n    <SliderThumb $disabled={disabled} className=\"vui-range-thumb\" {...styles.thumb} borderColor={mainColor}>\n      {showValue && (\n        <Box center className=\"vui-range-thumb-value\" {...styles.thumbValue}>\n          {formattedVal}\n        </Box>\n      )}\n    </SliderThumb>\n  )\n\n  const radixThumb = <RadixSlider.Thumb asChild>{thumbContent}</RadixSlider.Thumb>\n\n  if (showTooltip === false || (showTooltip === undefined && showValue)) return radixThumb\n\n  return (\n    <Tooltip disabled={disabled} text={formattedVal} visible={showTooltip}>\n      {radixThumb}\n    </Tooltip>\n  )\n}\n\nconst toArray = (val: number | readonly number[] | undefined): number[] | undefined => {\n  if (val === undefined) return undefined\n  return Array.isArray(val) ? Array.from(val as readonly number[]) : [val as number]\n}\n\n/** Implements a range input. */\nexport const Range = vui<'div', RangeProps>((props, ref) => {\n  const {\n    className,\n    value,\n    defaultValue = 0,\n    disabled,\n    min = 0,\n    minDistance = 0,\n    max = 100,\n    step = 1,\n    showTooltip,\n    showValue = false,\n    formatter = defaultFormatter,\n    onChange,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Range', props)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n  const isSingleValue = typeof defaultValue !== 'object' && typeof value !== 'object'\n  const mainColor = disabled ? rangeColors.disabled : rangeColors.main\n\n  const defaultArr = useMemo(() => toArray(defaultValue) ?? [0], [defaultValue])\n  const valueArr = toArray(value)\n\n  const [internalValues, setInternalValues] = useState<number[]>(defaultArr)\n  const currentValues = valueArr ?? internalValues\n\n  const handleValueChange = (vals: number[]) => {\n    if (!valueArr) setInternalValues(vals)\n    onChange?.(isSingleValue ? vals[0] : vals)\n  }\n\n  return (\n    <Box\n      className={cs('vui-range', isSingleValue ? 'vui-range-single' : 'vui-range-range', className)}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadixSlider.Root\n        asChild\n        disabled={disabled}\n        max={max}\n        min={min}\n        minStepsBetweenThumbs={minDistance}\n        onValueChange={handleValueChange}\n        step={step}\n        {...(valueArr ? { value: valueArr } : { defaultValue: defaultArr })}\n      >\n        <SliderRoot $disabled={disabled} className=\"vui-range-slider\">\n          <RadixSlider.Track asChild>\n            <SliderTrack bg={rangeColors.track} borderRadius=\"24px\" className=\"vui-range-track\">\n              <RadixSlider.Range asChild>\n                <SliderRange {...styles.track} bg={mainColor} />\n              </RadixSlider.Range>\n            </SliderTrack>\n          </RadixSlider.Track>\n          {currentValues.map((val, index) => (\n            <RangeThumb\n              key={index}\n              disabled={disabled}\n              formatter={formatter}\n              mainColor={mainColor}\n              showTooltip={showTooltip}\n              showValue={showValue}\n              styles={styles}\n              val={val}\n            />\n          ))}\n        </SliderRoot>\n      </RadixSlider.Root>\n    </Box>\n  )\n})\n\nRange.displayName = 'Range'\nexport default Range\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,aAAa,OAAO,GAAG,CAAC,AAAyB;;aAE1C,EAAE,gBAAiB,YAAY,gBAAgB,UAAW;;;;;;;AAQvE,MAAM,cAAc,OAAO,GAAG,CAAC;;;;;AAM/B,MAAM,cAAc,OAAO,GAAG,CAAC;;;;AAK/B,MAAM,cAAc,OAAO,GAAG,CAAC,AAAyB;aAC3C,EAAE,gBAAiB,YAAY,gBAAgB,OAAQ;;;AAIpE,MAAM,oBAAoB,UAAkB,GAAG;AAY/C,MAAM,cAAc,EAAE,UAAU,WAAW,WAAW,aAAa,WAAW,QAAQ,UAA2B;CAC/G,MAAM,eAAe,UAAU,OAAO,GAAG,CAAC;CAE1C,MAAM,eACJ,oBAAC,aAAD;EAAa,WAAW;EAAU,WAAU;EAAkB,GAAI,OAAO;EAAO,aAAa;YAC1F,aACC,oBAAC,KAAD;GAAK;GAAO,WAAU;GAAwB,GAAI,OAAO;aACtD;EACE;CAEI;CAGf,MAAM,aAAa,oBAAC,YAAY,OAAb;EAAmB;YAAS;CAAgC;CAE/E,IAAI,gBAAgB,SAAU,gBAAgB,UAAa,WAAY,OAAO;CAE9E,OACE,oBAAC,SAAD;EAAmB;EAAU,MAAM;EAAc,SAAS;YACvD;CACM;AAEb;AAEA,MAAM,WAAW,QAAsE;CACrF,IAAI,QAAQ,QAAW,OAAO;CAC9B,OAAO,MAAM,QAAQ,GAAG,IAAI,MAAM,KAAK,GAAwB,IAAI,CAAC,GAAa;AACnF;;AAGA,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,WACA,OACA,eAAe,GACf,UACA,MAAM,GACN,cAAc,GACd,MAAM,KACN,OAAO,GACP,aACA,YAAY,OACZ,YAAY,kBACZ,UACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,SAAS,KAAK;CAC5C,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CACD,MAAM,gBAAgB,OAAO,iBAAiB,YAAY,OAAO,UAAU;CAC3E,MAAM,YAAY,WAAW,YAAY,WAAW,YAAY;CAEhE,MAAM,aAAa,cAAc,QAAQ,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC;CAC7E,MAAM,WAAW,QAAQ,KAAK;CAE9B,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,UAAU;CACzE,MAAM,gBAAgB,YAAY;CAElC,MAAM,qBAAqB,SAAmB;EAC5C,IAAI,CAAC,UAAU,kBAAkB,IAAI;EACrC,WAAW,gBAAgB,KAAK,KAAK,IAAI;CAC3C;CAEA,OACE,oBAAC,KAAD;EACE,WAAW,GAAG,aAAa,gBAAgB,qBAAqB,mBAAmB,SAAS;EACvF;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEJ,oBAAC,YAAY,MAAb;GACE;GACU;GACL;GACA;GACL,uBAAuB;GACvB,eAAe;GACT;GACN,GAAK,WAAW,EAAE,OAAO,SAAS,IAAI,EAAE,cAAc,WAAW;aAEjE,qBAAC,YAAD;IAAY,WAAW;IAAU,WAAU;cAA3C,CACE,oBAAC,YAAY,OAAb;KAAmB;eACjB,oBAAC,aAAD;MAAa,IAAI,YAAY;MAAO,cAAa;MAAO,WAAU;gBAChE,oBAAC,YAAY,OAAb;OAAmB;iBACjB,oBAAC,aAAD;QAAa,GAAI,OAAO;QAAO,IAAI;OAAY;MAC9B;KACR;IACI,IAClB,cAAc,KAAK,KAAK,UACvB,oBAAC,YAAD;KAEY;KACC;KACA;KACE;KACF;KACH;KACH;IACN,GARM,KAQN,CACF,CACS;;EACI;CACf;AAET,CAAC;AAED,MAAM,cAAc"}

package/dist/range/theme.js

@@ -43,5 +43,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=theme.js.map

package/dist/rating/rating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rating.d.ts","names":[],"sources":["../../src/rating/rating.tsx"],"mappings":";;;cAYa,MAAA,EAAM,YAAA,QAAA,WAAA"}
+{"version":3,"file":"rating.d.ts","names":[],"sources":["../../src/rating/rating.tsx"],"mappings":";;;cAca,MAAA,EAAM,YAAA,QAAA,WAAA"}

package/dist/rating/rating.js

@@ -124,5 +124,5 @@ Rating.displayName = "Rating";
 
 //#endregion
 export { Rating as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=rating.js.map

package/dist/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":["theme"],"sources":["../../src/rating/rating.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { vui } from '../core'\nimport Icon from '../icon'\nimport type { ColorGetter } from '../system'\nimport type { Dict } from '../utils'\nimport { mergeRefs } from '../utils'\nimport type { RatingProps } from './rating.types'\nimport theme from './theme'\n\nexport const Rating = vui<'div', RatingProps>((props, ref) => {\n  const {\n    value: propValue = 0,\n    isDisabled = false,\n    max: propMax,\n    onChange,\n    showAll: showAllProp = true,\n    variant = 'yellow',\n    size,\n    ...rest\n  } = props\n  const [hoverValue, setHoverValue] = useState<number | null>(null)\n  const [internalValue, setInternalValue] = useState(propValue || 0)\n  const [focusedStar, setFocusedStar] = useState<number | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const isInteractive = !isDisabled && onChange !== undefined\n  const showAll = showAllProp || isInteractive\n\n  const { variants } = (theme as Dict) ?? {}\n  const color = isDisabled ? 'sandstone.79' : variants[variant].color\n\n  if (propValue < 0) {\n    console.error(`Rating: value (${propValue}) cannot be negative`)\n  }\n\n  const value = Math.max(0, propValue)\n  const max = propMax ? propMax : Math.max(value, 5)\n\n  if (value > max) {\n    console.error(`Rating: value (${value}) cannot be greater than max (${max})`)\n  }\n\n  const handleValueChange = (newValue: number) => {\n    if (!isInteractive) return\n    const clampedValue = Math.max(0, Math.min(newValue, max))\n    setInternalValue(clampedValue)\n    onChange?.(clampedValue)\n  }\n\n  const handleStarClick = (clickedValue: number) => {\n    if (!isInteractive) return\n    const newValue = clickedValue === internalValue ? 0 : clickedValue\n    handleValueChange(newValue)\n  }\n\n  const handleStarHover = (hoveredValue: number) => {\n    if (!isInteractive) return\n    setHoverValue(hoveredValue)\n  }\n\n  const handleMouseLeave = () => {\n    if (!isInteractive) return\n    setHoverValue(null)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n    const currentValue = propValue !== undefined ? propValue : internalValue\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        handleValueChange(Math.min(currentValue + 1, max))\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        handleValueChange(Math.max(currentValue - 1, 0))\n        break\n      case 'Home':\n        event.preventDefault()\n        handleValueChange(0)\n        break\n      case 'End':\n        event.preventDefault()\n        handleValueChange(max)\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    if (!isInteractive) return\n    if (focusedStar === null) {\n      setFocusedStar(propValue !== undefined ? propValue : internalValue)\n    }\n  }\n\n  const handleBlur = () => {\n    if (!isInteractive) return\n    setFocusedStar(null)\n  }\n\n  const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue\n\n  return (\n    <Box\n      aria-label=\"Rating\"\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={displayValue}\n      className=\"vui-rating\"\n      focusRing={3}\n      focusRingColor=\"focusColor\"\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseLeave={handleMouseLeave}\n      outline=\"none\"\n      ref={mergeRefs(ref, containerRef)}\n      role=\"slider\"\n      tabIndex={isInteractive ? 0 : -1}\n      {...rest}\n    >\n      {Array.from({ length: max }).map((_, index) => {\n        const starValue = index + 1\n        const fullStar = index < displayValue\n        return (\n          <Box\n            className=\"vui-rating-star\"\n            cursor={isInteractive ? 'pointer' : undefined}\n            gap=\"1px\"\n            key={index}\n            onClick={() => handleStarClick(starValue)}\n            onFocus={() => setFocusedStar(starValue)}\n            onMouseEnter={() => handleStarHover(starValue)}\n            tabIndex={-1}\n          >\n            {fullStar ? (\n              <FullStar color={color} size={size} />\n            ) : showAll ? (\n              <EmptyStar color=\"sandstone.79\" size={size} />\n            ) : null}\n          </Box>\n        )\n      })}\n    </Box>\n  )\n})\n\nconst FullStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\nconst EmptyStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\n\nRating.displayName = 'Rating'\nexport default Rating\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":["theme"],"sources":["../../src/rating/rating.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\n\nimport { useRef, useState } from 'react'\n\nimport type { ColorGetter } from '../system'\nimport type { Dict } from '../utils'\nimport type { RatingProps } from './rating.types'\n\nimport Box from '../box'\nimport { vui } from '../core'\nimport Icon from '../icon'\nimport { mergeRefs } from '../utils'\nimport theme from './theme'\n\nexport const Rating = vui<'div', RatingProps>((props, ref) => {\n  const {\n    value: propValue = 0,\n    isDisabled = false,\n    max: propMax,\n    onChange,\n    showAll: showAllProp = true,\n    variant = 'yellow',\n    size,\n    ...rest\n  } = props\n  const [hoverValue, setHoverValue] = useState<number | null>(null)\n  const [internalValue, setInternalValue] = useState(propValue || 0)\n  const [focusedStar, setFocusedStar] = useState<number | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const isInteractive = !isDisabled && onChange !== undefined\n  const showAll = showAllProp || isInteractive\n\n  const { variants } = (theme as Dict) ?? {}\n  const color = isDisabled ? 'sandstone.79' : variants[variant].color\n\n  if (propValue < 0) {\n    console.error(`Rating: value (${propValue}) cannot be negative`)\n  }\n\n  const value = Math.max(0, propValue)\n  const max = propMax ? propMax : Math.max(value, 5)\n\n  if (value > max) {\n    console.error(`Rating: value (${value}) cannot be greater than max (${max})`)\n  }\n\n  const handleValueChange = (newValue: number) => {\n    if (!isInteractive) return\n    const clampedValue = Math.max(0, Math.min(newValue, max))\n    setInternalValue(clampedValue)\n    onChange?.(clampedValue)\n  }\n\n  const handleStarClick = (clickedValue: number) => {\n    if (!isInteractive) return\n    const newValue = clickedValue === internalValue ? 0 : clickedValue\n    handleValueChange(newValue)\n  }\n\n  const handleStarHover = (hoveredValue: number) => {\n    if (!isInteractive) return\n    setHoverValue(hoveredValue)\n  }\n\n  const handleMouseLeave = () => {\n    if (!isInteractive) return\n    setHoverValue(null)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n    const currentValue = propValue !== undefined ? propValue : internalValue\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        handleValueChange(Math.min(currentValue + 1, max))\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        handleValueChange(Math.max(currentValue - 1, 0))\n        break\n      case 'Home':\n        event.preventDefault()\n        handleValueChange(0)\n        break\n      case 'End':\n        event.preventDefault()\n        handleValueChange(max)\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    if (!isInteractive) return\n    if (focusedStar === null) {\n      setFocusedStar(propValue !== undefined ? propValue : internalValue)\n    }\n  }\n\n  const handleBlur = () => {\n    if (!isInteractive) return\n    setFocusedStar(null)\n  }\n\n  const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue\n\n  return (\n    <Box\n      aria-label=\"Rating\"\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={displayValue}\n      className=\"vui-rating\"\n      focusRing={3}\n      focusRingColor=\"focusColor\"\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseLeave={handleMouseLeave}\n      outline=\"none\"\n      ref={mergeRefs(ref, containerRef)}\n      role=\"slider\"\n      tabIndex={isInteractive ? 0 : -1}\n      {...rest}\n    >\n      {Array.from({ length: max }).map((_, index) => {\n        const starValue = index + 1\n        const fullStar = index < displayValue\n        return (\n          <Box\n            className=\"vui-rating-star\"\n            cursor={isInteractive ? 'pointer' : undefined}\n            gap=\"1px\"\n            key={index}\n            onClick={() => handleStarClick(starValue)}\n            onFocus={() => setFocusedStar(starValue)}\n            onMouseEnter={() => handleStarHover(starValue)}\n            tabIndex={-1}\n          >\n            {fullStar ? (\n              <FullStar color={color} size={size} />\n            ) : showAll ? (\n              <EmptyStar color=\"sandstone.79\" size={size} />\n            ) : null}\n          </Box>\n        )\n      })}\n    </Box>\n  )\n})\n\nconst FullStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\nconst EmptyStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\n\nRating.displayName = 'Rating'\nexport default Rating\n"],"mappings":"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"}

package/dist/rating/theme.js

@@ -24,5 +24,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=theme.js.map

package/dist/select/context.js

@@ -5,5 +5,5 @@ const [SelectProvider, useSelectContext] = createContext({ isOptional: true });
 
 //#endregion
 export { SelectProvider, useSelectContext };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=context.js.map

package/dist/select/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/select/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { SelectContext } from './select.types'\n\nconst [SelectProvider, useSelectContext] = createContext<SelectContext>({ isOptional: true })\n\nexport { SelectProvider, useSelectContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,gBAAgB,oBAAoB,cAA6B,EAAE,YAAY,KAAK,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/select/context.ts"],"sourcesContent":["import type { SelectContext } from './select.types'\n\nimport { createContext } from '../utils'\n\nconst [SelectProvider, useSelectContext] = createContext<SelectContext>({ isOptional: true })\n\nexport { SelectProvider, useSelectContext }\n"],"mappings":";;;AAIA,MAAM,CAAC,gBAAgB,oBAAoB,cAA6B,EAAE,YAAY,KAAK,CAAC"}

package/dist/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;;;;;;;;;;;iBAuBgB,MAAA,CAAO,KAAA,EAAO,WAAW,mBAAA,GAAA,CAAA,OAAA;AAAA,kBAAzB,MAAA;EAAA,mCAAM,WAAA;EAAA"}
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;;;;;;;;;;;iBAwBgB,MAAA,CAAO,KAAA,EAAO,WAAW,mBAAA,GAAA,CAAA,OAAA;AAAA,kBAAzB,MAAA;EAAA,mCAAM,WAAA;EAAA"}

package/dist/select/select.js

@@ -117,5 +117,5 @@ Select.displayName = "Select";
 
 //#endregion
 export { Select as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport { Box } from '../box'\nimport { Input } from '../input'\nimport { helpTextSize } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport { Popover } from '../popover'\nimport { __DEV__ } from '../utils'\nimport type { ChangeEvent } from '../utils'\nimport { SelectProvider } from './context'\nimport type { SelectOptionData, SelectProps } from './select.types'\nimport SelectButton from './selectButton'\nimport SelectContent from './selectContent'\nimport SelectGroup from './selectGroup'\nimport SelectLabel from './selectLabel'\nimport SelectOption from './selectOption'\nimport useSelect from './useSelect'\n\n/**\n * Wraps trigger and content elements, providing them with context.\n * When no children are provided, content can be displayed based on 'options' data prop.\n * Supports single select and multi select, as well as controlled and uncontrolled modes.\n */\nexport function Select(props: SelectProps) {\n  const {\n    children,\n    defaultValue,\n    disabled,\n    errorText,\n    closeOnScroll,\n    helpText,\n    id: idProp,\n    isInvalid,\n    isMultiple,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxHeight,\n    name,\n    onChange,\n    onClose,\n    onOpen,\n    options,\n    matchWidth = true,\n    placeholder = 'Please select',\n    selectedText,\n    readOnly,\n    selectButton,\n    selectButtonProps,\n    showOptionsFilter,\n    size = 'lg',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children })\n\n  if (__DEV__ && isMultiple && !Array.isArray(selectProps.value))\n    console.error('<Select /> is used with isMultiple but its value is not an array: ', value)\n\n  const generatedId = useId()\n  const [query, setQuery] = useState<string>('')\n  const [filteredOptions, setFilteredOptions] = useState(options)\n\n  const id = idProp || generatedId\n\n  const context = {\n    disabled,\n    isInvalid,\n    isMultiple,\n    name,\n    options,\n    placeholder,\n    selectedText,\n    readOnly,\n    size,\n    variant,\n    ...selectProps,\n  }\n  const onQueryChange = (e: ChangeEvent) => setQuery(e.target.value?.toLowerCase())\n\n  const filterOptions = (i: SelectOptionData) =>\n    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)\n\n  useEffect(() => {\n    setFilteredOptions(options?.filter(filterOptions))\n  }, [query, options])\n\n  return (\n    <SelectProvider value={context}>\n      <Box className=\"vui-selectContainer\" column {...rest}>\n        {!!label && (\n          <SelectLabel\n            disabled={disabled}\n            id={id}\n            label={label}\n            labelMarkOptional={labelMarkOptional}\n            labelTooltipText={labelTooltipText}\n          />\n        )}\n        <Popover matchWidth={matchWidth} onClose={onClose} onOpen={onOpen}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    startIcon=\"uiSearch\"\n                    id={id}\n                    m={1}\n                    mt={0}\n                    onChange={onQueryChange}\n                    placeholder=\"Filter…\"\n                    size={size}\n                    value={query}\n                    w=\"100%\"\n                  />\n                </Box>\n              )}\n              <SelectGroup maxH={maxHeight} overflowY=\"auto\" tabIndex={1000}>\n                {children ??\n                  filteredOptions?.map?.(option => (\n                    <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />\n                  ))}\n              </SelectGroup>\n            </SelectContent>\n          </>\n        </Popover>\n        {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n        {!!errorText && (\n          <HelpText isError size={helpTextSize[size]}>\n            {errorText}\n          </HelpText>\n        )}\n      </Box>\n    </SelectProvider>\n  )\n}\n\nSelect.Button = SelectButton\nSelect.Content = SelectContent\nSelect.Group = SelectGroup\nSelect.Option = SelectOption\nSelect.displayName = 'Select'\n\nexport default Select\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EACJ,UACA,cACA,UACA,WACA,eACA,UACA,IAAI,QACJ,WACA,YACA,OACA,mBACA,kBACA,WACA,MACA,UACA,SACA,QACA,SACA,aAAa,MACb,cAAc,iBACd,cACA,UACA,cACA,mBACA,mBACA,OAAO,MACP,OACA,SACA,GAAG,SACD;CAEJ,MAAM,cAAc,UAAU;EAAE;EAAc;EAAY;EAAU;EAAO;EAAS;EAAc;CAAS,CAAC;CAE5G,YAAe,cAAc,CAAC,MAAM,QAAQ,YAAY,KAAK,GAC3D,QAAQ,MAAM,sEAAsE,KAAK;CAE3F,MAAM,cAAc,MAAM;CAC1B,MAAM,CAAC,OAAO,YAAY,SAAiB,EAAE;CAC7C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,OAAO;CAE9D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL;CACA,MAAM,iBAAiB,MAAmB,SAAS,EAAE,OAAO,OAAO,YAAY,CAAC;CAEhF,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK;CAEtF,gBAAgB;EACd,mBAAmB,SAAS,OAAO,aAAa,CAAC;CACnD,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,OACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,qBAAC,KAAD;GAAK,WAAU;GAAsB;GAAO,GAAI;aAAhD;IACG,CAAC,CAAC,SACD,oBAAC,aAAD;KACY;KACN;KACG;KACY;KACD;IACnB;IAEH,oBAAC,SAAD;KAAqB;KAAqB;KAAiB;eACzD,8CACG,gBAAgB,oBAAC,cAAD,EAAc,GAAI,kBAAoB,IACvD,qBAAC,eAAD;MAAe,UAAS;gBAAxB,CACG,qBACC,oBAAC,KAAD,YACE,oBAAC,OAAD;OACE,WAAU;OACN;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;MACH,GACE,IAEP,oBAAC,aAAD;OAAa,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAAC,cAAD;QAA6B;QAAkC,OAAO,OAAO;QAAM,GAAI;OAAS,GAA/C,OAAO,KAAwC,CACjG;MACQ,EACA;OACf;IACK;IACR,CAAC,CAAC,YAAY,oBAAC,UAAD;KAAU,MAAM,aAAa;eAAQ;IAAmB;IACtE,CAAC,CAAC,aACD,oBAAC,UAAD;KAAU;KAAQ,MAAM,aAAa;eAClC;IACO;GAET;;CACS;AAEpB;AAEA,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,cAAc"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { SelectOptionData, SelectProps } from './select.types'\n\nimport { Box } from '../box'\nimport { Input } from '../input'\nimport { helpTextSize } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport { Popover } from '../popover'\nimport { __DEV__ } from '../utils'\nimport { SelectProvider } from './context'\nimport SelectButton from './selectButton'\nimport SelectContent from './selectContent'\nimport SelectGroup from './selectGroup'\nimport SelectLabel from './selectLabel'\nimport SelectOption from './selectOption'\nimport useSelect from './useSelect'\n\n/**\n * Wraps trigger and content elements, providing them with context.\n * When no children are provided, content can be displayed based on 'options' data prop.\n * Supports single select and multi select, as well as controlled and uncontrolled modes.\n */\nexport function Select(props: SelectProps) {\n  const {\n    children,\n    defaultValue,\n    disabled,\n    errorText,\n    closeOnScroll,\n    helpText,\n    id: idProp,\n    isInvalid,\n    isMultiple,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxHeight,\n    name,\n    onChange,\n    onClose,\n    onOpen,\n    options,\n    matchWidth = true,\n    placeholder = 'Please select',\n    selectedText,\n    readOnly,\n    selectButton,\n    selectButtonProps,\n    showOptionsFilter,\n    size = 'lg',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children })\n\n  if (__DEV__ && isMultiple && !Array.isArray(selectProps.value))\n    console.error('<Select /> is used with isMultiple but its value is not an array: ', value)\n\n  const generatedId = useId()\n  const [query, setQuery] = useState<string>('')\n  const [filteredOptions, setFilteredOptions] = useState(options)\n\n  const id = idProp || generatedId\n\n  const context = {\n    disabled,\n    isInvalid,\n    isMultiple,\n    name,\n    options,\n    placeholder,\n    selectedText,\n    readOnly,\n    size,\n    variant,\n    ...selectProps,\n  }\n  const onQueryChange = (e: ChangeEvent) => setQuery(e.target.value?.toLowerCase())\n\n  const filterOptions = (i: SelectOptionData) =>\n    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)\n\n  useEffect(() => {\n    setFilteredOptions(options?.filter(filterOptions))\n  }, [query, options])\n\n  return (\n    <SelectProvider value={context}>\n      <Box className=\"vui-selectContainer\" column {...rest}>\n        {!!label && (\n          <SelectLabel\n            disabled={disabled}\n            id={id}\n            label={label}\n            labelMarkOptional={labelMarkOptional}\n            labelTooltipText={labelTooltipText}\n          />\n        )}\n        <Popover matchWidth={matchWidth} onClose={onClose} onOpen={onOpen}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    startIcon=\"uiSearch\"\n                    id={id}\n                    m={1}\n                    mt={0}\n                    onChange={onQueryChange}\n                    placeholder=\"Filter…\"\n                    size={size}\n                    value={query}\n                    w=\"100%\"\n                  />\n                </Box>\n              )}\n              <SelectGroup maxH={maxHeight} overflowY=\"auto\" tabIndex={1000}>\n                {children ??\n                  filteredOptions?.map?.(option => (\n                    <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />\n                  ))}\n              </SelectGroup>\n            </SelectContent>\n          </>\n        </Popover>\n        {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n        {!!errorText && (\n          <HelpText isError size={helpTextSize[size]}>\n            {errorText}\n          </HelpText>\n        )}\n      </Box>\n    </SelectProvider>\n  )\n}\n\nSelect.Button = SelectButton\nSelect.Content = SelectContent\nSelect.Group = SelectGroup\nSelect.Option = SelectOption\nSelect.displayName = 'Select'\n\nexport default Select\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EACJ,UACA,cACA,UACA,WACA,eACA,UACA,IAAI,QACJ,WACA,YACA,OACA,mBACA,kBACA,WACA,MACA,UACA,SACA,QACA,SACA,aAAa,MACb,cAAc,iBACd,cACA,UACA,cACA,mBACA,mBACA,OAAO,MACP,OACA,SACA,GAAG,SACD;CAEJ,MAAM,cAAc,UAAU;EAAE;EAAc;EAAY;EAAU;EAAO;EAAS;EAAc;CAAS,CAAC;CAE5G,YAAe,cAAc,CAAC,MAAM,QAAQ,YAAY,KAAK,GAC3D,QAAQ,MAAM,sEAAsE,KAAK;CAE3F,MAAM,cAAc,MAAM;CAC1B,MAAM,CAAC,OAAO,YAAY,SAAiB,EAAE;CAC7C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,OAAO;CAE9D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL;CACA,MAAM,iBAAiB,MAAmB,SAAS,EAAE,OAAO,OAAO,YAAY,CAAC;CAEhF,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK;CAEtF,gBAAgB;EACd,mBAAmB,SAAS,OAAO,aAAa,CAAC;CACnD,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,OACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,qBAAC,KAAD;GAAK,WAAU;GAAsB;GAAO,GAAI;aAAhD;IACG,CAAC,CAAC,SACD,oBAAC,aAAD;KACY;KACN;KACG;KACY;KACD;IACnB;IAEH,oBAAC,SAAD;KAAqB;KAAqB;KAAiB;eACzD,8CACG,gBAAgB,oBAAC,cAAD,EAAc,GAAI,kBAAoB,IACvD,qBAAC,eAAD;MAAe,UAAS;gBAAxB,CACG,qBACC,oBAAC,KAAD,YACE,oBAAC,OAAD;OACE,WAAU;OACN;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;MACH,GACE,IAEP,oBAAC,aAAD;OAAa,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAAC,cAAD;QAA6B;QAAkC,OAAO,OAAO;QAAM,GAAI;OAAS,GAA/C,OAAO,KAAwC,CACjG;MACQ,EACA;OACf;IACK;IACR,CAAC,CAAC,YAAY,oBAAC,UAAD;KAAU,MAAM,aAAa;eAAQ;IAAmB;IACtE,CAAC,CAAC,aACD,oBAAC,UAAD;KAAU;KAAQ,MAAM,aAAa;eAClC;IACO;GAET;;CACS;AAEpB;AAEA,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,cAAc"}

package/dist/select/selectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"mappings":";;;;;;;;cAaa,YAAA,EAAY,YAAA,WAkEvB,WAAA"}
+{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"mappings":";;;;;;;;cAgBa,YAAA,EAAY,YAAA,WAyDvB,WAAA"}

package/dist/select/selectButton.js

@@ -6,6 +6,7 @@ import Button from "../button/button.js";
 import { LineButton } from "../button/buttons.js";
 import PopoverTrigger from "../popover/popoverTrigger.js";
 import { useSelectContext } from "./context.js";
+import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/select/selectButton.tsx
@@ -19,35 +20,28 @@ const SelectButton = vui((props, ref) => {
 	const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {};
 	const styles = useStyleConfig("Select", useSelectContext());
 	const text = valueText || placeholder;
-	const disabledProps = disabled ? {
-		activeBg: "sandstone.79",
+	const stateProps = disabled ? {
 		cursor: "not-allowed",
-		backgroundColor: "sandstone.79",
-		borderColor: "sandstone.79",
-		hoverBg: "sandstone.79",
-		hoverBorderColor: "sandstone.79",
-		activeBorderColor: "sandstone.79"
-	} : void 0;
-	const readOnlyProps = readOnly ? {
-		activeBg: "sandstone.95",
-		bg: "sandstone.95",
-		color: "seaBlue.main",
+		opacity: .5,
+		disabledBg: "var(--vui-color-sandstone-79)",
+		disabledBorderColor: "var(--vui-color-sandstone-79)",
+		disabledColor: "white"
+	} : readOnly ? {
 		cursor: "auto",
-		disabled: true,
-		hoverBg: "sandstone.95",
-		opacity: 1
+		disabledBg: "var(--vui-color-sandstone-97)",
+		disabledBorderColor: "var(--vui-color-sandstone-55)",
+		disabledColor: "var(--vui-foreground-default)"
 	} : void 0;
 	const isInvalidProps = isInvalid ? {
 		borderColor: "energyRed.45",
 		hoverBorderColor: "energyRed.45"
 	} : void 0;
 	const textColor = inputColors.inputText;
-	const iconColor = disabled ? inputColors.inputText : "seaBlue.main";
+	const iconColor = disabled || readOnly ? inputColors.inputText : "seaBlue.main";
 	return /* @__PURE__ */ jsx(PopoverTrigger, {
 		as: LineButton,
-		bg: "white",
 		className: cs("vui-selectButton", className),
-		disabled,
+		disabled: disabled || readOnly,
 		focusRing: 2,
 		fontWeight: "regular",
 		endIcon: /* @__PURE__ */ jsx(Button.Icon, {
@@ -65,8 +59,7 @@ const SelectButton = vui((props, ref) => {
 		}),
 		userSelect: "text",
 		...styles.button,
-		...disabledProps,
-		...readOnlyProps,
+		...stateProps,
 		...isInvalidProps,
 		...rest
 	});
@@ -75,5 +68,5 @@ SelectButton.displayName = "SelectButton";
 
 //#endregion
 export { SelectButton as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=selectButton.js.map

package/dist/select/selectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.js","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { inputColors } from '../input/consts'\nimport { PopoverTrigger } from '../popover'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectButtonProps } from './select.types'\n\n/**\n * Displays a custom button component, which opens a popover on click.\n * Text within the button is either selected value or placeholder.\n * Includes special styling for disabled, readOnly and invalid states.\n */\nexport const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const text = valueText || placeholder\n\n  const disabledProps = disabled\n    ? {\n        activeBg: 'sandstone.79',\n        cursor: 'not-allowed',\n        backgroundColor: 'sandstone.79',\n        borderColor: 'sandstone.79',\n        hoverBg: 'sandstone.79',\n        hoverBorderColor: 'sandstone.79',\n        activeBorderColor: 'sandstone.79',\n      }\n    : undefined\n\n  const readOnlyProps = readOnly\n    ? {\n        activeBg: 'sandstone.95',\n        bg: 'sandstone.95',\n        color: 'seaBlue.main',\n        cursor: 'auto',\n        disabled: true,\n        hoverBg: 'sandstone.95',\n        opacity: 1,\n      }\n    : undefined\n\n  const isInvalidProps = isInvalid\n    ? {\n        borderColor: 'energyRed.45',\n        hoverBorderColor: 'energyRed.45',\n      }\n    : undefined\n\n  const textColor = inputColors.inputText\n  const iconColor = disabled ? inputColors.inputText : 'seaBlue.main'\n\n  return (\n    <PopoverTrigger\n      as={LineButton}\n      bg=\"white\"\n      className={cs('vui-selectButton', className)}\n      disabled={disabled}\n      focusRing={2}\n      fontWeight=\"regular\"\n      endIcon={<Button.Icon color={iconColor} ml=\"auto\" name=\"uiAngleDown\" />}\n      isFullWidth\n      px={1}\n      ref={ref}\n      text={\n        <Button.Text color={textColor} {...ellipsisOverflow}>\n          {text}\n        </Button.Text>\n      }\n      userSelect=\"text\"\n      {...styles.button}\n      {...disabledProps}\n      {...readOnlyProps}\n      {...isInvalidProps}\n      {...rest}\n    />\n  )\n})\n\nSelectButton.displayName = 'SelectButton'\nexport default SelectButton\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,UAAU,WAAW,aAAa,UAAU,cAAc,iBAAiB,KAAK,CAAC;CACzF,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,MAAM,OAAO,aAAa;CAE1B,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,QAAQ;EACR,iBAAiB;EACjB,aAAa;EACb,SAAS;EACT,kBAAkB;EAClB,mBAAmB;CACrB,IACA;CAEJ,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,IAAI;EACJ,OAAO;EACP,QAAQ;EACR,UAAU;EACV,SAAS;EACT,SAAS;CACX,IACA;CAEJ,MAAM,iBAAiB,YACnB;EACE,aAAa;EACb,kBAAkB;CACpB,IACA;CAEJ,MAAM,YAAY,YAAY;CAC9B,MAAM,YAAY,WAAW,YAAY,YAAY;CAErD,OACE,oBAAC,gBAAD;EACE,IAAI;EACJ,IAAG;EACH,WAAW,GAAG,oBAAoB,SAAS;EACjC;EACV,WAAW;EACX,YAAW;EACX,SAAS,oBAAC,OAAO,MAAR;GAAa,OAAO;GAAW,IAAG;GAAO,MAAK;EAAe;EACtE;EACA,IAAI;EACC;EACL,MACE,oBAAC,OAAO,MAAR;GAAa,OAAO;GAAW,GAAI;aAChC;EACU;EAEf,YAAW;EACX,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;CACL;AAEL,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"selectButton.js","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { SelectButtonProps } from './select.types'\n\nimport Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { inputColors } from '../input/consts'\nimport { PopoverTrigger } from '../popover'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useSelectContext } from './context'\n\n/**\n * Displays a custom button component, which opens a popover on click.\n * Text within the button is either selected value or placeholder.\n * Includes special styling for disabled, readOnly and invalid states.\n */\nexport const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const text = valueText || placeholder\n\n  const stateProps = disabled\n    ? {\n        cursor: 'not-allowed',\n        opacity: 0.5,\n        disabledBg: 'var(--vui-color-sandstone-79)',\n        disabledBorderColor: 'var(--vui-color-sandstone-79)',\n        disabledColor: 'white',\n      }\n    : readOnly\n      ? {\n          cursor: 'auto',\n          disabledBg: 'var(--vui-color-sandstone-97)',\n          disabledBorderColor: 'var(--vui-color-sandstone-55)',\n          disabledColor: 'var(--vui-foreground-default)',\n        }\n      : undefined\n\n  const isInvalidProps = isInvalid\n    ? {\n        borderColor: 'energyRed.45',\n        hoverBorderColor: 'energyRed.45',\n      }\n    : undefined\n\n  const textColor = inputColors.inputText\n  const iconColor = disabled || readOnly ? inputColors.inputText : 'seaBlue.main'\n\n  return (\n    <PopoverTrigger\n      as={LineButton}\n      className={cs('vui-selectButton', className)}\n      disabled={disabled || readOnly}\n      focusRing={2}\n      fontWeight=\"regular\"\n      endIcon={<Button.Icon color={iconColor} ml=\"auto\" name=\"uiAngleDown\" />}\n      isFullWidth\n      px={1}\n      ref={ref}\n      text={\n        <Button.Text color={textColor} {...ellipsisOverflow}>\n          {text}\n        </Button.Text>\n      }\n      userSelect=\"text\"\n      {...styles.button}\n      {...stateProps}\n      {...isInvalidProps}\n      {...rest}\n    />\n  )\n})\n\nSelectButton.displayName = 'SelectButton'\nexport default SelectButton\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,UAAU,WAAW,aAAa,UAAU,cAAc,iBAAiB,KAAK,CAAC;CACzF,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,MAAM,OAAO,aAAa;CAE1B,MAAM,aAAa,WACf;EACE,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,qBAAqB;EACrB,eAAe;CACjB,IACA,WACE;EACE,QAAQ;EACR,YAAY;EACZ,qBAAqB;EACrB,eAAe;CACjB,IACA;CAEN,MAAM,iBAAiB,YACnB;EACE,aAAa;EACb,kBAAkB;CACpB,IACA;CAEJ,MAAM,YAAY,YAAY;CAC9B,MAAM,YAAY,YAAY,WAAW,YAAY,YAAY;CAEjE,OACE,oBAAC,gBAAD;EACE,IAAI;EACJ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,UAAU,YAAY;EACtB,WAAW;EACX,YAAW;EACX,SAAS,oBAAC,OAAO,MAAR;GAAa,OAAO;GAAW,IAAG;GAAO,MAAK;EAAe;EACtE;EACA,IAAI;EACC;EACL,MACE,oBAAC,OAAO,MAAR;GAAa,OAAO;GAAW,GAAI;aAChC;EACU;EAEf,YAAW;EACX,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;CACL;AAEL,CAAC;AAED,aAAa,cAAc"}

package/dist/select/selectContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectContent.d.ts","names":[],"sources":["../../src/select/selectContent.tsx"],"mappings":";;;;cAOa,aAAA,EAAa,YAAA,QAcxB,QAAA"}
+{"version":3,"file":"selectContent.d.ts","names":[],"sources":["../../src/select/selectContent.tsx"],"mappings":";;;;cAQa,aAAA,EAAa,YAAA,QAcxB,QAAA"}

package/dist/select/selectContent.js

@@ -23,5 +23,5 @@ SelectContent.displayName = "SelectContent";
 
 //#endregion
 export { SelectContent as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=selectContent.js.map

package/dist/select/selectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectContent.js","names":[],"sources":["../../src/select/selectContent.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { PopoverContent } from '../popover'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectContentProps } from './select.types'\n\n/** Extends PopoverContent to display given content is an overlaying box. */\nexport const SelectContent = vui<'div', SelectContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return (\n    <PopoverContent\n      className={cs('vui-selectContent', className)}\n      column\n      py={1}\n      ref={ref}\n      {...styles.content}\n      {...rest}\n    />\n  )\n})\n\nSelectContent.displayName = 'SelectContent'\n\nexport default SelectContent\n"],"mappings":";;;;;;;;;AAOA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,OACE,oBAAC,gBAAD;EACE,WAAW,GAAG,qBAAqB,SAAS;EAC5C;EACA,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;CACL;AAEL,CAAC;AAED,cAAc,cAAc"}
+{"version":3,"file":"selectContent.js","names":[],"sources":["../../src/select/selectContent.tsx"],"sourcesContent":["import type { SelectContentProps } from './select.types'\n\nimport { useStyleConfig, vui } from '../core'\nimport { PopoverContent } from '../popover'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\n\n/** Extends PopoverContent to display given content is an overlaying box. */\nexport const SelectContent = vui<'div', SelectContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return (\n    <PopoverContent\n      className={cs('vui-selectContent', className)}\n      column\n      py={1}\n      ref={ref}\n      {...styles.content}\n      {...rest}\n    />\n  )\n})\n\nSelectContent.displayName = 'SelectContent'\n\nexport default SelectContent\n"],"mappings":";;;;;;;;;AAQA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,OACE,oBAAC,gBAAD;EACE,WAAW,GAAG,qBAAqB,SAAS;EAC5C;EACA,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;CACL;AAEL,CAAC;AAED,cAAc,cAAc"}

package/dist/select/selectGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectGroup.d.ts","names":[],"sources":["../../src/select/selectGroup.tsx"],"mappings":";;;;;;;cAQa,WAAA,EAKP,YAAA,OAAmB,gBAAA;EACvB,OAAA,SAAgB,WAAA;EAChB,OAAA,SAAgB,WAAA;AAAA"}
+{"version":3,"file":"selectGroup.d.ts","names":[],"sources":["../../src/select/selectGroup.tsx"],"mappings":";;;;;;;cASa,WAAA,EAKP,YAAA,OAAmB,gBAAA;EACvB,OAAA,SAAgB,WAAA;EAChB,OAAA,SAAgB,WAAA;AAAA"}

package/dist/select/selectGroup.js

@@ -25,5 +25,5 @@ SelectGroup.displayName = "SelectGroup";
 
 //#endregion
 export { SelectGroup as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=selectGroup.js.map

package/dist/select/selectGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectGroup.js","names":[],"sources":["../../src/select/selectGroup.tsx"],"sourcesContent":["import type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListDivider, ListHeading } from '../list'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectGroupProps } from './select.types'\n\n/** Displays a list of options with optional heading to describe an individual group. */\nexport const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return <List className={cs('vui-selectGroup', 'vui-allowScroll', className)} ref={ref} {...styles.group} {...rest} />\n}) as VuiComponent<'ul', SelectGroupProps> & {\n  Divider: typeof ListDivider\n  Heading: typeof ListHeading\n}\n\nSelectGroup.Divider = ListDivider\nSelectGroup.Heading = ListHeading\n\nSelectGroup.displayName = 'SelectGroup'\n\nexport default SelectGroup\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,cAAc,KAA6B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,OAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,mBAAmB,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAO,GAAI;CAAO;AACtH,CAAC;AAKD,YAAY,UAAU;AACtB,YAAY,UAAU;AAEtB,YAAY,cAAc"}
+{"version":3,"file":"selectGroup.js","names":[],"sources":["../../src/select/selectGroup.tsx"],"sourcesContent":["import type { VuiComponent } from '../core'\nimport type { SelectGroupProps } from './select.types'\n\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListDivider, ListHeading } from '../list'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\n\n/** Displays a list of options with optional heading to describe an individual group. */\nexport const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return <List className={cs('vui-selectGroup', 'vui-allowScroll', className)} ref={ref} {...styles.group} {...rest} />\n}) as VuiComponent<'ul', SelectGroupProps> & {\n  Divider: typeof ListDivider\n  Heading: typeof ListHeading\n}\n\nSelectGroup.Divider = ListDivider\nSelectGroup.Heading = ListHeading\n\nSelectGroup.displayName = 'SelectGroup'\n\nexport default SelectGroup\n"],"mappings":";;;;;;;;;;;AASA,MAAa,cAAc,KAA6B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,OAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,mBAAmB,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAO,GAAI;CAAO;AACtH,CAAC;AAKD,YAAY,UAAU;AACtB,YAAY,UAAU;AAEtB,YAAY,cAAc"}

package/dist/select/selectLabel.js

@@ -22,5 +22,5 @@ SelectLabel.displayName = "SelectLabel";
 
 //#endregion
 export { SelectLabel as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=selectLabel.js.map

package/dist/select/selectLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectLabel.js","names":[],"sources":["../../src/select/selectLabel.tsx"],"sourcesContent":["import { useStyleConfig } from '../core'\nimport Label from '../label'\nimport { isString } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectLabelProps } from './select.types'\n\nexport const SelectLabel = ({ disabled, id, label, labelMarkOptional, labelTooltipText }: SelectLabelProps) => {\n  const styles = useStyleConfig('Select', useSelectContext())\n  return isString(label) ? (\n    <Label\n      aria-disabled={disabled}\n      className=\"vui-input-label\"\n      htmlFor={id}\n      markAsOptional={labelMarkOptional}\n      mb={0.5}\n      text={label}\n      tooltipText={labelTooltipText}\n      {...styles.label}\n    />\n  ) : (\n    label\n  )\n}\n\nSelectLabel.displayName = 'SelectLabel'\n\nexport default SelectLabel\n"],"mappings":";;;;;;;AAMA,MAAa,eAAe,EAAE,UAAU,IAAI,OAAO,mBAAmB,uBAAyC;CAC7G,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAC1D,OAAO,SAAS,KAAK,IACnB,oBAAC,OAAD;EACE,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,IAAI;EACJ,MAAM;EACN,aAAa;EACb,GAAI,OAAO;CACZ,KAED;AAEJ;AAEA,YAAY,cAAc"}
+{"version":3,"file":"selectLabel.js","names":[],"sources":["../../src/select/selectLabel.tsx"],"sourcesContent":["import type { SelectLabelProps } from './select.types'\n\nimport { useStyleConfig } from '../core'\nimport Label from '../label'\nimport { isString } from '../utils'\nimport { useSelectContext } from './context'\n\nexport const SelectLabel = ({ disabled, id, label, labelMarkOptional, labelTooltipText }: SelectLabelProps) => {\n  const styles = useStyleConfig('Select', useSelectContext())\n  return isString(label) ? (\n    <Label\n      aria-disabled={disabled}\n      className=\"vui-input-label\"\n      htmlFor={id}\n      markAsOptional={labelMarkOptional}\n      mb={0.5}\n      text={label}\n      tooltipText={labelTooltipText}\n      {...styles.label}\n    />\n  ) : (\n    label\n  )\n}\n\nSelectLabel.displayName = 'SelectLabel'\n\nexport default SelectLabel\n"],"mappings":";;;;;;;AAOA,MAAa,eAAe,EAAE,UAAU,IAAI,OAAO,mBAAmB,uBAAyC;CAC7G,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAC1D,OAAO,SAAS,KAAK,IACnB,oBAAC,OAAD;EACE,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,IAAI;EACJ,MAAM;EACN,aAAa;EACb,GAAI,OAAO;CACZ,KAED;AAEJ;AAEA,YAAY,cAAc"}

package/dist/select/selectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectOption.d.ts","names":[],"sources":["../../src/select/selectOption.tsx"],"mappings":";;;;;;;AAgBA;cAAa,YAAA,EAAY,YAAA,OAAA,iBAAA"}
+{"version":3,"file":"selectOption.d.ts","names":[],"sources":["../../src/select/selectOption.tsx"],"mappings":";;;;;;;AAiBA;cAAa,YAAA,EAAY,YAAA,OAAA,iBAAA"}

package/dist/select/selectOption.js

@@ -74,5 +74,5 @@ SelectOption.displayName = "SelectOption";
 
 //#endregion
 export { SelectOption as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=selectOption.js.map

package/dist/select/selectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectOption.js","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListItem } from '../list'\nimport { usePopoverContext } from '../popover'\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport { cs, ellipsisOverflow, useCallbackRef } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectOptionProps } from './select.types'\n\n/**\n * Displays a select option as a list item. By default, closes popover when option is selected.\n * In multi-select mode, displays a checkbox and doesn't close popover.\n * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.\n */\nexport const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {\n  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props\n  const { close } = usePopoverContext() ?? {}\n  const { isMultiple, name, onChange, value } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp\n\n  const hide = () => close?.()\n\n  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {\n    const nativeEvent = e.nativeEvent || e\n    const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)\n\n    Object.defineProperty(clonedEvent, 'target', {\n      writable: true,\n      value: { value: valueProp, name },\n    })\n\n    onClickProp?.(e as MouseEvent<HTMLLIElement>)\n    onChange?.(clonedEvent)\n    !isMultiple && hide()\n  })\n\n  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))\n\n  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()\n\n  // Hiding the popover on scroll\n  useEffect(() => {\n    if (closeOnScroll) document.addEventListener('scroll', onScroll, true)\n\n    return () => {\n      if (closeOnScroll) document.removeEventListener('scroll', onScroll, true)\n    }\n  }, [closeOnScroll])\n\n  return (\n    <ListItem\n      activeBg=\"skyBlue.active\"\n      className={cs('vui-selectOption', className)}\n      disabled={disabled}\n      hoverBg=\"skyBlue.hover\"\n      isInteractive\n      isSelected={isSelected}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      selectedBg=\"skyBlue.selected\"\n      tabIndex={0}\n      title={title}\n      value={valueProp}\n      {...styles.option}\n      {...rest}\n      {...ellipsisOverflow}\n    >\n      {children ??\n        (isMultiple && (\n          <>\n            <Checkbox checked={isSelected} disabled={disabled} mr={1} {...styles.option} />\n            <List.Text>{props.text}</List.Text>\n          </>\n        ))}\n    </ListItem>\n  )\n})\n\nSelectOption.displayName = 'SelectOption'\n\nexport default SelectOption\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA8B,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,eAAe,WAAW,UAAU,OAAO,SAAS,aAAa,OAAO,WAAW,GAAG,SAAS;CACjH,MAAM,EAAE,UAAU,kBAAkB,KAAK,CAAC;CAC1C,MAAM,EAAE,YAAY,MAAM,UAAU,UAAU,iBAAiB,KAAK,CAAC;CACrE,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,MAAM,aAAa,MAAM,QAAQ,KAAK,KAAK,YAAY,MAAM,SAAS,SAAS,IAAI,UAAU;CAE7F,MAAM,aAAa,QAAQ;CAE3B,MAAM,UAAU,gBAAgB,MAAgE;EAC9F,MAAM,cAAc,EAAE,eAAe;EACrC,MAAM,cAAc,IAAK,YAAY,YAAoB,YAAY,MAAM,WAAW;EAEtF,OAAO,eAAe,aAAa,UAAU;GAC3C,UAAU;GACV,OAAO;IAAE,OAAO;IAAW;GAAK;EAClC,CAAC;EAED,cAAc,CAA8B;EAC5C,WAAW,WAAW;EACtB,CAAC,cAAc,KAAK;CACtB,CAAC;CAED,MAAM,YAAY,gBAAgB,MAAoC,EAAE,QAAQ,WAAW,QAAQ,CAAC,CAAC;CAErG,MAAM,YAAY,MAAa,CAAE,EAAE,QAAwB,WAAW,SAAS,iBAAiB,KAAK,KAAK;CAG1G,gBAAgB;EACd,IAAI,eAAe,SAAS,iBAAiB,UAAU,UAAU,IAAI;EAErE,aAAa;GACX,IAAI,eAAe,SAAS,oBAAoB,UAAU,UAAU,IAAI;EAC1E;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,UAAD;EACE,UAAS;EACT,WAAW,GAAG,oBAAoB,SAAS;EACjC;EACV,SAAQ;EACR;EACY;EACH;EACE;EACN;EACL,YAAW;EACX,UAAU;EACH;EACP,OAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEH,aACE,cACC,8CACE,oBAAC,UAAD;GAAU,SAAS;GAAsB;GAAU,IAAI;GAAG,GAAI,OAAO;EAAS,IAC9E,oBAAC,KAAK,MAAN,YAAY,MAAM,KAAgB,EAClC;CAEE;AAEd,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"selectOption.js","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport type { SelectOptionProps } from './select.types'\n\nimport { Checkbox } from '../checkbox'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListItem } from '../list'\nimport { usePopoverContext } from '../popover'\nimport { cs, ellipsisOverflow, useCallbackRef } from '../utils'\nimport { useSelectContext } from './context'\n\n/**\n * Displays a select option as a list item. By default, closes popover when option is selected.\n * In multi-select mode, displays a checkbox and doesn't close popover.\n * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.\n */\nexport const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {\n  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props\n  const { close } = usePopoverContext() ?? {}\n  const { isMultiple, name, onChange, value } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp\n\n  const hide = () => close?.()\n\n  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {\n    const nativeEvent = e.nativeEvent || e\n    const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)\n\n    Object.defineProperty(clonedEvent, 'target', {\n      writable: true,\n      value: { value: valueProp, name },\n    })\n\n    onClickProp?.(e as MouseEvent<HTMLLIElement>)\n    onChange?.(clonedEvent)\n    !isMultiple && hide()\n  })\n\n  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))\n\n  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()\n\n  // Hiding the popover on scroll\n  useEffect(() => {\n    if (closeOnScroll) document.addEventListener('scroll', onScroll, true)\n\n    return () => {\n      if (closeOnScroll) document.removeEventListener('scroll', onScroll, true)\n    }\n  }, [closeOnScroll])\n\n  return (\n    <ListItem\n      activeBg=\"skyBlue.active\"\n      className={cs('vui-selectOption', className)}\n      disabled={disabled}\n      hoverBg=\"skyBlue.hover\"\n      isInteractive\n      isSelected={isSelected}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      selectedBg=\"skyBlue.selected\"\n      tabIndex={0}\n      title={title}\n      value={valueProp}\n      {...styles.option}\n      {...rest}\n      {...ellipsisOverflow}\n    >\n      {children ??\n        (isMultiple && (\n          <>\n            <Checkbox checked={isSelected} disabled={disabled} mr={1} {...styles.option} />\n            <List.Text>{props.text}</List.Text>\n          </>\n        ))}\n    </ListItem>\n  )\n})\n\nSelectOption.displayName = 'SelectOption'\n\nexport default SelectOption\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAa,eAAe,KAA8B,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,eAAe,WAAW,UAAU,OAAO,SAAS,aAAa,OAAO,WAAW,GAAG,SAAS;CACjH,MAAM,EAAE,UAAU,kBAAkB,KAAK,CAAC;CAC1C,MAAM,EAAE,YAAY,MAAM,UAAU,UAAU,iBAAiB,KAAK,CAAC;CACrE,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,MAAM,aAAa,MAAM,QAAQ,KAAK,KAAK,YAAY,MAAM,SAAS,SAAS,IAAI,UAAU;CAE7F,MAAM,aAAa,QAAQ;CAE3B,MAAM,UAAU,gBAAgB,MAAgE;EAC9F,MAAM,cAAc,EAAE,eAAe;EACrC,MAAM,cAAc,IAAK,YAAY,YAAoB,YAAY,MAAM,WAAW;EAEtF,OAAO,eAAe,aAAa,UAAU;GAC3C,UAAU;GACV,OAAO;IAAE,OAAO;IAAW;GAAK;EAClC,CAAC;EAED,cAAc,CAA8B;EAC5C,WAAW,WAAW;EACtB,CAAC,cAAc,KAAK;CACtB,CAAC;CAED,MAAM,YAAY,gBAAgB,MAAoC,EAAE,QAAQ,WAAW,QAAQ,CAAC,CAAC;CAErG,MAAM,YAAY,MAAa,CAAE,EAAE,QAAwB,WAAW,SAAS,iBAAiB,KAAK,KAAK;CAG1G,gBAAgB;EACd,IAAI,eAAe,SAAS,iBAAiB,UAAU,UAAU,IAAI;EAErE,aAAa;GACX,IAAI,eAAe,SAAS,oBAAoB,UAAU,UAAU,IAAI;EAC1E;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,UAAD;EACE,UAAS;EACT,WAAW,GAAG,oBAAoB,SAAS;EACjC;EACV,SAAQ;EACR;EACY;EACH;EACE;EACN;EACL,YAAW;EACX,UAAU;EACH;EACP,OAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEH,aACE,cACC,8CACE,oBAAC,UAAD;GAAU,SAAS;GAAsB;GAAU,IAAI;GAAG,GAAI,OAAO;EAAS,IAC9E,oBAAC,KAAK,MAAN,YAAY,MAAM,KAAgB,EAClC;CAEE;AAEd,CAAC;AAED,aAAa,cAAc"}

package/dist/select/theme.js

@@ -74,5 +74,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=theme.js.map

package/dist/select/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","names":[],"sources":["../../src/select/useSelect.tsx"],"mappings":";;;;;cAOa,aAAA,GAAiB,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,gBAAA,OAAkB,WAAA;;iBAOrD,SAAA,CAAU,KAAA,EAAO,cAAA;gBAyBH,WAAA;;;;KAqB1B,mBAAA,GAAsB,UAAU,QAAQ,SAAA"}
+{"version":3,"file":"useSelect.d.ts","names":[],"sources":["../../src/select/useSelect.tsx"],"mappings":";;;;;cAQa,aAAA,GAAiB,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,gBAAA,OAAkB,WAAA;;iBAOrD,SAAA,CAAU,KAAA,EAAO,cAAA;gBAyBH,WAAA;;;;KAqB1B,mBAAA,GAAsB,UAAU,QAAQ,SAAA"}

package/dist/select/useSelect.js

@@ -30,5 +30,5 @@ function useSelect(props) {
 
 //#endregion
 export { useSelect as default, getOptionText };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=useSelect.js.map

package/dist/select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","names":[],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":["import { Children, isValidElement, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport { toggleItem, useCallbackRef } from '../utils'\nimport type { SelectOptionData, SelectValue } from './select.types'\nimport type { UseSelectProps } from './useSelect.types'\n\nexport const getOptionText = (value: SelectValue, options: SelectOptionData[]) => {\n  const option = options?.find((o: SelectOptionData) => o?.value === value)\n\n  return option?.text || value\n}\n\n/** Handles controlled/uncontrolled value state. Supports single and multiple values. */\nexport default function useSelect(props: UseSelectProps) {\n  const {\n    defaultValue,\n    isMultiple,\n    onChange: onChangeProp,\n    value: valueProp,\n    options = [],\n    selectedText,\n    children,\n  } = props\n\n  // Not using useControlled here, because we need custom value setter when uncontrolled\n  const [stateValue, setStateValue] = useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : stateValue\n\n  // Iterating over the children to dynamically obtain the list of available options\n  const dynamicOptions: SelectOptionData[] = []\n  Children.forEach(children, element => {\n    if (!isValidElement(element)) return\n    const option: SelectOptionData = element.props as SelectOptionData\n    if (option.text && option.value) dynamicOptions.push(option)\n  })\n\n  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */\n  const onChange = useCallbackRef((e: ChangeEvent) => {\n    onChangeProp?.(e)\n\n    if (!isControlled)\n      setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))\n  })\n\n  const valueText =\n    isMultiple && Array.isArray(value)\n      ? value[0]\n        ? selectedText && value.length > 1\n          ? selectedText\n          : `${getOptionText(value[0], [...options, ...dynamicOptions])}${\n              value.length > 1 ? ` (+${value.length - 1})` : ''\n            }`\n        : undefined\n      : getOptionText(value as SelectValue, [...options, ...dynamicOptions])\n\n  return { onChange, value, valueText }\n}\n\nexport type UseSelectReturnType = ReturnType<typeof useSelect>\n"],"mappings":";;;;;AAOA,MAAa,iBAAiB,OAAoB,YAAgC;CAGhF,QAFe,SAAS,MAAM,MAAwB,GAAG,UAAU,KAAK,CAAC,CAE5D,EAAE,QAAQ;AACzB;;AAGA,SAAwB,UAAU,OAAuB;CACvD,MAAM,EACJ,cACA,YACA,UAAU,cACV,OAAO,WACP,UAAU,CAAC,GACX,cACA,aACE;CAGJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;CACzD,MAAM,eAAe,cAAc;CACnC,MAAM,QAAQ,eAAe,YAAY;CAGzC,MAAM,iBAAqC,CAAC;CAC5C,SAAS,QAAQ,WAAU,YAAW;EACpC,IAAI,CAAC,eAAe,OAAO,GAAG;EAC9B,MAAM,SAA2B,QAAQ;EACzC,IAAI,OAAO,QAAQ,OAAO,OAAO,eAAe,KAAK,MAAM;CAC7D,CAAC;CAqBD,OAAO;EAAE,UAlBQ,gBAAgB,MAAmB;GAClD,eAAe,CAAC;GAEhB,IAAI,CAAC,cACH,eAAc,UAAU,MAAM,QAAQ,KAAK,IAAI,WAAW,OAAO,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,IAAI,EAAE,OAAO,KAAM;EAC7G,CAagB;EAAG;EAAO,WAVxB,cAAc,MAAM,QAAQ,KAAK,IAC7B,MAAM,KACJ,gBAAgB,MAAM,SAAS,IAC7B,eACA,GAAG,cAAc,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC,IACxD,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,EAAE,KAAK,OAEnD,SACF,cAAc,OAAsB,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC;CAErC;AACtC"}
+{"version":3,"file":"useSelect.js","names":[],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":["import { Children, isValidElement, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { SelectOptionData, SelectValue } from './select.types'\nimport type { UseSelectProps } from './useSelect.types'\n\nimport { toggleItem, useCallbackRef } from '../utils'\n\nexport const getOptionText = (value: SelectValue, options: SelectOptionData[]) => {\n  const option = options?.find((o: SelectOptionData) => o?.value === value)\n\n  return option?.text || value\n}\n\n/** Handles controlled/uncontrolled value state. Supports single and multiple values. */\nexport default function useSelect(props: UseSelectProps) {\n  const {\n    defaultValue,\n    isMultiple,\n    onChange: onChangeProp,\n    value: valueProp,\n    options = [],\n    selectedText,\n    children,\n  } = props\n\n  // Not using useControlled here, because we need custom value setter when uncontrolled\n  const [stateValue, setStateValue] = useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : stateValue\n\n  // Iterating over the children to dynamically obtain the list of available options\n  const dynamicOptions: SelectOptionData[] = []\n  Children.forEach(children, element => {\n    if (!isValidElement(element)) return\n    const option: SelectOptionData = element.props as SelectOptionData\n    if (option.text && option.value) dynamicOptions.push(option)\n  })\n\n  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */\n  const onChange = useCallbackRef((e: ChangeEvent) => {\n    onChangeProp?.(e)\n\n    if (!isControlled)\n      setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))\n  })\n\n  const valueText =\n    isMultiple && Array.isArray(value)\n      ? value[0]\n        ? selectedText && value.length > 1\n          ? selectedText\n          : `${getOptionText(value[0], [...options, ...dynamicOptions])}${\n              value.length > 1 ? ` (+${value.length - 1})` : ''\n            }`\n        : undefined\n      : getOptionText(value as SelectValue, [...options, ...dynamicOptions])\n\n  return { onChange, value, valueText }\n}\n\nexport type UseSelectReturnType = ReturnType<typeof useSelect>\n"],"mappings":";;;;;AAQA,MAAa,iBAAiB,OAAoB,YAAgC;CAGhF,QAFe,SAAS,MAAM,MAAwB,GAAG,UAAU,KAAK,EAE3D,EAAE,QAAQ;AACzB;;AAGA,SAAwB,UAAU,OAAuB;CACvD,MAAM,EACJ,cACA,YACA,UAAU,cACV,OAAO,WACP,UAAU,CAAC,GACX,cACA,aACE;CAGJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;CACzD,MAAM,eAAe,cAAc;CACnC,MAAM,QAAQ,eAAe,YAAY;CAGzC,MAAM,iBAAqC,CAAC;CAC5C,SAAS,QAAQ,WAAU,YAAW;EACpC,IAAI,CAAC,eAAe,OAAO,GAAG;EAC9B,MAAM,SAA2B,QAAQ;EACzC,IAAI,OAAO,QAAQ,OAAO,OAAO,eAAe,KAAK,MAAM;CAC7D,CAAC;CAqBD,OAAO;EAAE,UAlBQ,gBAAgB,MAAmB;GAClD,eAAe,CAAC;GAEhB,IAAI,CAAC,cACH,eAAc,UAAU,MAAM,QAAQ,KAAK,IAAI,WAAW,OAAO,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,IAAI,EAAE,OAAO,KAAM;EAC7G,CAagB;EAAG;EAAO,WAVxB,cAAc,MAAM,QAAQ,KAAK,IAC7B,MAAM,KACJ,gBAAgB,MAAM,SAAS,IAC7B,eACA,GAAG,cAAc,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC,IACxD,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,EAAE,KAAK,OAEnD,SACF,cAAc,OAAsB,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC;CAErC;AACtC"}

package/dist/sidemenu/context.js

@@ -5,5 +5,5 @@ const [SidemenuProvider, useSidemenuContext] = createContext({ isOptional: true
 
 //#endregion
 export { SidemenuProvider, useSidemenuContext };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=context.js.map

package/dist/sidemenu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/sidemenu/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [SidemenuProvider, useSidemenuContext] = createContext<Dict>({ isOptional: true })\n\nexport { SidemenuProvider, useSidemenuContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,kBAAkB,sBAAsB,cAAoB,EAAE,YAAY,KAAK,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/sidemenu/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\n\nimport { createContext } from '../utils'\n\nconst [SidemenuProvider, useSidemenuContext] = createContext<Dict>({ isOptional: true })\n\nexport { SidemenuProvider, useSidemenuContext }\n"],"mappings":";;;AAIA,MAAM,CAAC,kBAAkB,sBAAsB,cAAoB,EAAE,YAAY,KAAK,CAAC"}

package/dist/sidemenu/sidemenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"mappings":";;;;;;;cAea,QAAA,EA8FP,YAAA,QAAoB,aAAA;EACxB,GAAA,SAAY,WAAA;EACZ,IAAA,SAAa,YAAA;AAAA"}
+{"version":3,"file":"sidemenu.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"mappings":";;;;;;;cAgBa,QAAA,EA8FP,YAAA,QAAoB,aAAA;EACxB,GAAA,SAAY,WAAA;EACZ,IAAA,SAAa,YAAA;AAAA"}

package/dist/sidemenu/sidemenu.js

@@ -94,5 +94,5 @@ Sidemenu.displayName = "Sidemenu";
 
 //#endregion
 export { Sidemenu as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=sidemenu.js.map

package/dist/sidemenu/sidemenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.js","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, filterUndefined, isActivePath } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuProvider } from './context'\nimport type { SidemenuItemProps, SidemenuProps } from './sidemenu.types'\nimport SidemenuItem from './sidemenuItem'\nimport SidemenuTop from './sidemenuTop'\n\n/** A collapsible side menu for navigation. */\nexport const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    isExpanded = false,\n    isSticky = false,\n    size,\n    variant,\n    width = expandedWidth,\n    onNavigate,\n    ...rest\n  } = props\n\n  const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded)\n  const context = useMemo(\n    () => filterUndefined({ size, variant, isExpandedHorizontally }),\n    [size, variant, isExpandedHorizontally],\n  )\n\n  const styles = useStyleConfig('Sidemenu', props)\n\n  const isDark = variant === 'dark'\n\n  useEffect(() => {\n    setIsExpandedHorizontally(isExpanded)\n  }, [isExpanded])\n\n  const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)\n\n  const w = isExpandedHorizontally ? width : collapsedWidth\n  const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`\n  const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'\n\n  function onItemClick(item: SidemenuItemProps) {\n    item?.onClick?.()\n    if (item?.path) onNavigate?.(item.path)\n  }\n\n  return (\n    <SidemenuProvider value={context}>\n      <Box\n        className={cs('vui-sidemenu', className)}\n        elevation=\"3\"\n        flexDirection=\"column\"\n        minWidth={0}\n        overflowX=\"hidden\"\n        position={isSticky ? 'sticky' : 'static'}\n        ref={ref}\n        top={isSticky ? (top ? top : 0) : 'auto'}\n        transitionDuration=\"normal\"\n        w={w}\n        {...styles.container}\n        {...rest}\n      >\n        <Box\n          flexDirection=\"column\"\n          flexGrow={1}\n          justifyContent=\"flex-start\"\n          minW={expandedWidth}\n          overflowX=\"hidden\"\n          overflowY=\"auto\"\n          w=\"100%\"\n        >\n          {items\n            ? items?.map?.((item: SidemenuItemProps, key: number) => (\n                <SidemenuItem\n                  isActive={isActivePath(item?.path)}\n                  key={key}\n                  {...item}\n                  onClick={() => onItemClick(item)}\n                />\n              ))\n            : children}\n        </Box>\n        <Box className=\"vui-sidemenu-bottom\" w=\"100%\" {...styles.bottom}>\n          <Button\n            aria-label={isExpandedHorizontally ? 'Collapse' : 'Expand'}\n            borderRadius={0}\n            justifyContent={justifyContent}\n            minH={size === 'lg' ? '56px' : '40px'}\n            onClick={onToggle}\n            pl={0}\n            size=\"md\"\n            variant=\"tertiary\"\n            intent={isDark ? 'contrast' : 'brand'}\n            w=\"100%\"\n          >\n            <Icon name={icon} />\n          </Button>\n        </Box>\n      </Box>\n    </SidemenuProvider>\n  )\n}) as VuiComponent<'div', SidemenuProps> & {\n  Top: typeof SidemenuTop\n  Item: typeof SidemenuItem\n}\n\nSidemenu.Top = SidemenuTop\nSidemenu.Item = SidemenuItem\nSidemenu.displayName = 'Sidemenu'\n\nexport default Sidemenu\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,UACA,WACA,OACA,aAAa,OACb,WAAW,OACX,MACA,SACA,aACA,YACA,GAAG,SACD;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,UAAU;CAC/E,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAM;EAAS;CAAuB,CAAC,GAC/D;EAAC;EAAM;EAAS;CAAsB,CACxC;CAEA,MAAM,SAAS,eAAe,YAAY,KAAK;CAE/C,MAAM,SAAS,YAAY;CAE3B,gBAAgB;EACd,0BAA0B,UAAU;CACtC,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,iBAAiB,0BAA0B,CAAC,sBAAsB;CAExE,MAAM,IAAI,yBAAyB;CACnC,MAAM,OAAO,WAAW,yBAAyB,SAAS;CAC1D,MAAM,iBAAiB,yBAAyB,aAAa;CAE7D,SAAS,YAAY,MAAyB;EAC5C,MAAM,UAAU;EAChB,IAAI,MAAM,MAAM,aAAa,KAAK,IAAI;CACxC;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,qBAAC,KAAD;GACE,WAAW,GAAG,gBAAgB,SAAS;GACvC,WAAU;GACV,eAAc;GACd,UAAU;GACV,WAAU;GACV,UAAU,WAAW,WAAW;GAC3B;GACL,KAAK,WAAY,MAAM,MAAM,IAAK;GAClC,oBAAmB;GAChB;GACH,GAAI,OAAO;GACX,GAAI;aAZN,CAcE,oBAAC,KAAD;IACE,eAAc;IACd,UAAU;IACV,gBAAe;IACf;IACA,WAAU;IACV,WAAU;IACV,GAAE;cAED,QACG,OAAO,OAAO,MAAyB,QACrC,oBAAC,cAAD;KACE,UAAU,aAAa,MAAM,IAAI;KAEjC,GAAI;KACJ,eAAe,YAAY,IAAI;IAChC,GAHM,GAGN,CACF,IACD;GACD,IACL,oBAAC,KAAD;IAAK,WAAU;IAAsB,GAAE;IAAO,GAAI,OAAO;cACvD,oBAAC,QAAD;KACE,cAAY,yBAAyB,aAAa;KAClD,cAAc;KACE;KAChB,MAAM,SAAS,OAAO,SAAS;KAC/B,SAAS;KACT,IAAI;KACJ,MAAK;KACL,SAAQ;KACR,QAAQ,SAAS,aAAa;KAC9B,GAAE;eAEF,oBAAC,MAAD,EAAM,MAAM,KAAO;IACb;GACL,EACF;;CACW;AAEtB,CAAC;AAKD,SAAS,MAAM;AACf,SAAS,OAAO;AAChB,SAAS,cAAc"}
+{"version":3,"file":"sidemenu.js","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SidemenuItemProps, SidemenuProps } from './sidemenu.types'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, filterUndefined, isActivePath } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuProvider } from './context'\nimport SidemenuItem from './sidemenuItem'\nimport SidemenuTop from './sidemenuTop'\n\n/** A collapsible side menu for navigation. */\nexport const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    isExpanded = false,\n    isSticky = false,\n    size,\n    variant,\n    width = expandedWidth,\n    onNavigate,\n    ...rest\n  } = props\n\n  const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded)\n  const context = useMemo(\n    () => filterUndefined({ size, variant, isExpandedHorizontally }),\n    [size, variant, isExpandedHorizontally],\n  )\n\n  const styles = useStyleConfig('Sidemenu', props)\n\n  const isDark = variant === 'dark'\n\n  useEffect(() => {\n    setIsExpandedHorizontally(isExpanded)\n  }, [isExpanded])\n\n  const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)\n\n  const w = isExpandedHorizontally ? width : collapsedWidth\n  const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`\n  const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'\n\n  function onItemClick(item: SidemenuItemProps) {\n    item?.onClick?.()\n    if (item?.path) onNavigate?.(item.path)\n  }\n\n  return (\n    <SidemenuProvider value={context}>\n      <Box\n        className={cs('vui-sidemenu', className)}\n        elevation=\"3\"\n        flexDirection=\"column\"\n        minWidth={0}\n        overflowX=\"hidden\"\n        position={isSticky ? 'sticky' : 'static'}\n        ref={ref}\n        top={isSticky ? (top ? top : 0) : 'auto'}\n        transitionDuration=\"normal\"\n        w={w}\n        {...styles.container}\n        {...rest}\n      >\n        <Box\n          flexDirection=\"column\"\n          flexGrow={1}\n          justifyContent=\"flex-start\"\n          minW={expandedWidth}\n          overflowX=\"hidden\"\n          overflowY=\"auto\"\n          w=\"100%\"\n        >\n          {items\n            ? items?.map?.((item: SidemenuItemProps, key: number) => (\n                <SidemenuItem\n                  isActive={isActivePath(item?.path)}\n                  key={key}\n                  {...item}\n                  onClick={() => onItemClick(item)}\n                />\n              ))\n            : children}\n        </Box>\n        <Box className=\"vui-sidemenu-bottom\" w=\"100%\" {...styles.bottom}>\n          <Button\n            aria-label={isExpandedHorizontally ? 'Collapse' : 'Expand'}\n            borderRadius={0}\n            justifyContent={justifyContent}\n            minH={size === 'lg' ? '56px' : '40px'}\n            onClick={onToggle}\n            pl={0}\n            size=\"md\"\n            variant=\"tertiary\"\n            intent={isDark ? 'contrast' : 'brand'}\n            w=\"100%\"\n          >\n            <Icon name={icon} />\n          </Button>\n        </Box>\n      </Box>\n    </SidemenuProvider>\n  )\n}) as VuiComponent<'div', SidemenuProps> & {\n  Top: typeof SidemenuTop\n  Item: typeof SidemenuItem\n}\n\nSidemenu.Top = SidemenuTop\nSidemenu.Item = SidemenuItem\nSidemenu.displayName = 'Sidemenu'\n\nexport default Sidemenu\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,UACA,WACA,OACA,aAAa,OACb,WAAW,OACX,MACA,SACA,aACA,YACA,GAAG,SACD;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,UAAU;CAC/E,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAM;EAAS;CAAuB,CAAC,GAC/D;EAAC;EAAM;EAAS;CAAsB,CACxC;CAEA,MAAM,SAAS,eAAe,YAAY,KAAK;CAE/C,MAAM,SAAS,YAAY;CAE3B,gBAAgB;EACd,0BAA0B,UAAU;CACtC,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,iBAAiB,0BAA0B,CAAC,sBAAsB;CAExE,MAAM,IAAI,yBAAyB;CACnC,MAAM,OAAO,WAAW,yBAAyB,SAAS;CAC1D,MAAM,iBAAiB,yBAAyB,aAAa;CAE7D,SAAS,YAAY,MAAyB;EAC5C,MAAM,UAAU;EAChB,IAAI,MAAM,MAAM,aAAa,KAAK,IAAI;CACxC;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,qBAAC,KAAD;GACE,WAAW,GAAG,gBAAgB,SAAS;GACvC,WAAU;GACV,eAAc;GACd,UAAU;GACV,WAAU;GACV,UAAU,WAAW,WAAW;GAC3B;GACL,KAAK,WAAY,MAAM,MAAM,IAAK;GAClC,oBAAmB;GAChB;GACH,GAAI,OAAO;GACX,GAAI;aAZN,CAcE,oBAAC,KAAD;IACE,eAAc;IACd,UAAU;IACV,gBAAe;IACf;IACA,WAAU;IACV,WAAU;IACV,GAAE;cAED,QACG,OAAO,OAAO,MAAyB,QACrC,oBAAC,cAAD;KACE,UAAU,aAAa,MAAM,IAAI;KAEjC,GAAI;KACJ,eAAe,YAAY,IAAI;IAChC,GAHM,GAGN,CACF,IACD;GACD,IACL,oBAAC,KAAD;IAAK,WAAU;IAAsB,GAAE;IAAO,GAAI,OAAO;cACvD,oBAAC,QAAD;KACE,cAAY,yBAAyB,aAAa;KAClD,cAAc;KACE;KAChB,MAAM,SAAS,OAAO,SAAS;KAC/B,SAAS;KACT,IAAI;KACJ,MAAK;KACL,SAAQ;KACR,QAAQ,SAAS,aAAa;KAC9B,GAAE;eAEF,oBAAC,MAAD,EAAM,MAAM,KAAO;IACb;GACL,EACF;;CACW;AAEtB,CAAC;AAKD,SAAS,MAAM;AACf,SAAS,OAAO;AAChB,SAAS,cAAc"}

package/dist/sidemenu/sidemenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"mappings":";;;;;cAgBa,YAAA,EAuGP,YAAY,QAAQ,iBAAA"}
+{"version":3,"file":"sidemenuItem.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"mappings":";;;;;cAkBa,YAAA,EAuGP,YAAY,QAAQ,iBAAA"}

package/dist/sidemenu/sidemenuItem.js

@@ -112,5 +112,5 @@ SidemenuItem.displayName = "SidemenuItem";
 
 //#endregion
 export { SidemenuItem as default };
-globalThis.__vuiVersion__ = "5.2.2"
+globalThis.__vuiVersion__ = "5.2.3"
 //# sourceMappingURL=sidemenuItem.js.map