@ark-ui/solid 3.13.0 → 4.0.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');
@@ -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,6 +817,12 @@ 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();
 
@@ -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,
@@ -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
@@ -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
@@ -4106,10 +4130,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
 });
@@ -4656,10 +4680,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 +4694,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 +4823,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 +4835,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();
@@ -5868,20 +5888,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 +5901,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();
@@ -6457,10 +6477,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 +6573,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; }
@@ -7034,6 +7066,7 @@ exports.ark = ark;
 exports.carouselAnatomy = carouselAnatomy;
 exports.checkboxAnatomy = checkboxAnatomy;
 exports.colorPickerAnatomy = colorPickerAnatomy;
+exports.createListCollection = createListCollection;
 exports.createToaster = createToaster;
 exports.datePickerAnatomy = datePickerAnatomy;
 exports.fieldAnatomy = fieldAnatomy;