@veracity/vui 3.2.0 → 4.0.0-floatinguitake3.2154362

package/dist/radio/radio.d.ts

@@ -17,10 +17,10 @@ import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightP
 import { VuiComponent } from "../core/vui.js";
 import { RadioProps, RadioStyleProps } from "./radio.types.js";
 import "../index.js";
-import * as styled_components410 from "styled-components";
+import * as styled_components17 from "styled-components";
 
 //#region src/radio/radio.d.ts
-declare const RadioBase: styled_components410.StyledComponent<"label", styled_components410.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & RadioStyleProps, never>;
+declare const RadioBase: styled_components17.StyledComponent<"label", styled_components17.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & RadioStyleProps, never>;
 /**
  * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
  * Uses icons to display itself in different states.
@@ -28,4 +28,5 @@ declare const RadioBase: styled_components410.StyledComponent<"label", styled_co
 declare const Radio: VuiComponent<"span", RadioProps>;
 //#endregion
 export { Radio, RadioBase };
+
 //# sourceMappingURL=radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;cAiCa,WAAS,mBAAA,CAAA,yBAsBrB,mBAAA,CAtBqB,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA;;;;;cA4BT,OAAK,qBAAA"}

package/dist/radio/radio.js

@@ -59,16 +59,16 @@ const RadioBase = styled.labelBox`
 * Uses icons to display itself in different states.
 */
 const Radio = vui((props, ref) => {
-	const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue,...radioGroupProps } = useRadioGroupContext() ?? {};
+	const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue, ...radioGroupProps } = useRadioGroupContext() ?? {};
 	const defaultIsChecked = groupIsChecked !== void 0 ? groupIsChecked === props.value : void 0;
 	const mergedProps = {
 		...radioGroupProps,
 		...props
 	};
-	const { checked = groupValue !== void 0 ? props.value === groupValue : void 0, children, className, defaultChecked = groupDefaultValue !== void 0 ? props.value === groupDefaultValue : void 0, disabled: disabled$1, icon: iconProp = "uiRadioUnselected", iconChecked = "uiRadioSelected", id, inputProps, inputRef, label, name, onChange, required, value,...rest } = omitThemingProps(mergedProps);
+	const { checked = groupValue !== void 0 ? props.value === groupValue : void 0, children, className, defaultChecked = groupDefaultValue !== void 0 ? props.value === groupDefaultValue : void 0, disabled: disabled$1, icon: iconProp = "uiRadioUnselected", iconChecked = "uiRadioSelected", id, inputProps, inputRef, label, name, onChange, required, value, ...rest } = omitThemingProps(mergedProps);
 	const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked);
 	const styles = useStyleConfig("Radio", mergedProps);
-	const { color: controlColor, hoverColor,...controlStyles } = styles.control;
+	const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
 	const icon = isChecked ? iconChecked : iconProp;
 	const controlMr = children || label ? 1 : 0;
 	const color = isChecked ? radioColors.checked : controlColor;
@@ -126,5 +126,5 @@ Radio.displayName = "Radio";
 
 //#endregion
 export { Radio, RadioBase };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":["disabled","Icon","T"],"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,kBAAkB,CAAC;;;;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,WACP,GAAG,oBACD,sBAAsB,IAAI,EAAE;CAChC,MAAM,mBAAmB,mBAAmB,SAAY,mBAAmB,MAAM,QAAQ;CAEzF,MAAM,cAAc;EAAE,GAAG;EAAiB,GAAG;EAAO;CACpD,MAAM,EACJ,UAAU,eAAe,SAAY,MAAM,UAAU,aAAa,QAClE,UACA,WACA,iBAAiB,sBAAsB,SAAY,MAAM,UAAU,oBAAoB,QACvF,sBACA,MAAM,WAAW,qBACjB,cAAc,mBACd,IACA,YACA,UACA,OACA,MACA,UACA,UACA,MACA,GAAG,SACD,iBAAiB,YAAY;CAEjC,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,WAAW,eAAe;CACzF,MAAM,SAAS,eAAe,SAAS,YAAY;CACnD,MAAM,EAAE,OAAO,cAAc,WAAY,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;AAEhE,iBAAgB;AACd,MAAI,mBAAmB,OAAW,cAAa,mBAAmB,MAAM;WAC/D,YAAY,OAAW,cAAa,QAAQ;IACpD,CAAC,SAAS,eAAe,CAAC;CAE7B,SAAS,eAAe,GAAuC;AAC7D,kBAAgB,EAAE;AAClB,aAAW,EAA4B;;CAGzC,MAAM,eAAe,gBAAgB,EACnC,iBAAiBA,YAClB,CAAC;AAEF,QACE,qBAAC;EACC,WAAW,GAAG,aAAa,UAAU;EAClB;EACd;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;aAEJ,qBAAC;GACC,IAAG;GACH,WAAU;GACH;GACP,iBAAiB;GACjB,IAAI;GACJ,GAAI;cAEJ,oBAAC;IACC,WAAU;IACV,SAAS;IACT,KAAK;IACL,MAAK;IACC,gBAAgB;IAAS;IAAU;IAAI;IAAM;IAAU;IAC7D,GAAI;KACJ,EACF,oBAACC;IAAK,WAAU;IAAgB,GAAE;IAAO,MAAM;IAAM,GAAE;KAAS;IACnD,EAEd,aACE,SACC,oBAACC;GAAE,WAAU;GAAiB,YAAW;GAAS,GAAI,OAAO;aAC1D;IACC;GAEE;EAEd;AAEF,MAAM,cAAc"}
+{"version":3,"file":"radio.js","names":["disabled","Icon","T"],"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,kBAAkB,CAAC;;;;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,sBAAsB,IAAI,EAAE;CAChC,MAAM,mBAAmB,mBAAmB,SAAY,mBAAmB,MAAM,QAAQ;CAEzF,MAAM,cAAc;EAAE,GAAG;EAAiB,GAAG;EAAO;CACpD,MAAM,EACJ,UAAU,eAAe,SAAY,MAAM,UAAU,aAAa,QAClE,UACA,WACA,iBAAiB,sBAAsB,SAAY,MAAM,UAAU,oBAAoB,QACvF,sBACA,MAAM,WAAW,qBACjB,cAAc,mBACd,IACA,YACA,UACA,OACA,MACA,UACA,UACA,OACA,GAAG,SACD,iBAAiB,YAAY;CAEjC,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,WAAW,eAAe;CACzF,MAAM,SAAS,eAAe,SAAS,YAAY;CACnD,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;AAEhE,iBAAgB;AACd,MAAI,mBAAmB,OAAW,cAAa,mBAAmB,MAAM;WAC/D,YAAY,OAAW,cAAa,QAAQ;IACpD,CAAC,SAAS,eAAe,CAAC;CAE7B,SAAS,eAAe,GAAuC;AAC7D,kBAAgB,EAAE;AAClB,aAAW,EAA4B;;CAGzC,MAAM,eAAe,gBAAgB,EACnC,iBAAiBA,YAClB,CAAC;AAEF,QACE,qBAAC;EACC,WAAW,GAAG,aAAa,UAAU;EAClB;EACd;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;aAEJ,qBAAC;GACC,IAAG;GACH,WAAU;GACH;GACP,iBAAiB;GACjB,IAAI;GACJ,GAAI;cAEJ,oBAAC;IACC,WAAU;IACV,SAAS;IACT,KAAK;IACL,MAAK;IACC,gBAAgB;IAAS;IAAU;IAAI;IAAM;IAAU;IAC7D,GAAI;KACJ,EACF,oBAACC;IAAK,WAAU;IAAgB,GAAE;IAAO,MAAM;IAAM,GAAE;KAAS;IACnD,EAEd,aACE,SACC,oBAACC;GAAE,WAAU;GAAiB,YAAW;GAAS,GAAI,OAAO;aAC1D;IACC;GAEE;EAEd;AAEF,MAAM,cAAc"}

package/dist/radio/radio.types.d.ts

@@ -44,4 +44,5 @@ type RadioStyleProps = {
 };
 //#endregion
 export { RadioProps, RadioStyleProps };
+
 //# sourceMappingURL=radio.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.types.d.ts","names":[],"sources":["../../src/radio/radio.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAOY,UAAA,CAAA,CAAA,CAAa,cACvB;;;;;EADU,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,KAAA,CAAA,GAAA,CAAA,OAAA,CAAA,QAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAAa,QAAA,CAAA,CAAA,CAAA,OAAA;EACvB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,eAAA,CAAA,CAAA;EAQS,IAAA,CAAA,CAAA,CAAA,QAAA;EAEO,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,CAAA;EAEc,WAAA,CAAA,CAAA,CAFd,QAEc;EAAf,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAEqB,UAAA,CAAA,CAAA,CAFrB,cAEqB,CAFN,gBAEM,CAAA;EAAvB,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAMF,QAAA,CAAA,CAAA,CANE,KAAA,CAAM,gBAMR,CANyB,gBAMzB,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAEE,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAED,KAAA,CAAA,CAAA,CAAA,MAAA;EAAiB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAOnB,IAAA,CAAA,CAAA,CAAA,MAAA;;WAXC;;aAEE;;YAED;;;;;;KAOF,eAAA,CAAA,CAAA"}
+{"version":3,"file":"radio.types.d.ts","names":[],"sources":["../../src/radio/radio.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAOY,UAAA,GAAa,cACvB;;;;;EADU;EAAa,QAAA,CAAA,EAAA,OAAA;EACvB;EAQS,IAAA,CAAA,EAAA,QAAA;EAEO;EAEc,WAAA,CAAA,EAFd,QAEc;EAAf;EAEqB,UAAA,CAAA,EAFrB,cAEqB,CAFN,gBAEM,CAAA;EAAvB;EAMF,QAAA,CAAA,EANE,KAAA,CAAM,gBAMR,CANyB,gBAMzB,GAAA,IAAA,CAAA,GAAA,IAAA;EAEE;EAED,KAAA,CAAA,EAAA,MAAA;EAAiB;EAOnB,IAAA,CAAA,EAAA,MAAA;;WAXC;;aAEE;;YAED;;;;;;KAOF,eAAA"}

package/dist/radio/radioGroup.d.ts

@@ -2,10 +2,10 @@ import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { RadioGroupProps } from "./radioGroup.types.js";
 import "../index.js";
-import * as styled_components408 from "styled-components";
+import * as styled_components19 from "styled-components";
 
 //#region src/radio/radioGroup.d.ts
-declare const RadioGroupBase: styled_components408.StyledComponent<"div", styled_components408.DefaultTheme, SystemProps, never>;
+declare const RadioGroupBase: styled_components19.StyledComponent<"div", styled_components19.DefaultTheme, SystemProps, never>;
 /**
  * Organizes layout and display of multiple radio buttons as a row or column.
  * Exposes some props to the children via context.
@@ -13,4 +13,5 @@ declare const RadioGroupBase: styled_components408.StyledComponent<"div", styled
 declare const RadioGroup: VuiComponent<"div", RadioGroupProps>;
 //#endregion
 export { RadioGroup, RadioGroupBase };
+
 //# sourceMappingURL=radioGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.d.ts","names":[],"sources":["../../src/radio/radioGroup.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAQa,gBAAc,oBAAA,CAAA,uBAI1B,oBAAA,CAJ0B,YAAA,CAAA,CAAA,WAAA,CAAA;;;;;cAUd,YAAU,oBAAA"}
+{"version":3,"file":"radioGroup.d.ts","names":[],"sources":["../../src/radio/radioGroup.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAQa,gBAAc,mBAAA,CAAA,uBAI1B,mBAAA,CAJ0B,YAAA,EAAA,WAAA;;;;;cAUd,YAAU,oBAAA"}

package/dist/radio/radioGroup.js

@@ -17,7 +17,7 @@ const RadioGroupBase = styled.divBox`
 * Exposes some props to the children via context.
 */
 const RadioGroup = vui((props, ref) => {
-	const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant,...rest } = props;
+	const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } = props;
 	const [isChecked, setIsChecked] = useState(value ?? defaultValue);
 	const handleOnChange = useCallback((e) => {
 		setIsChecked(e.target.value);
@@ -61,5 +61,5 @@ RadioGroup.displayName = "RadioGroup";
 
 //#endregion
 export { RadioGroup, RadioGroupBase };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# 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,QAAS,GAAG,SAC1G;CACF,MAAM,CAAC,WAAW,gBAAgB,SAAS,SAAS,aAAa;CAEjE,MAAM,iBAAiB,aACpB,MAAmB;AAClB,eAAa,EAAE,OAAO,MAAM;AAC5B,aAAW,EAAE;IAEf,CAAC,SAAS,CACX;CAED,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACD,CAAC,EACJ;EAAC;EAAc;EAAU;EAAgB;EAAW;EAAM;EAAQ;EAAS;EAAM;EAAO;EAAQ,CACjG;CAED,MAAM,eAAe,gBAAgB,EACnC,eAAe,QAAQ,QAAQ,QAChC,CAAU;AAEX,QACE,oBAAC;EAAmB,OAAO;YACzB,oBAAC;GAAe,WAAW,GAAG,kBAAkB,UAAU;GAAO;GAAK,GAAI;GAAc,GAAI;IAAQ;GACjF;EAEvB;AAEF,WAAW,cAAc"}
+{"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,aAAa;CAEjE,MAAM,iBAAiB,aACpB,MAAmB;AAClB,eAAa,EAAE,OAAO,MAAM;AAC5B,aAAW,EAAE;IAEf,CAAC,SAAS,CACX;CAED,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACD,CAAC,EACJ;EAAC;EAAc;EAAU;EAAgB;EAAW;EAAM;EAAQ;EAAS;EAAM;EAAO;EAAQ,CACjG;CAED,MAAM,eAAe,gBAAgB,EACnC,eAAe,QAAQ,QAAQ,QAChC,CAAU;AAEX,QACE,oBAAC;EAAmB,OAAO;YACzB,oBAAC;GAAe,WAAW,GAAG,kBAAkB,UAAU;GAAO;GAAK,GAAI;GAAc,GAAI;IAAQ;GACjF;EAEvB;AAEF,WAAW,cAAc"}

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

@@ -25,4 +25,5 @@ type RadioGroupProps = SystemProps & ThemingProps<'Radio'> & {
 };
 //#endregion
 export { RadioGroupProps };
+
 //# sourceMappingURL=radioGroup.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.types.d.ts","names":[],"sources":["../../src/radio/radioGroup.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAIY,eAAA,CAAA,CAAA,CAAkB,cAC5B;;;;EADU,QAAA,CAAA,CAAA,CAAA,OAAe;EAAG,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,KAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;EAC5B,KAAA,CAAA,CAAA,CAAA,OAAA;EAUW,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA;EAEE,IAAA,CAAA,CAAA,CAAA,MAAA;EAED,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA;EAAiB,MAAA,CAAA,CAAA,CAJlB,iBAIkB;;aAFhB;;YAED"}
+{"version":3,"file":"radioGroup.types.d.ts","names":[],"sources":["../../src/radio/radioGroup.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAIY,eAAA,GAAkB,cAC5B;;;;EADU,QAAA,CAAA,EAAA,OAAe;EAAG;EAC5B,KAAA,CAAA,EAAA,OAAA;EAUW;EAEE,IAAA,CAAA,EAAA,MAAA;EAED;EAAiB,MAAA,CAAA,EAJlB,iBAIkB;;aAFhB;;YAED"}

package/dist/radio/theme.js

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

package/dist/range/consts.js

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

package/dist/range/index.d.ts

@@ -1,2 +1,2 @@
 import { RangeProps, RangeTrackKey, RangeValue } from "./range.types.js";
-import { Range } from "./range.js";
+import { Range } from "./range.js";

package/dist/range/range.d.ts

@@ -7,4 +7,5 @@ import "../index.js";
 declare const Range: VuiComponent<"div", RangeProps>;
 //#endregion
 export { Range };
+
 //# sourceMappingURL=range.d.ts.map

package/dist/range/range.js

@@ -19,7 +19,7 @@ const SliderBase = styled(ReactSlider)`
 const defaultFormatter = (value) => `${value}`;
 /** Implements a range input. */
 const Range = vui((props, ref) => {
-	const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip = false, showValue = false, formatter = defaultFormatter, onChange,...rest } = props;
+	const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip = false, showValue = false, formatter = defaultFormatter, onChange, ...rest } = props;
 	const styles = useStyleConfig("Range", props);
 	const aliasedProps = filterUndefined({ "aria-disabled": disabled });
 	const isSingleValue = typeof defaultValue !== "object" && typeof value !== "object";
@@ -81,5 +81,5 @@ Range.displayName = "Range";
 
 //#endregion
 export { Range };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=range.js.map

package/dist/range/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","names":["props"],"sources":["../../src/range/range.tsx"],"sourcesContent":["import ReactSlider from 'react-slider'\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'\nimport type { RangeTrackKey } from './range.types'\n\nconst SliderBase = styled(ReactSlider)`\n  width: 100%;\n  height: 4px;\n  cursor: pointer;\n  transition-duration: '0s';\n`\n\nconst defaultFormatter = (value: string) => `${value}`\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 = false,\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 getTrackColor = (trackProps: any) => {\n    const { key }: { key: RangeTrackKey } = trackProps\n\n    if (isSingleValue) return key === 'track-0' ? mainColor : rangeColors.track\n\n    return key === 'track-2' ? rangeColors.track : key === 'track-1' ? mainColor : rangeColors.track\n  }\n\n  const Thumb = (props: any, state: any) => {\n    const content = (\n      <Box className=\"vui-range-thumb\" {...styles.thumb} borderColor={mainColor} {...props}>\n        {showValue && (\n          <Box center className=\"vui-range-thumb-value\" {...styles.thumbValue}>\n            {formatter(state.valueNow)}\n          </Box>\n        )}\n      </Box>\n    )\n    return showValue ? (\n      content\n    ) : (\n      <Tooltip key={state.index} disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>\n        {content}\n      </Tooltip>\n    )\n  }\n\n  const Track = (\n    props: any,\n    state: {\n      index: number\n      value: number | readonly number[]\n    },\n  ) => <Box {...styles.track} bg={getTrackColor(props)} className=\"vui-range-track\" {...props} index={state.index} />\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      <SliderBase\n        key={`${defaultValue}-${value}-${disabled}-${min}-${max}-${step}`}\n        className=\"vui-range-slider\"\n        defaultValue={defaultValue}\n        disabled={disabled}\n        max={max}\n        min={min}\n        minDistance={minDistance}\n        onChange={onChange}\n        renderThumb={Thumb}\n        renderTrack={Track}\n        step={step}\n        value={value}\n      />\n    </Box>\n  )\n})\n\nRange.displayName = 'Range'\nexport default Range\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,YAAY;;;;;;AAOtC,MAAM,oBAAoB,UAAkB,GAAG;;AAG/C,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,WACA,OACA,eAAe,GACf,UACA,MAAM,GACN,cAAc,GACd,MAAM,KACN,OAAO,GACP,cAAc,OACd,YAAY,OACZ,YAAY,kBACZ,SACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,SAAS,MAAM;CAC7C,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,UAClB,CAAC;CACF,MAAM,gBAAgB,OAAO,iBAAiB,YAAY,OAAO,UAAU;CAC3E,MAAM,YAAY,WAAW,YAAY,WAAW,YAAY;CAEhE,MAAM,iBAAiB,eAAoB;EACzC,MAAM,EAAE,QAAgC;AAExC,MAAI,cAAe,QAAO,QAAQ,YAAY,YAAY,YAAY;AAEtE,SAAO,QAAQ,YAAY,YAAY,QAAQ,QAAQ,YAAY,YAAY,YAAY;;CAG7F,MAAM,SAAS,SAAY,UAAe;EACxC,MAAM,UACJ,oBAAC;GAAI,WAAU;GAAkB,GAAI,OAAO;GAAO,aAAa;GAAW,GAAIA;aAC5E,aACC,oBAAC;IAAI;IAAO,WAAU;IAAwB,GAAI,OAAO;cACtD,UAAU,MAAM,SAAS;KACtB;IAEJ;AAER,SAAO,YACL,UAEA,oBAAC;GAAoC;GAAU,MAAM,UAAU,MAAM,SAAS;GAAE,SAAS;aACtF;KADW,MAAM,MAEV;;CAId,MAAM,SACJ,SACA,UAIG,oBAAC;EAAI,GAAI,OAAO;EAAO,IAAI,cAAcA,QAAM;EAAE,WAAU;EAAkB,GAAIA;EAAO,OAAO,MAAM;GAAS;AAEnH,QACE,oBAAC;EACC,WAAW,GAAG,aAAa,gBAAgB,qBAAqB,mBAAmB,UAAU;EACxF;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEJ,oBAAC;GAEC,WAAU;GACI;GACJ;GACL;GACA;GACQ;GACH;GACV,aAAa;GACb,aAAa;GACP;GACC;KAXF,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,OAY3D;GACE;EAER;AAEF,MAAM,cAAc"}
+{"version":3,"file":"range.js","names":["props"],"sources":["../../src/range/range.tsx"],"sourcesContent":["import ReactSlider from 'react-slider'\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'\nimport type { RangeTrackKey } from './range.types'\n\nconst SliderBase = styled(ReactSlider)`\n  width: 100%;\n  height: 4px;\n  cursor: pointer;\n  transition-duration: '0s';\n`\n\nconst defaultFormatter = (value: string) => `${value}`\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 = false,\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 getTrackColor = (trackProps: any) => {\n    const { key }: { key: RangeTrackKey } = trackProps\n\n    if (isSingleValue) return key === 'track-0' ? mainColor : rangeColors.track\n\n    return key === 'track-2' ? rangeColors.track : key === 'track-1' ? mainColor : rangeColors.track\n  }\n\n  const Thumb = (props: any, state: any) => {\n    const content = (\n      <Box className=\"vui-range-thumb\" {...styles.thumb} borderColor={mainColor} {...props}>\n        {showValue && (\n          <Box center className=\"vui-range-thumb-value\" {...styles.thumbValue}>\n            {formatter(state.valueNow)}\n          </Box>\n        )}\n      </Box>\n    )\n    return showValue ? (\n      content\n    ) : (\n      <Tooltip key={state.index} disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>\n        {content}\n      </Tooltip>\n    )\n  }\n\n  const Track = (\n    props: any,\n    state: {\n      index: number\n      value: number | readonly number[]\n    },\n  ) => <Box {...styles.track} bg={getTrackColor(props)} className=\"vui-range-track\" {...props} index={state.index} />\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      <SliderBase\n        key={`${defaultValue}-${value}-${disabled}-${min}-${max}-${step}`}\n        className=\"vui-range-slider\"\n        defaultValue={defaultValue}\n        disabled={disabled}\n        max={max}\n        min={min}\n        minDistance={minDistance}\n        onChange={onChange}\n        renderThumb={Thumb}\n        renderTrack={Track}\n        step={step}\n        value={value}\n      />\n    </Box>\n  )\n})\n\nRange.displayName = 'Range'\nexport default Range\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,YAAY;;;;;;AAOtC,MAAM,oBAAoB,UAAkB,GAAG;;AAG/C,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,WACA,OACA,eAAe,GACf,UACA,MAAM,GACN,cAAc,GACd,MAAM,KACN,OAAO,GACP,cAAc,OACd,YAAY,OACZ,YAAY,kBACZ,UACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,SAAS,MAAM;CAC7C,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,UAClB,CAAC;CACF,MAAM,gBAAgB,OAAO,iBAAiB,YAAY,OAAO,UAAU;CAC3E,MAAM,YAAY,WAAW,YAAY,WAAW,YAAY;CAEhE,MAAM,iBAAiB,eAAoB;EACzC,MAAM,EAAE,QAAgC;AAExC,MAAI,cAAe,QAAO,QAAQ,YAAY,YAAY,YAAY;AAEtE,SAAO,QAAQ,YAAY,YAAY,QAAQ,QAAQ,YAAY,YAAY,YAAY;;CAG7F,MAAM,SAAS,SAAY,UAAe;EACxC,MAAM,UACJ,oBAAC;GAAI,WAAU;GAAkB,GAAI,OAAO;GAAO,aAAa;GAAW,GAAIA;aAC5E,aACC,oBAAC;IAAI;IAAO,WAAU;IAAwB,GAAI,OAAO;cACtD,UAAU,MAAM,SAAS;KACtB;IAEJ;AAER,SAAO,YACL,UAEA,oBAAC;GAAoC;GAAU,MAAM,UAAU,MAAM,SAAS;GAAE,SAAS;aACtF;KADW,MAAM,MAEV;;CAId,MAAM,SACJ,SACA,UAIG,oBAAC;EAAI,GAAI,OAAO;EAAO,IAAI,cAAcA,QAAM;EAAE,WAAU;EAAkB,GAAIA;EAAO,OAAO,MAAM;GAAS;AAEnH,QACE,oBAAC;EACC,WAAW,GAAG,aAAa,gBAAgB,qBAAqB,mBAAmB,UAAU;EACxF;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEJ,oBAAC;GAEC,WAAU;GACI;GACJ;GACL;GACA;GACQ;GACH;GACV,aAAa;GACb,aAAa;GACP;GACC;KAXF,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,OAY3D;GACE;EAER;AAEF,MAAM,cAAc"}

package/dist/range/range.types.d.ts

@@ -31,4 +31,5 @@ type RangeProps = SystemProps & ThemingProps<'Range'> & {
 type RangeTrackKey = 'track-0' | 'track-1' | 'track-2';
 //#endregion
 export { RangeProps, RangeTrackKey, RangeValue };
+
 //# sourceMappingURL=range.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"range.types.d.ts","names":[],"sources":["../../src/range/range.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,UAAA,CAAA,CAAA;KAEA,UAAA,CAAA,CAAA,CAAa,cACvB;;EAHU,YAAA,CAAU,CAAA,CAKH,UALG;EAEV,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA,MAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA;EAAa,KAAA,CAAA,CAAA,CAKb,UALa;EACvB,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA;EAEiB,QAAA,CAAA,CAAA,CAAA,OAAA;EAEP,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA;EAkBW,GAAA,CAAA,CAAA,CAAA,MAAA;EAAU,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA;EAGrB,GAAA,CAAA,CAAA,CAAA,MAAA;;;;;;;;;;;;qBAHW;;KAGX,aAAA,CAAA,CAAA"}
+{"version":3,"file":"range.types.d.ts","names":[],"sources":["../../src/range/range.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,UAAA;KAEA,UAAA,GAAa,cACvB;;EAHU,YAAA,CAAU,EAKH,UALG;EAEV;EAAa,KAAA,CAAA,EAKb,UALa;EACvB;EAEiB,QAAA,CAAA,EAAA,OAAA;EAEP;EAkBW,GAAA,CAAA,EAAA,MAAA;EAAU;EAGrB,GAAA,CAAA,EAAA,MAAA;;;;;;;;;;;;qBAHW;;KAGX,aAAA"}

package/dist/range/theme.js

@@ -47,5 +47,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/rating/index.d.ts

@@ -1 +1 @@
-import { Rating } from "./rating.js";
+import { Rating } from "./rating.js";

package/dist/rating/rating.d.ts

@@ -6,4 +6,5 @@ import "../index.js";
 declare const Rating: VuiComponent<"div", RatingProps>;
 //#endregion
 export { Rating };
+
 //# sourceMappingURL=rating.d.ts.map

package/dist/rating/rating.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/rating/rating.tsx
 const Rating = vui((props, ref) => {
-	const { value: propValue = 0, isDisabled = false, max: propMax, onChange, showAll: showAllProp = true, variant = "yellow", size,...rest } = props;
+	const { value: propValue = 0, isDisabled = false, max: propMax, onChange, showAll: showAllProp = true, variant = "yellow", size, ...rest } = props;
 	const [hoverValue, setHoverValue] = useState(null);
 	const [internalValue, setInternalValue] = useState(propValue || 0);
 	const [focusedStar, setFocusedStar] = useState(null);
@@ -124,5 +124,5 @@ Rating.displayName = "Rating";
 
 //#endregion
 export { Rating };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=rating.js.map

package/dist/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":["theme","Box","Icon"],"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","Box","Icon"],"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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"}

package/dist/rating/rating.types.d.ts

@@ -21,4 +21,5 @@ type RatingProps = SystemProps & ThemingProps<'Rating'> & {
 };
 //#endregion
 export { RatingProps };
+
 //# sourceMappingURL=rating.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"rating.types.d.ts","names":[],"sources":["../../src/rating/rating.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,WAAA,CAAA,CAAA,CAAc,cACxB;;;EADU,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"rating.types.d.ts","names":[],"sources":["../../src/rating/rating.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,WAAA,GAAc,cACxB;;;EADU"}

package/dist/rating/theme.js

@@ -24,5 +24,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# 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__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/select/index.d.ts

@@ -5,4 +5,4 @@ import { Select } from "./select.js";
 import { SelectButton } from "./selectButton.js";
 import { SelectContent } from "./selectContent.js";
 import { SelectGroup } from "./selectGroup.js";
-import { SelectOption } from "./selectOption.js";
+import { SelectOption } from "./selectOption.js";

package/dist/select/select.d.ts

@@ -6,7 +6,7 @@ import { ListDivider } from "../list/listDivider.js";
 import { ListHeading } from "../list/listHeading.js";
 import { SelectOptionProps, SelectProps } from "./select.types.js";
 import "../index.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/select/select.d.ts
 /**
@@ -14,7 +14,7 @@ import * as react_jsx_runtime8 from "react/jsx-runtime";
  * When no children are provided, content can be displayed based on 'options' data prop.
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
-declare function Select(props: SelectProps): react_jsx_runtime8.JSX.Element;
+declare function Select(props: SelectProps): react_jsx_runtime4.JSX.Element;
 declare namespace Select {
   var Button: VuiComponent<"button", ButtonProps>;
   var Content: VuiComponent<"div", BoxProps>;
@@ -27,4 +27,5 @@ declare namespace Select {
 }
 //#endregion
 export { Select };
+
 //# sourceMappingURL=select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAsBgB,MAAA,QAAc,cAAW,kBAAA,CAAA,GAAA,CAAA;kBAAzB,MAAA;qCAAM,WAAA;;;IAAN,OAAM,CAAA,CAAA,MAAA,YAAmB;IAAzB,OAAM,CAAA,CAAA,MAAA,YAAA;EAAA,CAAA"}
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAsBgB,MAAA,QAAc,cAAW,kBAAA,CAAA,GAAA,CAAA;kBAAzB,MAAA;qCAAM,WAAA;;;IAAN,OAAM,EAAA,kBAAmB;IAAzB,OAAM,EAAA,kBAAA;EAAA,CAAA"}

package/dist/select/select.js

@@ -21,7 +21,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * Supports single select and multi select, as well as controlled and uncontrolled modes.
 */
 function Select(props) {
-	const { children, defaultValue, disabled, errorText, closeOnScroll, helpText, id: idProp, isInvalid, isMultiple, label, labelMarkOptional, labelTooltipText, maxHeight, name, onChange, options, matchWidth = true, placeholder = "Please select", selectedText, readOnly, selectButton, selectButtonProps, showOptionsFilter, size = "lg", value, variant,...rest } = props;
+	const { children, defaultValue, disabled, errorText, closeOnScroll, helpText, id: idProp, isInvalid, isMultiple, label, labelMarkOptional, labelTooltipText, maxHeight, name, onChange, options, matchWidth = true, placeholder = "Please select", selectedText, readOnly, selectButton, selectButtonProps, showOptionsFilter, size = "lg", value, variant, ...rest } = props;
 	const selectProps = useSelect({
 		defaultValue,
 		isMultiple,
@@ -115,5 +115,5 @@ Select.displayName = "Select";
 
 //#endregion
 export { Select };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["SelectLabel","SelectButton","SelectContent","SelectGroup","SelectOption","HelpText"],"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 { 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    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: any) => 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}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    iconLeft=\"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":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EACJ,UACA,cACA,UACA,WACA,eACA,UACA,IAAI,QACJ,WACA,YACA,OACA,mBACA,kBACA,WACA,MACA,UACA,SACA,aAAa,MACb,cAAc,iBACd,cACA,UACA,cACA,mBACA,mBACA,OAAO,MACP,OACA,QACA,GAAG,SACD;CAEJ,MAAM,cAAc,UAAU;EAAE;EAAc;EAAY;EAAU;EAAO;EAAS;EAAc;EAAU,CAAC;AAE7G,KAAI,WAAW,cAAc,CAAC,MAAM,QAAQ,YAAY,MAAM,CAC5D,SAAQ,MAAM,sEAAsE,MAAM;CAE5F,MAAM,cAAc,OAAO;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAiB,GAAG;CAC9C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,QAAQ;CAE/D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;CACD,MAAM,iBAAiB,MAAW,SAAS,EAAE,OAAO,OAAO,aAAa,CAAC;CAEzE,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,aAAa,EAAE,SAAS,MAAM;AAEvF,iBAAgB;AACd,qBAAmB,SAAS,OAAO,cAAc,CAAC;IACjD,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAAC;EAAe,OAAO;YACrB,qBAAC;GAAI,WAAU;GAAsB;GAAO,GAAI;;IAC7C,CAAC,CAAC,SACD,oBAACA;KACW;KACN;KACG;KACY;KACD;MAClB;IAEJ,oBAAC;KAAoB;eACnB,8CACG,gBAAgB,oBAACC,wBAAa,GAAI,oBAAqB,EACxD,qBAACC;MAAc,UAAS;iBACrB,qBACC,oBAAC,iBACC,oBAAC;OACC,UAAS;OACL;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;QACF,GACE,EAER,oBAACC;OAAY,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAACC;QAA4B;QAAkC,OAAO,OAAO;QAAM,GAAI;UAAtC,OAAO,MAAyC,CACjG;QACQ;OACA,IACf;MACK;IACT,CAAC,CAAC,YAAY,oBAACC;KAAS,MAAM,aAAa;eAAQ;MAAoB;IACvE,CAAC,CAAC,aACD,oBAACA;KAAS;KAAQ,MAAM,aAAa;eAClC;MACQ;;IAET;GACS;;AAIrB,OAAO,SAASJ;AAChB,OAAO,UAAUC;AACjB,OAAO,QAAQC;AACf,OAAO,SAASC;AAChB,OAAO,cAAc"}
+{"version":3,"file":"select.js","names":["SelectLabel","SelectButton","SelectContent","SelectGroup","SelectOption","HelpText"],"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 { 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    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: any) => 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}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    iconLeft=\"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":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EACJ,UACA,cACA,UACA,WACA,eACA,UACA,IAAI,QACJ,WACA,YACA,OACA,mBACA,kBACA,WACA,MACA,UACA,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;EAAU,CAAC;AAE7G,KAAI,WAAW,cAAc,CAAC,MAAM,QAAQ,YAAY,MAAM,CAC5D,SAAQ,MAAM,sEAAsE,MAAM;CAE5F,MAAM,cAAc,OAAO;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAiB,GAAG;CAC9C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,QAAQ;CAE/D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;CACD,MAAM,iBAAiB,MAAW,SAAS,EAAE,OAAO,OAAO,aAAa,CAAC;CAEzE,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,aAAa,EAAE,SAAS,MAAM;AAEvF,iBAAgB;AACd,qBAAmB,SAAS,OAAO,cAAc,CAAC;IACjD,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAAC;EAAe,OAAO;YACrB,qBAAC;GAAI,WAAU;GAAsB;GAAO,GAAI;;IAC7C,CAAC,CAAC,SACD,oBAACA;KACW;KACN;KACG;KACY;KACD;MAClB;IAEJ,oBAAC;KAAoB;eACnB,8CACG,gBAAgB,oBAACC,wBAAa,GAAI,oBAAqB,EACxD,qBAACC;MAAc,UAAS;iBACrB,qBACC,oBAAC,iBACC,oBAAC;OACC,UAAS;OACL;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;QACF,GACE,EAER,oBAACC;OAAY,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAACC;QAA4B;QAAkC,OAAO,OAAO;QAAM,GAAI;UAAtC,OAAO,MAAyC,CACjG;QACQ;OACA,IACf;MACK;IACT,CAAC,CAAC,YAAY,oBAACC;KAAS,MAAM,aAAa;eAAQ;MAAoB;IACvE,CAAC,CAAC,aACD,oBAACA;KAAS;KAAQ,MAAM,aAAa;eAClC;MACQ;;IAET;GACS;;AAIrB,OAAO,SAASJ;AAChB,OAAO,UAAUC;AACjB,OAAO,QAAQC;AACf,OAAO,SAASC;AAChB,OAAO,cAAc"}

package/dist/select/select.types.d.ts

@@ -74,4 +74,5 @@ type SelectLabelProps = Pick<SelectProps, 'disabled' | 'id' | 'label' | 'labelMa
 type SelectValue = number | string;
 //#endregion
 export { SelectButtonProps, SelectContentProps, SelectContext, SelectGroupProps, SelectLabelProps, SelectOptionData, SelectOptionProps, SelectProps, SelectValue };
+
 //# sourceMappingURL=select.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","names":[],"sources":["../../src/select/select.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;KAUY,iBAAA,CAAA,CAAA,CAAoB;KAEpB,kBAAA,CAAA,CAAA,CAAqB;KAErB,aAAA,CAAA,CAAA,CAAgB,KAC1B,+HAGA;KAEU,gBAAA,CAAA,CAAA,CAAmB;KAEnB,WAAA,CAAA,CAAA,CAAc,yBACxB,cACA,eACA;;EAfU,QAAA,CAAA,CAAA,CAAA,OAAA;EAEA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,WAAA,CAAA,GAAA,CAAA,UAAA,CAAA,UAAA,CAAA,CAAA,CAAA;EAEA,aAAA,CAAA,CAAA,CAAa,OAAA;EACvB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,KAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAD0B,SAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAiBH,KAAA,CAAM,SAjBH;EAI1B,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAAmB,QAAA,CAAA,CAAA,CAeN,KAAA,CAAM,SAfA,CAAA,CAAA,CAAA,MAAA;EAET,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,CAAA;EAEA,EAAA,CAAA,CAAA,CAAA,MAAA;EAAc,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,OAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,EAAA,CAAA,MAAA,CAAA,WAAA,CAAA,CAAA,CAAA;EACxB,SAAA,CAAA,CAAA,CAAA,OAAA;EACA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,SAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,CAAA;EACA,SAAA,CAAA,CAAA,CAAA,MAAA;EAMuB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,MAAA,CAAA,KAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA,CAAA;EAEV,IAAM,CAAA,CAAA,CAAA,MAAA;EAUA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAQP,KAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CARO,KAAA,CAAM,SAQb;EAQK,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA;EAAS,iBAAA,CAAA,CAAA,CAAA,OAAA;EAKhB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA;EASA,gBAAA,CAAA,CAAA,CAAA,MAAiB;EASjB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,UAAA,CAAA,IAAA,CAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,CAAA;EAEA,UAAA,CAAA,CAAA,CAAA,OAAW;;YAjCT;;;;;;;;iBAQK;;;;KAKP,gBAAA,CAAA,CAAA;;;;;;SAMH;;KAGG,iBAAA,CAAA,CAAA,CAAoB;;;;UAItB;;;;KAKE,gBAAA,CAAA,CAAA,CAAmB,KAAK;KAExB,WAAA,CAAA,CAAA"}
+{"version":3,"file":"select.types.d.ts","names":[],"sources":["../../src/select/select.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;KAUY,iBAAA,GAAoB;KAEpB,kBAAA,GAAqB;KAErB,aAAA,GAAgB,KAC1B,+HAGA;KAEU,gBAAA,GAAmB;KAEnB,WAAA,GAAc,yBACxB,cACA,eACA;;EAfU,QAAA,CAAA,EAAA,OAAA;EAEA;EAEA,aAAA,CAAA,EAAa,OAAA;EACvB;EAD0B,SAAA,CAAA,EAAA,MAAA,GAiBH,KAAA,CAAM,SAjBH;EAI1B;EAAmB,QAAA,CAAA,EAeN,KAAA,CAAM,SAfA,GAAA,MAAA;EAET;EAEA,EAAA,CAAA,EAAA,MAAA;EAAc;EACxB,SAAA,CAAA,EAAA,OAAA;EACA;EACA,SAAA,CAAA,EAAA,MAAA;EAMuB;EAEV,IAAM,CAAA,EAAA,MAAA;EAUA;EAQP,KAAA,CAAA,EAAA,MAAA,GARO,KAAA,CAAM,SAQb;EAQK;EAAS,iBAAA,CAAA,EAAA,OAAA;EAKhB;EASA,gBAAA,CAAA,EAAA,MAAiB;EASjB;EAEA,UAAA,CAAA,EAAA,OAAW;;YAjCT;;;;;;;;iBAQK;;;;KAKP,gBAAA;;;;;;SAMH;;KAGG,iBAAA,GAAoB;;;;UAItB;;;;KAKE,gBAAA,GAAmB,KAAK;KAExB,WAAA"}

package/dist/select/selectButton.d.ts

@@ -11,4 +11,5 @@ import "../index.js";
 declare const SelectButton: VuiComponent<"button", ButtonProps>;
 //#endregion
 export { SelectButton };
+
 //# sourceMappingURL=selectButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAYa,OAAA,CAAA,KAAA,CAAA,YAkEX,CAAA,CAlEuB,YAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAkEvB,WAAA,CAlEuB"}
+{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAYa,cAAA,YAkEX,EAlEuB,YAAA,CAAA,QAAA,EAkEvB,WAAA,CAlEuB"}

package/dist/select/selectButton.js

@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 * Includes special styling for disabled, readOnly and invalid states.
 */
 const SelectButton = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {};
 	const styles = useStyleConfig("Select", useSelectContext());
 	const text = valueText || placeholder;
@@ -75,5 +75,5 @@ var selectButton_default = SelectButton;
 
 //#endregion
 export { SelectButton, selectButton_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=selectButton.js.map

package/dist/select/selectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.js","names":["PopoverTrigger","Button"],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\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 = 'sandstone.10'\n  const iconColor = disabled ? 'sandstone.10' : '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      iconRight={<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":";;;;;;;;;;;;;;;AAYA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,UAAU,WAAW,aAAa,UAAU,cAAc,kBAAkB,IAAI,EAAE;CAC1F,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,OAAO,aAAa;CAE1B,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,QAAQ;EACR,iBAAiB;EACjB,aAAa;EACb,SAAS;EACT,kBAAkB;EAClB,mBAAmB;EACpB,GACD;CAEJ,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,IAAI;EACJ,OAAO;EACP,QAAQ;EACR,UAAU;EACV,SAAS;EACT,SAAS;EACV,GACD;CAEJ,MAAM,iBAAiB,YACnB;EACE,aAAa;EACb,kBAAkB;EACnB,GACD;CAEJ,MAAM,YAAY;CAClB,MAAM,YAAY,WAAW,iBAAiB;AAE9C,QACE,oBAACA;EACC,IAAI;EACJ,IAAG;EACH,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,WAAW;EACX,YAAW;EACX,WAAW,oBAACC,eAAO;GAAK,OAAO;GAAW,IAAG;GAAO,MAAK;IAAgB;EACzE;EACA,IAAI;EACC;EACL,MACE,oBAACA,eAAO;GAAK,OAAO;GAAW,GAAI;aAChC;IACW;EAEhB,YAAW;EACX,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,aAAa,cAAc;AAC3B,2BAAe"}
+{"version":3,"file":"selectButton.js","names":["PopoverTrigger","Button"],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\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 = 'sandstone.10'\n  const iconColor = disabled ? 'sandstone.10' : '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      iconRight={<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":";;;;;;;;;;;;;;;AAYA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,UAAU,WAAW,aAAa,UAAU,cAAc,kBAAkB,IAAI,EAAE;CAC1F,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,OAAO,aAAa;CAE1B,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,QAAQ;EACR,iBAAiB;EACjB,aAAa;EACb,SAAS;EACT,kBAAkB;EAClB,mBAAmB;EACpB,GACD;CAEJ,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,IAAI;EACJ,OAAO;EACP,QAAQ;EACR,UAAU;EACV,SAAS;EACT,SAAS;EACV,GACD;CAEJ,MAAM,iBAAiB,YACnB;EACE,aAAa;EACb,kBAAkB;EACnB,GACD;CAEJ,MAAM,YAAY;CAClB,MAAM,YAAY,WAAW,iBAAiB;AAE9C,QACE,oBAACA;EACC,IAAI;EACJ,IAAG;EACH,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,WAAW;EACX,YAAW;EACX,WAAW,oBAACC,eAAO;GAAK,OAAO;GAAW,IAAG;GAAO,MAAK;IAAgB;EACzE;EACA,IAAI;EACC;EACL,MACE,oBAACA,eAAO;GAAK,OAAO;GAAW,GAAI;aAChC;IACW;EAEhB,YAAW;EACX,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,aAAa,cAAc;AAC3B,2BAAe"}

package/dist/select/selectContent.d.ts

@@ -7,4 +7,5 @@ import "../index.js";
 declare const SelectContent: VuiComponent<"div", BoxProps>;
 //#endregion
 export { SelectContent };
+
 //# sourceMappingURL=selectContent.d.ts.map

package/dist/select/selectContent.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/select/selectContent.tsx
 /** Extends PopoverContent to display given content is an overlaying box. */
 const SelectContent = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Select", useSelectContext());
 	return /* @__PURE__ */ jsx(popoverContent_default, {
 		className: cs("vui-selectContent", className),
@@ -24,5 +24,5 @@ var selectContent_default = SelectContent;
 
 //#endregion
 export { SelectContent, selectContent_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=selectContent.js.map

package/dist/select/selectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectContent.js","names":["PopoverContent"],"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,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAACA;EACC,WAAW,GAAG,qBAAqB,UAAU;EAC7C;EACA,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"selectContent.js","names":["PopoverContent"],"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,kBAAkB,CAAC;AAE3D,QACE,oBAACA;EACC,WAAW,GAAG,qBAAqB,UAAU;EAC7C;EACA,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,cAAc,cAAc;AAE5B,4BAAe"}