@ark-ui/solid 3.8.0 → 3.10.0

package/dist/cjs/index.js

@@ -43,6 +43,7 @@ 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');
+var steps$1 = require('@zag-js/steps');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -97,6 +98,7 @@ 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);
+var steps__namespace = /*#__PURE__*/_interopNamespaceDefault(steps$1);
 
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
@@ -709,7 +711,8 @@ function useCheckboxGroup(props = {}) {
         },
         name: props.name,
         disabled: props.disabled,
-        readOnly: props.readOnly
+        readOnly: props.readOnly,
+        invalid: props.invalid
       };
     };
     return {
@@ -718,6 +721,7 @@ function useCheckboxGroup(props = {}) {
       name: props.name,
       disabled: props.disabled,
       readOnly: props.readOnly,
+      invalid: props.invalid,
       setValue,
       addValue,
       toggleValue,
@@ -733,7 +737,7 @@ const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
 });
 
 const CheckboxGroup = props => {
-  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'readOnly', 'name']);
+  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'invalid', 'readOnly', 'name']);
   const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
   return web.createComponent(CheckboxGroupContextProvider, {
     value: checkboxGroup,
@@ -2572,7 +2576,9 @@ const useEditable = props => {
     readOnly: field?.().readOnly,
     required: field?.().required,
     getRootNode: environment().getRootNode,
+    edit: props.defaultEdit,
     value: props.defaultValue,
+    'edit.controlled': props.edit !== undefined,
     ...props
   }));
   const [state, send] = solid.useMachine(editable__namespace.machine(context()), {
@@ -2582,7 +2588,7 @@ const useEditable = props => {
 };
 
 const EditableRoot = props => {
-  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'defaultValue', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'required', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'defaultEdit', 'defaultValue', 'disabled', 'edit', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEditChange', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'required', 'selectOnFocus', 'submitMode', 'translations', 'value']);
   const api = useEditable(useEditableProps);
   const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(EditableProvider, {
@@ -4452,8 +4458,8 @@ const SelectHiddenSelect = props => {
         },
         children: item => (() => {
           var _el$2 = _tmpl$2$1();
-          web.effect(() => _el$2.disabled = select().collection.getItemDisabled(item));
-          web.effect(() => _el$2.value = select().collection.getItemValue(item) ?? '');
+          web.effect(() => _el$2.disabled = select().collection.getItemDisabled(item()));
+          web.effect(() => _el$2.value = select().collection.getItemValue(item()) ?? '');
           return _el$2;
         })()
       })];
@@ -6171,6 +6177,173 @@ var timer = /*#__PURE__*/Object.freeze({
   Separator: TimerSeparator
 });
 
+const [StepsProvider, useStepsContext] = createContext({
+  hookName: 'useStepsContext',
+  providerName: '<StepsProvider />'
+});
+
+const StepsCompletedContent = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getContentProps({
+    index: steps().count
+  }), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const StepsContent = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['index']);
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getContentProps(itemProps), localProps);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const StepsContext = props => {
+  const context = useStepsContext();
+  return props.children(context);
+};
+
+const [StepsItemPropsProvider, useStepsItemPropsContext] = createContext({
+  hookName: 'useStepsItemPropsContext',
+  providerName: '<StepsItemPropsProvider />'
+});
+
+const StepsIndicator = props => {
+  const steps = useStepsContext();
+  const itemProps = useStepsItemPropsContext();
+  const mergedProps = solid.mergeProps(() => steps().getIndicatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const [StepsItemProvider, useStepsItemContext] = createContext({
+  hookName: 'useStepsItemContext',
+  providerName: '<StepsItem />'
+});
+
+const StepsItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['index']);
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getItemProps(itemProps), localProps);
+  const itemState = solidJs.createMemo(() => steps().getItemState(itemProps));
+  return web.createComponent(StepsItemPropsProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(StepsItemProvider, {
+        value: itemState,
+        get children() {
+          return web.createComponent(ark.li, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const StepsItemContext = props => {
+  return props.children(useStepsItemContext());
+};
+StepsItemContext.displayName = 'StepsItemContext';
+
+const StepsList = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getListProps(), props);
+  return web.createComponent(ark.ol, mergedProps);
+};
+
+const StepsNextTrigger = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getNextTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const StepsPrevTrigger = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getPrevTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const StepsProgress = props => {
+  const steps = useStepsContext();
+  const mergedProps = solid.mergeProps(() => steps().getProgressProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+function useSteps(props = {}) {
+  const environment = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    step: props.defaultStep,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(steps__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => steps__namespace.connect(state, send, solid.normalizeProps));
+}
+
+const StepsRoot = props => {
+  const [useStepsProps, localProps] = createSplitProps()(props, ['defaultStep', 'id', 'ids', 'count', 'linear', 'onStepChange', 'onStepComplete', 'orientation', 'step']);
+  const steps = useSteps(useStepsProps);
+  const mergedProps = solid.mergeProps(() => steps().getRootProps(), localProps);
+  return web.createComponent(StepsProvider, {
+    value: steps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const StepsRootProvider = props => {
+  const [{
+    value: steps
+  }, rootProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => steps().getRootProps(), rootProps);
+  return web.createComponent(StepsProvider, {
+    value: steps,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return props.children;
+        }
+      }));
+    }
+  });
+};
+
+const StepsSeparator = props => {
+  const steps = useStepsContext();
+  const itemProps = useStepsItemPropsContext();
+  const mergedProps = solid.mergeProps(() => steps().getSeparatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const StepsTrigger = props => {
+  const steps = useStepsContext();
+  const itemProps = useStepsItemPropsContext();
+  const mergedProps = solid.mergeProps(() => steps().getTriggerProps(itemProps), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+var steps = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  CompletedContent: StepsCompletedContent,
+  Content: StepsContent,
+  Context: StepsContext,
+  Indicator: StepsIndicator,
+  Item: StepsItem,
+  ItemContext: StepsItemContext,
+  List: StepsList,
+  NextTrigger: StepsNextTrigger,
+  PrevTrigger: StepsPrevTrigger,
+  Progress: StepsProgress,
+  Root: StepsRoot,
+  RootProvider: StepsRootProvider,
+  Separator: StepsSeparator,
+  Trigger: StepsTrigger
+});
+
 Object.defineProperty(exports, "collapsibleAnatomy", {
   enumerable: true,
   get: function () { return collapsible$1.anatomy; }
@@ -6287,6 +6460,10 @@ Object.defineProperty(exports, "treeViewAnatomy", {
   enumerable: true,
   get: function () { return treeView$1.anatomy; }
 });
+Object.defineProperty(exports, "stepsAnatomy", {
+  enumerable: true,
+  get: function () { return steps$1.anatomy; }
+});
 exports.Accordion = accordion;
 exports.AccordionContext = AccordionContext;
 exports.AccordionItem = AccordionItem;
@@ -6647,6 +6824,21 @@ exports.SplitterPanel = SplitterPanel;
 exports.SplitterResizeTrigger = SplitterResizeTrigger;
 exports.SplitterRoot = SplitterRoot;
 exports.SplitterRootProvider = SplitterRootProvider;
+exports.Steps = steps;
+exports.StepsCompletedContent = StepsCompletedContent;
+exports.StepsContent = StepsContent;
+exports.StepsContext = StepsContext;
+exports.StepsIndicator = StepsIndicator;
+exports.StepsItem = StepsItem;
+exports.StepsItemContext = StepsItemContext;
+exports.StepsList = StepsList;
+exports.StepsNextTrigger = StepsNextTrigger;
+exports.StepsPrevTrigger = StepsPrevTrigger;
+exports.StepsProgress = StepsProgress;
+exports.StepsRoot = StepsRoot;
+exports.StepsRootProvider = StepsRootProvider;
+exports.StepsSeparator = StepsSeparator;
+exports.StepsTrigger = StepsTrigger;
 exports.Switch = _switch;
 exports.SwitchContext = SwitchContext;
 exports.SwitchControl = SwitchControl;
@@ -6817,6 +7009,9 @@ exports.useSlider = useSlider;
 exports.useSliderContext = useSliderContext;
 exports.useSplitter = useSplitter;
 exports.useSplitterContext = useSplitterContext;
+exports.useSteps = useSteps;
+exports.useStepsContext = useStepsContext;
+exports.useStepsItemContext = useStepsItemContext;
 exports.useSwitch = useSwitch;
 exports.useSwitchContext = useSwitchContext;
 exports.useTabs = useTabs;