@ark-ui/solid 3.6.1 → 3.7.0

package/dist/cjs/index.js

@@ -36,6 +36,7 @@ var splitter$1 = require('@zag-js/splitter');
 var zagSwitch = require('@zag-js/switch');
 var tabs$1 = require('@zag-js/tabs');
 var tagsInput$1 = require('@zag-js/tags-input');
+var date = require('@internationalized/date');
 var timePicker$1 = require('@zag-js/time-picker');
 var toast$1 = require('@zag-js/toast');
 var toggleGroup$1 = require('@zag-js/toggle-group');
@@ -837,14 +838,14 @@ const useFieldset = props => {
   const getRootProps = () => ({
     ...parts$2.root.attrs,
     disabled,
-    'data-disabled': dataAttr$1(disabled),
-    'data-invalid': dataAttr$1(invalid),
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid),
     'aria-describedby': labelIds.join(' ') || undefined
   });
   const getLegendProps = () => ({
     ...parts$2.legend.attrs,
-    'data-disabled': dataAttr$1(disabled),
-    'data-invalid': dataAttr$1(invalid)
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid)
   });
   const getHelperTextProps = () => ({
     id: helperTextId,
@@ -867,7 +868,7 @@ const useFieldset = props => {
     getErrorTextProps
   }));
 };
-const dataAttr$1 = condition => condition ? '' : undefined;
+const dataAttr = condition => condition ? '' : undefined;
 
 const FieldsetRoot = props => {
   const [useFieldsetProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'invalid']);
@@ -917,6 +918,7 @@ const parts$1 = fieldAnatomy.build();
 const useField = props => {
   const fieldset = useFieldsetContext();
   const {
+    ids,
     disabled = Boolean(fieldset?.().disabled),
     invalid = false,
     readOnly = false,
@@ -926,25 +928,27 @@ const useField = props => {
   const [hasHelperText, setHasHelperText] = solidJs.createSignal(false);
   const id = props.id ?? solidJs.createUniqueId();
   let rootRef;
-  const errorTextId = `field::${id}::error-text`;
-  const helperTextId = `field::${id}::helper-text`;
-  const labelId = `field::${id}::label`;
+  const rootId = ids?.control ?? `field::${id}`;
+  const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
+  const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
+  const labelId = ids?.label ?? `field::${id}::label`;
   solidJs.createEffect(() => {
     return;
   });
   const getRootProps = () => ({
     ...parts$1.root.attrs,
+    id: rootId,
     role: 'group',
-    'data-disabled': dataAttr(disabled),
-    'data-invalid': dataAttr(invalid),
-    'data-readonly': dataAttr(readOnly)
+    'data-disabled': domQuery.dataAttr(disabled),
+    'data-invalid': domQuery.dataAttr(invalid),
+    'data-readonly': domQuery.dataAttr(readOnly)
   });
   const getLabelProps = () => ({
     ...parts$1.label.attrs,
     id: labelId,
-    'data-disabled': dataAttr(disabled),
-    'data-invalid': dataAttr(invalid),
-    'data-readonly': dataAttr(readOnly),
+    'data-disabled': domQuery.dataAttr(disabled),
+    'data-invalid': domQuery.dataAttr(invalid),
+    'data-readonly': domQuery.dataAttr(readOnly),
     htmlFor: id
   });
   const labelIds = [];
@@ -952,9 +956,10 @@ const useField = props => {
   if (hasHelperText()) labelIds.push(helperTextId);
   const getControlProps = () => ({
     'aria-describedby': labelIds.join(' ') || undefined,
-    'aria-invalid': ariaAttr(invalid),
-    'aria-required': ariaAttr(required),
-    'aria-readonly': ariaAttr(readOnly),
+    'aria-invalid': domQuery.ariaAttr(invalid),
+    'data-invalid': domQuery.dataAttr(invalid),
+    'data-required': domQuery.dataAttr(required),
+    'data-readonly': domQuery.dataAttr(readOnly),
     id,
     required,
     disabled,
@@ -1005,11 +1010,9 @@ const useField = props => {
     getErrorTextProps
   }));
 };
-const dataAttr = condition => condition ? '' : undefined;
-const ariaAttr = condition => condition ? true : undefined;
 
 const FieldRoot = props => {
-  const [useFieldProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'invalid', 'readOnly', 'required']);
+  const [useFieldProps, localProps] = createSplitProps()(props, ['id', 'ids', 'disabled', 'invalid', 'readOnly', 'required']);
   const field = useField(useFieldProps);
   const mergedProps = solid.mergeProps(() => field().getRootProps(), localProps);
   return web.createComponent(FieldProvider, {
@@ -3917,7 +3920,7 @@ const ProgressValueText = props => {
   const mergedProps = solid.mergeProps(() => api().getValueTextProps(), props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
-      return props.children || api().valueAsString;
+      return props.children || api().percentAsString;
     }
   }));
 };
@@ -4563,14 +4566,14 @@ const SelectPositioner = props => {
 
 const useSelect = props => {
   const [collectionOptions, selectProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => select__namespace.collection({
+  const collection = solidJs.createMemo(() => select__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,
@@ -4588,10 +4591,18 @@ const useSelect = props => {
     'open.controlled': props.open !== undefined,
     ...selectProps
   }));
-  const [state, send] = solid.useMachine(select__namespace.machine(context()), {
+  const context = solidJs.createMemo(() => {
+    const [, restProps] = solidJs.splitProps(initialContext(), ['collection']);
+    return restProps;
+  });
+  const [state, send] = solid.useMachine(select__namespace.machine(initialContext()), {
     context
   });
-  return solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
+  const api = solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
+  solidJs.createEffect(() => {
+    api().setCollection(collection());
+  });
+  return api;
 };
 
 const SelectRoot = props => {
@@ -5495,191 +5506,6 @@ const TimePickerPositioner = props => {
   });
 };
 
-function $14e0f24ef4ac5c92$export$c19a80a9721b80f6(a, b) {
-    return $14e0f24ef4ac5c92$var$timeToMs(a) - $14e0f24ef4ac5c92$var$timeToMs(b);
-}
-function $14e0f24ef4ac5c92$var$timeToMs(a) {
-    return a.hour * 3600000 + a.minute * 60000 + a.second * 1000 + a.millisecond;
-}
-
-function $735220c2d4774dd3$export$3e2544e88a25bff8(duration) {
-    let inverseDuration = {};
-    for(let key in duration)if (typeof duration[key] === 'number') inverseDuration[key] = -duration[key];
-    return inverseDuration;
-}
-function $735220c2d4774dd3$export$e5d5e1c1822b6e56(value, fields) {
-    let mutableValue = value.copy();
-    if (fields.hour != null) mutableValue.hour = fields.hour;
-    if (fields.minute != null) mutableValue.minute = fields.minute;
-    if (fields.second != null) mutableValue.second = fields.second;
-    if (fields.millisecond != null) mutableValue.millisecond = fields.millisecond;
-    $735220c2d4774dd3$export$7555de1e070510cb(mutableValue);
-    return mutableValue;
-}
-function $735220c2d4774dd3$var$balanceTime(time) {
-    time.second += Math.floor(time.millisecond / 1000);
-    time.millisecond = $735220c2d4774dd3$var$nonNegativeMod(time.millisecond, 1000);
-    time.minute += Math.floor(time.second / 60);
-    time.second = $735220c2d4774dd3$var$nonNegativeMod(time.second, 60);
-    time.hour += Math.floor(time.minute / 60);
-    time.minute = $735220c2d4774dd3$var$nonNegativeMod(time.minute, 60);
-    let days = Math.floor(time.hour / 24);
-    time.hour = $735220c2d4774dd3$var$nonNegativeMod(time.hour, 24);
-    return days;
-}
-function $735220c2d4774dd3$export$7555de1e070510cb(time) {
-    time.millisecond = Math.max(0, Math.min(time.millisecond, 1000));
-    time.second = Math.max(0, Math.min(time.second, 59));
-    time.minute = Math.max(0, Math.min(time.minute, 59));
-    time.hour = Math.max(0, Math.min(time.hour, 23));
-}
-function $735220c2d4774dd3$var$nonNegativeMod(a, b) {
-    let result = a % b;
-    if (result < 0) result += b;
-    return result;
-}
-function $735220c2d4774dd3$var$addTimeFields(time, duration) {
-    time.hour += duration.hours || 0;
-    time.minute += duration.minutes || 0;
-    time.second += duration.seconds || 0;
-    time.millisecond += duration.milliseconds || 0;
-    return $735220c2d4774dd3$var$balanceTime(time);
-}
-function $735220c2d4774dd3$export$7ed87b6bc2506470(time, duration) {
-    let res = time.copy();
-    $735220c2d4774dd3$var$addTimeFields(res, duration);
-    return res;
-}
-function $735220c2d4774dd3$export$fe34d3a381cd7501(time, duration) {
-    return $735220c2d4774dd3$export$7ed87b6bc2506470(time, $735220c2d4774dd3$export$3e2544e88a25bff8(duration));
-}
-function $735220c2d4774dd3$export$dd02b3e0007dfe28(value, field, amount, options) {
-    let mutable = value.copy();
-    switch(field){
-        case 'hour':
-            {
-                let hours = value.hour;
-                let min = 0;
-                let max = 23;
-                if ((options === null || options === void 0 ? void 0 : options.hourCycle) === 12) {
-                    let isPM = hours >= 12;
-                    min = isPM ? 12 : 0;
-                    max = isPM ? 23 : 11;
-                }
-                mutable.hour = $735220c2d4774dd3$var$cycleValue(hours, amount, min, max, options === null || options === void 0 ? void 0 : options.round);
-                break;
-            }
-        case 'minute':
-            mutable.minute = $735220c2d4774dd3$var$cycleValue(value.minute, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
-            break;
-        case 'second':
-            mutable.second = $735220c2d4774dd3$var$cycleValue(value.second, amount, 0, 59, options === null || options === void 0 ? void 0 : options.round);
-            break;
-        case 'millisecond':
-            mutable.millisecond = $735220c2d4774dd3$var$cycleValue(value.millisecond, amount, 0, 999, options === null || options === void 0 ? void 0 : options.round);
-            break;
-        default:
-            throw new Error('Unsupported field ' + field);
-    }
-    return mutable;
-}
-function $735220c2d4774dd3$var$cycleValue(value, amount, min, max, round = false) {
-    if (round) {
-        value += Math.sign(amount);
-        if (value < min) value = max;
-        let div = Math.abs(amount);
-        if (amount > 0) value = Math.ceil(value / div) * div;
-        else value = Math.floor(value / div) * div;
-        if (value > max) value = min;
-    } else {
-        value += amount;
-        if (value < min) value = max - (min - value - 1);
-        else if (value > max) value = min + (value - max - 1);
-    }
-    return value;
-}
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-const $fae977aafc393c5c$var$TIME_RE = /^(\d{2})(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?$/;
-function $fae977aafc393c5c$export$c9698ec7f05a07e1(value) {
-    let m = value.match($fae977aafc393c5c$var$TIME_RE);
-    if (!m) throw new Error('Invalid ISO 8601 time string: ' + value);
-    return new ($35ea8db9cb2ccb90$export$680ea196effce5f)($fae977aafc393c5c$var$parseNumber(m[1], 0, 23), m[2] ? $fae977aafc393c5c$var$parseNumber(m[2], 0, 59) : 0, m[3] ? $fae977aafc393c5c$var$parseNumber(m[3], 0, 59) : 0, m[4] ? $fae977aafc393c5c$var$parseNumber(m[4], 0, Infinity) * 1000 : 0);
-}
-function $fae977aafc393c5c$var$parseNumber(value, min, max) {
-    let val = Number(value);
-    if (val < min || val > max) throw new RangeError(`Value out of range: ${min} <= ${val} <= ${max}`);
-    return val;
-}
-function $fae977aafc393c5c$export$f59dee82248f5ad4(time) {
-    return `${String(time.hour).padStart(2, '0')}:${String(time.minute).padStart(2, '0')}:${String(time.second).padStart(2, '0')}${time.millisecond ? String(time.millisecond / 1000).slice(1) : ''}`;
-}
-
-function _check_private_redeclaration(obj, privateCollection) {
-  if (privateCollection.has(obj)) {
-    throw new TypeError("Cannot initialize the same private elements twice on an object");
-  }
-}
-
-function _class_private_field_init(obj, privateMap, value) {
-  _check_private_redeclaration(obj, privateMap);
-  privateMap.set(obj, value);
-}
-
-var // This prevents TypeScript from allowing other types with the same fields to match.
-// @ts-ignore
-$35ea8db9cb2ccb90$var$_type1 = /*#__PURE__*/ new WeakMap();
-class $35ea8db9cb2ccb90$export$680ea196effce5f {
-    /** Returns a copy of this time. */ copy() {
-        return new $35ea8db9cb2ccb90$export$680ea196effce5f(this.hour, this.minute, this.second, this.millisecond);
-    }
-    /** Returns a new `Time` with the given duration added to it. */ add(duration) {
-        return ($735220c2d4774dd3$export$7ed87b6bc2506470)(this, duration);
-    }
-    /** Returns a new `Time` with the given duration subtracted from it. */ subtract(duration) {
-        return ($735220c2d4774dd3$export$fe34d3a381cd7501)(this, duration);
-    }
-    /** Returns a new `Time` with the given fields set to the provided values. Other fields will be constrained accordingly. */ set(fields) {
-        return ($735220c2d4774dd3$export$e5d5e1c1822b6e56)(this, fields);
-    }
-    /**
-   * Returns a new `Time` with the given field adjusted by a specified amount.
-   * When the resulting value reaches the limits of the field, it wraps around.
-   */ cycle(field, amount, options) {
-        return ($735220c2d4774dd3$export$dd02b3e0007dfe28)(this, field, amount, options);
-    }
-    /** Converts the time to an ISO 8601 formatted string. */ toString() {
-        return ($fae977aafc393c5c$export$f59dee82248f5ad4)(this);
-    }
-    /** Compares this time with another. A negative result indicates that this time is before the given one, and a positive time indicates that it is after. */ compare(b) {
-        return ($14e0f24ef4ac5c92$export$c19a80a9721b80f6)(this, b);
-    }
-    constructor(hour = 0, minute = 0, second = 0, millisecond = 0){
-        (_class_private_field_init)(this, $35ea8db9cb2ccb90$var$_type1, {
-            writable: true,
-            value: void 0
-        });
-        this.hour = hour;
-        this.minute = minute;
-        this.second = second;
-        this.millisecond = millisecond;
-        ($735220c2d4774dd3$export$7555de1e070510cb)(this);
-    }
-}
-
 const useTimePicker = (props = {}) => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
@@ -5691,9 +5517,9 @@ const useTimePicker = (props = {}) => {
     open: props.defaultOpen,
     'open.controlled': props.open !== undefined,
     ...props,
-    value: props.defaultValue ? $fae977aafc393c5c$export$c9698ec7f05a07e1(props.defaultValue) : undefined,
-    min: props.min ? $fae977aafc393c5c$export$c9698ec7f05a07e1(props.min) : undefined,
-    max: props.max ? $fae977aafc393c5c$export$c9698ec7f05a07e1(props.max) : undefined
+    value: props.defaultValue ? date.parseTime(props.defaultValue) : undefined,
+    min: props.min ? date.parseTime(props.min) : undefined,
+    max: props.max ? date.parseTime(props.max) : undefined
   }));
   const [state, send] = solid.useMachine(timePicker__namespace.machine(context()), {
     context