@veracity/vui 3.2.0 → 4.0.0-alpha.366771.2601090922

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

@@ -1,11 +1,15 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { rangeColors } from "./consts.js";
 import { useStyleConfig } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
 import { Box } from "../box/box.js";
+import "../box/index.js";
+import "../core/index.js";
 import { Tooltip } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
 import { jsx } from "react/jsx-runtime";
 import ReactSlider from "react-slider";
 
@@ -19,7 +23,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";
@@ -30,11 +34,13 @@ const Range = vui((props, ref) => {
 		return key === "track-2" ? rangeColors.track : key === "track-1" ? mainColor : rangeColors.track;
 	};
 	const Thumb = (props$1, state) => {
+		const { key, ...thumbProps } = props$1;
+		const thumbKey = key ?? state.index;
 		const content = /* @__PURE__ */ jsx(Box, {
 			className: "vui-range-thumb",
 			...styles.thumb,
 			borderColor: mainColor,
-			...props$1,
+			...thumbProps,
 			children: showValue && /* @__PURE__ */ jsx(Box, {
 				center: true,
 				className: "vui-range-thumb-value",
@@ -42,20 +48,23 @@ const Range = vui((props, ref) => {
 				children: formatter(state.valueNow)
 			})
 		});
-		return showValue ? content : /* @__PURE__ */ jsx(Tooltip, {
+		return showValue ? /* @__PURE__ */ jsx(Box, { children: content }, thumbKey) : /* @__PURE__ */ jsx(Tooltip, {
 			disabled,
 			text: formatter(state.valueNow),
 			visible: showTooltip,
 			children: content
-		}, state.index);
+		}, thumbKey);
+	};
+	const Track = (props$1, state) => {
+		const { key, ...trackProps } = props$1;
+		return /* @__PURE__ */ jsx(Box, {
+			...styles.track,
+			bg: getTrackColor(props$1),
+			className: "vui-range-track",
+			...trackProps,
+			index: state.index
+		}, key);
 	};
-	const Track = (props$1, state) => /* @__PURE__ */ jsx(Box, {
-		...styles.track,
-		bg: getTrackColor(props$1),
-		className: "vui-range-track",
-		...props$1,
-		index: state.index
-	});
 	return /* @__PURE__ */ jsx(Box, {
 		className: cs("vui-range", isSingleValue ? "vui-range-single" : "vui-range-range", className),
 		ref,
@@ -81,5 +90,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 { key, ...thumbProps } = props\n    const thumbKey = key ?? state.index\n    const content = (\n      <Box className=\"vui-range-thumb\" {...styles.thumb} borderColor={mainColor} {...thumbProps}>\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      <Box key={thumbKey}>{content}</Box>\n    ) : (\n      <Tooltip key={thumbKey} 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  ) => {\n    const { key, ...trackProps } = props\n    return (\n      <Box\n        key={key}\n        {...styles.track}\n        bg={getTrackColor(props)}\n        className=\"vui-range-track\"\n        {...trackProps}\n        index={state.index}\n      />\n    )\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      <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,EAAE,KAAK,GAAG,eAAeA;EAC/B,MAAM,WAAW,OAAO,MAAM;EAC9B,MAAM,UACJ,oBAAC;GAAI,WAAU;GAAkB,GAAI,OAAO;GAAO,aAAa;GAAW,GAAI;aAC5E,aACC,oBAAC;IAAI;IAAO,WAAU;IAAwB,GAAI,OAAO;cACtD,UAAU,MAAM,SAAS;KACtB;IAEJ;AAER,SAAO,YACL,oBAAC,iBAAoB,WAAX,SAAyB,GAEnC,oBAAC;GAAiC;GAAU,MAAM,UAAU,MAAM,SAAS;GAAE,SAAS;aACnF;KADW,SAEJ;;CAId,MAAM,SACJ,SACA,UAIG;EACH,MAAM,EAAE,KAAK,GAAG,eAAeA;AAC/B,SACE,oBAAC;GAEC,GAAI,OAAO;GACX,IAAI,cAAcA,QAAM;GACxB,WAAU;GACV,GAAI;GACJ,OAAO,MAAM;KALR,IAML;;AAIN,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/index.js

@@ -0,0 +1,3 @@
+import { Rating } from "./rating.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

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

@@ -1,14 +1,18 @@
 import { mergeRefs } from "../utils/react.js";
+import "../utils/index.js";
 import theme_default from "./theme.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import icon_default from "../icon/icon.js";
+import "../icon/index.js";
+import "../core/index.js";
 import { useRef, useState } from "react";
 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 +128,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

@@ -1,9 +1,10 @@
 import { createContext } from "../utils/react.js";
+import "../utils/index.js";
 
 //#region src/select/context.ts
 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/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,MAAM,CAAC"}
+{"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,MAAM,CAAC"}

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/index.js

@@ -0,0 +1,8 @@
+import { SelectButton } from "./selectButton.js";
+import { SelectContent } from "./selectContent.js";
+import { SelectGroup } from "./selectGroup.js";
+import { SelectOption } from "./selectOption.js";
+import { getOptionText } from "./useSelect.js";
+import { Select } from "./select.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/select/select.d.ts

@@ -1,12 +1,12 @@
-import { BoxProps } from "../box/box.types.js";
-import { ButtonProps } from "../button/button.types.js";
 import { VuiComponent } from "../core/vui.js";
 import { ListProps } from "../list/list.types.js";
 import { ListDivider } from "../list/listDivider.js";
 import { ListHeading } from "../list/listHeading.js";
+import { ButtonProps } from "../button/button.types.js";
+import { BoxProps } from "../box/box.types.js";
 import { SelectOptionProps, SelectProps } from "./select.types.js";
 import "../index.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime6 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_runtime6.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

@@ -1,9 +1,13 @@
 import { __DEV__ } from "../utils/consts.js";
+import "../utils/index.js";
 import { helpTextSize } from "../input/consts.js";
 import { Box } from "../box/box.js";
+import "../box/index.js";
 import helpText_default from "../input/helpText.js";
 import Popover from "../popover/popover.js";
+import "../popover/index.js";
 import { Input } from "../input/input.js";
+import "../input/index.js";
 import { SelectProvider } from "./context.js";
 import selectButton_default from "./selectButton.js";
 import selectContent_default from "./selectContent.js";
@@ -21,7 +25,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, onClose, onOpen, options, matchWidth = true, placeholder = "Please select", selectedText, readOnly, selectButton, selectButtonProps, showOptionsFilter, size = "lg", value, variant, ...rest } = props;
 	const selectProps = useSelect({
 		defaultValue,
 		isMultiple,
@@ -70,6 +74,8 @@ function Select(props) {
 				}),
 				/* @__PURE__ */ jsx(Popover, {
 					matchWidth,
+					onClose,
+					onOpen,
 					children: /* @__PURE__ */ jsxs(Fragment$1, { children: [selectButton ?? /* @__PURE__ */ jsx(selectButton_default, { ...selectButtonProps }), /* @__PURE__ */ jsxs(selectContent_default, {
 						overflow: "hidden",
 						children: [showOptionsFilter && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Input, {
@@ -115,5 +121,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    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: 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} onClose={onClose} onOpen={onOpen}>\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,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;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;KAAqB;KAAiB;eACzD,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

@@ -1,10 +1,10 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
-import { ButtonProps } from "../button/button.types.js";
-import "../button/index.js";
 import { ListItemProps, ListProps } from "../list/list.types.js";
 import "../list/index.js";
+import { ButtonProps } from "../button/button.types.js";
+import "../button/index.js";
 import { PopoverContentProps, PopoverProps } from "../popover/popover.types.js";
 import "../popover/index.js";
 import { UseSelectProps } from "./useSelect.types.js";
@@ -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

@@ -1,5 +1,5 @@
-import { ButtonProps } from "../button/button.types.js";
 import { VuiComponent } from "../core/vui.js";
+import { ButtonProps } from "../button/button.types.js";
 import "../index.js";
 
 //#region src/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

@@ -1,9 +1,13 @@
 import { cs, ellipsisOverflow } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import button_default from "../button/button.js";
 import { LineButton } from "../button/buttons.js";
+import "../button/index.js";
+import "../core/index.js";
 import popoverTrigger_default from "../popover/popoverTrigger.js";
+import "../popover/index.js";
 import { useSelectContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -14,7 +18,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 +79,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

@@ -1,5 +1,5 @@
-import { BoxProps } from "../box/box.types.js";
 import { VuiComponent } from "../core/vui.js";
+import { BoxProps } from "../box/box.types.js";
 import "../index.js";
 
 //#region src/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

@@ -1,14 +1,17 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import popoverContent_default from "../popover/popoverContent.js";
+import "../popover/index.js";
 import { useSelectContext } from "./context.js";
 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 +27,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"}

package/dist/select/selectGroup.d.ts

@@ -13,4 +13,5 @@ declare const SelectGroup: VuiComponent<"ul", SelectGroupProps> & {
 };
 //#endregion
 export { SelectGroup };
+
 //# sourceMappingURL=selectGroup.d.ts.map

package/dist/select/selectGroup.js

@@ -1,16 +1,19 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import { ListDivider } from "../list/listDivider.js";
 import { ListHeading } from "../list/listHeading.js";
 import { List } from "../list/list.js";
+import "../list/index.js";
 import { useSelectContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/select/selectGroup.tsx
 /** Displays a list of options with optional heading to describe an individual group. */
 const SelectGroup = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Select", useSelectContext());
 	return /* @__PURE__ */ jsx(List, {
 		className: cs("vui-selectGroup", "vui-allowScroll", className),
@@ -26,5 +29,5 @@ var selectGroup_default = SelectGroup;
 
 //#endregion
 export { SelectGroup, selectGroup_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# 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,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QAAO,oBAAC;EAAK,WAAW,GAAG,mBAAmB,mBAAmB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAO,GAAI;GAAQ;EACrH;AAKF,YAAY,UAAU;AACtB,YAAY,UAAU;AAEtB,YAAY,cAAc;AAE1B,0BAAe"}
+{"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,kBAAkB,CAAC;AAE3D,QAAO,oBAAC;EAAK,WAAW,GAAG,mBAAmB,mBAAmB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAO,GAAI;GAAQ;EACrH;AAKF,YAAY,UAAU;AACtB,YAAY,UAAU;AAEtB,YAAY,cAAc;AAE1B,0BAAe"}

package/dist/select/selectLabel.js

@@ -1,6 +1,9 @@
 import { isString } from "../utils/assertion.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
+import "../core/index.js";
 import label_default from "../label/label.js";
+import "../label/index.js";
 import { useSelectContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -23,5 +26,5 @@ var selectLabel_default = SelectLabel;
 
 //#endregion
 export { selectLabel_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=selectLabel.js.map

package/dist/select/selectLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectLabel.js","names":["Label"],"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,kBAAkB,CAAC;AAC3D,QAAO,SAAS,MAAM,GACpB,oBAACA;EACC,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,IAAI;EACJ,MAAM;EACN,aAAa;EACb,GAAI,OAAO;GACX,GAEF;;AAIJ,YAAY,cAAc;AAE1B,0BAAe"}
+{"version":3,"file":"selectLabel.js","names":["Label"],"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,kBAAkB,CAAC;AAC3D,QAAO,SAAS,MAAM,GACpB,oBAACA;EACC,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,IAAI;EACJ,MAAM;EACN,aAAa;EACb,GAAI,OAAO;GACX,GAEF;;AAIJ,YAAY,cAAc;AAE1B,0BAAe"}