@ark-ui/solid 3.6.2 → 3.8.0

package/dist/cjs/index.js

@@ -42,6 +42,7 @@ 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 timer$1 = require('@zag-js/timer');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -95,6 +96,7 @@ var toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast$1);
 var toggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(toggleGroup$1);
 var tooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(tooltip$1);
 var treeView__namespace = /*#__PURE__*/_interopNamespaceDefault(treeView$1);
+var timer__namespace = /*#__PURE__*/_interopNamespaceDefault(timer$1);
 
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
@@ -838,14 +840,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,
@@ -868,7 +870,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']);
@@ -918,6 +920,7 @@ const parts$1 = fieldAnatomy.build();
 const useField = props => {
   const fieldset = useFieldsetContext();
   const {
+    ids,
     disabled = Boolean(fieldset?.().disabled),
     invalid = false,
     readOnly = false,
@@ -927,25 +930,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 = [];
@@ -953,9 +958,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,
@@ -1006,11 +1012,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, {
@@ -3918,7 +3922,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;
     }
   }));
 };
@@ -4564,14 +4568,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,
@@ -4589,10 +4593,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 => {
@@ -6080,6 +6092,85 @@ var treeView = /*#__PURE__*/Object.freeze({
   Tree: TreeViewTree
 });
 
+const [TimerProvider, useTimerContext] = createContext({
+  hookName: 'useTimerContext',
+  providerName: '<TimerProvider />'
+});
+
+const TimerContext = props => props.children(useTimerContext());
+
+const TimerActionTrigger = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getActionTriggerProps(props), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const TimerItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['type']);
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getItemProps(itemProps), localProps);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return timer().formattedTime[itemProps.type];
+    }
+  }));
+};
+
+const TimerSeparator = props => {
+  const timer = useTimerContext();
+  const mergedProps = solid.mergeProps(() => timer().getSeparatorProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const useTimer = props => {
+  const env = useEnvironmentContext();
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    getRootNode: env().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(timer__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => timer__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const TimerRoot = props => {
+  const [useTimerProps, localProps] = createSplitProps()(props, ['id', 'autoStart', 'interval', 'countdown', 'startMs', 'targetMs', 'onComplete', 'onTick']);
+  const timer = useTimer(useTimerProps);
+  const mergedProps = solid.mergeProps(() => timer().getRootProps(), localProps);
+  return web.createComponent(TimerProvider, {
+    value: timer,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const TimerRootProvider = props => {
+  const [{
+    value: timer
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => timer().getRootProps(), localProps);
+  return web.createComponent(TimerProvider, {
+    value: timer,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var timer = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ActionTrigger: TimerActionTrigger,
+  Context: TimerContext,
+  Item: TimerItem,
+  Root: TimerRoot,
+  RootProvider: TimerRootProvider,
+  Separator: TimerSeparator
+});
+
 Object.defineProperty(exports, "collapsibleAnatomy", {
   enumerable: true,
   get: function () { return collapsible$1.anatomy; }
@@ -6601,6 +6692,13 @@ exports.TimePickerRoot = TimePickerRoot;
 exports.TimePickerRootProvider = TimePickerRootProvider;
 exports.TimePickerSpacer = TimePickerSpacer;
 exports.TimePickerTrigger = TimePickerTrigger;
+exports.Timer = timer;
+exports.TimerActionTrigger = TimerActionTrigger;
+exports.TimerContext = TimerContext;
+exports.TimerItem = TimerItem;
+exports.TimerRoot = TimerRoot;
+exports.TimerRootProvider = TimerRootProvider;
+exports.TimerSeparator = TimerSeparator;
 exports.Toast = toast;
 exports.ToastActionTrigger = ToastActionTrigger;
 exports.ToastCloseTrigger = ToastCloseTrigger;
@@ -6728,6 +6826,8 @@ exports.useTagsInputContext = useTagsInputContext;
 exports.useTagsInputItemContext = useTagsInputItemContext;
 exports.useTimePicker = useTimePicker;
 exports.useTimePickerContext = useTimePickerContext;
+exports.useTimer = useTimer;
+exports.useTimerContext = useTimerContext;
 exports.useToastContext = useToastContext;
 exports.useToggleGroup = useToggleGroup;
 exports.useToggleGroupContext = useToggleGroupContext;