@veracity/vui 3.0.0-beta.8 → 3.0.0

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":"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"}

package/dist/radio/radio.js

@@ -1,10 +1,25 @@
-import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{disabled as n}from"../checkbox/consts.js";import{radioColors as r}from"./consts.js";import{omitThemingProps as i,th as a,useStyleConfig as o}from"../core/theme.js";import{styled as s}from"../core/styled.js";import{vui as c}from"../core/vui.js";import l from"../icon/icon.js";import u from"../t/t.js";import{useRadioGroupContext as d}from"./context.js";import{useEffect as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";const g=s.spanBox`
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import { disabled } from "../checkbox/consts.js";
+import { radioColors } from "./consts.js";
+import { omitThemingProps, th, useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import icon_default from "../icon/icon.js";
+import t_default from "../t/t.js";
+import { useRadioGroupContext } from "./context.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/radio/radio.tsx
+const RadioControl = styled.spanBox`
   border-radius: 50%;
   display: inline-flex;
   flex-shrink: 0;
   position: relative;
   transition-duration: fast;
-`,_=s.input`
+`;
+const RadioInput = styled.input`
   cursor: inherit;
   height: 100%;
   left: 0;
@@ -15,27 +30,101 @@ import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../util
   top: 0;
   width: 100%;
   z-index: 1;
-`,v=s.labelBox`
+`;
+const RadioBase = styled.labelBox`
   align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
 
   &:not([aria-disabled='true']):hover .vui-radioControl {
-    color: ${e=>a.color(e.controlHoverColor)};
+    color: ${(p) => th.color(p.controlHoverColor)};
   }
 
   .vui-radioControl:focus-within {
-    color: ${r.focus};
+    color: ${radioColors.focus};
   }
 
   &[aria-disabled='true'] {
-    color: ${n.text};
+    color: ${disabled.text};
     cursor: not-allowed;
 
     .vui-radioControl {
-      color: ${n.icon};
+      color: ${disabled.icon};
     }
   }
-`,y=c((n,a)=>{let{defaultValue:s,isChecked:c,onChange:y,value:b,...x}=d()??{},S=c===void 0?void 0:c===n.value,C={...x,...n},{checked:w=b===void 0?void 0:n.value===b,children:T,className:E,defaultChecked:D=s===void 0?void 0:n.value===s,disabled:O,icon:k=`uiRadioUnselected`,iconChecked:A=`uiRadioSelected`,id:j,inputProps:M,inputRef:N,label:P,name:F,onChange:I,required:L,value:R,...z}=i(C),[B,V]=p(S??w??D),H=o(`Radio`,C),{color:U,hoverColor:W,...G}=H.control,K=B?A:k,q=T||P?1:0,J=B?r.checked:U,Y=W||r.hover;f(()=>{c===void 0?w!==void 0&&V(w):V(c===R)},[w,c]);function X(e){y?.(e),I?.(e)}let Z=e({"aria-disabled":O});return h(v,{className:t(`vui-radio`,E),controlHoverColor:Y,ref:a,...H.container,...Z,...z,children:[h(g,{bg:`white`,className:`vui-radioControl`,color:J,focusWithinRing:3,mr:q,...G,children:[m(_,{className:`vui-radioInput`,onClick:X,ref:N,type:`radio`,defaultChecked:w,disabled:O,id:j,name:F,required:L,value:R,...M}),m(l,{className:`vui-radioIcon`,h:`100%`,name:K,w:`100%`})]}),T??(P&&m(u,{className:`vui-radioLabel`,lineHeight:`normal`,...H.label,children:P}))]})});y.displayName=`Radio`;export{y as Radio,v as RadioBase};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/**
+* Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
+* 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 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 [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked);
+	const styles = useStyleConfig("Radio", mergedProps);
+	const { color: controlColor, hoverColor,...controlStyles } = styles.control;
+	const icon = isChecked ? iconChecked : iconProp;
+	const controlMr = children || label ? 1 : 0;
+	const color = isChecked ? radioColors.checked : controlColor;
+	const controlHoverColor = hoverColor ? hoverColor : radioColors.hover;
+	useEffect(() => {
+		if (groupIsChecked !== void 0) setIsChecked(groupIsChecked === value);
+		else if (checked !== void 0) setIsChecked(checked);
+	}, [checked, groupIsChecked]);
+	function handleOnChange(e) {
+		groupOnChange?.(e);
+		onChange?.(e);
+	}
+	const aliasedProps = filterUndefined({ "aria-disabled": disabled$1 });
+	return /* @__PURE__ */ jsxs(RadioBase, {
+		className: cs("vui-radio", className),
+		controlHoverColor,
+		ref,
+		...styles.container,
+		...aliasedProps,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(RadioControl, {
+			bg: "white",
+			className: "vui-radioControl",
+			color,
+			focusWithinRing: 3,
+			mr: controlMr,
+			...controlStyles,
+			children: [/* @__PURE__ */ jsx(RadioInput, {
+				className: "vui-radioInput",
+				onClick: handleOnChange,
+				ref: inputRef,
+				type: "radio",
+				defaultChecked: checked,
+				disabled: disabled$1,
+				id,
+				name,
+				required,
+				value,
+				...inputProps
+			}), /* @__PURE__ */ jsx(icon_default, {
+				className: "vui-radioIcon",
+				h: "100%",
+				name: icon,
+				w: "100%"
+			})]
+		}), children ?? (label && /* @__PURE__ */ jsx(t_default, {
+			className: "vui-radioLabel",
+			lineHeight: "normal",
+			...styles.label,
+			children: label
+		}))]
+	});
+});
+Radio.displayName = "Radio";
+
+//#endregion
+export { Radio, RadioBase };
+globalThis.__vuiVersion__ = "3.0.0"
 //# 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":"siBAYA,MAAM,EAAe,EAAO,OAAO;;;;;;EAQ7B,EAAa,EAAO,KAAK;;;;;;;;;;;EAalB,EAAY,EAAO,QAAyB;;;;;;;aAO5C,GAAK,EAAG,MAAM,EAAE,kBAAkB,CAAC;;;;aAInC,EAAY,MAAM;;;;aAIlB,EAAS,KAAK;;;;eAIZ,EAAS,KAAK;;;EAShB,EAAQ,GAAyB,EAAO,IAAQ,CAC3D,GAAM,CACJ,aAAc,EACd,UAAW,EACX,SAAU,EACV,MAAO,EACP,GAAG,GACD,GAAsB,EAAI,EAAE,CAC1B,EAAmB,IAAmB,IAAA,GAA6C,IAAA,GAAjC,IAAmB,EAAM,MAE3E,EAAc,CAAE,GAAG,EAAiB,GAAG,EAAO,CAC9C,CACJ,UAAU,IAAe,IAAA,GAAyC,IAAA,GAA7B,EAAM,QAAU,EACrD,WACA,YACA,iBAAiB,IAAsB,IAAA,GAAgD,IAAA,GAApC,EAAM,QAAU,EACnE,SAAA,EACA,KAAM,EAAW,oBACjB,cAAc,kBACd,KACA,aACA,WACA,QACA,OACA,WACA,WACA,QACA,GAAG,GACD,EAAiB,EAAY,CAE3B,CAAC,EAAW,GAAgB,EAAS,GAAoB,GAAW,EAAe,CACnF,EAAS,EAAe,QAAS,EAAY,CAC7C,CAAE,MAAO,EAAc,aAAY,GAAG,GAAkB,EAAO,QAE/D,EAAO,EAAY,EAAc,EACjC,EAAY,GAAY,EAAQ,EAAI,EACpC,EAAQ,EAAY,EAAY,QAAU,EAC1C,EAAoB,GAA0B,EAAY,MAEhE,MAAgB,CACV,IAAmB,IAAA,GACd,IAAY,IAAA,IAAW,EAAa,EAAQ,CADnB,EAAa,IAAmB,EAAM,EAEvE,CAAC,EAAS,EAAe,CAAC,CAE7B,SAAS,EAAe,EAAuC,CAC7D,IAAgB,EAAE,CAClB,IAAW,EAA4B,CAGzC,IAAM,EAAe,EAAgB,CACnC,gBAAiBA,EAClB,CAAC,CAEF,OACE,EAAC,EAAA,CACC,UAAW,EAAG,YAAa,EAAU,CAClB,oBACd,MACL,GAAI,EAAO,UACX,GAAI,EACJ,GAAI,YAEJ,EAAC,EAAA,CACC,GAAG,QACH,UAAU,mBACH,QACP,gBAAiB,EACjB,GAAI,EACJ,GAAI,YAEJ,EAAC,EAAA,CACC,UAAU,iBACV,QAAS,EACT,IAAK,EACL,KAAK,QACC,eAAgB,EAAS,SAAA,EAAU,KAAI,OAAM,WAAU,QAC7D,GAAI,GACJ,CACF,EAACC,EAAAA,CAAK,UAAU,gBAAgB,EAAE,OAAO,KAAM,EAAM,EAAE,QAAS,CAAA,EACnD,CAEd,IACE,GACC,EAACC,EAAAA,CAAE,UAAU,iBAAiB,WAAW,SAAS,GAAI,EAAO,eAC1D,GACC,EAAA,EAEE,EAEd,CAEF,EAAM,YAAc"}
+{"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"}

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

@@ -1,7 +1,10 @@
 import { ChangeEventHandler, FocusEventHandler } from "../utils/types.js";
+import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { HTMLAttributes } from "react";
 
 //#region src/radio/radio.types.d.ts

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,OAAA,CAAA,CAAA,CAAA,OAAU;EAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA;aAAG,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA;;UASd,CAAA,CAAA,CAAA,OAAA;;MAIqB,CAAA,CAAA,CAJrB,QAIqB;;aAEM,CAAA,CAAA,CAJpB,QAIoB;;YAMzB,CAAA,CAAA,CARI,cAQJ,CARmB,gBAQnB,CAAA;;UAIC,CAAA,CAAA,CAVC,KAAA,CAAM,gBAUP,CAVwB,gBAUxB,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAAiB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAOnB,KAAA,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,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"}

package/dist/radio/radioGroup.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { RadioGroupProps } from "./radioGroup.types.js";
-import * as styled_components395 from "styled-components";
+import "../index.js";
+import * as styled_components391 from "styled-components";
 
 //#region src/radio/radioGroup.d.ts
-declare const RadioGroupBase: styled_components395.StyledComponent<"div", styled_components395.DefaultTheme, SystemProps, never>;
+declare const RadioGroupBase: styled_components391.StyledComponent<"div", styled_components391.DefaultTheme, SystemProps, never>;
 /**
  * Organizes layout and display of multiple radio buttons as a row or column.
  * Exposes some props to the children via context.

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;;;;;AAAd,OAAA,CAAA,KAAA,CAUA,UANZ,CAAA,CAMsB,YANtB,CAAA,CAAA,GAAA,CAAA,CAAA,CAMsB,eANtB,CAAA"}
+{"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"}

package/dist/radio/radioGroup.js

@@ -1,6 +1,65 @@
-import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{styled as n}from"../core/styled.js";import{vui as r}from"../core/vui.js";import{RadioGroupProvider as i}from"./context.js";import{useCallback as a,useMemo as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";const l=n.divBox`
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import { RadioGroupProvider } from "./context.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/radio/radioGroup.tsx
+const RadioGroupBase = styled.divBox`
   display: flex;
   flex-direction: column;
   gap: 1;
-`,u=r((n,r)=>{let{className:u,defaultValue:d,disabled:f,isRow:p,name:m,onBlur:h,onChange:g,onFocus:_,size:v,value:y,variant:b,...x}=n,[S,C]=s(y??d),w=a(e=>{C(e.target.value),g?.(e)},[g]),T=o(()=>e({defaultValue:d,disabled:f,isChecked:S,name:m,onBlur:h,onChange:w,onFocus:_,size:v,value:y,variant:b}),[d,f,w,S,m,h,_,v,y,b]),E=e({flexDirection:p?`row`:void 0});return c(i,{value:T,children:c(l,{className:t(`vui-radioGroup`,u),ref:r,...E,...x})})});u.displayName=`RadioGroup`;export{u as RadioGroup,l as RadioGroupBase};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/**
+* Organizes layout and display of multiple radio buttons as a row or column.
+* 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 [isChecked, setIsChecked] = useState(value ?? defaultValue);
+	const handleOnChange = useCallback((e) => {
+		setIsChecked(e.target.value);
+		onChange?.(e);
+	}, [onChange]);
+	const context = useMemo(() => filterUndefined({
+		defaultValue,
+		disabled,
+		isChecked,
+		name,
+		onBlur,
+		onChange: handleOnChange,
+		onFocus,
+		size,
+		value,
+		variant
+	}), [
+		defaultValue,
+		disabled,
+		handleOnChange,
+		isChecked,
+		name,
+		onBlur,
+		onFocus,
+		size,
+		value,
+		variant
+	]);
+	const aliasedProps = filterUndefined({ flexDirection: isRow ? "row" : void 0 });
+	return /* @__PURE__ */ jsx(RadioGroupProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(RadioGroupBase, {
+			className: cs("vui-radioGroup", className),
+			ref,
+			...aliasedProps,
+			...rest
+		})
+	});
+});
+RadioGroup.displayName = "RadioGroup";
+
+//#endregion
+export { RadioGroup, RadioGroupBase };
+globalThis.__vuiVersion__ = "3.0.0"
 //# 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":"sUAQA,MAAa,EAAiB,EAAO,MAAM;;;;EAU9B,EAAa,GAA6B,EAAO,IAAQ,CACpE,GAAM,CAAE,YAAW,eAAc,WAAU,QAAO,OAAM,SAAQ,WAAU,UAAS,OAAM,QAAO,UAAS,GAAG,GAC1G,EACI,CAAC,EAAW,GAAgB,EAAS,GAAS,EAAa,CAE3D,EAAiB,EACpB,GAAmB,CAClB,EAAa,EAAE,OAAO,MAAM,CAC5B,IAAW,EAAE,EAEf,CAAC,EAAS,CACX,CAEK,EAAU,MAEZ,EAAgB,CACd,eACA,WACA,YACA,OACA,SACA,SAAU,EACV,UACA,OACA,QACA,UACD,CAAC,CACJ,CAAC,EAAc,EAAU,EAAgB,EAAW,EAAM,EAAQ,EAAS,EAAM,EAAO,EAAQ,CACjG,CAEK,EAAe,EAAgB,CACnC,cAAe,EAAQ,MAAQ,IAAA,GAChC,CAAU,CAEX,OACE,EAAC,EAAA,CAAmB,MAAO,WACzB,EAAC,EAAA,CAAe,UAAW,EAAG,iBAAkB,EAAU,CAAO,MAAK,GAAI,EAAc,GAAI,GAAQ,EACjF,EAEvB,CAEF,EAAW,YAAc"}
+{"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"}

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

@@ -1,6 +1,8 @@
 import { ChangeEventHandler, FocusEventHandler } from "../utils/types.js";
+import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 
 //#region src/radio/radioGroup.types.d.ts
 type RadioGroupProps = SystemProps & ThemingProps<'Radio'> & {

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,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAe,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA;EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA;UAAG,CAAA,CAAA,CAAA,OAAA;;OAWjB,CAAA,CAAA,CAAA,OAAA;;MAIC,CAAA,CAAA,CAAA,MAAA;EAAiB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA;WAJlB;;aAEE;;YAED"}
+{"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"}

package/dist/radio/theme.js

@@ -1,2 +1,49 @@
-import{radioColors as e}from"./consts.js";var t={baseStyle:{control:{color:e.unchecked,hoverColor:e.hover}},defaultProps:{size:`md`},parts:[`container`,`control`,`label`],sizes:{sm:{control:{h:16,w:16},label:{size:`sm`}},md:{control:{h:20,w:20},label:{size:`md`}},lg:{control:{h:24,w:24},label:{size:`lg`}}},variants:{}};export{t as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { radioColors } from "./consts.js";
+
+//#region src/radio/theme.ts
+const baseStyle = { control: {
+	color: radioColors.unchecked,
+	hoverColor: radioColors.hover
+} };
+const defaultProps = { size: "md" };
+const parts = [
+	"container",
+	"control",
+	"label"
+];
+const sizes = {
+	sm: {
+		control: {
+			h: 16,
+			w: 16
+		},
+		label: { size: "sm" }
+	},
+	md: {
+		control: {
+			h: 20,
+			w: 20
+		},
+		label: { size: "md" }
+	},
+	lg: {
+		control: {
+			h: 24,
+			w: 24
+		},
+		label: { size: "lg" }
+	}
+};
+const variants = {};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/radio/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/radio/theme.ts"],"sourcesContent":["import { radioColors } from './consts'\n\nconst baseStyle = {\n  control: {\n    color: radioColors.unchecked,\n    hoverColor: radioColors.hover,\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'control', 'label']\n\nconst sizes = {\n  sm: {\n    control: {\n      h: 16,\n      w: 16,\n    },\n    label: {\n      size: 'sm',\n    },\n  },\n  md: {\n    control: {\n      h: 20,\n      w: 20,\n    },\n    label: {\n      size: 'md',\n    },\n  },\n  lg: {\n    control: {\n      h: 24,\n      w: 24,\n    },\n    label: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"0CA+CA,IAAA,EAAe,CACb,UA9CgB,CAChB,QAAS,CACP,MAAO,EAAY,UACnB,WAAY,EAAY,MACzB,CACF,CA0CC,aAxCmB,CACnB,KAAM,KACP,CAuCC,MArCY,CAAC,YAAa,UAAW,QAAQ,CAsC7C,MApCY,CACZ,GAAI,CACF,QAAS,CACP,EAAG,GACH,EAAG,GACJ,CACD,MAAO,CACL,KAAM,KACP,CACF,CACD,GAAI,CACF,QAAS,CACP,EAAG,GACH,EAAG,GACJ,CACD,MAAO,CACL,KAAM,KACP,CACF,CACD,GAAI,CACF,QAAS,CACP,EAAG,GACH,EAAG,GACJ,CACD,MAAO,CACL,KAAM,KACP,CACF,CACF,CASC,SAPe,EAAE,CAQlB"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/radio/theme.ts"],"sourcesContent":["import { radioColors } from './consts'\n\nconst baseStyle = {\n  control: {\n    color: radioColors.unchecked,\n    hoverColor: radioColors.hover,\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'control', 'label']\n\nconst sizes = {\n  sm: {\n    control: {\n      h: 16,\n      w: 16,\n    },\n    label: {\n      size: 'sm',\n    },\n  },\n  md: {\n    control: {\n      h: 20,\n      w: 20,\n    },\n    label: {\n      size: 'md',\n    },\n  },\n  lg: {\n    control: {\n      h: 24,\n      w: 24,\n    },\n    label: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY,EAChB,SAAS;CACP,OAAO,YAAY;CACnB,YAAY,YAAY;CACzB,EACF;AAED,MAAM,eAAe,EACnB,MAAM,MACP;AAED,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAQ;AAE/C,MAAM,QAAQ;CACZ,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;GACJ;EACD,OAAO,EACL,MAAM,MACP;EACF;CACD,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;GACJ;EACD,OAAO,EACL,MAAM,MACP;EACF;CACD,IAAI;EACF,SAAS;GACP,GAAG;GACH,GAAG;GACJ;EACD,OAAO,EACL,MAAM,MACP;EACF;CACF;AAED,MAAM,WAAW,EAAE;AAEnB,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/range/consts.js

@@ -1,2 +1,11 @@
-const e={main:`seaBlue.28`,track:`sandstone.79`,disabled:`sandstone.55`};export{e as rangeColors};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/range/consts.ts
+const rangeColors = {
+	main: "seaBlue.28",
+	track: "sandstone.79",
+	disabled: "sandstone.55"
+};
+
+//#endregion
+export { rangeColors };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=consts.js.map

package/dist/range/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/range/consts.ts"],"sourcesContent":["export const rangeColors = {\n  main: 'seaBlue.28',\n  track: 'sandstone.79',\n  disabled: 'sandstone.55',\n} as const\n"],"mappings":"AAAA,MAAa,EAAc,CACzB,KAAM,aACN,MAAO,eACP,SAAU,eACX"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/range/consts.ts"],"sourcesContent":["export const rangeColors = {\n  main: 'seaBlue.28',\n  track: 'sandstone.79',\n  disabled: 'sandstone.55',\n} as const\n"],"mappings":";AAAA,MAAa,cAAc;CACzB,MAAM;CACN,OAAO;CACP,UAAU;CACX"}

package/dist/range/index.d.ts

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

package/dist/range/range.d.ts

@@ -1,5 +1,6 @@
 import { VuiComponent } from "../core/vui.js";
 import { RangeProps } from "./range.types.js";
+import "../index.js";
 
 //#region src/range/range.d.ts
 /** Implements a range input. */

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

@@ -1 +1 @@
-{"version":3,"file":"range.d.ts","names":[],"sources":["../../src/range/range.tsx"],"sourcesContent":[],"mappings":";;;;;cAoBa,OAAK,oBAAA"}
+{"version":3,"file":"range.d.ts","names":[],"sources":["../../src/range/range.tsx"],"sourcesContent":[],"mappings":";;;;;;cAoBa,OAAK,oBAAA"}

package/dist/range/range.js

@@ -1,7 +1,85 @@
-import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{rangeColors as n}from"./consts.js";import{useStyleConfig as r}from"../core/theme.js";import{styled as i}from"../core/styled.js";import{vui as a}from"../core/vui.js";import{Box as o}from"../box/box.js";import{Tooltip as s}from"../tooltip/tooltip.js";import{jsx as c}from"react/jsx-runtime";import l from"react-slider";const u=i(l)`
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.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 { Tooltip } from "../tooltip/tooltip.js";
+import { jsx } from "react/jsx-runtime";
+import ReactSlider from "react-slider";
+
+//#region src/range/range.tsx
+const SliderBase = styled(ReactSlider)`
   width: 100%;
   height: 4px;
   cursor: pointer;
   transition-duration: '0s';
-`,d=e=>`${e}`,f=a((i,a)=>{let{className:l,value:f,defaultValue:p=0,disabled:m,min:h=0,minDistance:g=0,max:_=100,step:v=1,showTooltip:y=!1,showValue:b=!1,formatter:x=d,onChange:S,...C}=i,w=r(`Range`,i),T=e({"aria-disabled":m}),E=typeof p!=`object`&&typeof f!=`object`,D=m?n.disabled:n.main,O=e=>{let{key:t}=e;return E?t===`track-0`?D:n.track:t===`track-2`?n.track:t===`track-1`?D:n.track},k=(e,t)=>{let n=c(o,{className:`vui-range-thumb`,...w.thumb,borderColor:D,...e,children:b&&c(o,{center:!0,className:`vui-range-thumb-value`,...w.thumbValue,children:x(t.valueNow)})});return b?n:c(s,{disabled:m,text:x(t.valueNow),visible:y,children:n},t.index)},A=(e,t)=>c(o,{...w.track,bg:O(e),className:`vui-range-track`,...e,index:t.index});return c(o,{className:t(`vui-range`,E?`vui-range-single`:`vui-range-range`,l),ref:a,...w.container,...T,...C,children:c(u,{className:`vui-range-slider`,defaultValue:p,disabled:m,max:_,min:h,minDistance:g,onChange:S,renderThumb:k,renderTrack:A,step:v,value:f},`${p}-${f}-${m}-${h}-${_}-${v}`)})});f.displayName=`Range`;export{f as Range};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+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 styles = useStyleConfig("Range", props);
+	const aliasedProps = filterUndefined({ "aria-disabled": disabled });
+	const isSingleValue = typeof defaultValue !== "object" && typeof value !== "object";
+	const mainColor = disabled ? rangeColors.disabled : rangeColors.main;
+	const getTrackColor = (trackProps) => {
+		const { key } = trackProps;
+		if (isSingleValue) return key === "track-0" ? mainColor : rangeColors.track;
+		return key === "track-2" ? rangeColors.track : key === "track-1" ? mainColor : rangeColors.track;
+	};
+	const Thumb = (props$1, state) => {
+		const content = /* @__PURE__ */ jsx(Box, {
+			className: "vui-range-thumb",
+			...styles.thumb,
+			borderColor: mainColor,
+			...props$1,
+			children: showValue && /* @__PURE__ */ jsx(Box, {
+				center: true,
+				className: "vui-range-thumb-value",
+				...styles.thumbValue,
+				children: formatter(state.valueNow)
+			})
+		});
+		return showValue ? content : /* @__PURE__ */ jsx(Tooltip, {
+			disabled,
+			text: formatter(state.valueNow),
+			visible: showTooltip,
+			children: content
+		}, state.index);
+	};
+	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,
+		...styles.container,
+		...aliasedProps,
+		...rest,
+		children: /* @__PURE__ */ jsx(SliderBase, {
+			className: "vui-range-slider",
+			defaultValue,
+			disabled,
+			max,
+			min,
+			minDistance,
+			onChange,
+			renderThumb: Thumb,
+			renderTrack: Track,
+			step,
+			value
+		}, `${defaultValue}-${value}-${disabled}-${min}-${max}-${step}`)
+	});
+});
+Range.displayName = "Range";
+
+//#endregion
+export { Range };
+globalThis.__vuiVersion__ = "3.0.0"
 //# 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":"iaAUA,MAAM,EAAa,EAAO,EAAY;;;;;EAOhC,EAAoB,GAAkB,GAAG,IAGlC,EAAQ,GAAwB,EAAO,IAAQ,CAC1D,GAAM,CACJ,YACA,QACA,eAAe,EACf,WACA,MAAM,EACN,cAAc,EACd,MAAM,IACN,OAAO,EACP,cAAc,GACd,YAAY,GACZ,YAAY,EACZ,WACA,GAAG,GACD,EAEE,EAAS,EAAe,QAAS,EAAM,CACvC,EAAe,EAAgB,CACnC,gBAAiB,EAClB,CAAC,CACI,EAAgB,OAAO,GAAiB,UAAY,OAAO,GAAU,SACrE,EAAY,EAAW,EAAY,SAAW,EAAY,KAE1D,EAAiB,GAAoB,CACzC,GAAM,CAAE,OAAgC,EAIxC,OAFI,EAAsB,IAAQ,UAAY,EAAY,EAAY,MAE/D,IAAQ,UAAY,EAAY,MAAQ,IAAQ,UAAY,EAAY,EAAY,OAGvF,GAAS,EAAY,IAAe,CACxC,IAAM,EACJ,EAAC,EAAA,CAAI,UAAU,kBAAkB,GAAI,EAAO,MAAO,YAAa,EAAW,GAAIA,WAC5E,GACC,EAAC,EAAA,CAAI,OAAA,GAAO,UAAU,wBAAwB,GAAI,EAAO,oBACtD,EAAU,EAAM,SAAS,EACtB,EAEJ,CAER,OAAO,EACL,EAEA,EAAC,EAAA,CAAoC,WAAU,KAAM,EAAU,EAAM,SAAS,CAAE,QAAS,WACtF,GADW,EAAM,MAEV,EAIR,GACJ,EACA,IAIG,EAAC,EAAA,CAAI,GAAI,EAAO,MAAO,GAAI,EAAcA,EAAM,CAAE,UAAU,kBAAkB,GAAIA,EAAO,MAAO,EAAM,OAAS,CAEnH,OACE,EAAC,EAAA,CACC,UAAW,EAAG,YAAa,EAAgB,mBAAqB,kBAAmB,EAAU,CACxF,MACL,GAAI,EAAO,UACX,GAAI,EACJ,GAAI,WAEJ,EAAC,EAAA,CAEC,UAAU,mBACI,eACJ,WACL,MACA,MACQ,cACH,WACV,YAAa,EACb,YAAa,EACP,OACC,SAXF,GAAG,EAAa,GAAG,EAAM,GAAG,EAAS,GAAG,EAAI,GAAG,EAAI,GAAG,IAY3D,EACE,EAER,CAEF,EAAM,YAAc"}
+{"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"}

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

@@ -1,5 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 
 //#region src/range/range.types.d.ts
 type RangeValue = number | readonly number[];

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,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,OAAA,CAAA,CAAA,CAAA,CAAA;EAEA,YAAA,CAAU,CAAA,CAGH,UAHG;EAAA,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;OAAG,CAAA,CAAA,CAKb,UALa;;UAGN,CAAA,CAAA,CAAA,OAAA;;KAoBI,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,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"}

package/dist/range/theme.js

@@ -1,2 +1,51 @@
-import{rangeColors as e}from"./consts.js";var t={baseStyle:{container:{w:1},thumb:{bg:`white`,border:`2px solid ${e.main}`,borderRadius:`24px`,cursor:`grab`,h:`24px`,lineHeight:`24px`,w:`24px`,textAlign:`center`,top:`-10px`,transitionDuration:`0s`},thumbValue:{position:`absolute`,top:`24px`,w:`18px`},track:{bg:e.main,bottom:0,borderRadius:`24px`,top:0,transitionDuration:`0s`}},defaultProps:{},parts:[`container`,`thumb`,`thumbValue`,`track`],sizes:{},variants:{}};export{t as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { rangeColors } from "./consts.js";
+
+//#region src/range/theme.ts
+const baseStyle = {
+	container: { w: 1 },
+	thumb: {
+		bg: "white",
+		border: `2px solid ${rangeColors.main}`,
+		borderRadius: "24px",
+		cursor: "grab",
+		h: "24px",
+		lineHeight: "24px",
+		w: "24px",
+		textAlign: "center",
+		top: "-10px",
+		transitionDuration: "0s"
+	},
+	thumbValue: {
+		position: "absolute",
+		top: "24px",
+		w: "18px"
+	},
+	track: {
+		bg: rangeColors.main,
+		bottom: 0,
+		borderRadius: "24px",
+		top: 0,
+		transitionDuration: "0s"
+	}
+};
+const defaultProps = {};
+const parts = [
+	"container",
+	"thumb",
+	"thumbValue",
+	"track"
+];
+const sizes = {};
+const variants = {};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map