@ark-ui/solid 1.3.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.3.0",
+  "version": "2.0.1",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -33,7 +33,8 @@
     "tags input",
     "toast",
     "toggle group",
-    "tooltip"
+    "tooltip",
+    "tree view"
   ],
   "homepage": "https://ark-ui.com",
   "license": "MIT",
@@ -81,75 +82,75 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.3.0",
-    "@zag-js/accordion": "0.32.1",
-    "@zag-js/avatar": "0.32.1",
-    "@zag-js/carousel": "0.32.1",
-    "@zag-js/checkbox": "0.32.1",
-    "@zag-js/color-picker": "0.32.1",
-    "@zag-js/combobox": "0.32.1",
-    "@zag-js/date-picker": "0.32.1",
-    "@zag-js/dialog": "0.32.1",
-    "@zag-js/editable": "0.32.1",
-    "@zag-js/file-upload": "0.32.1",
-    "@zag-js/hover-card": "0.32.1",
-    "@zag-js/menu": "0.32.1",
-    "@zag-js/number-input": "0.32.1",
-    "@zag-js/pagination": "0.32.1",
-    "@zag-js/pin-input": "0.32.1",
-    "@zag-js/popover": "0.32.1",
-    "@zag-js/presence": "0.32.1",
-    "@zag-js/progress": "0.32.1",
-    "@zag-js/radio-group": "0.32.1",
-    "@zag-js/rating-group": "0.32.1",
-    "@zag-js/select": "0.32.1",
-    "@zag-js/slider": "0.32.1",
-    "@zag-js/solid": "0.32.1",
-    "@zag-js/splitter": "0.32.1",
-    "@zag-js/switch": "0.32.1",
-    "@zag-js/tabs": "0.32.1",
-    "@zag-js/tags-input": "0.32.1",
-    "@zag-js/toast": "0.32.1",
-    "@zag-js/toggle-group": "0.32.1",
-    "@zag-js/tooltip": "0.32.1",
-    "@zag-js/types": "0.32.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.5",
-    "@storybook/addon-essentials": "7.6.8",
-    "@storybook/addon-interactions": "7.6.8",
-    "@storybook/addon-links": "7.6.8",
-    "@storybook/blocks": "7.6.8",
+    "@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.4",
-    "@testing-library/jest-dom": "6.2.0",
+    "@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.18.1",
-    "@typescript-eslint/parser": "6.18.1",
-    "@vitest/coverage-v8": "0.34.6",
+    "@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.309.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.5",
+    "rollup": "4.9.6",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.11",
-    "storybook": "7.6.8",
+    "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.11",
-    "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-root.jsx

@@ -0,0 +1,29 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { PresencePropsProvider, splitPresenceProps } from '../presence';
+import { AccordionProvider } from './accordion-context';
+import { useAccordion } from './use-accordion';
+export const AccordionRoot = (props) => {
+    const [presenceProps, accordionProps] = splitPresenceProps(props);
+    const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
+        'collapsible',
+        'dir',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'multiple',
+        'onFocusChange',
+        'onValueChange',
+        'orientation',
+        'value',
+    ]);
+    const api = useAccordion(useAccordionProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<AccordionProvider value={api}>
+      <PresencePropsProvider value={presenceProps}>
+        <ark.div {...mergedProps}/>
+      </PresencePropsProvider>
+    </AccordionProvider>);
+};

package/source/accordion/accordion.jsx

@@ -1,29 +1,6 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { PresencePropsProvider, splitPresenceProps } from '../presence';
-import { AccordionProvider } from './accordion-context';
-import { useAccordion } from './use-accordion';
-export const Accordion = (props) => {
-    const [presenceProps, accordionProps] = splitPresenceProps(props);
-    const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
-        'collapsible',
-        'dir',
-        'disabled',
-        'getRootNode',
-        'id',
-        'ids',
-        'multiple',
-        'onFocusChange',
-        'onValueChange',
-        'orientation',
-        'value',
-    ]);
-    const api = useAccordion(useAccordionProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    return (<AccordionProvider value={api}>
-      <PresencePropsProvider value={presenceProps}>
-        <ark.div {...mergedProps}/>
-      </PresencePropsProvider>
-    </AccordionProvider>);
-};
+import { AccordionItem as Item } from './accordion-item';
+import { AccordionItemContent as ItemContent } from './accordion-item-content';
+import { AccordionItemIndicator as ItemIndicator } from './accordion-item-indicator';
+import { AccordionItemTrigger as ItemTrigger } from './accordion-item-trigger';
+import { AccordionRoot as Root } from './accordion-root';
+export { Item, ItemContent, ItemIndicator, ItemTrigger, Root };

package/source/accordion/index.js

@@ -1,15 +1,9 @@
-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, {
-    Root: AccordionRoot,
-    Item: AccordionItem,
-    ItemContent: AccordionItemContent,
-    ItemIndicator: AccordionItemIndicator,
-    ItemTrigger: AccordionItemTrigger,
-});
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, useAccordionContext, useAccordionItemContext, };
+import { AccordionRoot } from './accordion-root';
+export * as Accordion from './accordion';
+export { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, useAccordionContext, useAccordionItemContext, };

package/source/avatar/avatar-root.jsx

@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { AvatarProvider } from './avatar-context';
+import { useAvatar } from './use-avatar';
+export const AvatarRoot = (props) => {
+    const [params, localProps] = createSplitProps()(props, [
+        'dir',
+        'getRootNode',
+        'id',
+        'onLoadingStatusChange',
+    ]);
+    const api = useAvatar(params);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<AvatarProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </AvatarProvider>);
+};

package/source/avatar/avatar.jsx

@@ -1,18 +1,4 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { AvatarProvider } from './avatar-context';
-import { useAvatar } from './use-avatar';
-export const Avatar = (props) => {
-    const [params, localProps] = createSplitProps()(props, [
-        'dir',
-        'getRootNode',
-        'id',
-        'onLoadingStatusChange',
-    ]);
-    const api = useAvatar(params);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    return (<AvatarProvider value={api}>
-      <ark.div {...mergedProps}/>
-    </AvatarProvider>);
-};
+import { AvatarFallback as Fallback } from './avatar-fallback';
+import { AvatarImage as Image } from './avatar-image';
+import { AvatarRoot as Root } from './avatar-root';
+export { Fallback, Image, Root };

package/source/avatar/index.js

@@ -1,10 +1,6 @@
-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, {
-    Root: AvatarRoot,
-    Fallback: AvatarFallback,
-    Image: AvatarImage,
-});
-export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
+import { AvatarRoot } from './avatar-root';
+export * as Avatar from './avatar';
+export { AvatarFallback, AvatarImage, AvatarRoot, useAvatarContext };

package/source/carousel/carousel-root.jsx

@@ -0,0 +1,27 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { CarouselProvider } from './carousel-context';
+import { useCarousel } from './use-carousel';
+export const CarouselRoot = (props) => {
+    const [useCarouselProps, localProps] = createSplitProps()(props, [
+        'align',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'index',
+        'loop',
+        'onIndexChange',
+        'orientation',
+        'slidesPerView',
+        'spacing',
+    ]);
+    const api = useCarousel(useCarouselProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<CarouselProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </CarouselProvider>);
+};

package/source/carousel/carousel.jsx

@@ -1,27 +1,10 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { runIfFn } from '../run-if-fn';
-import { CarouselProvider } from './carousel-context';
-import { useCarousel } from './use-carousel';
-export const Carousel = (props) => {
-    const [useCarouselProps, localProps] = createSplitProps()(props, [
-        'align',
-        'dir',
-        'getRootNode',
-        'id',
-        'ids',
-        'index',
-        'loop',
-        'onIndexChange',
-        'orientation',
-        'slidesPerView',
-        'spacing',
-    ]);
-    const api = useCarousel(useCarouselProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<CarouselProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
-    </CarouselProvider>);
-};
+import { CarouselControl as Control } from './carousel-control';
+import { CarouselIndicator as Indicator } from './carousel-indicator';
+import { CarouselIndicatorGroup as IndicatorGroup } from './carousel-indicator-group';
+import { CarouselItem as Item } from './carousel-item';
+import { CarouselItemGroup as ItemGroup } from './carousel-item-group';
+import { CarouselNextTrigger as NextTrigger } from './carousel-next-trigger';
+import { CarouselPrevTrigger as PrevTrigger } from './carousel-prev-trigger';
+import { CarouselRoot as Root } from './carousel-root';
+import { CarouselViewport as Viewport } from './carousel-viewport';
+export { Control, Indicator, IndicatorGroup, Item, ItemGroup, NextTrigger, PrevTrigger, Root, Viewport, };

package/source/carousel/index.js

@@ -1,22 +1,12 @@
-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, {
-    Root: CarouselRoot,
-    Control: CarouselControl,
-    Indicator: CarouselIndicator,
-    IndicatorGroup: CarouselIndicatorGroup,
-    NextTrigger: CarouselNextTrigger,
-    PrevTrigger: CarouselPrevTrigger,
-    Item: CarouselItem,
-    ItemGroup: CarouselItemGroup,
-    Viewport: CarouselViewport,
-});
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };
+export * as Carousel from './carousel';
+export { CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, useCarouselContext, };

package/source/checkbox/checkbox-root.jsx

@@ -0,0 +1,28 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { CheckboxProvider } from './checkbox-context';
+import { useCheckbox } from './use-checkbox';
+export const CheckboxRoot = (props) => {
+    const [useCheckboxProps, labelprops] = createSplitProps()(props, [
+        'checked',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'invalid',
+        'name',
+        'onCheckedChange',
+        'required',
+        'value',
+    ]);
+    const api = useCheckbox(useCheckboxProps);
+    const mergedProps = mergeProps(() => api().rootProps, labelprops);
+    const getChildren = () => runIfFn(props.children, api);
+    return (<CheckboxProvider value={api}>
+      <ark.label {...mergedProps}>{getChildren()}</ark.label>
+    </CheckboxProvider>);
+};

package/source/checkbox/checkbox.jsx

@@ -1,28 +1,5 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { runIfFn } from '../run-if-fn';
-import { CheckboxProvider } from './checkbox-context';
-import { useCheckbox } from './use-checkbox';
-export const Checkbox = (props) => {
-    const [useCheckboxProps, labelprops] = createSplitProps()(props, [
-        'checked',
-        'dir',
-        'disabled',
-        'form',
-        'getRootNode',
-        'id',
-        'ids',
-        'invalid',
-        'name',
-        'onCheckedChange',
-        'required',
-        'value',
-    ]);
-    const api = useCheckbox(useCheckboxProps);
-    const mergedProps = mergeProps(() => api().rootProps, labelprops);
-    const getChildren = () => runIfFn(props.children, api);
-    return (<CheckboxProvider value={api}>
-      <ark.label {...mergedProps}>{getChildren()}</ark.label>
-    </CheckboxProvider>);
-};
+import { CheckboxControl as Control } from './checkbox-control';
+import { CheckboxIndicator as Indicator } from './checkbox-indicator';
+import { CheckboxLabel as Label } from './checkbox-label';
+import { CheckboxRoot as Root } from './checkbox-root';
+export { Control, Indicator, Label, Root };

package/source/checkbox/index.js

@@ -1,12 +1,7 @@
-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, {
-    Root: CheckboxRoot,
-    Control: CheckboxControl,
-    Label: CheckboxLabel,
-    Indicator: CheckboxIndicator,
-});
-export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
+import { CheckboxRoot } from './checkbox-root';
+export * as Checkbox from './checkbox';
+export { CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, useCheckboxContext };

package/source/color-picker/color-picker-root.jsx

@@ -0,0 +1,43 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+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 ColorPickerRoot = (props) => {
+    const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+    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(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<ColorPickerProvider value={api}>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
+      <input {...api().hiddenInputProps}/>
+    </ColorPickerProvider>);
+};

package/source/color-picker/color-picker.jsx

@@ -1,43 +1,24 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-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) => {
-    const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-    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(mergeProps(presenceProps, () => ({ present: api().isOpen })));
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<ColorPickerProvider value={api}>
-      <PresenceProvider value={apiPresence}>
-        <ark.div {...mergedProps}>{getChildren()}</ark.div>
-      </PresenceProvider>
-      <input {...api().hiddenInputProps}/>
-    </ColorPickerProvider>);
-};
+import { ColorPickerArea as Area } from './color-picker-area';
+import { ColorPickerAreaBackground as AreaBackground } from './color-picker-area-background';
+import { ColorPickerAreaThumb as AreaThumb } from './color-picker-area-thumb';
+import { ColorPickerChannelInput as ChannelInput } from './color-picker-channel-input';
+import { ColorPickerChannelSlider as ChannelSlider } from './color-picker-channel-slider';
+import { ColorPickerChannelSliderThumb as ChannelSliderThumb } from './color-picker-channel-slider-thumb';
+import { ColorPickerChannelSliderTrack as ChannelSliderTrack } from './color-picker-channel-slider-track';
+import { ColorPickerContent as Content } from './color-picker-content';
+import { ColorPickerControl as Control } from './color-picker-control';
+import { ColorPickerEyeDropperTrigger as EyeDropperTrigger } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect as FormatSelect } from './color-picker-format-select';
+import { ColorPickerFormatTrigger as FormatTrigger } from './color-picker-format-trigger';
+import { ColorPickerLabel as Label } from './color-picker-label';
+import { ColorPickerPositioner as Positioner } from './color-picker-positioner';
+import { ColorPickerRoot as Root } from './color-picker-root';
+import { ColorPickerSwatch as Swatch } from './color-picker-swatch';
+import { ColorPickerSwatchGroup as SwatchGroup } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator as SwatchIndicator } from './color-picker-swatch-indicator';
+import { ColorPickerSwatchTrigger as SwatchTrigger } from './color-picker-swatch-trigger';
+import { ColorPickerTransparencyGrid as TransparencyGrid } from './color-picker-transparency-grid';
+import { ColorPickerTrigger as Trigger } from './color-picker-trigger';
+import { ColorPickerValueText as ValueText } from './color-picker-value-text';
+import { ColorPickerView as View } from './color-picker-view';
+export { Area, AreaBackground, AreaThumb, ChannelInput, ChannelSlider, ChannelSliderThumb, ChannelSliderTrack, Content, Control, EyeDropperTrigger, FormatSelect, FormatTrigger, Label, Positioner, Root, Swatch, SwatchGroup, SwatchIndicator, SwatchTrigger, TransparencyGrid, Trigger, ValueText, View, };

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,29 +24,5 @@ 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, {
-    Root: ColorPickerRoot,
-    Area: ColorPickerArea,
-    AreaBackground: ColorPickerAreaBackground,
-    AreaThumb: ColorPickerAreaThumb,
-    ChannelInput: ColorPickerChannelInput,
-    ChannelSlider: ColorPickerChannelSlider,
-    ChannelSliderThumb: ColorPickerChannelSliderThumb,
-    ChannelSliderTrack: ColorPickerChannelSliderTrack,
-    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,
-    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 * as ColorPicker from './color-picker';
+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, };