@ark-ui/solid 4.0.0 → 4.1.0

package/dist/cjs/index.js

@@ -211,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;
@@ -228,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$;
         }
@@ -824,7 +824,7 @@ const FieldsetLegend = props => {
 };
 
 const fieldsetAnatomy = anatomy.createAnatomy('fieldset').parts('root', 'errorText', 'helperText', 'legend');
-const parts$2 = fieldsetAnatomy.build();
+const parts$3 = fieldsetAnatomy.build();
 
 const useFieldset = props => {
   const {
@@ -844,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(() => ({
@@ -915,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();
@@ -938,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),
@@ -946,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),
@@ -969,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(() => ({
@@ -2030,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);
@@ -2041,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$;
@@ -2306,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);
@@ -2317,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$;
@@ -2731,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()
@@ -2879,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) {
@@ -2927,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);
@@ -2978,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');
@@ -2997,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$;
@@ -4384,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);
 };
 
@@ -4405,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,
@@ -4425,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);
 };
 
@@ -4439,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);
 };
 
@@ -4469,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() {
@@ -4482,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() {
@@ -4539,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();
@@ -4557,7 +4560,7 @@ const SelectHiddenSelect = props => {
           return isValueEmpty();
         },
         get children() {
-          return _tmpl$$2();
+          return _tmpl$$3();
         }
       }), web.createComponent(solidJs.Index, {
         get each() {
@@ -4890,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;
         },
@@ -6007,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);
@@ -6074,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 />'
@@ -7032,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;
@@ -7073,6 +7177,7 @@ exports.fieldAnatomy = fieldAnatomy;
 exports.fieldsetAnatomy = fieldsetAnatomy;
 exports.segmentGroupAnatomy = segmentGroupAnatomy;
 exports.splitPresenceProps = splitPresenceProps;
+exports.toggleAnatomy = toggleAnatomy;
 exports.useAccordion = useAccordion;
 exports.useAccordionContext = useAccordionContext;
 exports.useAccordionItemContext = useAccordionItemContext;
@@ -7158,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;