@ark-ui/solid 3.13.0 → 4.1.0

package/dist/cjs/index.js

@@ -11,6 +11,7 @@ var checkbox$1 = require('@zag-js/checkbox');
 var clipboard$1 = require('@zag-js/clipboard');
 var colorPicker$1 = require('@zag-js/color-picker');
 var presence = require('@zag-js/presence');
+var collection = require('@zag-js/collection');
 var combobox$1 = require('@zag-js/combobox');
 var datePicker$1 = require('@zag-js/date-picker');
 var dialog$1 = require('@zag-js/dialog');
@@ -210,7 +211,7 @@ const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   })
 });
 
-var _tmpl$$7 = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$8 = /*#__PURE__*/web.template(`<span hidden>`);
 const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = solidJs.createSignal();
   const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
@@ -227,7 +228,7 @@ const EnvironmentProvider = props => {
           return !props.value;
         },
         get children() {
-          var _el$ = _tmpl$$7();
+          var _el$ = _tmpl$$8();
           web.use(setSpanRef, _el$);
           return _el$;
         }
@@ -789,12 +790,6 @@ const FieldLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-const FieldSelect = props => {
-  const field = useFieldContext();
-  const mergedProps = solid.mergeProps(() => field?.().getSelectProps(), props);
-  return web.createComponent(ark.select, mergedProps);
-};
-
 const [FieldsetProvider, useFieldsetContext] = createContext({
   hookName: 'useFieldsetContext',
   providerName: '<FieldsetProvider />',
@@ -822,8 +817,14 @@ const FieldsetHelperText = props => {
   return web.createComponent(ark.span, mergedProps);
 };
 
+const FieldsetLegend = props => {
+  const fieldset = useFieldsetContext();
+  const mergedProps = solid.mergeProps(() => fieldset().getLegendProps(), props);
+  return web.createComponent(ark.legend, mergedProps);
+};
+
 const fieldsetAnatomy = anatomy.createAnatomy('fieldset').parts('root', 'errorText', 'helperText', 'legend');
-const parts$2 = fieldsetAnatomy.build();
+const parts$3 = fieldsetAnatomy.build();
 
 const useFieldset = props => {
   const {
@@ -843,24 +844,24 @@ const useFieldset = props => {
   if (hasErrorText() && invalid) labelIds.push(errorTextId);
   if (hasHelperText()) labelIds.push(helperTextId);
   const getRootProps = () => ({
-    ...parts$2.root.attrs,
+    ...parts$3.root.attrs,
     disabled,
     'data-disabled': dataAttr(disabled),
     'data-invalid': dataAttr(invalid),
     'aria-describedby': labelIds.join(' ') || undefined
   });
   const getLegendProps = () => ({
-    ...parts$2.legend.attrs,
+    ...parts$3.legend.attrs,
     'data-disabled': dataAttr(disabled),
     'data-invalid': dataAttr(invalid)
   });
   const getHelperTextProps = () => ({
     id: helperTextId,
-    ...parts$2.helperText.attrs
+    ...parts$3.helperText.attrs
   });
   const getErrorTextProps = () => ({
     id: errorTextId,
-    ...parts$2.errorText.attrs,
+    ...parts$3.errorText.attrs,
     'aria-live': 'polite'
   });
   return solidJs.createMemo(() => ({
@@ -903,12 +904,6 @@ const FieldsetRootProvider = props => {
   });
 };
 
-const FieldsetLegend = props => {
-  const fieldset = useFieldsetContext();
-  const mergedProps = solid.mergeProps(() => fieldset().getLegendProps(), props);
-  return web.createComponent(ark.legend, mergedProps);
-};
-
 var fieldset = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: FieldsetContext,
@@ -920,7 +915,7 @@ var fieldset = /*#__PURE__*/Object.freeze({
 });
 
 const fieldAnatomy = anatomy.createAnatomy('field').parts('root', 'errorText', 'helperText', 'input', 'label', 'select', 'textarea');
-const parts$1 = fieldAnatomy.build();
+const parts$2 = fieldAnatomy.build();
 
 const useField = props => {
   const fieldset = useFieldsetContext();
@@ -943,7 +938,7 @@ const useField = props => {
     return;
   });
   const getRootProps = () => ({
-    ...parts$1.root.attrs,
+    ...parts$2.root.attrs,
     id: rootId,
     role: 'group',
     'data-disabled': domQuery.dataAttr(disabled),
@@ -951,7 +946,7 @@ const useField = props => {
     'data-readonly': domQuery.dataAttr(readOnly)
   });
   const getLabelProps = () => ({
-    ...parts$1.label.attrs,
+    ...parts$2.label.attrs,
     id: labelId,
     'data-disabled': domQuery.dataAttr(disabled),
     'data-invalid': domQuery.dataAttr(invalid),
@@ -974,23 +969,23 @@ const useField = props => {
   });
   const getInputProps = () => ({
     ...getControlProps(),
-    ...parts$1.input.attrs
+    ...parts$2.input.attrs
   });
   const getTextareaProps = () => ({
     ...getControlProps(),
-    ...parts$1.textarea.attrs
+    ...parts$2.textarea.attrs
   });
   const getSelectProps = () => ({
     ...getControlProps(),
-    ...parts$1.select.attrs
+    ...parts$2.select.attrs
   });
   const getHelperTextProps = () => ({
     id: helperTextId,
-    ...parts$1.helperText.attrs
+    ...parts$2.helperText.attrs
   });
   const getErrorTextProps = () => ({
     id: errorTextId,
-    ...parts$1.errorText.attrs,
+    ...parts$2.errorText.attrs,
     'aria-live': 'polite'
   });
   return solidJs.createMemo(() => ({
@@ -1043,6 +1038,12 @@ const FieldRootProvider = props => {
   });
 };
 
+const FieldSelect = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getSelectProps(), props);
+  return web.createComponent(ark.select, mergedProps);
+};
+
 const FieldTextarea = props => {
   const field = useFieldContext();
   const mergedProps = solid.mergeProps(() => field?.().getTextareaProps(), props);
@@ -1519,8 +1520,8 @@ const useColorPicker = props => {
     getRootNode: environment().getRootNode,
     open: props.defaultOpen,
     'open.controlled': props.open !== undefined,
-    ...props,
-    value: props.value ? colorPicker__namespace.parse(props.value) : props.defaultValue ? colorPicker__namespace.parse(props.defaultValue) : undefined
+    value: props.defaultValue,
+    ...props
   }));
   const [state, send] = solid.useMachine(colorPicker__namespace.machine(context()), {
     context
@@ -1709,6 +1710,28 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   View: ColorPickerView
 });
 
+// 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];
+}
+makeGlobal("__zag__proxyStateMap", () => /* @__PURE__ */ new WeakMap());
+var refSet = makeGlobal("__zag__refSet", () => /* @__PURE__ */ new WeakSet());
+function ref(obj) {
+  refSet.add(obj);
+  return obj;
+}
+
+const createListCollection = options => ref(new collection.ListCollection(options));
+
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const [ComboboxProvider, useComboboxContext] = createContext({
   hookName: 'useComboboxContext',
@@ -1854,15 +1877,11 @@ const ComboboxPositioner = props => {
 };
 
 const useCombobox = props => {
-  const [collectionOptions, comboboxProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => combobox__namespace.collection({
-    ...collectionOptions
-  });
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
   const field = useFieldContext();
-  const context = solidJs.createMemo(() => ({
+  const initialContext = solidJs.createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -1872,23 +1891,31 @@ const useCombobox = props => {
     readOnly: field?.().readOnly,
     required: field?.().required,
     invalid: field?.().invalid,
-    collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     open: props.defaultOpen,
     value: props.defaultValue,
     'open.controlled': props.open !== undefined,
-    ...comboboxProps
+    ...props
   }));
-  const [state, send] = solid.useMachine(combobox__namespace.machine(context()), {
+  const context = solidJs.createMemo(() => {
+    const [, restProps] = solidJs.splitProps(initialContext(), ['collection']);
+    return restProps;
+  });
+  const [state, send, service] = solid.useMachine(combobox__namespace.machine(initialContext()), {
     context
   });
+  solidJs.createEffect(() => {
+    service.setContext({
+      collection: props.collection
+    });
+  });
   return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const ComboboxRoot = props => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'disableLayer', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'collection', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'disableLayer', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
   const api = useCombobox(useComboboxProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -2003,7 +2030,7 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$6 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$7 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getMonthSelectProps(), props);
@@ -2014,7 +2041,7 @@ const DatePickerMonthSelect = props => {
           return api().getMonths();
         },
         children: month => (() => {
-          var _el$ = _tmpl$$6();
+          var _el$ = _tmpl$$7();
           web.insert(_el$, () => month.label);
           web.effect(() => _el$.value = month.value);
           return _el$;
@@ -2086,13 +2113,10 @@ const useDatePicker = props => {
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    'open.controlled': props.open !== undefined,
     open: props.defaultOpen,
-    ...props,
-    focusedValue: props.focusedValue ? datePicker__namespace.parse(props.focusedValue) : undefined,
-    value: props.value ? datePicker__namespace.parse(props.value) : props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : undefined,
-    max: props.max ? datePicker__namespace.parse(props.max) : undefined,
-    min: props.min ? datePicker__namespace.parse(props.min) : undefined
+    'open.controlled': props.open !== undefined,
+    value: props.defaultValue,
+    ...props
   }));
   const [state, send] = solid.useMachine(datePicker__namespace.machine(context()), {
     context
@@ -2282,7 +2306,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$5 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$6 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getYearSelectProps(), props);
@@ -2293,7 +2317,7 @@ const DatePickerYearSelect = props => {
           return api().getYears();
         },
         children: year => (() => {
-          var _el$ = _tmpl$$5();
+          var _el$ = _tmpl$$6();
           web.insert(_el$, () => year().label);
           web.effect(() => _el$.value = year().value);
           return _el$;
@@ -2707,7 +2731,10 @@ const FileUploadItemPreviewImage = props => {
   const fileUpload = useFileUploadContext();
   const itemProps = useFileUploadItemPropsContext();
   const [url, setUrl] = solidJs.createSignal('');
-  fileUpload().createFileUrl(itemProps.file, url => setUrl(url));
+  solidJs.createEffect(() => {
+    const cleanup = fileUpload().createFileUrl(itemProps.file, url => setUrl(url));
+    solidJs.onCleanup(cleanup);
+  });
   const mergedProps = solid.mergeProps(fileUpload().getItemPreviewImageProps({
     ...itemProps,
     url: url()
@@ -2855,7 +2882,7 @@ const FrameContent = props => {
   return children;
 };
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<iframe>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<iframe>`);
 const resetStyle = '<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>';
 const initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
 function getMountNode(frame) {
@@ -2903,7 +2930,7 @@ const Frame = props => {
   return web.createComponent(EnvironmentProvider, {
     value: () => frameRef()?.contentDocument ?? document,
     get children() {
-      var _el$ = _tmpl$$4();
+      var _el$ = _tmpl$$5();
       var _ref$ = composeRefs(setFrameRef, localProps.ref);
       typeof _ref$ === "function" && web.use(_ref$, _el$);
       web.spread(_el$, localProps, false, true);
@@ -2954,7 +2981,7 @@ const useHighlight = props => {
   return solidJs.createMemo(() => highlightWord.highlightWord(props));
 };
 
-var _tmpl$$3 = /*#__PURE__*/web.template(`<mark>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<mark>`);
 const Highlight = props => {
   if (typeof props.text !== 'string') {
     throw new Error('[ark-ui/highlight] text must be a string');
@@ -2973,7 +3000,7 @@ const Highlight = props => {
         return chunk.text;
       },
       get children() {
-        var _el$ = _tmpl$$3();
+        var _el$ = _tmpl$$4();
         web.spread(_el$, localProps, false, true);
         web.insert(_el$, () => chunk.text);
         return _el$;
@@ -4106,10 +4133,10 @@ const QrCodeRootProvider = props => {
 
 var qrCode = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  Context: QrCodeContext,
   Frame: QrCodeFrame,
   Overlay: QrCodeOverlay,
   Pattern: QrCodePattern,
-  QrCodeContext: QrCodeContext,
   Root: QrCodeRoot,
   RootProvider: QrCodeRootProvider
 });
@@ -4360,11 +4387,11 @@ const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
 const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
 const segmentGroupAnatomy = radio.anatomy.rename('segment-group');
-const parts = segmentGroupAnatomy.build();
+const parts$1 = segmentGroupAnatomy.build();
 
 const SegmentGroupIndicator = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), parts.indicator.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), parts$1.indicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -4381,7 +4408,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), parts.item.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), parts$1.item.attrs, localProps);
   const itemState = solidJs.createMemo(() => segmentGroup().getItemState(itemProps));
   return web.createComponent(SegmentGroupItemPropsProvider, {
     value: itemProps,
@@ -4401,7 +4428,7 @@ const SegmentGroupItemContext = props => props.children(useSegmentGroupItemConte
 const SegmentGroupItemControl = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), parts.itemControl.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), parts$1.itemControl.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -4415,13 +4442,13 @@ const SegmentGroupItemHiddenInput = props => {
 const SegmentGroupItemText = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), parts.itemText.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), parts$1.itemText.attrs, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SegmentGroupLabel = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), parts.label.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), parts$1.label.attrs, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -4445,7 +4472,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(), parts.root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), parts$1.root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -4458,7 +4485,7 @@ const SegmentGroupRootProvider = props => {
   const [{
     value: segmentGroup
   }, localProps] = createSplitProps()(props, ['value']);
-  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), parts.root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), parts$1.root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -4515,7 +4542,7 @@ const SelectControl = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
+var _tmpl$$3 = /*#__PURE__*/web.template(`<option value="">`),
   _tmpl$2$1 = /*#__PURE__*/web.template(`<option>`);
 const SelectHiddenSelect = props => {
   const select = useSelectContext();
@@ -4533,7 +4560,7 @@ const SelectHiddenSelect = props => {
           return isValueEmpty();
         },
         get children() {
-          return _tmpl$$2();
+          return _tmpl$$3();
         }
       }), web.createComponent(solidJs.Index, {
         get each() {
@@ -4656,10 +4683,6 @@ const SelectPositioner = props => {
 };
 
 const useSelect = props => {
-  const [collectionOptions, selectProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = solidJs.createMemo(() => select__namespace.collection({
-    ...collectionOptions
-  }));
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
@@ -4674,31 +4697,31 @@ const useSelect = props => {
     readOnly: field?.().readOnly,
     invalid: field?.().invalid,
     required: field?.().required,
-    collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     open: props.defaultOpen,
     value: props.defaultValue,
     'open.controlled': props.open !== undefined,
-    ...selectProps
+    ...props
   }));
   const context = solidJs.createMemo(() => {
     const [, restProps] = solidJs.splitProps(initialContext(), ['collection']);
     return restProps;
   });
-  const [state, send] = solid.useMachine(select__namespace.machine(initialContext()), {
+  const [state, send, service] = solid.useMachine(select__namespace.machine(initialContext()), {
     context
   });
-  const api = solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
   solidJs.createEffect(() => {
-    api().setCollection(collection());
+    service.setContext({
+      collection: props.collection
+    });
   });
-  return api;
+  return solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
 };
 
 const SelectRoot = props => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'deselectable', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'value']);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'composite', 'collection', 'defaultOpen', 'defaultValue', 'deselectable', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'value']);
   const select = useSelect(useSelectProps);
   const presenceApi = usePresence(solid.mergeProps(() => ({
     present: select().open
@@ -4803,12 +4826,6 @@ const SignaturePadGuide = 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);
-};
-
 const SignaturePadHiddenInput = props => {
   const [hiddenInputProps, localProps] = createSplitProps()(props, ['value']);
   const signaturePad = useSignaturePadContext();
@@ -4821,6 +4838,12 @@ const SignaturePadHiddenInput = props => {
   }, mergedProps));
 };
 
+const SignaturePadLabel = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getLabelProps(), props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
 const useSignaturePad = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
@@ -4870,14 +4893,14 @@ const SignaturePadRootProvider = props => {
   });
 };
 
-var _tmpl$$1 = /*#__PURE__*/web.template(`<title>Signature`),
+var _tmpl$$2 = /*#__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, {
+      return [_tmpl$$2(), web.createComponent(solidJs.For, {
         get each() {
           return signaturePad().paths;
         },
@@ -5868,20 +5891,8 @@ const TimerActionTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const TimerArea = props => {
-  const timer = useTimerContext();
-  const mergedProps = solid.mergeProps(() => timer().getAreaProps(), props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
 const TimerContext = props => props.children(useTimerContext());
 
-const TimerControl = props => {
-  const timer = useTimerContext();
-  const mergedProps = solid.mergeProps(() => timer().getControlProps(), props);
-  return web.createComponent(ark.div, mergedProps);
-};
-
 const TimerItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['type']);
   const timer = useTimerContext();
@@ -5893,6 +5904,18 @@ const TimerItem = props => {
   }));
 };
 
+const TimerArea = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getAreaProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const TimerControl = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getControlProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
 const useTimer = props => {
   const env = useEnvironmentContext();
   const id = solidJs.createUniqueId();
@@ -5987,12 +6010,12 @@ const ToastDescription = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-var _tmpl$ = /*#__PURE__*/web.template(`<div><div></div><div>`);
+var _tmpl$$1 = /*#__PURE__*/web.template(`<div><div></div><div>`);
 const ToastRoot = props => {
   const toast = useToastContext();
   const mergedProps = solid.mergeProps(() => toast().getRootProps(), props);
   return (() => {
-    var _el$ = _tmpl$(),
+    var _el$ = _tmpl$$1(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     web.spread(_el$, mergedProps, false, true);
@@ -6054,6 +6077,103 @@ var toast = /*#__PURE__*/Object.freeze({
   Title: ToastTitle
 });
 
+const [ToggleProvider, useToggleContext] = createContext({
+  hookName: 'useToggleContext',
+  providerName: '<ToggleProvider />'
+});
+
+const ToggleContext = props => props.children(useToggleContext());
+
+const ToggleIndicator = props => {
+  const {
+    children,
+    fallback,
+    ...restProps
+  } = props;
+  const toggle = useToggleContext();
+  const mergedProps = solid.mergeProps(() => toggle().getIndicatorProps(), restProps);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return web.createComponent(solidJs.Show, {
+        get when() {
+          return toggle().pressed;
+        },
+        fallback: fallback,
+        children: children
+      });
+    }
+  }));
+};
+
+const toggleAnatomy = anatomy.createAnatomy('toggle', ['root', 'indicator']);
+const parts = toggleAnatomy.build();
+
+function useToggle(props) {
+  const {
+    defaultPressed,
+    pressed,
+    onPressedChange,
+    disabled
+  } = props;
+  const [pressedState, setPressedState] = useControllableState({
+    defaultValue: !!defaultPressed,
+    value: pressed,
+    onChange: onPressedChange
+  });
+  return solidJs.createMemo(() => ({
+    pressed: pressedState(),
+    disabled: !!disabled,
+    setPressed: setPressedState,
+    getRootProps() {
+      return {
+        ...parts.root.attrs,
+        type: 'button',
+        disabled,
+        'aria-pressed': pressedState(),
+        'data-state': pressedState() ? 'on' : 'off',
+        'data-pressed': domQuery.dataAttr(pressedState()),
+        'data-disabled': domQuery.dataAttr(disabled),
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          if (disabled) return;
+          setPressedState(!pressedState());
+        }
+      };
+    },
+    getIndicatorProps() {
+      return {
+        ...parts.indicator.attrs,
+        'data-disabled': domQuery.dataAttr(disabled),
+        'data-pressed': domQuery.dataAttr(pressedState()),
+        'data-state': pressedState() ? 'on' : 'off'
+      };
+    }
+  }));
+}
+
+var _tmpl$ = /*#__PURE__*/web.template(`<button>`);
+const ToggleRoot = props => {
+  const [useToggleProps, localProps] = createSplitProps()(props, ['pressed', 'defaultPressed', 'disabled', 'onPressedChange']);
+  const toggle = useToggle(useToggleProps);
+  const mergedProps = solid.mergeProps(() => toggle().getRootProps(), localProps);
+  return web.createComponent(ToggleProvider, {
+    value: toggle,
+    get children() {
+      var _el$ = _tmpl$();
+      web.spread(_el$, mergedProps, false, false);
+      return _el$;
+    }
+  });
+};
+
+var toggle = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: ToggleContext,
+  Indicator: ToggleIndicator,
+  Root: ToggleRoot,
+  toggleAnatomy: toggleAnatomy
+});
+
 const [ToggleGroupProvider, useToggleGroupContext] = createContext({
   hookName: 'useToggleGroupContext',
   providerName: '<ToggleGroupProvider />'
@@ -6457,10 +6577,18 @@ Object.defineProperty(exports, "clipboardAnatomy", {
   enumerable: true,
   get: function () { return clipboard$1.anatomy; }
 });
+Object.defineProperty(exports, "parseColor", {
+  enumerable: true,
+  get: function () { return colorPicker$1.parse; }
+});
 Object.defineProperty(exports, "comboboxAnatomy", {
   enumerable: true,
   get: function () { return combobox$1.anatomy; }
 });
+Object.defineProperty(exports, "parseDate", {
+  enumerable: true,
+  get: function () { return datePicker$1.parse; }
+});
 Object.defineProperty(exports, "dialogAnatomy", {
   enumerable: true,
   get: function () { return dialog$1.anatomy; }
@@ -6545,6 +6673,10 @@ Object.defineProperty(exports, "tagsInputAnatomy", {
   enumerable: true,
   get: function () { return tagsInput$1.anatomy; }
 });
+Object.defineProperty(exports, "timerAnatomy", {
+  enumerable: true,
+  get: function () { return timer$1.anatomy; }
+});
 Object.defineProperty(exports, "toastAnatomy", {
   enumerable: true,
   get: function () { return toast$1.anatomy; }
@@ -7000,11 +7132,15 @@ exports.ToastDescription = ToastDescription;
 exports.ToastRoot = ToastRoot;
 exports.ToastTitle = ToastTitle;
 exports.Toaster = Toaster;
+exports.Toggle = toggle;
+exports.ToggleContext = ToggleContext;
 exports.ToggleGroup = toggleGroup;
 exports.ToggleGroupContext = ToggleGroupContext;
 exports.ToggleGroupItem = ToggleGroupItem;
 exports.ToggleGroupRoot = ToggleGroupRoot;
 exports.ToggleGroupRootProvider = ToggleGroupRootProvider;
+exports.ToggleIndicator = ToggleIndicator;
+exports.ToggleRoot = ToggleRoot;
 exports.Tooltip = tooltip;
 exports.TooltipArrow = TooltipArrow;
 exports.TooltipArrowTip = TooltipArrowTip;
@@ -7034,12 +7170,14 @@ exports.ark = ark;
 exports.carouselAnatomy = carouselAnatomy;
 exports.checkboxAnatomy = checkboxAnatomy;
 exports.colorPickerAnatomy = colorPickerAnatomy;
+exports.createListCollection = createListCollection;
 exports.createToaster = createToaster;
 exports.datePickerAnatomy = datePickerAnatomy;
 exports.fieldAnatomy = fieldAnatomy;
 exports.fieldsetAnatomy = fieldsetAnatomy;
 exports.segmentGroupAnatomy = segmentGroupAnatomy;
 exports.splitPresenceProps = splitPresenceProps;
+exports.toggleAnatomy = toggleAnatomy;
 exports.useAccordion = useAccordion;
 exports.useAccordionContext = useAccordionContext;
 exports.useAccordionItemContext = useAccordionItemContext;
@@ -7125,6 +7263,8 @@ exports.useTimePickerContext = useTimePickerContext;
 exports.useTimer = useTimer;
 exports.useTimerContext = useTimerContext;
 exports.useToastContext = useToastContext;
+exports.useToggle = useToggle;
+exports.useToggleContext = useToggleContext;
 exports.useToggleGroup = useToggleGroup;
 exports.useToggleGroupContext = useToggleGroupContext;
 exports.useTooltip = useTooltip;