@ark-ui/solid 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -6,6 +6,21 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.2.0] - 2023-12-13
+
+### Added
+
+- Added the `ToastGroup` component.
+
+### Changed
+
+- Revised the `FileUpload` component. Check out the [documentation](https://ark-ui.com/docs/components/file-upload) for more information.
+
+### Fixed
+
+- Resolved a problem where `Select.Indicator` was assigned to the wrong `data-part`.
+- Fixed an issue where keyboard interactions within a submenu would bubble up to the parent `Menu`.
+
 ## [1.1.0] - 2023-11-21
 
 ### Added
@@ -13,7 +28,7 @@ description: All notable changes to this project will be documented in this file
 - Added render function to the `NumberInput` component
 - Added `FileUpload` component
 
-## Changed
+### Changed
 
 - Revised the `ColorPicker` component. Check out the [documentation](https://ark-ui.com/docs/components/color-picker) for more information.
 

package/README.md

@@ -61,31 +61,34 @@ yarn add @ark-ui/solid
 To use a component from `@ark-ui/solid`, import it and include it in your application:
 
 ```tsx
-import {
-  Slider,
-  SliderControl,
-  SliderLabel,
-  SliderOutput,
-  SliderRange,
-  SliderThumb,
-  SliderTrack,
-} from '@ark-ui/solid'
+import { Slider, type SliderProps } from '@ark-ui/solid'
 import { createSignal } from 'solid-js'
 
-export const MySlider = () => {
-  const [value, setValue] = createSignal(30)
+export const MySlider = (props: SliderProps) => {
+  const [value, setValue] = createSignal([42])
 
   return (
-    <Slider min={-50} max={50} value={value()} onChange={(e) => setValue(e.value)}>
-      <SliderLabel>Label</SliderLabel>
-      <SliderOutput>{value}</SliderOutput>
-      <SliderControl>
-        <SliderTrack>
-          <SliderRange />
-        </SliderTrack>
-        <SliderThumb />
-      </SliderControl>
-    </Slider>
+    <Slider.Root
+      min={0}
+      max={100}
+      value={value()}
+      onValueChange={(e) => setValue(e.value)}
+      {...props}
+    >
+      <Slider.Label>Label</Slider.Label>
+      <Slider.ValueText />
+      <Slider.Control>
+        <Slider.Track>
+          <Slider.Range />
+        </Slider.Track>
+        <Slider.Thumb index={0} />
+      </Slider.Control>
+      <Slider.MarkerGroup>
+        <Slider.Marker value={25}>25</Slider.Marker>
+        <Slider.Marker value={50}>50</Slider.Marker>
+        <Slider.Marker value={75}>75</Slider.Marker>
+      </Slider.MarkerGroup>
+    </Slider.Root>
   )
 }
 ```

package/cjs/index.js

@@ -1362,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
@@ -1812,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() {
@@ -1830,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);
 };
 
@@ -1907,7 +1906,7 @@ const useFileUpload = props => {
 };
 
 const FileUpload$1 = props => {
-  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'dir', 'disabled', 'files', 'getRootNode', 'id', 'isValidFile', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFilesChange']);
+  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);
@@ -1987,20 +1986,23 @@ const FileUploadItemName = props => {
 };
 
 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));
-  try {
-    const mergedProps = solid.mergeProps(api().getItemPreviewProps({
-      ...item,
-      url: url()
-    }), props);
-    return web.createComponent(ark.img, mergedProps);
-  } catch (e) {
-    // TODO We could render a fallback component
-    return null;
-  }
+  const mergedProps = solid.mergeProps(api().getItemPreviewImageProps({
+    ...item,
+    url: url()
+  }), props);
+  return web.createComponent(ark.img, mergedProps);
 };
 
 const FileUploadItemSizeText = props => {
@@ -2030,14 +2032,15 @@ const FileUploadTrigger = props => {
 const FileUpload = Object.assign(FileUpload$1, {
   Root: FileUpload$1,
   Dropzone: FileUploadDropzone,
-  Label: FileUploadLabel,
-  Trigger: FileUploadTrigger,
-  ItemGroup: FileUploadItemGroup,
   Item: FileUploadItem,
+  ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+  ItemGroup: FileUploadItemGroup,
   ItemName: FileUploadItemName,
   ItemPreview: FileUploadItemPreview,
+  ItemPreviewImage: FileUploadItemPreviewImage,
   ItemSizeText: FileUploadItemSizeText,
-  ItemDeleteTrigger: FileUploadItemDeleteTrigger
+  Label: FileUploadLabel,
+  Trigger: FileUploadTrigger
 });
 
 const [HoverCardProvider, useHoverCardContext] = createContext({
@@ -2373,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);
@@ -2425,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() {
@@ -2443,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);
 };
 
@@ -2495,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,
@@ -2704,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();
+        }
+      }));
     }
   });
 };
@@ -2773,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,
@@ -2787,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();
@@ -2808,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() {
@@ -2871,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();
+        }
+      }));
     }
   });
 };
@@ -2947,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() {
@@ -3014,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);
 };
 
@@ -3041,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);
 };
 
@@ -3296,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,
@@ -3324,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);
 };
 
@@ -3550,6 +3564,10 @@ const [ToastProvider, useToastContext] = createContext({
   providerName: '<ToastProvider />'
 });
 
+const ToastGroup = props => {
+  return web.createComponent(ark.ol, props);
+};
+
 const createToaster = props => {
   const service = toast__namespace.group.machine({
     id: '1',
@@ -3568,7 +3586,7 @@ const createToaster = props => {
     const mergedProps = solid.mergeProps(() => api().getGroupProps({
       placement: props.placement
     }), toasterProps);
-    return web.createComponent(ark.ol, web.mergeProps(mergedProps, {
+    return web.createComponent(ToastGroup, web.mergeProps(mergedProps, {
       get children() {
         return web.createComponent(solidJs.Index, {
           get each() {
@@ -3622,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({
@@ -3865,7 +3884,7 @@ exports.FileUploadItem = FileUploadItem;
 exports.FileUploadItemDeleteTrigger = FileUploadItemDeleteTrigger;
 exports.FileUploadItemGroup = FileUploadItemGroup;
 exports.FileUploadItemName = FileUploadItemName;
-exports.FileUploadItemPreview = FileUploadItemPreview;
+exports.FileUploadItemPreviewImage = FileUploadItemPreviewImage;
 exports.FileUploadItemSizeText = FileUploadItemSizeText;
 exports.FileUploadLabel = FileUploadLabel;
 exports.FileUploadTrigger = FileUploadTrigger;
@@ -3980,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;