@ark-ui/solid 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -21,6 +21,7 @@
     "pin input",
     "popover",
     "presence",
+    "progress",
     "radio group",
     "rating group",
     "segment group",
@@ -32,7 +33,8 @@
     "tags input",
     "toast",
     "toggle group",
-    "tooltip"
+    "tooltip",
+    "tree view"
   ],
   "homepage": "https://ark-ui.com",
   "license": "MIT",
@@ -80,74 +82,75 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.2.0",
-    "@zag-js/accordion": "0.31.1",
-    "@zag-js/avatar": "0.31.1",
-    "@zag-js/carousel": "0.31.1",
-    "@zag-js/checkbox": "0.31.1",
-    "@zag-js/color-picker": "0.31.1",
-    "@zag-js/combobox": "0.31.1",
-    "@zag-js/date-picker": "0.31.1",
-    "@zag-js/dialog": "0.31.1",
-    "@zag-js/editable": "0.31.1",
-    "@zag-js/file-upload": "0.31.1",
-    "@zag-js/hover-card": "0.31.1",
-    "@zag-js/menu": "0.31.1",
-    "@zag-js/number-input": "0.31.1",
-    "@zag-js/pagination": "0.31.1",
-    "@zag-js/pin-input": "0.31.1",
-    "@zag-js/popover": "0.31.1",
-    "@zag-js/presence": "0.31.1",
-    "@zag-js/radio-group": "0.31.1",
-    "@zag-js/rating-group": "0.31.1",
-    "@zag-js/select": "0.31.1",
-    "@zag-js/slider": "0.31.1",
-    "@zag-js/solid": "0.31.1",
-    "@zag-js/splitter": "0.31.1",
-    "@zag-js/switch": "0.31.1",
-    "@zag-js/tabs": "0.31.1",
-    "@zag-js/tags-input": "0.31.1",
-    "@zag-js/toast": "0.31.1",
-    "@zag-js/toggle-group": "0.31.1",
-    "@zag-js/tooltip": "0.31.1",
-    "@zag-js/types": "0.31.1"
+    "@ark-ui/anatomy": "2.1.0",
+    "@zag-js/accordion": "0.34.0",
+    "@zag-js/avatar": "0.34.0",
+    "@zag-js/carousel": "0.34.0",
+    "@zag-js/checkbox": "0.34.0",
+    "@zag-js/color-picker": "0.34.0",
+    "@zag-js/combobox": "0.34.0",
+    "@zag-js/date-picker": "0.34.0",
+    "@zag-js/dialog": "0.34.0",
+    "@zag-js/editable": "0.34.0",
+    "@zag-js/file-upload": "0.34.0",
+    "@zag-js/hover-card": "0.34.0",
+    "@zag-js/menu": "0.34.0",
+    "@zag-js/number-input": "0.34.0",
+    "@zag-js/pagination": "0.34.0",
+    "@zag-js/pin-input": "0.34.0",
+    "@zag-js/popover": "0.34.0",
+    "@zag-js/presence": "0.34.0",
+    "@zag-js/progress": "0.34.0",
+    "@zag-js/radio-group": "0.34.0",
+    "@zag-js/rating-group": "0.34.0",
+    "@zag-js/select": "0.34.0",
+    "@zag-js/slider": "0.34.0",
+    "@zag-js/solid": "0.34.0",
+    "@zag-js/splitter": "0.34.0",
+    "@zag-js/switch": "0.34.0",
+    "@zag-js/tabs": "0.34.0",
+    "@zag-js/tags-input": "0.34.0",
+    "@zag-js/toast": "0.34.0",
+    "@zag-js/toggle-group": "0.34.0",
+    "@zag-js/tooltip": "0.34.0",
+    "@zag-js/tree-view": "0.34.0",
+    "@zag-js/types": "0.34.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-links": "7.6.4",
-    "@storybook/blocks": "7.6.4",
+    "@solidjs/testing-library": "0.8.5",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
+    "@storybook/addon-links": "7.6.10",
+    "@storybook/blocks": "7.6.10",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.5",
-    "@testing-library/user-event": "14.5.1",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.3.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
-    "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.55.0",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
+    "@vitest/coverage-v8": "1.2.2",
+    "eslint": "8.56.0",
     "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.0",
-    "jsdom": "23.0.1",
-    "lucide-solid": "0.294.0",
+    "jsdom": "24.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "17.0.1",
+    "release-it": "17.0.3",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.9.0",
+    "rollup": "4.9.6",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.7",
-    "storybook": "7.6.4",
+    "solid-js": "1.8.12",
+    "storybook": "7.6.10",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.3.3",
-    "vite": "5.0.8",
-    "vite-plugin-solid": "2.8.0",
-    "vitest": "0.34.2"
+    "vite": "5.0.12",
+    "vite-plugin-solid": "2.9.1",
+    "vitest": "1.2.2"
   },
   "peerDependencies": {
     "solid-js": ">=1.6.0"

package/source/accordion/accordion-item-trigger.jsx

@@ -8,6 +8,5 @@ export const AccordionItemTrigger = (props) => {
     const item = useAccordionItemContext();
     const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().getItemTriggerProps(item), () => ({ 'aria-controls': presenceApi().isUnmounted && null }), props);
-    // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
     return <ark.button {...mergedProps}/>;
 };

package/source/accordion/{accordion.jsx → accordion-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { PresencePropsProvider, splitPresenceProps } from '../presence';
 import { AccordionProvider } from './accordion-context';
 import { useAccordion } from './use-accordion';
-export const Accordion = (props) => {
+export const AccordionRoot = (props) => {
     const [presenceProps, accordionProps] = splitPresenceProps(props);
     const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
         'collapsible',

package/source/accordion/index.js

@@ -1,15 +1,15 @@
-import { Accordion as AccordionRoot } from './accordion';
 import { useAccordionContext } from './accordion-context';
 import { AccordionItem } from './accordion-item';
 import { AccordionItemContent } from './accordion-item-content';
 import { useAccordionItemContext } from './accordion-item-context';
 import { AccordionItemIndicator, } from './accordion-item-indicator';
 import { AccordionItemTrigger } from './accordion-item-trigger';
-const Accordion = Object.assign(AccordionRoot, {
+import { AccordionRoot } from './accordion-root';
+export const Accordion = {
     Root: AccordionRoot,
     Item: AccordionItem,
     ItemContent: AccordionItemContent,
     ItemIndicator: AccordionItemIndicator,
     ItemTrigger: AccordionItemTrigger,
-});
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, useAccordionContext, useAccordionItemContext, };
+};
+export { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, useAccordionContext, useAccordionItemContext, };

package/source/avatar/{avatar.jsx → avatar-root.jsx}

@@ -3,7 +3,7 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { AvatarProvider } from './avatar-context';
 import { useAvatar } from './use-avatar';
-export const Avatar = (props) => {
+export const AvatarRoot = (props) => {
     const [params, localProps] = createSplitProps()(props, [
         'dir',
         'getRootNode',

package/source/avatar/index.js

@@ -1,10 +1,10 @@
-import { Avatar as AvatarRoot } from './avatar';
 import { useAvatarContext } from './avatar-context';
 import { AvatarFallback } from './avatar-fallback';
 import { AvatarImage } from './avatar-image';
-const Avatar = Object.assign(AvatarRoot, {
+import { AvatarRoot } from './avatar-root';
+export const Avatar = {
     Root: AvatarRoot,
     Fallback: AvatarFallback,
     Image: AvatarImage,
-});
-export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
+};
+export { AvatarFallback, AvatarImage, AvatarRoot, useAvatarContext };

package/source/carousel/{carousel.jsx → carousel-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { CarouselProvider } from './carousel-context';
 import { useCarousel } from './use-carousel';
-export const Carousel = (props) => {
+export const CarouselRoot = (props) => {
     const [useCarouselProps, localProps] = createSplitProps()(props, [
         'align',
         'dir',

package/source/carousel/index.js

@@ -1,14 +1,14 @@
-import { Carousel as CarouselRoot } from './carousel';
 import { useCarouselContext } from './carousel-context';
 import { CarouselControl } from './carousel-control';
 import { CarouselIndicator } from './carousel-indicator';
 import { CarouselIndicatorGroup, } from './carousel-indicator-group';
+import { CarouselItem } from './carousel-item';
+import { CarouselItemGroup } from './carousel-item-group';
 import { CarouselNextTrigger } from './carousel-next-trigger';
 import { CarouselPrevTrigger } from './carousel-prev-trigger';
-import { CarouselItem } from './carousel-slide';
-import { CarouselItemGroup } from './carousel-slide-group';
+import { CarouselRoot } from './carousel-root';
 import { CarouselViewport } from './carousel-viewport';
-const Carousel = Object.assign(CarouselRoot, {
+export const Carousel = {
     Root: CarouselRoot,
     Control: CarouselControl,
     Indicator: CarouselIndicator,
@@ -18,5 +18,5 @@ const Carousel = Object.assign(CarouselRoot, {
     Item: CarouselItem,
     ItemGroup: CarouselItemGroup,
     Viewport: CarouselViewport,
-});
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };
+};
+export { CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, useCarouselContext, };

package/source/checkbox/{checkbox.jsx → checkbox-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { CheckboxProvider } from './checkbox-context';
 import { useCheckbox } from './use-checkbox';
-export const Checkbox = (props) => {
+export const CheckboxRoot = (props) => {
     const [useCheckboxProps, labelprops] = createSplitProps()(props, [
         'checked',
         'dir',

package/source/checkbox/index.js

@@ -1,12 +1,12 @@
-import { Checkbox as CheckboxRoot } from './checkbox';
 import { useCheckboxContext } from './checkbox-context';
 import { CheckboxControl } from './checkbox-control';
 import { CheckboxIndicator } from './checkbox-indicator';
 import { CheckboxLabel } from './checkbox-label';
-const Checkbox = Object.assign(CheckboxRoot, {
+import { CheckboxRoot } from './checkbox-root';
+export const Checkbox = {
     Root: CheckboxRoot,
     Control: CheckboxControl,
     Label: CheckboxLabel,
     Indicator: CheckboxIndicator,
-});
-export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
+};
+export { CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, useCheckboxContext };

package/source/color-picker/{color-picker.jsx → color-picker-root.jsx}

@@ -5,7 +5,7 @@ import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence'
 import { runIfFn } from '../run-if-fn';
 import { ColorPickerProvider } from './color-picker-context';
 import { useColorPicker, } from './use-color-picker';
-export const ColorPicker = (props) => {
+export const ColorPickerRoot = (props) => {
     const [presenceProps, colorPickerProps] = splitPresenceProps(props);
     const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
         'closeOnSelect',

package/source/color-picker/index.js

@@ -1,4 +1,3 @@
-import { ColorPicker as ColorPickerRoot } from './color-picker';
 import { ColorPickerArea } from './color-picker-area';
 import { ColorPickerAreaBackground, } from './color-picker-area-background';
 import { useColorPickerAreaContext } from './color-picker-area-context';
@@ -16,6 +15,7 @@ import { ColorPickerFormatSelect, } from './color-picker-format-select';
 import { ColorPickerFormatTrigger, } from './color-picker-format-trigger';
 import { ColorPickerLabel } from './color-picker-label';
 import { ColorPickerPositioner } from './color-picker-positioner';
+import { ColorPickerRoot } from './color-picker-root';
 import { ColorPickerSwatch } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, } from './color-picker-swatch-group';
 import { ColorPickerSwatchIndicator, } from './color-picker-swatch-indicator';
@@ -24,7 +24,7 @@ import { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
 import { ColorPickerTrigger } from './color-picker-trigger';
 import { ColorPickerValueText } from './color-picker-value-text';
 import { ColorPickerView } from './color-picker-view';
-const ColorPicker = Object.assign(ColorPickerRoot, {
+export const ColorPicker = {
     Root: ColorPickerRoot,
     Area: ColorPickerArea,
     AreaBackground: ColorPickerAreaBackground,
@@ -48,5 +48,5 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
     Trigger: ColorPickerTrigger,
     ValueText: ColorPickerValueText,
     View: ColorPickerView,
-});
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+};
+export { ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };

package/source/combobox/{combobox.jsx → combobox-root.jsx}

@@ -5,7 +5,7 @@ import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence'
 import { runIfFn } from '../run-if-fn';
 import { ComboboxProvider } from './combobox-context';
 import { useCombobox } from './use-combobox';
-export const Combobox = (props) => {
+export const ComboboxRoot = (props) => {
     const [presenceProps, comboboxProps] = splitPresenceProps(props);
     const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, [
         'allowCustomValue',

package/source/combobox/index.js

@@ -1,4 +1,3 @@
-import { Combobox as ComboboxRoot } from './combobox';
 import { ComboboxClearTrigger } from './combobox-clear-trigger';
 import { ComboboxContent } from './combobox-content';
 import { useComboboxContext } from './combobox-context';
@@ -11,8 +10,9 @@ import { ComboboxItemIndicator } from './combobox-item-indicator';
 import { ComboboxItemText } from './combobox-item-text';
 import { ComboboxLabel } from './combobox-label';
 import { ComboboxPositioner } from './combobox-positioner';
+import { ComboboxRoot } from './combobox-root';
 import { ComboboxTrigger } from './combobox-trigger';
-const Combobox = Object.assign(ComboboxRoot, {
+export const Combobox = {
     Root: ComboboxRoot,
     ClearTrigger: ComboboxClearTrigger,
     Content: ComboboxContent,
@@ -26,5 +26,5 @@ const Combobox = Object.assign(ComboboxRoot, {
     Label: ComboboxLabel,
     Positioner: ComboboxPositioner,
     Trigger: ComboboxTrigger,
-});
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, useComboboxContext, };
+};
+export { ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, useComboboxContext, };

package/source/combobox/use-combobox.js

@@ -10,10 +10,10 @@ export const useCombobox = (props) => {
         'itemToString',
         'items',
     ]);
-    const collection = combobox.collection(collectionOptions);
+    const collection = () => combobox.collection(collectionOptions);
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, collection }, rest);
-    const [state, send] = useMachine(combobox.machine(context), {
+    const context = () => mergeProps({ id: createUniqueId(), getRootNode, collection: collection() }, rest);
+    const [state, send] = useMachine(combobox.machine(context()), {
         context,
     });
     return createMemo(() => combobox.connect(state, send, normalizeProps));

package/source/date-picker/{date-picker.jsx → date-picker-root.jsx}

@@ -5,7 +5,7 @@ import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence'
 import { runIfFn } from '../run-if-fn';
 import { DatePickerProvider } from './date-picker-context';
 import { useDatePicker } from './use-date-picker';
-export const DatePicker = (props) => {
+export const DatePickerRoot = (props) => {
     const [presenceProps, datePickerProps] = splitPresenceProps(props);
     const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
         'closeOnSelect',

package/source/date-picker/index.js

@@ -1,4 +1,3 @@
-import { DatePicker as DatePickerRoot } from './date-picker';
 import { DatePickerClearTrigger, } from './date-picker-clear-trigger';
 import { DatePickerContent } from './date-picker-content';
 import { useDatePickerContext } from './date-picker-context';
@@ -10,6 +9,7 @@ import { DatePickerNextTrigger } from './date-picker-next-trigger';
 import { DatePickerPositioner } from './date-picker-positioner';
 import { DatePickerPrevTrigger } from './date-picker-prev-trigger';
 import { DatePickerRangeText } from './date-picker-range-text';
+import { DatePickerRoot } from './date-picker-root';
 import { DatePickerTable } from './date-picker-table';
 import { DatePickerTableBody } from './date-picker-table-body';
 import { DatePickerTableCell } from './date-picker-table-cell';
@@ -25,7 +25,7 @@ import { useDatePickerViewContext } from './date-picker-view-context';
 import { DatePickerViewControl } from './date-picker-view-control';
 import { DatePickerViewTrigger } from './date-picker-view-trigger';
 import { DatePickerYearSelect } from './date-picker-year-select';
-const DatePicker = Object.assign(DatePickerRoot, {
+export const DatePicker = {
     Root: DatePickerRoot,
     ClearTrigger: DatePickerClearTrigger,
     Content: DatePickerContent,
@@ -49,5 +49,5 @@ const DatePicker = Object.assign(DatePickerRoot, {
     ViewControl: DatePickerViewControl,
     ViewTrigger: DatePickerViewTrigger,
     YearSelect: DatePickerYearSelect,
-});
-export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
+};
+export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };

package/source/dialog/{dialog.jsx → dialog-root.jsx}

@@ -4,7 +4,7 @@ import { PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresenc
 import { runIfFn } from '../run-if-fn';
 import { DialogProvider } from './dialog-context';
 import { useDialog } from './use-dialog';
-export const Dialog = (props) => {
+export const DialogRoot = (props) => {
     const [presenceProps, dialogProps] = splitPresenceProps(props);
     const [useDialogProps, localProps] = createSplitProps()(dialogProps, [
         'aria-label',

package/source/dialog/dialog-trigger.jsx

@@ -6,6 +6,5 @@ export const DialogTrigger = (props) => {
     const api = useDialogContext();
     const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().isUnmounted && null }), props);
-    // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
     return <ark.button {...mergedProps}/>;
 };

package/source/dialog/index.js

@@ -1,20 +1,20 @@
-import { Dialog as DialogRoot } from './dialog';
 import { DialogBackdrop } from './dialog-backdrop';
 import { DialogCloseTrigger } from './dialog-close-trigger';
 import { DialogContent } from './dialog-content';
 import { useDialogContext } from './dialog-context';
 import { DialogDescription } from './dialog-description';
 import { DialogPositioner } from './dialog-positioner';
+import { DialogRoot } from './dialog-root';
 import { DialogTitle } from './dialog-title';
 import { DialogTrigger } from './dialog-trigger';
-const Dialog = Object.assign(DialogRoot, {
+export const Dialog = {
     Root: DialogRoot,
     Backdrop: DialogBackdrop,
     CloseTrigger: DialogCloseTrigger,
-    Positioner: DialogPositioner,
     Content: DialogContent,
     Description: DialogDescription,
+    Positioner: DialogPositioner,
     Title: DialogTitle,
     Trigger: DialogTrigger,
-});
-export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, useDialogContext, };
+};
+export { DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, useDialogContext, };

package/source/editable/{editable.jsx → editable-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { EditableProvider } from './editable-context';
 import { useEditable } from './use-editable';
-export const Editable = (props) => {
+export const EditableRoot = (props) => {
     const [useEditableProps, localProps] = createSplitProps()(props, [
         'activationMode',
         'autoResize',

package/source/editable/index.js

@@ -1,4 +1,3 @@
-import { Editable as EditableRoot } from './editable';
 import { EditableArea } from './editable-area';
 import { EditableCancelTrigger } from './editable-cancel-trigger';
 import { useEditableContext } from './editable-context';
@@ -7,8 +6,9 @@ import { EditableEditTrigger } from './editable-edit-trigger';
 import { EditableInput } from './editable-input';
 import { EditableLabel } from './editable-label';
 import { EditablePreview } from './editable-preview';
+import { EditableRoot } from './editable-root';
 import { EditableSubmitTrigger } from './editable-submit-trigger';
-const Editable = Object.assign(EditableRoot, {
+export const Editable = {
     Root: EditableRoot,
     Area: EditableArea,
     CancelTrigger: EditableCancelTrigger,
@@ -18,5 +18,5 @@ const Editable = Object.assign(EditableRoot, {
     Label: EditableLabel,
     Preview: EditablePreview,
     SubmitTrigger: EditableSubmitTrigger,
-});
-export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, useEditableContext, };
+};
+export { EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, useEditableContext, };

package/source/environment/index.js

@@ -1,6 +1,3 @@
-import { Environment as EnvironmentRoot } from './environment';
+import { Environment } from './environment';
 import { useEnvironmentContext } from './environment-context';
-const Environment = Object.assign(EnvironmentRoot, {
-    Root: EnvironmentRoot,
-});
 export { Environment, useEnvironmentContext };

package/source/factory.jsx

@@ -1,35 +1,22 @@
-import { children, createEffect, splitProps, } from 'solid-js';
+import { splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
-import { spread } from './spread';
-import { ssrSpread } from './ssr-spread';
-function withAsChild(Component) {
-    return function jsx(props) {
-        const [localProps, restProps] = splitProps(props, ['asChild', 'children']);
-        if (!localProps.asChild) {
-            return (<Dynamic component={Component} {...restProps}>
-          {localProps.children}
-        </Dynamic>);
-        }
-        const getChildren = children(() => ssrSpread(localProps.children, restProps));
-        createEffect(() => {
-            const children = getChildren();
-            if (children instanceof HTMLElement) {
-                spread(children, restProps);
-            }
-        });
-        return getChildren;
+export const withAsProp = (Component) => {
+    const ArkComponent = (props) => {
+        const [localProps, otherProps] = splitProps(props, ['as']);
+        return <Dynamic component={localProps.as || Component} {...otherProps}/>;
     };
-}
+    return ArkComponent;
+};
 function jsxFactory() {
     const cache = new Map();
-    return new Proxy(withAsChild, {
+    return new Proxy(withAsProp, {
         apply(target, thisArg, argArray) {
-            return withAsChild(argArray[0]);
+            return withAsProp(argArray[0]);
         },
         get(_, element) {
             const asElement = element;
             if (!cache.has(asElement)) {
-                cache.set(asElement, withAsChild(asElement));
+                cache.set(asElement, withAsProp(asElement));
             }
             return cache.get(asElement);
         },

package/source/file-upload/{file-upload.jsx → file-upload-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { FileUploadProvider } from './file-upload-context';
 import { useFileUpload } from './use-file-upload';
-export const FileUpload = (props) => {
+export const FileUploadRoot = (props) => {
     const [fileUploadProps, localProps] = createSplitProps()(props, [
         'accept',
         'allowDrop',

package/source/file-upload/index.js

@@ -1,4 +1,3 @@
-import { FileUpload as FileUploadRoot } from './file-upload';
 import { useFileUploadContext } from './file-upload-context';
 import { FileUploadDropzone } from './file-upload-dropzone';
 import { FileUploadItem } from './file-upload-item';
@@ -9,8 +8,9 @@ import { FileUploadItemPreview } from './file-upload-item-preview';
 import { FileUploadItemPreviewImage, } from './file-upload-item-preview-image';
 import { FileUploadItemSizeText, } from './file-upload-item-size-text';
 import { FileUploadLabel } from './file-upload-label';
+import { FileUploadRoot } from './file-upload-root';
 import { FileUploadTrigger } from './file-upload-trigger';
-const FileUpload = Object.assign(FileUploadRoot, {
+export const FileUpload = {
     Root: FileUploadRoot,
     Dropzone: FileUploadDropzone,
     Item: FileUploadItem,
@@ -22,5 +22,5 @@ const FileUpload = Object.assign(FileUploadRoot, {
     ItemSizeText: FileUploadItemSizeText,
     Label: FileUploadLabel,
     Trigger: FileUploadTrigger,
-});
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
+};
+export { FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, useFileUploadContext, };

package/source/hover-card/{hover-card.jsx → hover-card-root.jsx}

@@ -4,7 +4,7 @@ import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence'
 import { runIfFn } from '../run-if-fn';
 import { HoverCardProvider } from './hover-card-context';
 import { useHoverCard } from './use-hover-card';
-export const HoverCard = (props) => {
+export const HoverCardRoot = (props) => {
     const [presenceProps, hoverCardProps] = splitPresenceProps(props);
     const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, [
         'closeDelay',

package/source/hover-card/index.js

@@ -1,16 +1,16 @@
-import { HoverCard as HoverCardRoot } from './hover-card';
 import { HoverCardArrow } from './hover-card-arrow';
 import { HoverCardArrowTip } from './hover-card-arrow-tip';
 import { HoverCardContent } from './hover-card-content';
 import { useHoverCardContext } from './hover-card-context';
 import { HoverCardPositioner } from './hover-card-positioner';
+import { HoverCardRoot } from './hover-card-root';
 import { HoverCardTrigger } from './hover-card-trigger';
-const HoverCard = Object.assign(HoverCardRoot, {
+export const HoverCard = {
     Root: HoverCardRoot,
     Arrow: HoverCardArrow,
     ArrowTip: HoverCardArrowTip,
     Content: HoverCardContent,
     Positioner: HoverCardPositioner,
     Trigger: HoverCardTrigger,
-});
-export { HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, useHoverCardContext, };
+};
+export { HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, useHoverCardContext, };