@ark-ui/solid 1.0.1 → 1.2.0

package/cjs/index.js

@@ -14,6 +14,7 @@ var combobox = require('@zag-js/combobox');
 var datePicker = require('@zag-js/date-picker');
 var dialog = require('@zag-js/dialog');
 var editable = require('@zag-js/editable');
+var fileUpload = require('@zag-js/file-upload');
 var hoverCard = require('@zag-js/hover-card');
 var menu = require('@zag-js/menu');
 var numberInput = require('@zag-js/number-input');
@@ -59,6 +60,7 @@ var combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
 var datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker);
 var dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
 var editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
+var fileUpload__namespace = /*#__PURE__*/_interopNamespaceDefault(fileUpload);
 var hoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(hoverCard);
 var menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu);
 var numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput);
@@ -533,7 +535,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
   strict: false
 });
 
-const _tmpl$$b = /*#__PURE__*/web.template(`<span hidden>`);
+const _tmpl$$c = /*#__PURE__*/web.template(`<span hidden>`);
 const Environment$1 = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -544,7 +546,7 @@ const Environment$1 = props => {
     },
     get children() {
       return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$b();
+        const _el$ = _tmpl$$c();
         const _ref$ = spanRef;
         typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
         return _el$;
@@ -839,12 +841,12 @@ const Checkbox$1 = props => {
   });
 };
 
-const _tmpl$$a = /*#__PURE__*/web.template(`<input>`);
+const _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$a();
+    const _el$ = _tmpl$$b();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -888,10 +890,10 @@ const useColorPicker = props => {
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$$9 = /*#__PURE__*/web.template(`<input>`);
+const _tmpl$$a = /*#__PURE__*/web.template(`<input>`);
 const ColorPicker$1 = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['autoFocus', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().isOpen
@@ -911,7 +913,7 @@ const ColorPicker$1 = props => {
           }));
         }
       }), (() => {
-        const _el$ = _tmpl$$9();
+        const _el$ = _tmpl$$a();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -1014,6 +1016,32 @@ const ColorPickerEyeDropperTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerFormatSelect = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().formatSelectProps, props);
+  return web.createComponent(ark.select, web.mergeProps(mergedProps, {
+    get children() {
+      return web.createComponent(solidJs.Index, {
+        each: ['rgba', 'hsla', 'hsba'],
+        children: format => web.createComponent(ark.option, {
+          get value() {
+            return format();
+          },
+          get children() {
+            return format();
+          }
+        })
+      });
+    }
+  }));
+};
+
+const ColorPickerFormatTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().formatTriggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
 const ColorPickerLabel = props => {
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().labelProps, props);
@@ -1034,11 +1062,21 @@ const ColorPickerPositioner = props => {
   });
 };
 
+const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
+  hookName: 'useColorPickerSwatchContext',
+  providerName: '<ColorPickerSwatchProvider />'
+});
+
 const ColorPickerSwatch = props => {
-  const [colorSwatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
+  const [swatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().getSwatchProps(colorSwatchProps), localProps);
-  return web.createComponent(ark.div, mergedProps);
+  const mergedProps = solid.mergeProps(() => api().getSwatchProps(swatchProps), localProps);
+  return web.createComponent(ColorPickerSwatchProvider, {
+    value: swatchProps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const ColorPickerSwatchGroup = props => {
@@ -1047,8 +1085,15 @@ const ColorPickerSwatchGroup = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+const ColorPickerSwatchIndicator = props => {
+  const api = useColorPickerContext();
+  const swatchProps = useColorPickerSwatchContext();
+  const mergedProps = solid.mergeProps(() => api().getSwatchIndicatorProps(swatchProps), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
 const ColorPickerSwatchTrigger = props => {
-  const [triggerProps, localProps] = createSplitProps()(props, ['value']);
+  const [triggerProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
   return web.createComponent(ark.button, mergedProps);
@@ -1108,10 +1153,13 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   Content: ColorPickerContent,
   Control: ColorPickerControl,
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  FormatTrigger: ColorPickerFormatTrigger,
+  FormatSelect: ColorPickerFormatSelect,
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
   Swatch: ColorPickerSwatch,
   SwatchGroup: ColorPickerSwatchGroup,
+  SwatchIndicator: ColorPickerSwatchIndicator,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
   Trigger: ColorPickerTrigger,
@@ -1314,7 +1362,7 @@ const useDatePicker = props => {
 
 const DatePicker$1 = props => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
-  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
+  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
   const api = useDatePicker(useDatePickerProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().isOpen
@@ -1376,14 +1424,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-const _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
+const _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        const _el$ = _tmpl$$8();
+        const _el$ = _tmpl$$9();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1566,7 +1614,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const _tmpl$$7 = /*#__PURE__*/web.template(`<option>`);
+const _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
@@ -1576,7 +1624,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        const _el$ = _tmpl$$7();
+        const _el$ = _tmpl$$8();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -1680,7 +1728,7 @@ const DialogBackdrop = props => {
 
 const DialogCloseTrigger = props => {
   const dialog = useDialogContext();
-  const mergedProps = solid.mergeProps(() => dialog().triggerProps, props);
+  const mergedProps = solid.mergeProps(() => dialog().closeTriggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -1764,13 +1812,12 @@ const useEditable = props => {
 };
 
 const Editable$1 = props => {
-  const [useEditableProps, restProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
-  const editable = useEditable(useEditableProps);
-  const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
-  const mergedProps = solid.mergeProps(() => editable().rootProps, localProps);
-  const getChildren = () => runIfFn(childrenProps.children, editable);
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const api = useEditable(useEditableProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return web.createComponent(EditableProvider, {
-    value: editable,
+    value: api,
     get children() {
       return web.createComponent(ark.div, web.mergeProps(mergedProps, {
         get children() {
@@ -1782,50 +1829,50 @@ const Editable$1 = props => {
 };
 
 const EditableArea = props => {
-  const editable = useEditableContext();
-  const mergedProps = solid.mergeProps(() => editable().areaProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().areaProps, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const EditableCancelTrigger = props => {
-  const editable = useEditableContext();
-  const mergedProps = solid.mergeProps(() => editable().cancelTriggerProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().cancelTriggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const EditableControl = props => {
-  const editable = useEditableContext();
-  const mergedProps = solid.mergeProps(() => editable().controlProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const EditableEditTrigger = props => {
-  const editable = useEditableContext();
-  const mergedProps = solid.mergeProps(() => editable().editTriggerProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().editTriggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
 const EditableInput = props => {
-  const editable = useEditableContext();
-  const mergedProps = solid.mergeProps(() => editable().inputProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().inputProps, props);
   return web.createComponent(ark.input, mergedProps);
 };
 
 const EditableLabel = props => {
-  const editable = useEditableContext();
-  const mergedProps = solid.mergeProps(() => editable().labelProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
 const EditablePreview = props => {
-  const editable = useEditableContext();
-  const mergedProps = solid.mergeProps(() => editable().previewProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().previewProps, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const EditableSubmitTrigger = props => {
-  const dialog = useEditableContext();
-  const mergedProps = solid.mergeProps(() => dialog().submitTriggerProps, props);
+  const api = useEditableContext();
+  const mergedProps = solid.mergeProps(() => api().submitTriggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
@@ -1841,6 +1888,161 @@ const Editable = Object.assign(Editable$1, {
   SubmitTrigger: EditableSubmitTrigger
 });
 
+const [FileUploadProvider, useFileUploadContext] = createContext({
+  hookName: 'useFileUploadContext',
+  providerName: '<FileUploadProvider />'
+});
+
+const useFileUpload = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(fileUpload__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => fileUpload__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const FileUpload$1 = props => {
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'dir', 'disabled', 'files', 'getRootNode', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileReject', 'onFilesChange', 'translations', 'validate']);
+  const api = useFileUpload(fileUploadProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(FileUploadProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
+const FileUploadDropzone = props => {
+  const api = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => api().dropzoneProps, props);
+  return [web.createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$$7();
+    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
+};
+
+const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
+  hookName: 'useFileUploadItemContext',
+  providerName: '<FileUploadItemProvider />'
+});
+
+const FileUploadItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['file']);
+  const api = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children);
+  return web.createComponent(FileUploadItemProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const FileUploadItemDeleteTrigger = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemDeleteTriggerProps(item), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const FileUploadItemGroup = props => {
+  const api = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => api().itemGroupProps, props);
+  const getChildren = () => runIfFn(props.children, () => api().files);
+  return web.createComponent(ark.ul, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+const FileUploadItemName = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemNameProps(item), props);
+  const getChildren = solidJs.children(() => props.children);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren() || item.file.name;
+    }
+  }));
+};
+
+const FileUploadItemPreview = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemPreviewProps(item), props);
+  if (!item.file.type.match(props.type ?? '.*')) return null;
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const FileUploadItemPreviewImage = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const [url, setUrl] = solidJs.createSignal('');
+  api().createFileUrl(item.file, url => setUrl(url));
+  const mergedProps = solid.mergeProps(api().getItemPreviewImageProps({
+    ...item,
+    url: url()
+  }), props);
+  return web.createComponent(ark.img, mergedProps);
+};
+
+const FileUploadItemSizeText = props => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemSizeTextProps(item), props);
+  const getChildren = solidJs.children(() => props.children);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren() || api().getFileSize(item.file);
+    }
+  }));
+};
+
+const FileUploadLabel = props => {
+  const api = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const FileUploadTrigger = props => {
+  const api = useFileUploadContext();
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const FileUpload = Object.assign(FileUpload$1, {
+  Root: FileUpload$1,
+  Dropzone: FileUploadDropzone,
+  Item: FileUploadItem,
+  ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+  ItemGroup: FileUploadItemGroup,
+  ItemName: FileUploadItemName,
+  ItemPreview: FileUploadItemPreview,
+  ItemPreviewImage: FileUploadItemPreviewImage,
+  ItemSizeText: FileUploadItemSizeText,
+  Label: FileUploadLabel,
+  Trigger: FileUploadTrigger
+});
+
 const [HoverCardProvider, useHoverCardContext] = createContext({
   hookName: 'useHoverCardContext',
   providerName: '<HoverCardProvider />'
@@ -2149,10 +2351,15 @@ const NumberInput$1 = props => {
   const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
   const api = useNumberInput(useNumberInputProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return web.createComponent(NumberInputProvider, {
     value: api,
     get children() {
-      return web.createComponent(ark.div, mergedProps);
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
@@ -2169,18 +2376,18 @@ const NumberInputDecrementTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const NumberInputInput = props => {
-  const api = useNumberInputContext();
-  const mergedProps = solid.mergeProps(() => api().inputProps, props);
-  return web.createComponent(ark.input, mergedProps);
-};
-
 const NumberInputIncrementTrigger = props => {
   const api = useNumberInputContext();
   const mergedProps = solid.mergeProps(() => api().incrementTriggerProps, props);
   return web.createComponent(ark.button, mergedProps);
 };
 
+const NumberInputInput = props => {
+  const api = useNumberInputContext();
+  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const NumberInputLabel = props => {
   const api = useNumberInputContext();
   const mergedProps = solid.mergeProps(() => api().labelProps, props);
@@ -2221,11 +2428,10 @@ const usePagination = props => {
 };
 
 const Pagination$1 = props => {
-  const [paginationParams, restProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
-  const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
+  const [paginationParams, localProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const api = usePagination(paginationParams);
-  const getChildren = () => runIfFn(childrenProps.children, api);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return web.createComponent(PaginationProvider, {
     value: api,
     get children() {
@@ -2239,9 +2445,9 @@ const Pagination$1 = props => {
 };
 
 const PaginationEllipsis = props => {
-  const [ellipsisProps, restProps] = createSplitProps()(props, ['index']);
+  const [ellipsisProps, localProps] = createSplitProps()(props, ['index']);
   const api = usePaginationContext();
-  const mergedProps = solid.mergeProps(() => api().getEllipsisProps(ellipsisProps), restProps);
+  const mergedProps = solid.mergeProps(() => api().getEllipsisProps(ellipsisProps), localProps);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2291,8 +2497,8 @@ const usePinInput = props => {
 
 const _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
 const PinInput$1 = props => {
-  const [pinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
-  const api = usePinInput(pinInputProps);
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const api = usePinInput(usePinInputProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(PinInputProvider, {
     value: api,
@@ -2500,19 +2706,25 @@ const RadioGroupIndicator = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const [RadioProvider, useRadioGroupItemContext] = createContext({
+const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
   hookName: 'useRadioGroupItemContext',
-  providerName: '<RadioProvider />'
+  providerName: '<RadioGroupItemProvider />'
 });
 
 const RadioGroupItem = props => {
-  const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
   const api = useRadioGroupContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), restProps);
-  return web.createComponent(RadioProvider, {
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const itemState = api().getItemState(itemProps);
+  const getChildren = () => runIfFn(localProps.children, itemState);
+  return web.createComponent(RadioGroupItemProvider, {
     value: itemProps,
     get children() {
-      return web.createComponent(ark.label, mergedProps);
+      return web.createComponent(ark.label, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
@@ -2569,8 +2781,8 @@ const useRatingGroup = props => {
 };
 
 const RatingGroup$1 = props => {
-  const [ratingParams, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
-  const api = useRatingGroup(ratingParams);
+  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup(useRatingProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(RatingGroupProvider, {
     value: api,
@@ -2583,8 +2795,8 @@ const RatingGroup$1 = props => {
 const _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
-  const getChildren = () => runIfFn(props.children, api);
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const getChildren = () => runIfFn(props.children, api);
   return [web.createComponent(ark.div, web.mergeProps(mergedProps, {
     get children() {
       return getChildren();
@@ -2604,11 +2816,11 @@ const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
 const RatingGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['index']);
   const api = useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
   const itemState = solidJs.createMemo(() => api().getItemState(itemProps));
   const getChildren = () => runIfFn(localProps.children, itemState);
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
   return web.createComponent(RatingGroupItemProvider, {
-    value: itemState,
+    value: itemProps,
     get children() {
       return web.createComponent(ark.span, web.mergeProps(mergedProps, {
         get children() {
@@ -2667,19 +2879,25 @@ const SegmentGroupIndicator = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-const [SegmentProvider, useSegmentGroupItemContext] = createContext({
+const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({
   hookName: 'useSegmentGroupItemContext',
-  providerName: '<SegmentProvider />'
+  providerName: '<SegmentGroupItemProvider />'
 });
 
 const SegmentGroupItem = props => {
-  const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
   const api = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, restProps);
-  return web.createComponent(SegmentProvider, {
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, localProps);
+  const itemState = api().getItemState(itemProps);
+  const getChildren = () => runIfFn(localProps.children, itemState);
+  return web.createComponent(SegmentGroupItemProvider, {
     value: itemProps,
     get children() {
-      return web.createComponent(ark.label, mergedProps);
+      return web.createComponent(ark.label, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
@@ -2743,16 +2961,16 @@ const Select$1 = props => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
   const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
   const api = useSelect(useSelectProps);
-  const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
+  const presenceApi = usePresence(solid.mergeProps(() => ({
     present: api().isOpen
-  })));
+  }), presenceProps));
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, api);
   return web.createComponent(SelectProvider, {
     value: api,
     get children() {
       return web.createComponent(PresenceProvider, {
-        value: apiPresence,
+        value: presenceApi,
         get children() {
           return web.createComponent(ark.div, web.mergeProps(mergedProps, {
             get children() {
@@ -2810,7 +3028,7 @@ const SelectControl = props => {
 
 const SelectIndicator = props => {
   const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -2837,9 +3055,9 @@ const SelectItem = props => {
 };
 
 const SelectItemGroup = props => {
-  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
   const api = useSelectContext();
-  const mergedProps = solid.mergeProps(() => api().getItemGroupProps(groupProps), localProps);
+  const mergedProps = solid.mergeProps(() => api().getItemGroupProps(itemGroupProps), localProps);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3092,9 +3310,9 @@ const useSwitch = props => {
 };
 
 const Switch$1 = props => {
-  const [switchProps, labelProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'required', 'value']);
+  const [switchProps, localProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'required', 'value']);
   const api = useSwitch(switchProps);
-  const mergedProps = solid.mergeProps(() => api().rootProps, labelProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   const getChildren = () => runIfFn(props.children, api);
   return web.createComponent(SwitchProvider, {
     value: api,
@@ -3120,14 +3338,14 @@ const SwitchControl = props => {
 };
 
 const SwitchLabel = props => {
-  const checkbox = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => checkbox().labelProps, props);
+  const api = useSwitchContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SwitchThumb = props => {
-  const checkbox = useSwitchContext();
-  const mergedProps = solid.mergeProps(() => checkbox().thumbProps, props);
+  const api = useSwitchContext();
+  const mergedProps = solid.mergeProps(() => api().thumbProps, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
@@ -3346,19 +3564,18 @@ const [ToastProvider, useToastContext] = createContext({
   providerName: '<ToastProvider />'
 });
 
+const ToastGroup = props => {
+  return web.createComponent(ark.ol, props);
+};
+
 const createToaster = props => {
-  const {
-    placement,
-    ...rest
-  } = props;
   const service = toast__namespace.group.machine({
     id: '1',
-    placement,
-    ...rest
+    ...props
   }).start();
   const [state, send] = solid.useActor(service);
   const api = solidJs.createMemo(() => toast__namespace.group.connect(state, send, solid.normalizeProps));
-  const Toaster = props => {
+  const Toaster = toasterProps => {
     const getRootNode = useEnvironmentContext();
     solidJs.createEffect(() => {
       service.setContext({
@@ -3367,13 +3584,13 @@ const createToaster = props => {
       solidJs.onCleanup(() => service.stop());
     });
     const mergedProps = solid.mergeProps(() => api().getGroupProps({
-      placement
-    }), props);
-    return web.createComponent(ark.ol, web.mergeProps(mergedProps, {
+      placement: props.placement
+    }), toasterProps);
+    return web.createComponent(ToastGroup, web.mergeProps(mergedProps, {
       get children() {
         return web.createComponent(solidJs.Index, {
           get each() {
-            return api().toastsByPlacement[placement];
+            return api().toastsByPlacement[props.placement];
           },
           children: toast => web.createComponent(ToastProviderFactory, {
             get service() {
@@ -3388,11 +3605,9 @@ const createToaster = props => {
 };
 const ToastProviderFactory = props => {
   const [state, send] = solid.useActor(props.service);
-  const api = toast__namespace.connect(state, send, solid.normalizeProps);
+  const api = solidJs.createMemo(() => toast__namespace.connect(state, send, solid.normalizeProps));
   return web.createComponent(ToastProvider, {
-    get value() {
-      return solidJs.createMemo(() => api);
-    },
+    value: api,
     get children() {
       return state.context.render?.(api);
     }
@@ -3425,9 +3640,10 @@ const ToastTitle = props => {
 
 const Toast = Object.assign(Toast$1, {
   Root: Toast$1,
-  Title: ToastTitle,
+  CloseTrigger: ToastCloseTrigger,
   Description: ToastDescription,
-  CloseTrigger: ToastCloseTrigger
+  Group: ToastGroup,
+  Title: ToastTitle
 });
 
 const [ToggleGroupProvider, useToggleGroupContext] = createContext({
@@ -3596,14 +3812,18 @@ exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;
 exports.ColorPickerContent = ColorPickerContent;
 exports.ColorPickerControl = ColorPickerControl;
 exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;
+exports.ColorPickerFormatSelect = ColorPickerFormatSelect;
+exports.ColorPickerFormatTrigger = ColorPickerFormatTrigger;
 exports.ColorPickerLabel = ColorPickerLabel;
 exports.ColorPickerPositioner = ColorPickerPositioner;
 exports.ColorPickerSwatch = ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;
+exports.ColorPickerSwatchIndicator = ColorPickerSwatchIndicator;
 exports.ColorPickerSwatchTrigger = ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = ColorPickerTrigger;
 exports.ColorPickerValueText = ColorPickerValueText;
+exports.ColorPickerView = ColorPickerView;
 exports.Combobox = Combobox;
 exports.ComboboxClearTrigger = ComboboxClearTrigger;
 exports.ComboboxContent = ComboboxContent;
@@ -3658,6 +3878,16 @@ exports.EditableLabel = EditableLabel;
 exports.EditablePreview = EditablePreview;
 exports.EditableSubmitTrigger = EditableSubmitTrigger;
 exports.Environment = Environment;
+exports.FileUpload = FileUpload;
+exports.FileUploadDropzone = FileUploadDropzone;
+exports.FileUploadItem = FileUploadItem;
+exports.FileUploadItemDeleteTrigger = FileUploadItemDeleteTrigger;
+exports.FileUploadItemGroup = FileUploadItemGroup;
+exports.FileUploadItemName = FileUploadItemName;
+exports.FileUploadItemPreviewImage = FileUploadItemPreviewImage;
+exports.FileUploadItemSizeText = FileUploadItemSizeText;
+exports.FileUploadLabel = FileUploadLabel;
+exports.FileUploadTrigger = FileUploadTrigger;
 exports.HoverCard = HoverCard;
 exports.HoverCardArrow = HoverCardArrow;
 exports.HoverCardArrowTip = HoverCardArrowTip;
@@ -3769,6 +3999,7 @@ exports.TagsInputLabel = TagsInputLabel;
 exports.Toast = Toast;
 exports.ToastCloseTrigger = ToastCloseTrigger;
 exports.ToastDescription = ToastDescription;
+exports.ToastGroup = ToastGroup;
 exports.ToastTitle = ToastTitle;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
@@ -3797,6 +4028,7 @@ exports.useDatePickerViewContext = useDatePickerViewContext;
 exports.useDialogContext = useDialogContext;
 exports.useEditableContext = useEditableContext;
 exports.useEnvironmentContext = useEnvironmentContext;
+exports.useFileUploadContext = useFileUploadContext;
 exports.useHoverCardContext = useHoverCardContext;
 exports.useMenuContext = useMenuContext;
 exports.useNumberInputContext = useNumberInputContext;