@ark-ui/solid 3.2.2 → 3.3.0

package/dist/cjs/index.js

@@ -6,7 +6,7 @@ var solid = require('@zag-js/solid');
 var collapsible$1 = require('@zag-js/collapsible');
 var accordion$1 = require('@zag-js/accordion');
 var avatar$1 = require('@zag-js/avatar');
-var anatomy = require('@ark-ui/anatomy');
+var anatomy$1 = require('@ark-ui/anatomy');
 var carousel$1 = require('@zag-js/carousel');
 var checkbox$1 = require('@zag-js/checkbox');
 var clipboard$1 = require('@zag-js/clipboard');
@@ -25,9 +25,12 @@ var pagination$1 = require('@zag-js/pagination');
 var pinInput$1 = require('@zag-js/pin-input');
 var popover$1 = require('@zag-js/popover');
 var progress$1 = require('@zag-js/progress');
+var qrCode$1 = require('@zag-js/qr-code');
 var radio = require('@zag-js/radio-group');
 var rating = require('@zag-js/rating-group');
 var select$1 = require('@zag-js/select');
+var domQuery = require('@zag-js/dom-query');
+var types = require('@zag-js/types');
 var slider$1 = require('@zag-js/slider');
 var splitter$1 = require('@zag-js/splitter');
 var zagSwitch = require('@zag-js/switch');
@@ -37,7 +40,6 @@ var toast$1 = require('@zag-js/toast');
 var toggleGroup$1 = require('@zag-js/toggle-group');
 var tooltip$1 = require('@zag-js/tooltip');
 var treeView$1 = require('@zag-js/tree-view');
-var domQuery = require('@zag-js/dom-query');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -76,6 +78,7 @@ var pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination$1);
 var pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput$1);
 var popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover$1);
 var progress__namespace = /*#__PURE__*/_interopNamespaceDefault(progress$1);
+var qrCode__namespace = /*#__PURE__*/_interopNamespaceDefault(qrCode$1);
 var radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 var rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select$1);
@@ -184,8 +187,8 @@ const CollapsibleContent = props => {
 
 const CollapsibleContext = props => props.children(useCollapsibleContext());
 
-const isFunction = value => typeof value === 'function';
-const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+const isFunction$1 = value => typeof value === 'function';
+const runIfFn$1 = (valueOrFn, ...args) => isFunction$1(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
 const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   hookName: 'useEnvironmentContext',
@@ -198,10 +201,10 @@ const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   })
 });
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<span hidden>`);
 const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = solidJs.createSignal();
-  const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
+  const getRootNode = () => runIfFn$1(props.value) ?? spanRef()?.ownerDocument ?? document;
   const environment = solidJs.createMemo(() => ({
     getRootNode,
     getDocument: () => domQuery.getDocument(getRootNode()),
@@ -215,7 +218,7 @@ const EnvironmentProvider = props => {
           return !props.value;
         },
         get children() {
-          var _el$ = _tmpl$$4();
+          var _el$ = _tmpl$$5();
           web.use(setSpanRef, _el$);
           return _el$;
         }
@@ -528,7 +531,7 @@ const [CarouselProvider, useCarouselContext] = createContext({
 const CarouselContext = props => props.children(useCarouselContext());
 
 const CarouselControl = props => {
-  const mergedProps = solid.mergeProps(() => anatomy.carouselAnatomy.build().control.attrs, props);
+  const mergedProps = solid.mergeProps(() => anatomy$1.carouselAnatomy.build().control.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -646,6 +649,88 @@ const CheckboxControl = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+function useControllableState(props) {
+  const [uncontrolledValue, setUncontrolledValue] = solidJs.createSignal(runIfFn$1(props.defaultValue));
+  const controlled = solidJs.createMemo(() => props.value?.() !== undefined);
+  const currentValue = solidJs.createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
+  const setValue = next => {
+    solidJs.untrack(() => {
+      const nextValue = runIfFn$1(next, currentValue());
+      if (controlled()) {
+        return props.onChange?.(nextValue);
+      }
+      setUncontrolledValue(nextValue);
+      return props.onChange?.(nextValue);
+    });
+  };
+  return [currentValue, setValue];
+}
+
+function useCheckboxGroup(props = {}) {
+  const interative = solidJs.createMemo(() => !(props.disabled || props.readOnly));
+  const [value, setValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue || [],
+    onChange: props.onValueChange
+  });
+  return solidJs.createMemo(() => {
+    const isChecked = val => {
+      return value().some(v => String(v) === String(val));
+    };
+    const toggleValue = val => {
+      isChecked(val) ? removeValue(val) : addValue(val);
+    };
+    const addValue = val => {
+      if (!interative()) return;
+      if (isChecked(val)) return;
+      setValue(value().concat(val));
+    };
+    const removeValue = val => {
+      if (!interative()) return;
+      setValue(value().filter(v => String(v) !== String(val)));
+    };
+    const getItemProps = itemProps => {
+      return {
+        checked: itemProps.value != null ? isChecked(itemProps.value) : undefined,
+        onCheckedChange() {
+          if (itemProps.value != null) {
+            toggleValue(itemProps.value);
+          }
+        },
+        disabled: props.disabled,
+        readOnly: props.readOnly
+      };
+    };
+    return {
+      isChecked,
+      value,
+      disabled: props.disabled,
+      readOnly: props.readOnly,
+      setValue,
+      addValue,
+      toggleValue,
+      getItemProps
+    };
+  });
+}
+
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
+  hookName: 'useCheckboxGroupContext',
+  providerName: '<CheckboxGroupProvider />',
+  strict: false
+});
+
+const CheckboxGroup = props => {
+  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'readOnly']);
+  const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
+  return web.createComponent(CheckboxGroupContextProvider, {
+    value: checkboxGroup,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(localProps, () => anatomy$1.checkboxAnatomy.build().group.attrs));
+    }
+  });
+};
+
 const CheckboxHiddenInput = props => {
   const checkbox = useCheckboxContext();
   const mergedProps = solid.mergeProps(() => checkbox().getHiddenInputProps(), props);
@@ -669,7 +754,13 @@ const CheckboxLabel = props => {
   return web.createComponent(ark.span, mergedProps);
 };
 
-const useCheckbox = props => {
+const useCheckbox = ownProps => {
+  const checkboxGroup = useCheckboxGroupContext();
+  const props = solidJs.createMemo(() => {
+    return solid.mergeProps(ownProps, checkboxGroup?.().getItemProps({
+      value: ownProps.value
+    }) ?? {});
+  }, [ownProps, checkboxGroup]);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
@@ -677,8 +768,8 @@ const useCheckbox = props => {
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    checked: props.defaultChecked,
-    ...props
+    checked: props().defaultChecked,
+    ...props()
   }));
   const [state, send] = solid.useMachine(checkbox__namespace.machine(context()), {
     context
@@ -715,6 +806,7 @@ var checkbox = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: CheckboxContext,
   Control: CheckboxControl,
+  Group: CheckboxGroup,
   HiddenInput: CheckboxHiddenInput,
   Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
@@ -902,7 +994,7 @@ const ColorPickerChannelSliderTrack = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const splitPresenceProps = props => createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+const splitPresenceProps = props => createSplitProps()(props, ['immediate', 'lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
 
 const usePresence = props => {
   const [renderStrategyProps, context] = splitRenderStrategyProps(props);
@@ -1142,7 +1234,7 @@ const ColorPickerTrigger = props => {
 
 const ColorPickerValueText = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().valueText.attrs, props);
+  const mergedProps = solid.mergeProps(() => anatomy$1.colorPickerAnatomy.build().valueText.attrs, props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return api().valueAsString || props.children;
@@ -1152,7 +1244,7 @@ const ColorPickerValueText = props => {
 
 const ColorPickerView = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().view.attrs, props);
+  const mergedProps = solid.mergeProps(() => anatomy$1.colorPickerAnatomy.build().view.attrs, props);
   return web.createComponent(solidJs.Show, {
     get when() {
       return api().format === props.format;
@@ -1474,14 +1566,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$3 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getMonthSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$3();
+        var _el$ = _tmpl$$4();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1719,7 +1811,7 @@ const DatePickerTrigger = props => {
 const DatePickerView = props => {
   const [viewProps, localProps] = createSplitProps()(props, ['view']);
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy.datePickerAnatomy.build().view.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => anatomy$1.datePickerAnatomy.build().view.attrs, localProps);
   return web.createComponent(DatePickerViewProvider, {
     value: viewProps,
     get children() {
@@ -1746,7 +1838,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$2 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$3 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getYearSelectProps(), props);
@@ -1756,7 +1848,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        var _el$ = _tmpl$$2();
+        var _el$ = _tmpl$$3();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -3279,6 +3371,82 @@ var progress = /*#__PURE__*/Object.freeze({
   View: ProgressView
 });
 
+const [QrCodeProvider, useQrCodeContext] = createContext({
+  hookName: 'useQrCodeContext',
+  providerName: '<QrCodeProvider />'
+});
+
+const QrCodeContext = props => props.children(useQrCodeContext());
+
+const QrCodeFrame = props => {
+  const qrCode = useQrCodeContext();
+  const mergedProps = solid.mergeProps(() => qrCode().getFrameProps(), props);
+  return web.createComponent(ark.svg, mergedProps);
+};
+
+const QrCodeOverlay = props => {
+  const qrCode = useQrCodeContext();
+  const mergedProps = solid.mergeProps(() => qrCode().getOverlayProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const QrCodePattern = props => {
+  const qrCode = useQrCodeContext();
+  const mergedProps = solid.mergeProps(() => qrCode().getPatternProps(), props);
+  return web.createComponent(ark.path, mergedProps);
+};
+
+const useQrCode = props => {
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(qrCode__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => qrCode__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const QrCodeRoot = props => {
+  const [useQrCodeProps, restProps] = createSplitProps()(props, ['encoding', 'id', 'ids', 'value']);
+  const api = useQrCode(useQrCodeProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), restProps);
+  return web.createComponent(QrCodeProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const QrCodeRootProvider = props => {
+  const [{
+    value: qrCode
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => qrCode().getRootProps(), localProps);
+  return web.createComponent(QrCodeProvider, {
+    value: qrCode,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var qrCode = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Frame: QrCodeFrame,
+  Overlay: QrCodeOverlay,
+  Pattern: QrCodePattern,
+  QrCodeContext: QrCodeContext,
+  Root: QrCodeRoot,
+  RootProvider: QrCodeRootProvider
+});
+
 const [RadioGroupProvider, useRadioGroupContext] = createContext({
   hookName: 'useRadioGroupContext',
   providerName: '<RadioGroupProvider />'
@@ -3512,7 +3680,7 @@ const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
 const SegmentGroupIndicator = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), anatomy$1.segmentGroupAnatomy.build().indicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3529,7 +3697,7 @@ const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createC
 const SegmentGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), anatomy$1.segmentGroupAnatomy.build().item.attrs, localProps);
   const itemState = solidJs.createMemo(() => segmentGroup().getItemState(itemProps));
   return web.createComponent(SegmentGroupItemPropsProvider, {
     value: itemProps,
@@ -3549,7 +3717,7 @@ const SegmentGroupItemContext = props => props.children(useSegmentGroupItemConte
 const SegmentGroupItemControl = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy$1.segmentGroupAnatomy.build().itemControl.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3563,13 +3731,13 @@ const SegmentGroupItemHiddenInput = props => {
 const SegmentGroupItemText = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), anatomy.segmentGroupAnatomy.build().itemText.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), anatomy$1.segmentGroupAnatomy.build().itemText.attrs, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SegmentGroupLabel = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), anatomy.segmentGroupAnatomy.build().label.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), anatomy$1.segmentGroupAnatomy.build().label.attrs, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -3593,7 +3761,7 @@ const useSegmentGroup = props => {
 const SegmentGroupRoot = props => {
   const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
   const segmentGroup = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy$1.segmentGroupAnatomy.build().root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -3606,7 +3774,7 @@ const SegmentGroupRootProvider = props => {
   const [{
     value: segmentGroup
   }, localProps] = createSplitProps()(props, ['value']);
-  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy$1.segmentGroupAnatomy.build().root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -3662,8 +3830,8 @@ const SelectControl = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-var _tmpl$$1 = /*#__PURE__*/web.template(`<option value="">`),
-  _tmpl$2 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
+  _tmpl$2$1 = /*#__PURE__*/web.template(`<option>`);
 const SelectHiddenSelect = props => {
   const select = useSelectContext();
   const mergedProps = solid.mergeProps(() => select().getControlProps(), props);
@@ -3675,14 +3843,14 @@ const SelectHiddenSelect = props => {
           return isValueEmpty();
         },
         get children() {
-          return _tmpl$$1();
+          return _tmpl$$2();
         }
       }), web.createComponent(solidJs.Index, {
         get each() {
           return select().collection.toArray();
         },
         children: option => (() => {
-          var _el$2 = _tmpl$2();
+          var _el$2 = _tmpl$2$1();
           web.insert(_el$2, () => option().label);
           web.effect(() => _el$2.value = option().value);
           return _el$2;
@@ -3777,6 +3945,12 @@ const SelectLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
+const SelectList = props => {
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().getListProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
 const SelectPositioner = props => {
   const select = useSelectContext();
   const presenceApi = usePresenceContext();
@@ -3864,7 +4038,7 @@ const SelectTrigger = props => {
 
 const SelectValueText = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => anatomy.selectAnatomy.build().valueText.attrs, props);
+  const mergedProps = solid.mergeProps(() => anatomy$1.selectAnatomy.build().valueText.attrs, props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return select().valueAsString || props.placeholder;
@@ -3887,6 +4061,7 @@ var select = /*#__PURE__*/Object.freeze({
   ItemIndicator: SelectItemIndicator,
   ItemText: SelectItemText,
   Label: SelectLabel,
+  List: SelectList,
   Positioner: SelectPositioner,
   Root: SelectRoot,
   RootProvider: SelectRootProvider,
@@ -3894,6 +4069,1777 @@ var select = /*#__PURE__*/Object.freeze({
   ValueText: SelectValueText
 });
 
+const [SignaturePadProvider, useSignaturePadContext] = createContext({
+  hookName: 'useSignaturePadContext',
+  providerName: '<SignaturePadProvider />'
+});
+
+const SignaturePadClearTrigger = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getClearTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const SignaturePadContext = props => props.children(useSignaturePadContext());
+
+const SignaturePadControl = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getControlProps(), props);
+  return web.createComponent(ark.div, web.mergeProps({
+    role: "application"
+  }, mergedProps));
+};
+
+const SignaturePadGuide = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getGuideProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SignaturePadLabel = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getLabelProps(), props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+// src/create-anatomy.ts
+var createAnatomy = (name, parts = []) => ({
+  parts: (...values) => {
+    if (isEmpty(parts)) {
+      return createAnatomy(name, values);
+    }
+    throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
+  },
+  extendWith: (...values) => createAnatomy(name, [...parts, ...values]),
+  rename: (newName) => createAnatomy(newName, parts),
+  keys: () => parts,
+  build: () => [...new Set(parts)].reduce(
+    (prev, part) => Object.assign(prev, {
+      [part]: {
+        selector: [
+          `&[data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`,
+          `& [data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`
+        ].join(", "),
+        attrs: { "data-scope": toKebabCase(name), "data-part": toKebabCase(part) }
+      }
+    }),
+    {}
+  )
+});
+var toKebabCase = (value) => value.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+var isEmpty = (v) => v.length === 0;
+
+// src/index.ts
+var state = "default";
+var userSelect = "";
+var elementMap = /* @__PURE__ */ new WeakMap();
+function disableTextSelectionImpl(options = {}) {
+  const { target, doc } = options;
+  const docNode = doc ?? document;
+  const rootEl = docNode.documentElement;
+  if (domQuery.isIos()) {
+    if (state === "default") {
+      userSelect = rootEl.style.webkitUserSelect;
+      rootEl.style.webkitUserSelect = "none";
+    }
+    state = "disabled";
+  } else if (target) {
+    elementMap.set(target, target.style.userSelect);
+    target.style.userSelect = "none";
+  }
+  return () => restoreTextSelection({ target, doc: docNode });
+}
+function restoreTextSelection(options = {}) {
+  const { target, doc } = options;
+  const docNode = doc ?? document;
+  const rootEl = docNode.documentElement;
+  if (domQuery.isIos()) {
+    if (state !== "disabled") return;
+    state = "restoring";
+    setTimeout(() => {
+      domQuery.nextTick(() => {
+        if (state === "restoring") {
+          if (rootEl.style.webkitUserSelect === "none") {
+            rootEl.style.webkitUserSelect = userSelect || "";
+          }
+          userSelect = "";
+          state = "default";
+        }
+      });
+    }, 300);
+  } else {
+    if (target && elementMap.has(target)) {
+      const prevUserSelect = elementMap.get(target);
+      if (target.style.userSelect === "none") {
+        target.style.userSelect = prevUserSelect ?? "";
+      }
+      if (target.getAttribute("style") === "") {
+        target.removeAttribute("style");
+      }
+      elementMap.delete(target);
+    }
+  }
+}
+function disableTextSelection(options = {}) {
+  const { defer, target, ...restOptions } = options;
+  const func = defer ? domQuery.raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = typeof target === "function" ? target() : target;
+      cleanups.push(disableTextSelectionImpl({ ...restOptions, target: node }));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+
+// src/add-dom-event.ts
+var addDomEvent = (target, eventName, handler, options) => {
+  const node = typeof target === "function" ? target() : target;
+  node?.addEventListener(eventName, handler, options);
+  return () => {
+    node?.removeEventListener(eventName, handler, options);
+  };
+};
+var isLeftClick = (e) => e.button === 0;
+var isModifierKey = (e) => e.ctrlKey || e.altKey || e.metaKey;
+
+// src/get-event-point.ts
+function pointFromTouch(e, type = "client") {
+  const point = e.touches[0] || e.changedTouches[0];
+  return { x: point[`${type}X`], y: point[`${type}Y`] };
+}
+function pointFromMouse(point, type = "client") {
+  return { x: point[`${type}X`], y: point[`${type}Y`] };
+}
+var isTouchEvent = (event) => "touches" in event && event.touches.length > 0;
+function getEventPoint(event, type = "client") {
+  return isTouchEvent(event) ? pointFromTouch(event, type) : pointFromMouse(event, type);
+}
+
+// src/get-point-value.ts
+function clamp(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function getRelativePoint(point, element) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const offset = { x: point.x - left, y: point.y - top };
+  const percent = { x: clamp(offset.x / width), y: clamp(offset.y / height) };
+  function getPercentValue(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+    }
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue };
+}
+function trackPointerMove(doc, handlers) {
+  const { onPointerMove, onPointerUp } = handlers;
+  const history = [];
+  const handleMove = (event) => {
+    const point = getEventPoint(event);
+    history.push({ ...point, timestamp: performance.now() });
+    const distance = Math.sqrt(point.x ** 2 + point.y ** 2);
+    const moveBuffer = event.pointerType === "touch" ? 10 : 5;
+    if (distance < moveBuffer) return;
+    if (event.pointerType === "mouse" && event.button === 0) {
+      onPointerUp();
+      return;
+    }
+    onPointerMove({ point, event, velocity: getVelocity(history, 0.1) });
+  };
+  const cleanups = [
+    addDomEvent(doc, "pointermove", handleMove, false),
+    addDomEvent(doc, "pointerup", onPointerUp, false),
+    addDomEvent(doc, "pointercancel", onPointerUp, false),
+    addDomEvent(doc, "contextmenu", onPointerUp, false),
+    disableTextSelection({ doc })
+  ];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup());
+    history.length = 0;
+  };
+}
+function lastDevicePoint(history) {
+  return history[history.length - 1];
+}
+function ms(seconds) {
+  return seconds * 1e3;
+}
+function sec(milliseconds) {
+  return milliseconds / 1e3;
+}
+function getVelocity(history, timeDelta) {
+  if (history.length < 2) return { x: 0, y: 0 };
+  let i = history.length - 1;
+  let timestampedPoint = null;
+  const lastPoint = lastDevicePoint(history);
+  while (i >= 0) {
+    timestampedPoint = history[i];
+    if (lastPoint.timestamp - timestampedPoint.timestamp > ms(timeDelta)) {
+      break;
+    }
+    i--;
+  }
+  if (!timestampedPoint) return { x: 0, y: 0 };
+  const time = sec(lastPoint.timestamp - timestampedPoint.timestamp);
+  if (time === 0) return { x: 0, y: 0 };
+  const currentVelocity = {
+    x: (lastPoint.x - timestampedPoint.x) / time,
+    y: (lastPoint.y - timestampedPoint.y) / time
+  };
+  if (currentVelocity.x === Infinity) currentVelocity.x = 0;
+  if (currentVelocity.y === Infinity) currentVelocity.y = 0;
+  return {
+    x: Math.abs(currentVelocity.x),
+    y: Math.abs(currentVelocity.y)
+  };
+}
+
+/* eslint @typescript-eslint/no-explicit-any: off */
+// symbols
+const GET_ORIGINAL_SYMBOL = Symbol();
+// get object prototype
+const getProto = Object.getPrototypeOf;
+const objectsToTrack = new WeakMap();
+// check if obj is a plain object or an array
+const isObjectToTrack = obj => obj && (objectsToTrack.has(obj) ? objectsToTrack.get(obj) : getProto(obj) === Object.prototype || getProto(obj) === Array.prototype);
+/**
+ * Unwrap proxy to get the original object.
+ *
+ * Used to retrieve the original object used to create the proxy instance with `createProxy`.
+ *
+ * @param {Proxy<object>} obj -  The proxy wrapper of the originial object.
+ * @returns {object | null} - Return either the unwrapped object if exists.
+ *
+ * @example
+ * import { createProxy, getUntracked } from 'proxy-compare';
+ *
+ * const original = { a: "1", c: "2", d: { e: "3" } };
+ * const affected = new WeakMap();
+ *
+ * const proxy = createProxy(original, affected);
+ * const originalFromProxy = getUntracked(proxy)
+ *
+ * Object.is(original, originalFromProxy) // true
+ * isChanged(original, originalFromProxy, affected) // false
+ */
+const getUntracked = obj => {
+  if (isObjectToTrack(obj)) {
+    return obj[GET_ORIGINAL_SYMBOL] || null;
+  }
+  return null;
+};
+/**
+ * Mark object to be tracked.
+ *
+ * This function marks an object that will be passed into `createProxy`
+ * as marked to track or not. By default only Array and Object are marked to track,
+ * so this is useful for example to mark a class instance to track or to mark a object
+ * to be untracked when creating your proxy.
+ *
+ * @param obj - Object to mark as tracked or not.
+ * @param mark - Boolean indicating whether you want to track this object or not.
+ * @returns - No return.
+ *
+ * @example
+ * import { createProxy, markToTrack, isChanged } from 'proxy-compare';
+ *
+ * const nested = { e: "3" }
+ *
+ * markToTrack(nested, false)
+ *
+ * const original = { a: "1", c: "2", d: nested };
+ * const affected = new WeakMap();
+ *
+ * const proxy = createProxy(original, affected);
+ *
+ * proxy.d.e
+ *
+ * isChanged(original, { d: { e: "3" } }, affected) // true
+ */
+const markToTrack = (obj, mark = true) => {
+  objectsToTrack.set(obj, mark);
+};
+
+// src/global.ts
+function getGlobal() {
+  if (typeof globalThis !== "undefined") return globalThis;
+  if (typeof self !== "undefined") return self;
+  if (typeof window !== "undefined") return window;
+  if (typeof global !== "undefined") return global;
+}
+function makeGlobal(key, value) {
+  const g = getGlobal();
+  if (!g) return value();
+  g[key] || (g[key] = value());
+  return g[key];
+}
+var isDev$1 = process.env.NODE_ENV !== "production";
+var isObject$1 = (x) => typeof x === "object" && x !== null;
+var proxyStateMap = makeGlobal("__zag__proxyStateMap", () => /* @__PURE__ */ new WeakMap());
+var refSet = makeGlobal("__zag__refSet", () => /* @__PURE__ */ new WeakSet());
+var buildProxyFunction = (objectIs = Object.is, newProxy = (target, handler) => new Proxy(target, handler), canProxy = (x) => isObject$1(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer), defaultHandlePromise = (promise) => {
+  switch (promise.status) {
+    case "fulfilled":
+      return promise.value;
+    case "rejected":
+      throw promise.reason;
+    default:
+      throw promise;
+  }
+}, snapCache = /* @__PURE__ */ new WeakMap(), createSnapshot = (target, version, handlePromise = defaultHandlePromise) => {
+  const cache = snapCache.get(target);
+  if (cache?.[0] === version) {
+    return cache[1];
+  }
+  const snap = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
+  markToTrack(snap, true);
+  snapCache.set(target, [version, snap]);
+  Reflect.ownKeys(target).forEach((key) => {
+    const value = Reflect.get(target, key);
+    if (refSet.has(value)) {
+      markToTrack(value, false);
+      snap[key] = value;
+    } else if (value instanceof Promise) {
+      Object.defineProperty(snap, key, {
+        get() {
+          return handlePromise(value);
+        }
+      });
+    } else if (proxyStateMap.has(value)) {
+      snap[key] = snapshot(value, handlePromise);
+    } else {
+      snap[key] = value;
+    }
+  });
+  return Object.freeze(snap);
+}, proxyCache = /* @__PURE__ */ new WeakMap(), versionHolder = [1, 1], proxyFunction2 = (initialObject) => {
+  if (!isObject$1(initialObject)) {
+    throw new Error("object required");
+  }
+  const found = proxyCache.get(initialObject);
+  if (found) {
+    return found;
+  }
+  let version = versionHolder[0];
+  const listeners = /* @__PURE__ */ new Set();
+  const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => {
+    if (version !== nextVersion) {
+      version = nextVersion;
+      listeners.forEach((listener) => listener(op, nextVersion));
+    }
+  };
+  let checkVersion = versionHolder[1];
+  const ensureVersion = (nextCheckVersion = ++versionHolder[1]) => {
+    if (checkVersion !== nextCheckVersion && !listeners.size) {
+      checkVersion = nextCheckVersion;
+      propProxyStates.forEach(([propProxyState]) => {
+        const propVersion = propProxyState[1](nextCheckVersion);
+        if (propVersion > version) {
+          version = propVersion;
+        }
+      });
+    }
+    return version;
+  };
+  const createPropListener = (prop) => (op, nextVersion) => {
+    const newOp = [...op];
+    newOp[1] = [prop, ...newOp[1]];
+    notifyUpdate(newOp, nextVersion);
+  };
+  const propProxyStates = /* @__PURE__ */ new Map();
+  const addPropListener = (prop, propProxyState) => {
+    if (isDev$1 && propProxyStates.has(prop)) {
+      throw new Error("prop listener already exists");
+    }
+    if (listeners.size) {
+      const remove = propProxyState[3](createPropListener(prop));
+      propProxyStates.set(prop, [propProxyState, remove]);
+    } else {
+      propProxyStates.set(prop, [propProxyState]);
+    }
+  };
+  const removePropListener = (prop) => {
+    const entry = propProxyStates.get(prop);
+    if (entry) {
+      propProxyStates.delete(prop);
+      entry[1]?.();
+    }
+  };
+  const addListener = (listener) => {
+    listeners.add(listener);
+    if (listeners.size === 1) {
+      propProxyStates.forEach(([propProxyState, prevRemove], prop) => {
+        if (isDev$1 && prevRemove) {
+          throw new Error("remove already exists");
+        }
+        const remove = propProxyState[3](createPropListener(prop));
+        propProxyStates.set(prop, [propProxyState, remove]);
+      });
+    }
+    const removeListener = () => {
+      listeners.delete(listener);
+      if (listeners.size === 0) {
+        propProxyStates.forEach(([propProxyState, remove], prop) => {
+          if (remove) {
+            remove();
+            propProxyStates.set(prop, [propProxyState]);
+          }
+        });
+      }
+    };
+    return removeListener;
+  };
+  const baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
+  const handler = {
+    deleteProperty(target, prop) {
+      const prevValue = Reflect.get(target, prop);
+      removePropListener(prop);
+      const deleted = Reflect.deleteProperty(target, prop);
+      if (deleted) {
+        notifyUpdate(["delete", [prop], prevValue]);
+      }
+      return deleted;
+    },
+    set(target, prop, value, receiver) {
+      const hasPrevValue = Reflect.has(target, prop);
+      const prevValue = Reflect.get(target, prop, receiver);
+      if (hasPrevValue && (objectIs(prevValue, value) || proxyCache.has(value) && objectIs(prevValue, proxyCache.get(value)))) {
+        return true;
+      }
+      removePropListener(prop);
+      if (isObject$1(value)) {
+        value = getUntracked(value) || value;
+      }
+      let nextValue = value;
+      if (Object.getOwnPropertyDescriptor(target, prop)?.set) ; else if (value instanceof Promise) {
+        value.then((v) => {
+          Object.assign(value, { status: "fulfilled", value: v });
+          notifyUpdate(["resolve", [prop], v]);
+        }).catch((e) => {
+          Object.assign(value, { status: "rejected", reason: e });
+          notifyUpdate(["reject", [prop], e]);
+        });
+      } else {
+        if (!proxyStateMap.has(value) && canProxy(value)) {
+          nextValue = proxy(value);
+        }
+        const childProxyState = !refSet.has(nextValue) && proxyStateMap.get(nextValue);
+        if (childProxyState) {
+          addPropListener(prop, childProxyState);
+        }
+      }
+      Reflect.set(target, prop, nextValue, receiver);
+      notifyUpdate(["set", [prop], value, prevValue]);
+      return true;
+    }
+  };
+  const proxyObject = newProxy(baseObject, handler);
+  proxyCache.set(initialObject, proxyObject);
+  const proxyState = [baseObject, ensureVersion, createSnapshot, addListener];
+  proxyStateMap.set(proxyObject, proxyState);
+  Reflect.ownKeys(initialObject).forEach((key) => {
+    const desc = Object.getOwnPropertyDescriptor(initialObject, key);
+    if (desc.get || desc.set) {
+      Object.defineProperty(baseObject, key, desc);
+    } else {
+      proxyObject[key] = initialObject[key];
+    }
+  });
+  return proxyObject;
+}) => [
+  // public functions
+  proxyFunction2,
+  // shared state
+  proxyStateMap,
+  refSet,
+  // internal things
+  objectIs,
+  newProxy,
+  canProxy,
+  defaultHandlePromise,
+  snapCache,
+  createSnapshot,
+  proxyCache,
+  versionHolder
+];
+var [proxyFunction] = buildProxyFunction();
+function proxy(initialObject = {}) {
+  return proxyFunction(initialObject);
+}
+function subscribe(proxyObject, callback, notifyInSync) {
+  const proxyState = proxyStateMap.get(proxyObject);
+  if (isDev$1 && !proxyState) {
+    console.warn("Please use proxy object");
+  }
+  let promise;
+  const ops = [];
+  const addListener = proxyState[3];
+  let isListenerActive = false;
+  const listener = (op) => {
+    ops.push(op);
+    if (notifyInSync) {
+      callback(ops.splice(0));
+      return;
+    }
+    if (!promise) {
+      promise = Promise.resolve().then(() => {
+        promise = void 0;
+        if (isListenerActive) {
+          callback(ops.splice(0));
+        }
+      });
+    }
+  };
+  const removeListener = addListener(listener);
+  isListenerActive = true;
+  return () => {
+    isListenerActive = false;
+    removeListener();
+  };
+}
+function snapshot(proxyObject, handlePromise) {
+  const proxyState = proxyStateMap.get(proxyObject);
+  if (isDev$1 && !proxyState) {
+    console.warn("Please use proxy object");
+  }
+  const [target, ensureVersion, createSnapshot] = proxyState;
+  return createSnapshot(target, ensureVersion(), handlePromise);
+}
+function ref(obj) {
+  refSet.add(obj);
+  return obj;
+}
+
+// src/proxy-computed.ts
+function proxyWithComputed(initialObject, computedFns) {
+  const keys = Object.keys(computedFns);
+  keys.forEach((key) => {
+    if (Object.getOwnPropertyDescriptor(initialObject, key)) {
+      throw new Error("object property already defined");
+    }
+    const computedFn = computedFns[key];
+    const { get, set } = typeof computedFn === "function" ? { get: computedFn } : computedFn;
+    const desc = {};
+    desc.get = () => get(snapshot(proxyObject));
+    if (set) {
+      desc.set = (newValue) => set(proxyObject, newValue);
+    }
+    Object.defineProperty(initialObject, key, desc);
+  });
+  const proxyObject = proxy(initialObject);
+  return proxyObject;
+}
+
+function set(obj, key, val) {
+	if (typeof val.value === 'object') val.value = klona(val.value);
+	if (!val.enumerable || val.get || val.set || !val.configurable || !val.writable || key === '__proto__') {
+		Object.defineProperty(obj, key, val);
+	} else obj[key] = val.value;
+}
+
+function klona(x) {
+	if (typeof x !== 'object') return x;
+
+	var i=0, k, list, tmp, str=Object.prototype.toString.call(x);
+
+	if (str === '[object Object]') {
+		tmp = Object.create(x.__proto__ || null);
+	} else if (str === '[object Array]') {
+		tmp = Array(x.length);
+	} else if (str === '[object Set]') {
+		tmp = new Set;
+		x.forEach(function (val) {
+			tmp.add(klona(val));
+		});
+	} else if (str === '[object Map]') {
+		tmp = new Map;
+		x.forEach(function (val, key) {
+			tmp.set(klona(key), klona(val));
+		});
+	} else if (str === '[object Date]') {
+		tmp = new Date(+x);
+	} else if (str === '[object RegExp]') {
+		tmp = new RegExp(x.source, x.flags);
+	} else if (str === '[object DataView]') {
+		tmp = new x.constructor( klona(x.buffer) );
+	} else if (str === '[object ArrayBuffer]') {
+		tmp = x.slice(0);
+	} else if (str.slice(-6) === 'Array]') {
+		// ArrayBuffer.isView(x)
+		// ~> `new` bcuz `Buffer.slice` => ref
+		tmp = new x.constructor(x);
+	}
+
+	if (tmp) {
+		for (list=Object.getOwnPropertySymbols(x); i < list.length; i++) {
+			set(tmp, list[i], Object.getOwnPropertyDescriptor(x, list[i]));
+		}
+
+		for (i=0, list=Object.getOwnPropertyNames(x); i < list.length; i++) {
+			if (Object.hasOwnProperty.call(tmp, k=list[i]) && tmp[k] === x[k]) continue;
+			set(tmp, k, Object.getOwnPropertyDescriptor(x, k));
+		}
+	}
+
+	return tmp || x;
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// ../utilities/core/src/array.ts
+function clear(v) {
+  while (v.length > 0) v.pop();
+  return v;
+}
+
+// ../utilities/core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res ?? void 0;
+};
+var cast = (v) => v;
+var noop = () => {
+};
+var uuid = /* @__PURE__ */ (() => {
+  let id = 0;
+  return () => {
+    id++;
+    return id.toString(36);
+  };
+})();
+
+// ../utilities/core/src/guard.ts
+var isDev = () => process.env.NODE_ENV !== "production";
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+var isNumber = (v) => typeof v === "number" && !Number.isNaN(v);
+var isString = (v) => typeof v === "string";
+var isFunction = (v) => typeof v === "function";
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../utilities/core/src/object.ts
+function compact$1(obj) {
+  if (!isPlainObject$1(obj) || obj === void 0) {
+    return obj;
+  }
+  const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string");
+  const filtered = {};
+  for (const key of keys) {
+    const value = obj[key];
+    if (value !== void 0) {
+      filtered[key] = compact$1(value);
+    }
+  }
+  return filtered;
+}
+var isPlainObject$1 = (value) => {
+  return value && typeof value === "object" && value.constructor === Object;
+};
+
+// ../utilities/core/src/warning.ts
+function warn(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    console.warn(m);
+  }
+}
+function invariant(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    throw new Error(m);
+  }
+}
+
+// src/deep-merge.ts
+function deepMerge(source, ...objects) {
+  for (const obj of objects) {
+    const target = compact$1(obj);
+    for (const key in target) {
+      if (isObject(obj[key])) {
+        if (!source[key]) {
+          source[key] = {};
+        }
+        deepMerge(source[key], obj[key]);
+      } else {
+        source[key] = obj[key];
+      }
+    }
+  }
+  return source;
+}
+function structuredClone(v) {
+  return klona(v);
+}
+function toEvent(event) {
+  const obj = isString(event) ? { type: event } : event;
+  return obj;
+}
+function toArray(value) {
+  if (!value) return [];
+  return isArray(value) ? value.slice() : [value];
+}
+function isGuardHelper(value) {
+  return isObject(value) && value.predicate != null;
+}
+
+// src/guard-utils.ts
+var Truthy = () => true;
+function determineGuardFn(guard, guardMap) {
+  guard = guard ?? Truthy;
+  return (context, event, meta) => {
+    if (isString(guard)) {
+      const value = guardMap[guard];
+      return isFunction(value) ? value(context, event, meta) : value;
+    }
+    if (isGuardHelper(guard)) {
+      return guard.predicate(guardMap)(context, event, meta);
+    }
+    return guard?.(context, event, meta);
+  };
+}
+function determineActionsFn(values, guardMap) {
+  return (context, event, meta) => {
+    if (isGuardHelper(values)) {
+      return values.predicate(guardMap)(context, event, meta);
+    }
+    return values;
+  };
+}
+function createProxy(config) {
+  const computedContext = config.computed ?? cast({});
+  const initialContext = config.context ?? cast({});
+  const initialTags = config.initial ? config.states?.[config.initial]?.tags : [];
+  const state = proxy({
+    value: config.initial ?? "",
+    previousValue: "",
+    event: cast({}),
+    previousEvent: cast({}),
+    context: proxyWithComputed(initialContext, computedContext),
+    done: false,
+    tags: initialTags ?? [],
+    hasTag(tag) {
+      return this.tags.includes(tag);
+    },
+    matches(...value) {
+      return value.includes(this.value);
+    },
+    can(event) {
+      return cast(this).nextEvents.includes(event);
+    },
+    get nextEvents() {
+      const stateEvents = config.states?.[this.value]?.["on"] ?? {};
+      const globalEvents = config?.on ?? {};
+      return Object.keys({ ...stateEvents, ...globalEvents });
+    },
+    get changed() {
+      if (this.event.value === "machine.init" /* Init */ || !this.previousValue) return false;
+      return this.value !== this.previousValue;
+    }
+  });
+  return cast(state);
+}
+
+// src/delay-utils.ts
+function determineDelayFn(delay, delaysMap) {
+  return (context, event) => {
+    if (isNumber(delay)) return delay;
+    if (isFunction(delay)) {
+      return delay(context, event);
+    }
+    if (isString(delay)) {
+      const value = Number.parseFloat(delay);
+      if (!Number.isNaN(value)) {
+        return value;
+      }
+      if (delaysMap) {
+        const valueOrFn = delaysMap?.[delay];
+        invariant(
+          valueOrFn == null,
+          `[@zag-js/core > determine-delay] Cannot determine delay for \`${delay}\`. It doesn't exist in \`options.delays\``
+        );
+        return isFunction(valueOrFn) ? valueOrFn(context, event) : valueOrFn;
+      }
+    }
+  };
+}
+
+// src/transition-utils.ts
+function toTarget(target) {
+  return isString(target) ? { target } : target;
+}
+function determineTransitionFn(transitions, guardMap) {
+  return (context, event, meta) => {
+    return toArray(transitions).map(toTarget).find((transition) => {
+      const determineGuard = determineGuardFn(transition.guard, guardMap);
+      const guard = determineGuard(context, event, meta);
+      return guard ?? transition.target ?? transition.actions;
+    });
+  };
+}
+
+// src/machine.ts
+var Machine = class {
+  // Let's get started!
+  constructor(config, options) {
+    __publicField(this, "status", "Not Started" /* NotStarted */);
+    __publicField(this, "state");
+    __publicField(this, "initialState");
+    __publicField(this, "initialContext");
+    __publicField(this, "id");
+    __publicField(this, "type", "machine" /* Machine */);
+    // Cleanup function map (per state)
+    __publicField(this, "activityEvents", /* @__PURE__ */ new Map());
+    __publicField(this, "delayedEvents", /* @__PURE__ */ new Map());
+    // state update listeners the user can opt-in for
+    __publicField(this, "stateListeners", /* @__PURE__ */ new Set());
+    __publicField(this, "doneListeners", /* @__PURE__ */ new Set());
+    __publicField(this, "contextWatchers", /* @__PURE__ */ new Set());
+    // Cleanup functions (for `subscribe`)
+    __publicField(this, "removeStateListener", noop);
+    // For Parent <==> Spawned Actor relationship
+    __publicField(this, "parent");
+    __publicField(this, "children", /* @__PURE__ */ new Map());
+    // A map of guard, action, delay implementations
+    __publicField(this, "guardMap");
+    __publicField(this, "actionMap");
+    __publicField(this, "delayMap");
+    __publicField(this, "activityMap");
+    __publicField(this, "sync");
+    __publicField(this, "options");
+    __publicField(this, "config");
+    __publicField(this, "_created", () => {
+      const event = toEvent("machine.created" /* Created */);
+      this.executeActions(this.config?.created, event);
+    });
+    // Starts the interpreted machine.
+    __publicField(this, "start", (init) => {
+      this.state.value = "";
+      this.state.tags = [];
+      if (this.status === "Running" /* Running */) {
+        return this;
+      }
+      this.status = "Running" /* Running */;
+      this.removeStateListener = subscribe(
+        this.state,
+        () => {
+          this.stateListeners.forEach((listener) => {
+            listener(this.stateSnapshot);
+          });
+        },
+        this.sync
+      );
+      this.setupContextWatchers();
+      this.executeActivities(toEvent("machine.start" /* Start */), toArray(this.config.activities), "machine.start" /* Start */);
+      this.executeActions(this.config.entry, toEvent("machine.start" /* Start */));
+      const event = toEvent("machine.init" /* Init */);
+      const target = isObject(init) ? init.value : init;
+      const context = isObject(init) ? init.context : void 0;
+      if (context) {
+        this.setContext(context);
+      }
+      const transition = {
+        target: target ?? this.config.initial
+      };
+      const next = this.getNextStateInfo(transition, event);
+      this.initialState = next;
+      this.performStateChangeEffects(this.state.value, next, event);
+      return this;
+    });
+    __publicField(this, "setupContextWatchers", () => {
+      const { watch } = this.config;
+      if (!watch) return;
+      let prev = snapshot(this.state.context);
+      const cleanup = subscribe(this.state.context, () => {
+        const next = snapshot(this.state.context);
+        for (const [key, fn] of Object.entries(watch)) {
+          const isEqual = this.options.compareFns?.[key] ?? Object.is;
+          if (isEqual(prev[key], next[key])) continue;
+          this.executeActions(fn, this.state.event);
+        }
+        prev = next;
+      });
+      this.contextWatchers.add(cleanup);
+    });
+    // Stops the interpreted machine
+    __publicField(this, "stop", () => {
+      if (this.status === "Stopped" /* Stopped */) return;
+      this.performExitEffects(this.state.value, toEvent("machine.stop" /* Stop */));
+      this.executeActions(this.config.exit, toEvent("machine.stop" /* Stop */));
+      this.setState("");
+      this.setEvent("machine.stop" /* Stop */);
+      this.stopStateListeners();
+      this.stopChildren();
+      this.stopActivities();
+      this.stopDelayedEvents();
+      this.stopContextWatchers();
+      this.status = "Stopped" /* Stopped */;
+      return this;
+    });
+    __publicField(this, "stopStateListeners", () => {
+      this.removeStateListener();
+      this.stateListeners.clear();
+    });
+    __publicField(this, "stopContextWatchers", () => {
+      this.contextWatchers.forEach((fn) => fn());
+      this.contextWatchers.clear();
+    });
+    __publicField(this, "stopDelayedEvents", () => {
+      this.delayedEvents.forEach((state) => {
+        state.forEach((stop) => stop());
+      });
+      this.delayedEvents.clear();
+    });
+    // Cleanup running activities (e.g `setInterval`, invoked callbacks, promises)
+    __publicField(this, "stopActivities", (state) => {
+      if (state) {
+        this.activityEvents.get(state)?.forEach((stop) => stop());
+        this.activityEvents.get(state)?.clear();
+        this.activityEvents.delete(state);
+      } else {
+        this.activityEvents.forEach((state2) => {
+          state2.forEach((stop) => stop());
+          state2.clear();
+        });
+        this.activityEvents.clear();
+      }
+    });
+    /**
+     * Function to send event to spawned child machine or actor
+     */
+    __publicField(this, "sendChild", (evt, to) => {
+      const event = toEvent(evt);
+      const id = runIfFn(to, this.contextSnapshot);
+      const child = this.children.get(id);
+      if (!child) {
+        invariant(`[@zag-js/core] Cannot send '${event.type}' event to unknown child`);
+      }
+      child.send(event);
+    });
+    /**
+     * Function to stop a running child machine or actor
+     */
+    __publicField(this, "stopChild", (id) => {
+      if (!this.children.has(id)) {
+        invariant(`[@zag-js/core > stop-child] Cannot stop unknown child ${id}`);
+      }
+      this.children.get(id).stop();
+      this.children.delete(id);
+    });
+    __publicField(this, "removeChild", (id) => {
+      this.children.delete(id);
+    });
+    // Stop and delete spawned actors
+    __publicField(this, "stopChildren", () => {
+      this.children.forEach((child) => child.stop());
+      this.children.clear();
+    });
+    __publicField(this, "setParent", (parent) => {
+      this.parent = parent;
+    });
+    __publicField(this, "spawn", (src, id) => {
+      const actor = runIfFn(src);
+      if (id) actor.id = id;
+      actor.type = "machine.actor" /* Actor */;
+      actor.setParent(this);
+      this.children.set(actor.id, cast(actor));
+      actor.onDone(() => {
+        this.removeChild(actor.id);
+      }).start();
+      return cast(ref(actor));
+    });
+    __publicField(this, "stopActivity", (key) => {
+      if (!this.state.value) return;
+      const cleanups = this.activityEvents.get(this.state.value);
+      cleanups?.get(key)?.();
+      cleanups?.delete(key);
+    });
+    __publicField(this, "addActivityCleanup", (state, key, cleanup) => {
+      if (!state) return;
+      if (!this.activityEvents.has(state)) {
+        this.activityEvents.set(state, /* @__PURE__ */ new Map([[key, cleanup]]));
+      } else {
+        this.activityEvents.get(state)?.set(key, cleanup);
+      }
+    });
+    __publicField(this, "setState", (target) => {
+      this.state.previousValue = this.state.value;
+      this.state.value = target;
+      const stateNode = this.getStateNode(target);
+      if (target == null) {
+        clear(this.state.tags);
+      } else {
+        this.state.tags = toArray(stateNode?.tags);
+      }
+    });
+    /**
+     * To used within side effects for React or Vue to update context
+     */
+    __publicField(this, "setContext", (context) => {
+      if (!context) return;
+      deepMerge(this.state.context, compact$1(context));
+    });
+    __publicField(this, "setOptions", (options) => {
+      const opts = compact$1(options);
+      this.actionMap = { ...this.actionMap, ...opts.actions };
+      this.delayMap = { ...this.delayMap, ...opts.delays };
+      this.activityMap = { ...this.activityMap, ...opts.activities };
+      this.guardMap = { ...this.guardMap, ...opts.guards };
+    });
+    __publicField(this, "getStateNode", (state) => {
+      if (!state) return;
+      return this.config.states?.[state];
+    });
+    __publicField(this, "getNextStateInfo", (transitions, event) => {
+      const transition = this.determineTransition(transitions, event);
+      const isTargetless = !transition?.target;
+      const target = transition?.target ?? this.state.value;
+      const changed = this.state.value !== target;
+      const stateNode = this.getStateNode(target);
+      const reenter = !isTargetless && !changed && !transition?.internal;
+      const info = {
+        reenter,
+        transition,
+        stateNode,
+        target,
+        changed
+      };
+      this.log("NextState:", `[${event.type}]`, this.state.value, "---->", info.target);
+      return info;
+    });
+    __publicField(this, "getAfterActions", (transition, delay) => {
+      let id;
+      return {
+        entry: () => {
+          id = globalThis.setTimeout(() => {
+            const next = this.getNextStateInfo(transition, this.state.event);
+            this.performStateChangeEffects(this.state.value, next, this.state.event);
+          }, delay);
+        },
+        exit: () => {
+          globalThis.clearTimeout(id);
+        }
+      };
+    });
+    /**
+     * All `after` events leverage `setTimeout` and `clearTimeout`,
+     * we invoke the `clearTimeout` on exit and `setTimeout` on entry.
+     *
+     * To achieve this, we split the `after` defintion into `entry` and `exit`
+     *  functions and append them to the state's `entry` and `exit` actions
+     */
+    __publicField(this, "getDelayedEventActions", (state) => {
+      const stateNode = this.getStateNode(state);
+      const event = this.state.event;
+      if (!stateNode || !stateNode.after) return;
+      const entries = [];
+      const exits = [];
+      if (isArray(stateNode.after)) {
+        const transition = this.determineTransition(stateNode.after, event);
+        if (!transition) return;
+        if (!hasProp(transition, "delay")) {
+          throw new Error(`[@zag-js/core > after] Delay is required for after transition: ${JSON.stringify(transition)}`);
+        }
+        const determineDelay = determineDelayFn(transition.delay, this.delayMap);
+        const __delay = determineDelay(this.contextSnapshot, event);
+        const actions = this.getAfterActions(transition, __delay);
+        entries.push(actions.entry);
+        exits.push(actions.exit);
+        return { entries, exits };
+      }
+      if (isObject(stateNode.after)) {
+        for (const delay in stateNode.after) {
+          const transition = stateNode.after[delay];
+          const determineDelay = determineDelayFn(delay, this.delayMap);
+          const __delay = determineDelay(this.contextSnapshot, event);
+          const actions = this.getAfterActions(transition, __delay);
+          entries.push(actions.entry);
+          exits.push(actions.exit);
+        }
+      }
+      return { entries, exits };
+    });
+    /**
+     * Function to executes defined actions. It can accept actions as string
+     * (referencing `options.actions`) or actual functions.
+     */
+    __publicField(this, "executeActions", (actions, event) => {
+      const pickedActions = determineActionsFn(actions, this.guardMap)(this.contextSnapshot, event, this.guardMeta);
+      for (const action of toArray(pickedActions)) {
+        const fn = isString(action) ? this.actionMap?.[action] : action;
+        warn(
+          isString(action) && !fn,
+          `[@zag-js/core > execute-actions] No implementation found for action: \`${action}\``
+        );
+        fn?.(this.state.context, event, this.meta);
+      }
+    });
+    /**
+     * Function to execute running activities and registers
+     * their cleanup function internally (to be called later on when we exit the state)
+     */
+    __publicField(this, "executeActivities", (event, activities, state) => {
+      for (const activity of activities) {
+        const fn = isString(activity) ? this.activityMap?.[activity] : activity;
+        if (!fn) {
+          warn(`[@zag-js/core > execute-activity] No implementation found for activity: \`${activity}\``);
+          continue;
+        }
+        const cleanup = fn(this.state.context, event, this.meta);
+        if (cleanup) {
+          const key = isString(activity) ? activity : activity.name || uuid();
+          this.addActivityCleanup(state ?? this.state.value, key, cleanup);
+        }
+      }
+    });
+    /**
+     * Normalizes the `every` definition to transition. `every` can be:
+     * - An array of possible actions to run (we need to pick the first match based on guard)
+     * - An object of intervals and actions
+     */
+    __publicField(this, "createEveryActivities", (every, callbackfn) => {
+      if (!every) return;
+      if (isArray(every)) {
+        const picked = toArray(every).find((transition) => {
+          const delayOrFn = transition.delay;
+          const determineDelay2 = determineDelayFn(delayOrFn, this.delayMap);
+          const delay2 = determineDelay2(this.contextSnapshot, this.state.event);
+          const determineGuard = determineGuardFn(transition.guard, this.guardMap);
+          const guard = determineGuard(this.contextSnapshot, this.state.event, this.guardMeta);
+          return guard ?? delay2 != null;
+        });
+        if (!picked) return;
+        const determineDelay = determineDelayFn(picked.delay, this.delayMap);
+        const delay = determineDelay(this.contextSnapshot, this.state.event);
+        const activity = () => {
+          const id = globalThis.setInterval(() => {
+            this.executeActions(picked.actions, this.state.event);
+          }, delay);
+          return () => {
+            globalThis.clearInterval(id);
+          };
+        };
+        callbackfn(activity);
+      } else {
+        for (const interval in every) {
+          const actions = every?.[interval];
+          const determineDelay = determineDelayFn(interval, this.delayMap);
+          const delay = determineDelay(this.contextSnapshot, this.state.event);
+          const activity = () => {
+            const id = globalThis.setInterval(() => {
+              this.executeActions(actions, this.state.event);
+            }, delay);
+            return () => {
+              globalThis.clearInterval(id);
+            };
+          };
+          callbackfn(activity);
+        }
+      }
+    });
+    __publicField(this, "setEvent", (event) => {
+      this.state.previousEvent = this.state.event;
+      this.state.event = ref(toEvent(event));
+    });
+    __publicField(this, "performExitEffects", (current, event) => {
+      const currentState = this.state.value;
+      if (currentState === "") return;
+      const stateNode = current ? this.getStateNode(current) : void 0;
+      this.stopActivities(currentState);
+      const _exit = determineActionsFn(stateNode?.exit, this.guardMap)(this.contextSnapshot, event, this.guardMeta);
+      const exitActions = toArray(_exit);
+      const afterExitActions = this.delayedEvents.get(currentState);
+      if (afterExitActions) {
+        exitActions.push(...afterExitActions);
+      }
+      this.executeActions(exitActions, event);
+    });
+    __publicField(this, "performEntryEffects", (next, event) => {
+      const stateNode = this.getStateNode(next);
+      const activities = toArray(stateNode?.activities);
+      this.createEveryActivities(stateNode?.every, (activity) => {
+        activities.unshift(activity);
+      });
+      if (activities.length > 0) {
+        this.executeActivities(event, activities);
+      }
+      const pickedActions = determineActionsFn(stateNode?.entry, this.guardMap)(
+        this.contextSnapshot,
+        event,
+        this.guardMeta
+      );
+      const entryActions = toArray(pickedActions);
+      const afterActions = this.getDelayedEventActions(next);
+      if (stateNode?.after && afterActions) {
+        this.delayedEvents.set(next, afterActions?.exits);
+        entryActions.push(...afterActions.entries);
+      }
+      this.executeActions(entryActions, event);
+      if (stateNode?.type === "final") {
+        this.state.done = true;
+        this.doneListeners.forEach((listener) => {
+          listener(this.stateSnapshot);
+        });
+        this.stop();
+      }
+    });
+    __publicField(this, "performTransitionEffects", (transitions, event) => {
+      const transition = this.determineTransition(transitions, event);
+      this.executeActions(transition?.actions, event);
+    });
+    /**
+     * Performs all the requires side-effects or reactions when
+     * we move from state A => state B.
+     *
+     * The Effect order:
+     * Exit actions (current state) => Transition actions  => Go to state => Entry actions (next state)
+     */
+    __publicField(this, "performStateChangeEffects", (current, next, event) => {
+      this.setEvent(event);
+      const changed = next.changed || next.reenter;
+      if (changed) {
+        this.performExitEffects(current, event);
+      }
+      this.performTransitionEffects(next.transition, event);
+      this.setState(next.target);
+      if (changed) {
+        this.performEntryEffects(next.target, event);
+      }
+    });
+    __publicField(this, "determineTransition", (transition, event) => {
+      const fn = determineTransitionFn(transition, this.guardMap);
+      return fn?.(this.contextSnapshot, event, this.guardMeta);
+    });
+    /**
+     * Function to send event to parent machine from spawned child
+     */
+    __publicField(this, "sendParent", (evt) => {
+      if (!this.parent) {
+        invariant("[@zag-js/core > send-parent] Cannot send event to an unknown parent");
+      }
+      const event = toEvent(evt);
+      this.parent?.send(event);
+    });
+    __publicField(this, "log", (...args) => {
+      if (isDev() && this.options.debug) {
+        console.log(...args);
+      }
+    });
+    /**
+     * Function to send an event to current machine
+     */
+    __publicField(this, "send", (evt) => {
+      const event = toEvent(evt);
+      this.transition(this.state.value, event);
+    });
+    __publicField(this, "transition", (state, evt) => {
+      const stateNode = isString(state) ? this.getStateNode(state) : state?.stateNode;
+      const event = toEvent(evt);
+      if (!stateNode && !this.config.on) {
+        const msg = this.status === "Stopped" /* Stopped */ ? "[@zag-js/core > transition] Cannot transition a stopped machine" : `[@zag-js/core > transition] State does not have a definition for \`state\`: ${state}, \`event\`: ${event.type}`;
+        warn(msg);
+        return;
+      }
+      const transitions = stateNode?.on?.[event.type] ?? this.config.on?.[event.type];
+      const next = this.getNextStateInfo(transitions, event);
+      this.performStateChangeEffects(this.state.value, next, event);
+      return next.stateNode;
+    });
+    __publicField(this, "subscribe", (listener) => {
+      this.stateListeners.add(listener);
+      if (this.status === "Running" /* Running */) {
+        listener(this.stateSnapshot);
+      }
+      return () => {
+        this.stateListeners.delete(listener);
+      };
+    });
+    __publicField(this, "onDone", (listener) => {
+      this.doneListeners.add(listener);
+      return this;
+    });
+    __publicField(this, "onTransition", (listener) => {
+      this.stateListeners.add(listener);
+      if (this.status === "Running" /* Running */) {
+        listener(this.stateSnapshot);
+      }
+      return this;
+    });
+    this.config = structuredClone(config);
+    this.options = structuredClone(options ?? {});
+    this.id = this.config.id ?? `machine-${uuid()}`;
+    this.guardMap = this.options?.guards ?? {};
+    this.actionMap = this.options?.actions ?? {};
+    this.delayMap = this.options?.delays ?? {};
+    this.activityMap = this.options?.activities ?? {};
+    this.sync = this.options?.sync ?? false;
+    this.state = createProxy(this.config);
+    this.initialContext = snapshot(this.state.context);
+  }
+  // immutable state value
+  get stateSnapshot() {
+    return cast(snapshot(this.state));
+  }
+  getState() {
+    return this.stateSnapshot;
+  }
+  // immutable context value
+  get contextSnapshot() {
+    return this.stateSnapshot.context;
+  }
+  /**
+   * A reference to the instance methods of the machine.
+   * Useful when spawning child machines and managing the communication between them.
+   */
+  get self() {
+    const self = this;
+    return {
+      id: this.id,
+      send: this.send.bind(this),
+      sendParent: this.sendParent.bind(this),
+      sendChild: this.sendChild.bind(this),
+      stop: this.stop.bind(this),
+      stopChild: this.stopChild.bind(this),
+      spawn: this.spawn.bind(this),
+      stopActivity: this.stopActivity.bind(this),
+      get state() {
+        return self.stateSnapshot;
+      },
+      get initialContext() {
+        return self.initialContext;
+      },
+      get initialState() {
+        return self.initialState?.target ?? "";
+      }
+    };
+  }
+  get meta() {
+    return {
+      state: this.stateSnapshot,
+      guards: this.guardMap,
+      send: this.send.bind(this),
+      self: this.self,
+      initialContext: this.initialContext,
+      initialState: this.initialState?.target ?? "",
+      getState: () => this.stateSnapshot,
+      getAction: (key) => this.actionMap[key],
+      getGuard: (key) => this.guardMap[key]
+    };
+  }
+  get guardMeta() {
+    return {
+      state: this.stateSnapshot
+    };
+  }
+  get [Symbol.toStringTag]() {
+    return "Machine";
+  }
+};
+var createMachine = (config, options) => new Machine(config, options);
+
+// src/array.ts
+
+// src/object.ts
+function compact(obj) {
+  if (!isPlainObject(obj) || obj === void 0) {
+    return obj;
+  }
+  const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string");
+  const filtered = {};
+  for (const key of keys) {
+    const value = obj[key];
+    if (value !== void 0) {
+      filtered[key] = compact(value);
+    }
+  }
+  return filtered;
+}
+var isPlainObject = (value) => {
+  return value && typeof value === "object" && value.constructor === Object;
+};
+
+function $(e,t,u,x=h=>h){return e*x(.5-t*(.5-u))}function se(e){return [-e[0],-e[1]]}function l(e,t){return [e[0]+t[0],e[1]+t[1]]}function a(e,t){return [e[0]-t[0],e[1]-t[1]]}function b(e,t){return [e[0]*t,e[1]*t]}function he(e,t){return [e[0]/t,e[1]/t]}function R(e){return [e[1],-e[0]]}function B(e,t){return e[0]*t[0]+e[1]*t[1]}function ue(e,t){return e[0]===t[0]&&e[1]===t[1]}function ge(e){return Math.hypot(e[0],e[1])}function de(e){return e[0]*e[0]+e[1]*e[1]}function A(e,t){return de(a(e,t))}function G(e){return he(e,ge(e))}function ie(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function L(e,t,u){let x=Math.sin(u),h=Math.cos(u),y=e[0]-t[0],n=e[1]-t[1],f=y*h-n*x,d=y*x+n*h;return [f+t[0],d+t[1]]}function K(e,t,u){return l(e,b(a(t,e),u))}function ee(e,t,u){return l(e,b(t,u))}var{min:C,PI:xe}=Math,pe=.275,V=xe+1e-4;function ce(e,t={}){let{size:u=16,smoothing:x=.5,thinning:h=.5,simulatePressure:y=!0,easing:n=r=>r,start:f={},end:d={},last:D=!1}=t,{cap:S=!0,easing:j=r=>r*(2-r)}=f,{cap:q=!0,easing:c=r=>--r*r*r+1}=d;if(e.length===0||u<=0)return [];let p=e[e.length-1].runningLength,g=f.taper===!1?0:f.taper===!0?Math.max(u,p):f.taper,T=d.taper===!1?0:d.taper===!0?Math.max(u,p):d.taper,te=Math.pow(u*x,2),_=[],M=[],H=e.slice(0,10).reduce((r,i)=>{let o=i.pressure;if(y){let s=C(1,i.distance/u),W=C(1,1-s);o=C(1,r+(W-r)*(s*pe));}return (r+o)/2},e[0].pressure),m=$(u,h,e[e.length-1].pressure,n),U,X=e[0].vector,z=e[0].point,F=z,O=z,E=F,J=!1;for(let r=0;r<e.length;r++){let{pressure:i}=e[r],{point:o,vector:s,distance:W,runningLength:I}=e[r];if(r<e.length-1&&p-I<3)continue;if(h){if(y){let v=C(1,W/u),Z=C(1,1-v);i=C(1,H+(Z-H)*(v*pe));}m=$(u,h,i,n);}else m=u/2;U===void 0&&(U=m);let le=I<g?j(I/g):1,fe=p-I<T?c((p-I)/T):1;m=Math.max(.01,m*Math.min(le,fe));let re=(r<e.length-1?e[r+1]:e[r]).vector,Y=r<e.length-1?B(s,re):1,be=B(s,X)<0&&!J,ne=Y!==null&&Y<0;if(be||ne){let v=b(R(X),m);for(let Z=1/13,w=0;w<=1;w+=Z)O=L(a(o,v),o,V*w),_.push(O),E=L(l(o,v),o,V*-w),M.push(E);z=O,F=E,ne&&(J=!0);continue}if(J=!1,r===e.length-1){let v=b(R(s),m);_.push(a(o,v)),M.push(l(o,v));continue}let oe=b(R(K(re,s,Y)),m);O=a(o,oe),(r<=1||A(z,O)>te)&&(_.push(O),z=O),E=l(o,oe),(r<=1||A(F,E)>te)&&(M.push(E),F=E),H=i,X=s;}let P=e[0].point.slice(0,2),k=e.length>1?e[e.length-1].point.slice(0,2):l(e[0].point,[1,1]),Q=[],N=[];if(e.length===1){if(!(g||T)||D){let r=ee(P,G(R(a(P,k))),-(U||m)),i=[];for(let o=1/13,s=o;s<=1;s+=o)i.push(L(r,P,V*2*s));return i}}else {if(!(g||T&&e.length===1))if(S)for(let i=1/13,o=i;o<=1;o+=i){let s=L(M[0],P,V*o);Q.push(s);}else {let i=a(_[0],M[0]),o=b(i,.5),s=b(i,.51);Q.push(a(P,o),a(P,s),l(P,s),l(P,o));}let r=R(se(e[e.length-1].vector));if(T||g&&e.length===1)N.push(k);else if(q){let i=ee(k,r,m);for(let o=1/29,s=o;s<1;s+=o)N.push(L(i,k,V*3*s));}else N.push(l(k,b(r,m)),l(k,b(r,m*.99)),a(k,b(r,m*.99)),a(k,b(r,m)));}return _.concat(N,M.reverse(),Q)}function me(e,t={}){var q;let{streamline:u=.5,size:x=16,last:h=!1}=t;if(e.length===0)return [];let y=.15+(1-u)*.85,n=Array.isArray(e[0])?e:e.map(({x:c,y:p,pressure:g=.5})=>[c,p,g]);if(n.length===2){let c=n[1];n=n.slice(0,-1);for(let p=1;p<5;p++)n.push(K(n[0],c,p/4));}n.length===1&&(n=[...n,[...l(n[0],[1,1]),...n[0].slice(2)]]);let f=[{point:[n[0][0],n[0][1]],pressure:n[0][2]>=0?n[0][2]:.25,vector:[1,1],distance:0,runningLength:0}],d=!1,D=0,S=f[0],j=n.length-1;for(let c=1;c<n.length;c++){let p=h&&c===j?n[c].slice(0,2):K(S.point,n[c],y);if(ue(S.point,p))continue;let g=ie(p,S.point);if(D+=g,c<j&&!d){if(D<x)continue;d=!0;}S={point:p,pressure:n[c][2]>=0?n[c][2]:.5,vector:G(a(S.point,p)),distance:g,runningLength:D},f.push(S);}return f[0].vector=((q=f[1])==null?void 0:q.vector)||[0,0],f}function ae(e,t={}){return ce(me(e,t),t)}var _e=ae;
+
+// src/signature-pad.anatomy.ts
+var anatomy = createAnatomy("signature-pad").parts(
+  "root",
+  "control",
+  "segment",
+  "segmentPath",
+  "guide",
+  "clearTrigger",
+  "label"
+);
+var parts = anatomy.build();
+var dom = domQuery.createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `signature-${ctx.id}`,
+  getControlId: (ctx) => ctx.ids?.control ?? `signature-control-${ctx.id}`,
+  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `signature-input-${ctx.id}`,
+  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getSegmentEl: (ctx) => domQuery.query(dom.getControlEl(ctx), "[data-part=segment]"),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+  getDataUrl: (ctx, options) => {
+    if (ctx.isEmpty) return Promise.resolve("");
+    return domQuery.getDataUrl(dom.getSegmentEl(ctx), options);
+  }
+});
+
+// src/signature-pad.connect.ts
+function connect(state, send, normalize) {
+  const drawing = state.matches("drawing");
+  const empty = state.context.isEmpty;
+  const interactive = state.context.isInteractive;
+  const disabled = !!state.context.disabled;
+  return {
+    empty,
+    drawing,
+    currentPath: state.context.currentPath,
+    paths: state.context.paths,
+    clear() {
+      send({ type: "CLEAR" });
+    },
+    getDataUrl(type, quality) {
+      return dom.getDataUrl(state.context, { type, quality });
+    },
+    getLabelProps() {
+      return normalize.element({
+        ...parts.label.attrs,
+        "data-disabled": domQuery.dataAttr(disabled),
+        htmlFor: dom.getControlId(state.context)
+      });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "data-disabled": domQuery.dataAttr(disabled),
+        id: dom.getRootId(state.context)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        tabIndex: disabled ? void 0 : 0,
+        id: dom.getControlId(state.context),
+        "aria-label": "Signature Pad",
+        "aria-roledescription": "signature pad",
+        "aria-disabled": disabled,
+        "data-disabled": domQuery.dataAttr(disabled),
+        onPointerDown(event) {
+          if (!isLeftClick(event)) return;
+          if (isModifierKey(event)) return;
+          if (!interactive) return;
+          const target = domQuery.getEventTarget(event);
+          if (target?.closest("[data-part=clear-trigger]")) return;
+          event.currentTarget.setPointerCapture(event.pointerId);
+          const point = { x: event.clientX, y: event.clientY };
+          const { offset } = getRelativePoint(point, dom.getControlEl(state.context));
+          send({ type: "POINTER_DOWN", point: offset, pressure: event.pressure });
+        },
+        onPointerUp(event) {
+          if (!interactive) return;
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+          }
+        },
+        style: {
+          position: "relative",
+          touchAction: "none",
+          userSelect: "none"
+        }
+      });
+    },
+    getSegmentProps() {
+      return normalize.svg({
+        ...parts.segment.attrs,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          fill: state.context.drawing.fill
+        }
+      });
+    },
+    getSegmentPathProps(props2) {
+      return normalize.path({
+        ...parts.segmentPath.attrs,
+        d: props2.path
+      });
+    },
+    getGuideProps() {
+      return normalize.element({
+        ...parts.guide.attrs,
+        "data-disabled": domQuery.dataAttr(disabled)
+      });
+    },
+    getClearTriggerProps() {
+      return normalize.button({
+        ...parts.clearTrigger.attrs,
+        type: "button",
+        "aria-label": "Clear Signature",
+        hidden: !state.context.paths.length || drawing,
+        disabled,
+        onClick() {
+          send({ type: "CLEAR" });
+        }
+      });
+    },
+    getHiddenInputProps(props2) {
+      return normalize.input({
+        type: "text",
+        hidden: true,
+        disabled,
+        name: state.context.name,
+        value: props2.value
+      });
+    }
+  };
+}
+
+// src/get-svg-path.ts
+var average = (a, b) => (a + b) / 2;
+function getSvgPathFromStroke(points, closed = true) {
+  const len = points.length;
+  if (len < 4) {
+    return "";
+  }
+  let a = points[0];
+  let b = points[1];
+  const c = points[2];
+  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(
+    b[1],
+    c[1]
+  ).toFixed(2)} T`;
+  for (let i = 2, max = len - 1; i < max; i++) {
+    a = points[i];
+    b = points[i + 1];
+    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+  }
+  if (closed) {
+    result += "Z";
+  }
+  return result;
+}
+
+// src/signature-pad.machine.ts
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "signature-pad",
+      initial: "idle",
+      context: {
+        readOnly: false,
+        disabled: false,
+        ...ctx,
+        paths: [],
+        currentPoints: [],
+        currentPath: null,
+        drawing: {
+          size: 2,
+          simulatePressure: false,
+          thinning: 0.7,
+          smoothing: 0.4,
+          streamline: 0.6,
+          ...ctx.drawing
+        }
+      },
+      computed: {
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
+        isEmpty: (ctx2) => ctx2.paths.length === 0
+      },
+      on: {
+        CLEAR: {
+          actions: ["clearPoints", "invokeOnDrawEnd", "focusCanvasEl"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            POINTER_DOWN: {
+              target: "drawing",
+              actions: ["addPoint"]
+            }
+          }
+        },
+        drawing: {
+          activities: ["trackPointerMove"],
+          on: {
+            POINTER_MOVE: {
+              actions: ["addPoint", "invokeOnDraw"]
+            },
+            POINTER_UP: {
+              target: "idle",
+              actions: ["endStroke", "invokeOnDrawEnd"]
+            }
+          }
+        }
+      }
+    },
+    {
+      activities: {
+        trackPointerMove(ctx2, _evt, { send }) {
+          const doc = dom.getDoc(ctx2);
+          return trackPointerMove(doc, {
+            onPointerMove({ event, point }) {
+              const { offset } = getRelativePoint(point, dom.getControlEl(ctx2));
+              send({ type: "POINTER_MOVE", point: offset, pressure: event.pressure });
+            },
+            onPointerUp() {
+              send({ type: "POINTER_UP" });
+            }
+          });
+        }
+      },
+      actions: {
+        addPoint(ctx2, evt) {
+          ctx2.currentPoints.push(evt.point);
+          const stroke = _e(ctx2.currentPoints, ctx2.drawing);
+          ctx2.currentPath = getSvgPathFromStroke(stroke);
+        },
+        endStroke(ctx2) {
+          ctx2.paths.push(ctx2.currentPath);
+          ctx2.currentPoints = [];
+          ctx2.currentPath = null;
+        },
+        clearPoints(ctx2) {
+          ctx2.currentPoints = [];
+          ctx2.paths = [];
+        },
+        focusCanvasEl(ctx2) {
+          queueMicrotask(() => {
+            dom.getControlEl(ctx2)?.focus({ preventScroll: true });
+          });
+        },
+        invokeOnDraw(ctx2) {
+          ctx2.onDraw?.({
+            paths: [...ctx2.paths, ctx2.currentPath]
+          });
+        },
+        invokeOnDrawEnd(ctx2) {
+          ctx2.onDrawEnd?.({
+            paths: [...ctx2.paths],
+            getDataUrl(type, quality = 0.92) {
+              return dom.getDataUrl(ctx2, { type, quality });
+            }
+          });
+        }
+      }
+    }
+  );
+}
+types.createProps()([
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "onDraw",
+  "onDrawEnd",
+  "readOnly",
+  "drawing",
+  "name"
+]);
+
+const useSignaturePad = props => {
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => connect(state, send, solid.normalizeProps));
+};
+
+const SignaturePadRoot = props => {
+  const [useSignaturePadProps, localProps] = createSplitProps()(props, ['id', 'ids', 'drawing', 'disabled', 'readOnly', 'name', 'onDraw', 'onDrawEnd']);
+  const signaturePad = useSignaturePad(useSignaturePadProps);
+  const mergedProps = solid.mergeProps(() => signaturePad().getRootProps(), localProps);
+  return web.createComponent(SignaturePadProvider, {
+    value: signaturePad,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SignaturePadRootProvider = props => {
+  const [{
+    value: signaturePad
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => signaturePad().getRootProps(), localProps);
+  return web.createComponent(SignaturePadProvider, {
+    value: signaturePad,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var _tmpl$$1 = /*#__PURE__*/web.template(`<title>Signature`),
+  _tmpl$2 = /*#__PURE__*/web.template(`<svg><path></svg>`, false, true);
+const SignaturePadSegment = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getSegmentProps(), props);
+  return web.createComponent(ark.svg, web.mergeProps(mergedProps, {
+    get children() {
+      return [_tmpl$$1(), web.createComponent(solidJs.For, {
+        get each() {
+          return signaturePad().paths;
+        },
+        children: path => (() => {
+          var _el$3 = _tmpl$2();
+          web.spread(_el$3, web.mergeProps(() => signaturePad().getSegmentPathProps({
+            path
+          })), true, false);
+          return _el$3;
+        })()
+      }), web.createComponent(solidJs.Show, {
+        get when() {
+          return signaturePad().currentPath;
+        },
+        get children() {
+          var _el$2 = _tmpl$2();
+          web.spread(_el$2, web.mergeProps(() => signaturePad().getSegmentPathProps({
+            path: signaturePad().currentPath
+          })), true, false);
+          return _el$2;
+        }
+      })];
+    }
+  }));
+};
+
+var signaturePad = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClearTrigger: SignaturePadClearTrigger,
+  Context: SignaturePadContext,
+  Control: SignaturePadControl,
+  Guide: SignaturePadGuide,
+  Label: SignaturePadLabel,
+  Root: SignaturePadRoot,
+  RootProvider: SignaturePadRootProvider,
+  Segment: SignaturePadSegment
+});
+
 const [SliderProvider, useSliderContext] = createContext({
   hookName: 'useSliderContext',
   providerName: '<SliderProvider />'
@@ -4196,7 +6142,8 @@ const TabContent = props => {
   const api = useTabsContext();
   const renderStrategyProps = useRenderStrategyContext();
   const presenceApi = usePresence(solid.mergeProps(renderStrategyProps, () => ({
-    present: api().value === contentProps.value
+    present: api().value === contentProps.value,
+    immediate: true
   })));
   const mergedProps = solid.mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
   return web.createComponent(PresenceProvider, {
@@ -4495,11 +6442,12 @@ const ToastDescription = props => {
 var _tmpl$ = /*#__PURE__*/web.template(`<div><div></div><div>`);
 const ToastRoot = props => {
   const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().getRootProps(), props);
   return (() => {
     var _el$ = _tmpl$(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
-    web.spread(_el$, web.mergeProps(() => toast().getRootProps()), false, true);
+    web.spread(_el$, mergedProps, false, true);
     web.spread(_el$2, web.mergeProps(() => toast().getGhostBeforeProps()), false, false);
     web.insert(_el$, () => props.children, _el$3);
     web.spread(_el$3, web.mergeProps(() => toast().getGhostAfterProps()), false, false);
@@ -4974,6 +6922,7 @@ exports.CarouselViewport = CarouselViewport;
 exports.Checkbox = checkbox;
 exports.CheckboxContext = CheckboxContext;
 exports.CheckboxControl = CheckboxControl;
+exports.CheckboxGroup = CheckboxGroup;
 exports.CheckboxHiddenInput = CheckboxHiddenInput;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
@@ -5194,6 +7143,13 @@ exports.ProgressRootProvider = ProgressRootProvider;
 exports.ProgressTrack = ProgressTrack;
 exports.ProgressValueText = ProgressValueText;
 exports.ProgressView = ProgressView;
+exports.QrCode = qrCode;
+exports.QrCodeContext = QrCodeContext;
+exports.QrCodeFrame = QrCodeFrame;
+exports.QrCodeOverlay = QrCodeOverlay;
+exports.QrCodePattern = QrCodePattern;
+exports.QrCodeRoot = QrCodeRoot;
+exports.QrCodeRootProvider = QrCodeRootProvider;
 exports.RadioGroup = radioGroup;
 exports.RadioGroupContext = RadioGroupContext;
 exports.RadioGroupIndicator = RadioGroupIndicator;
@@ -5239,11 +7195,21 @@ exports.SelectItemGroupLabel = SelectItemGroupLabel;
 exports.SelectItemIndicator = SelectItemIndicator;
 exports.SelectItemText = SelectItemText;
 exports.SelectLabel = SelectLabel;
+exports.SelectList = SelectList;
 exports.SelectPositioner = SelectPositioner;
 exports.SelectRoot = SelectRoot;
 exports.SelectRootProvider = SelectRootProvider;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValueText = SelectValueText;
+exports.SignaturePad = signaturePad;
+exports.SignaturePadClearTrigger = SignaturePadClearTrigger;
+exports.SignaturePadContext = SignaturePadContext;
+exports.SignaturePadControl = SignaturePadControl;
+exports.SignaturePadGuide = SignaturePadGuide;
+exports.SignaturePadLabel = SignaturePadLabel;
+exports.SignaturePadRoot = SignaturePadRoot;
+exports.SignaturePadRootProvider = SignaturePadRootProvider;
+exports.SignaturePadSegment = SignaturePadSegment;
 exports.Slider = slider;
 exports.SliderContext = SliderContext;
 exports.SliderControl = SliderControl;
@@ -5344,6 +7310,8 @@ exports.useCarousel = useCarousel;
 exports.useCarouselContext = useCarouselContext;
 exports.useCheckbox = useCheckbox;
 exports.useCheckboxContext = useCheckboxContext;
+exports.useCheckboxGroup = useCheckboxGroup;
+exports.useCheckboxGroupContext = useCheckboxGroupContext;
 exports.useClipboard = useClipboard;
 exports.useClipboardContext = useClipboardContext;
 exports.useCollapsible = useCollapsible;
@@ -5380,6 +7348,8 @@ exports.usePresence = usePresence;
 exports.usePresenceContext = usePresenceContext;
 exports.useProgress = useProgress;
 exports.useProgressContext = useProgressContext;
+exports.useQrCode = useQrCode;
+exports.useQrCodeContext = useQrCodeContext;
 exports.useRadioGroup = useRadioGroup;
 exports.useRadioGroupContext = useRadioGroupContext;
 exports.useRadioGroupItemContext = useRadioGroupItemContext;
@@ -5392,6 +7362,8 @@ exports.useSegmentGroupItemContext = useSegmentGroupItemContext;
 exports.useSelect = useSelect;
 exports.useSelectContext = useSelectContext;
 exports.useSelectItemContext = useSelectItemContext;
+exports.useSignaturePad = useSignaturePad;
+exports.useSignaturePadContext = useSignaturePadContext;
 exports.useSlider = useSlider;
 exports.useSliderContext = useSliderContext;
 exports.useSplitter = useSplitter;