@ark-ui/solid 0.9.0 → 0.10.0

package/carousel/index.cjs

@@ -14,9 +14,18 @@ const carouselSlideGroup = require('./carousel-slide-group.cjs');
 const carouselViewport = require('./carousel-viewport.cjs');
 const carousel_anatomy = require('./carousel.anatomy.cjs');
 
+const Carousel = Object.assign(carousel.Carousel, {
+  Root: carousel.Carousel,
+  Control: carouselControl.CarouselControl,
+  Indicator: carouselIndicator.CarouselIndicator,
+  IndicatorGroup: carouselIndicatorGroup.CarouselIndicatorGroup,
+  NextSlideTrigger: carouselNextSlideTrigger.CarouselNextSlideTrigger,
+  PrevSlideTrigger: carouselPrevSlideTrigger.CarouselPrevSlideTrigger,
+  Slide: carouselSlide.CarouselSlide,
+  SlideGroup: carouselSlideGroup.CarouselSlideGroup,
+  Viewport: carouselViewport.CarouselViewport
+});
 
-
-exports.Carousel = carousel.Carousel;
 exports.useCarouselContext = carouselContext.useCarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselIndicator = carouselIndicator.CarouselIndicator;
@@ -27,3 +36,4 @@ exports.CarouselSlide = carouselSlide.CarouselSlide;
 exports.CarouselSlideGroup = carouselSlideGroup.CarouselSlideGroup;
 exports.CarouselViewport = carouselViewport.CarouselViewport;
 exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
+exports.Carousel = Carousel;

package/carousel/index.d.ts

@@ -1,11 +1,25 @@
-export { Carousel, type CarouselProps } from './carousel';
-export { useCarouselContext } from './carousel-context';
-export { CarouselControl, type CarouselControlProps } from './carousel-control';
-export { CarouselIndicator, type CarouselIndicatorProps } from './carousel-indicator';
-export { CarouselIndicatorGroup, type CarouselIndicatorGroupProps, } from './carousel-indicator-group';
-export { CarouselNextSlideTrigger, type CarouselNextSlideTriggerProps, } from './carousel-next-slide-trigger';
-export { CarouselPrevSlideTrigger, type CarouselPrevSlideTriggerProps, } from './carousel-prev-slide-trigger';
-export { CarouselSlide, type CarouselSlideProps } from './carousel-slide';
-export { CarouselSlideGroup, type CarouselSlideGroupProps } from './carousel-slide-group';
-export { CarouselViewport, type CarouselViewportProps } from './carousel-viewport';
-export { carouselAnatomy } from './carousel.anatomy';
+import { JSX } from 'solid-js';
+import { type CarouselProps } from './carousel';
+import { useCarouselContext } from './carousel-context';
+import { CarouselControl, type CarouselControlProps } from './carousel-control';
+import { CarouselIndicator, type CarouselIndicatorProps } from './carousel-indicator';
+import { CarouselIndicatorGroup, type CarouselIndicatorGroupProps } from './carousel-indicator-group';
+import { CarouselNextSlideTrigger, type CarouselNextSlideTriggerProps } from './carousel-next-slide-trigger';
+import { CarouselPrevSlideTrigger, type CarouselPrevSlideTriggerProps } from './carousel-prev-slide-trigger';
+import { CarouselSlide, type CarouselSlideProps } from './carousel-slide';
+import { CarouselSlideGroup, type CarouselSlideGroupProps } from './carousel-slide-group';
+import { CarouselViewport, type CarouselViewportProps } from './carousel-viewport';
+import { carouselAnatomy } from './carousel.anatomy';
+declare const Carousel: ((props: CarouselProps) => JSX.Element) & {
+    Root: (props: CarouselProps) => JSX.Element;
+    Control: (props: CarouselControlProps) => JSX.Element;
+    Indicator: (props: CarouselIndicatorProps) => JSX.Element;
+    IndicatorGroup: (props: CarouselIndicatorGroupProps) => JSX.Element;
+    NextSlideTrigger: (props: CarouselNextSlideTriggerProps) => JSX.Element;
+    PrevSlideTrigger: (props: CarouselPrevSlideTriggerProps) => JSX.Element;
+    Slide: (props: CarouselSlideProps) => JSX.Element;
+    SlideGroup: (props: CarouselSlideGroupProps) => JSX.Element;
+    Viewport: (props: CarouselViewportProps) => JSX.Element;
+};
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselNextSlideTrigger, CarouselPrevSlideTrigger, CarouselSlide, CarouselSlideGroup, CarouselViewport, carouselAnatomy, useCarouselContext, };
+export type { CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselNextSlideTriggerProps, CarouselPrevSlideTriggerProps, CarouselProps, CarouselSlideGroupProps, CarouselSlideProps, CarouselViewportProps, };

package/carousel/index.mjs

@@ -1,11 +1,25 @@
-export { Carousel } from './carousel.mjs';
+import { Carousel as Carousel$1 } from './carousel.mjs';
 export { useCarouselContext } from './carousel-context.mjs';
-export { CarouselControl } from './carousel-control.mjs';
-export { CarouselIndicator } from './carousel-indicator.mjs';
-export { CarouselIndicatorGroup } from './carousel-indicator-group.mjs';
-export { CarouselNextSlideTrigger } from './carousel-next-slide-trigger.mjs';
-export { CarouselPrevSlideTrigger } from './carousel-prev-slide-trigger.mjs';
-export { CarouselSlide } from './carousel-slide.mjs';
-export { CarouselSlideGroup } from './carousel-slide-group.mjs';
-export { CarouselViewport } from './carousel-viewport.mjs';
+import { CarouselControl } from './carousel-control.mjs';
+import { CarouselIndicator } from './carousel-indicator.mjs';
+import { CarouselIndicatorGroup } from './carousel-indicator-group.mjs';
+import { CarouselNextSlideTrigger } from './carousel-next-slide-trigger.mjs';
+import { CarouselPrevSlideTrigger } from './carousel-prev-slide-trigger.mjs';
+import { CarouselSlide } from './carousel-slide.mjs';
+import { CarouselSlideGroup } from './carousel-slide-group.mjs';
+import { CarouselViewport } from './carousel-viewport.mjs';
 export { carouselAnatomy } from './carousel.anatomy.mjs';
+
+const Carousel = Object.assign(Carousel$1, {
+  Root: Carousel$1,
+  Control: CarouselControl,
+  Indicator: CarouselIndicator,
+  IndicatorGroup: CarouselIndicatorGroup,
+  NextSlideTrigger: CarouselNextSlideTrigger,
+  PrevSlideTrigger: CarouselPrevSlideTrigger,
+  Slide: CarouselSlide,
+  SlideGroup: CarouselSlideGroup,
+  Viewport: CarouselViewport
+});
+
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselNextSlideTrigger, CarouselPrevSlideTrigger, CarouselSlide, CarouselSlideGroup, CarouselViewport };

package/carousel/use-carousel.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const carousel = require('@zag-js/carousel');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/carousel/use-carousel.d.ts

@@ -1,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } from 'solid-js';
 import * as carousel from '@zag-js/carousel';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseCarouselProps = Optional<carousel.Context, 'id'>;
-export declare const useCarousel: (props: UseCarouselProps) => Accessor<carousel.PublicApi<PropTypes>>;
-export type UseCarouselReturn = ReturnType<typeof useCarousel>;
+export type UseCarouselReturn = Accessor<carousel.Api<PropTypes>>;
+export declare const useCarousel: (props: UseCarouselProps) => UseCarouselReturn;

package/carousel/use-carousel.mjs

@@ -1,6 +1,7 @@
 import * as carousel from '@zag-js/carousel';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useCarousel = (props) => {

package/checkbox/checkbox-context.d.ts

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/checkbox';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseCheckboxReturn } from './use-checkbox';
 export type CheckboxContext = UseCheckboxReturn;
-export declare const CheckboxProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useCheckboxContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const CheckboxProvider: ContextProviderComponent<UseCheckboxReturn>, useCheckboxContext: () => UseCheckboxReturn;

package/checkbox/checkbox-control.cjs

@@ -7,10 +7,15 @@ const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const CheckboxControl = props => {
   const checkbox = checkboxContext.useCheckboxContext();
   const controlProps = solid.mergeProps(() => checkbox().controlProps, props);
-  return web.createComponent(factory.ark.div, controlProps);
+  return [web.createComponent(factory.ark.div, controlProps), (() => {
+    const _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(() => checkbox().hiddenInputProps), false, false);
+    return _el$;
+  })()];
 };
 
 exports.CheckboxControl = CheckboxControl;

package/checkbox/checkbox-control.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type CheckboxControlProps = HTMLArkProps<'div'>;
 export declare const CheckboxControl: (props: CheckboxControlProps) => JSX.Element;

package/checkbox/checkbox-control.mjs

@@ -1,12 +1,17 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const CheckboxControl = props => {
   const checkbox = useCheckboxContext();
   const controlProps = mergeProps(() => checkbox().controlProps, props);
-  return createComponent(ark.div, controlProps);
+  return [createComponent(ark.div, controlProps), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => checkbox().hiddenInputProps), false, false);
+    return _el$;
+  })()];
 };
 
 export { CheckboxControl };

package/checkbox/checkbox-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type CheckboxLabelProps = HTMLArkProps<'span'>;
 export declare const CheckboxLabel: (props: CheckboxLabelProps) => JSX.Element;

package/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Indeterminate: () => JSX.Element;
+export declare const RenderProp: () => JSX.Element;

package/checkbox/index.cjs

@@ -2,21 +2,23 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const checkbox = require('./checkbox.cjs');
+const checkbox$1 = require('./checkbox.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
-const checkboxInput = require('./checkbox-input.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
-const checkbox$1 = require('@zag-js/checkbox');
-
+const checkbox = require('@zag-js/checkbox');
 
+const Checkbox = Object.assign(checkbox$1.Checkbox, {
+  Root: checkbox$1.Checkbox,
+  Control: checkboxControl.CheckboxControl,
+  Label: checkboxLabel.CheckboxLabel
+});
 
-exports.Checkbox = checkbox.Checkbox;
 exports.useCheckboxContext = checkboxContext.useCheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
-exports.CheckboxInput = checkboxInput.CheckboxInput;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
 Object.defineProperty(exports, 'checkboxAnatomy', {
-	enumerable: true,
-	get: () => checkbox$1.anatomy
+  enumerable: true,
+  get: () => checkbox.anatomy
 });
+exports.Checkbox = Checkbox;

package/checkbox/index.d.ts

@@ -1,7 +1,14 @@
-export type { CheckedState } from '@zag-js/checkbox';
-export { Checkbox, type CheckboxProps } from './checkbox';
-export { useCheckboxContext } from './checkbox-context';
-export { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
-export { CheckboxInput, type CheckboxInputProps } from './checkbox-input';
-export { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
-export { checkboxAnatomy } from './checkbox.anatomy';
+import { JSX } from 'solid-js';
+import type { CheckedState } from '@zag-js/checkbox';
+import { type CheckboxProps } from './checkbox';
+import { useCheckboxContext } from './checkbox-context';
+import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
+import { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
+import { checkboxAnatomy } from './checkbox.anatomy';
+declare const Checkbox: ((props: CheckboxProps) => JSX.Element) & {
+    Root: (props: CheckboxProps) => JSX.Element;
+    Control: (props: CheckboxControlProps) => JSX.Element;
+    Label: (props: CheckboxLabelProps) => JSX.Element;
+};
+export { Checkbox, CheckboxControl, CheckboxLabel, checkboxAnatomy, useCheckboxContext };
+export type { CheckboxControlProps, CheckboxLabelProps, CheckboxProps, CheckedState };

package/checkbox/index.mjs

@@ -1,6 +1,13 @@
-export { Checkbox } from './checkbox.mjs';
+import { Checkbox as Checkbox$1 } from './checkbox.mjs';
 export { useCheckboxContext } from './checkbox-context.mjs';
-export { CheckboxControl } from './checkbox-control.mjs';
-export { CheckboxInput } from './checkbox-input.mjs';
-export { CheckboxLabel } from './checkbox-label.mjs';
+import { CheckboxControl } from './checkbox-control.mjs';
+import { CheckboxLabel } from './checkbox-label.mjs';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
+
+const Checkbox = Object.assign(Checkbox$1, {
+  Root: Checkbox$1,
+  Control: CheckboxControl,
+  Label: CheckboxLabel
+});
+
+export { Checkbox, CheckboxControl, CheckboxLabel };

package/checkbox/use-checkbox.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkbox = require('@zag-js/checkbox');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/checkbox/use-checkbox.d.ts

@@ -1,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } from 'solid-js';
 import * as checkbox from '@zag-js/checkbox';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseCheckboxProps = Optional<checkbox.Context, 'id'>;
-export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
-export declare const useCheckbox: (props: UseCheckboxProps) => Accessor<checkbox.PublicApi<PropTypes>>;
+export type UseCheckboxReturn = Accessor<checkbox.Api<PropTypes>>;
+export declare const useCheckbox: (props: UseCheckboxProps) => UseCheckboxReturn;

package/checkbox/use-checkbox.mjs

@@ -1,6 +1,7 @@
 import * as checkbox from '@zag-js/checkbox';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useCheckbox = (props) => {

package/clone-element.d.ts

@@ -0,0 +1,2 @@
+import { ResolvedChildren, type JSX } from 'solid-js';
+export declare const cloneElement: (child: JSX.Element, spreadProps: () => Record<string, unknown>) => ResolvedChildren;

package/color-picker/color-picker-area-context.d.ts

@@ -1,3 +1,3 @@
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import type { ColorAreaProps } from '@zag-js/color-picker';
 export declare const ColorPickerAreaProvider: ContextProviderComponent<ColorAreaProps>, useColorPickerAreaContext: () => ColorAreaProps;

package/color-picker/color-picker-area-gradient.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerAreaGradientProps = HTMLArkProps<'div'>;
 export declare const ColorPickerAreaGradient: (props: ColorPickerAreaGradientProps) => JSX.Element;

package/color-picker/color-picker-area-thumb.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerAreaThumbProps = HTMLArkProps<'div'>;
 export declare const ColorPickerAreaThumb: (props: ColorPickerAreaThumbProps) => JSX.Element;

package/color-picker/color-picker-area.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import type { ColorAreaProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerAreaProps = HTMLArkProps<'div'> & ColorAreaProps;

package/color-picker/color-picker-channel-input.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import type { ColorChannelProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

package/color-picker/color-picker-channel-slider-background.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerChannelSliderBackgroundProps = HTMLArkProps<'div'>;
 export declare const ColorPickerChannelSliderBackground: (props: ColorPickerChannelSliderBackgroundProps) => JSX.Element;

package/color-picker/color-picker-channel-slider-context.d.ts

@@ -1,3 +1,3 @@
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import type { ColorChannelProps } from '@zag-js/color-picker';
 export declare const ColorPickerChannelSliderProvider: ContextProviderComponent<ColorChannelProps>, useColorPickerChannelSliderContext: () => ColorChannelProps;

package/color-picker/color-picker-channel-slider-thumb.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerChannelSliderThumbProps = HTMLArkProps<'div'>;
 export declare const ColorPickerChannelSliderThumb: (props: ColorPickerChannelSliderThumbProps) => JSX.Element;

package/color-picker/color-picker-channel-slider-track.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import type { ColorChannelProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

package/color-picker/color-picker-content.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerContentProps = HTMLArkProps<'div'>;
 export declare const ColorPickerContent: (props: ColorPickerContentProps) => JSX.Element;

package/color-picker/color-picker-context.d.ts

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/color-picker';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseColorPickerReturn } from './use-color-picker';
 export type ColorPickerContext = UseColorPickerReturn;
-export declare const ColorPickerProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useColorPickerContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const ColorPickerProvider: ContextProviderComponent<UseColorPickerReturn>, useColorPickerContext: () => UseColorPickerReturn;

package/color-picker/color-picker-eye-dropper-trigger.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerEyeDropperTriggerProps = HTMLArkProps<'button'>;
 export declare const ColorPickerEyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => JSX.Element;

package/color-picker/color-picker-swatch-background.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerSwatchBackgroundProps = HTMLArkProps<'div'>;
 export declare const ColorPickerSwatchBackground: (props: ColorPickerSwatchBackgroundProps) => JSX.Element;

package/color-picker/color-picker-swatch-context.d.ts

@@ -1,3 +1,3 @@
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import type { ColorSwatchProps } from '@zag-js/color-picker';
 export declare const ColorPickerSwatchProvider: ContextProviderComponent<ColorSwatchProps>, useColorPickerSwatchContext: () => ColorSwatchProps;

package/color-picker/color-picker-swatch-group.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerSwatchGroupProps = HTMLArkProps<'div'>;
 export declare const ColorPickerSwatchGroup: (props: ColorPickerSwatchGroupProps) => JSX.Element;

package/color-picker/color-picker-swatch.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import type { ColorSwatchProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

package/color-picker/color-picker.anatomy.d.ts

@@ -1,3 +1,3 @@
-import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup">;
-export declare const parts: Record<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup", AnatomyPart>;
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const colorPickerAnatomy: AnatomyInstance<"label" | "area" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup">;
+export declare const parts: Record<"label" | "area" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup", AnatomyPart>;

package/color-picker/color-picker.cjs

@@ -9,7 +9,7 @@ const colorPickerContext = require('./color-picker-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
 
 const ColorPicker = props => {
-  const [useColorPickerProps, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
+  const [useColorPickerProps, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
   const api = useColorPicker.useColorPicker(useColorPickerProps);
   const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(colorPickerContext.ColorPickerProvider, {

package/color-picker/color-picker.mjs

@@ -5,7 +5,7 @@ import { ColorPickerProvider } from './color-picker-context.mjs';
 import { useColorPicker } from './use-color-picker.mjs';
 
 const ColorPicker = props => {
-  const [useColorPickerProps, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
+  const [useColorPickerProps, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(ColorPickerProvider, {

package/color-picker/color-picker.stories.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/color-picker/index.cjs

@@ -20,9 +20,22 @@ const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 
+const ColorPicker = Object.assign(colorPicker.ColorPicker, {
+  Root: colorPicker.ColorPicker,
+  Area: colorPickerArea.ColorPickerArea,
+  AreaGradient: colorPickerAreaGradient.ColorPickerAreaGradient,
+  AreaThumb: colorPickerAreaThumb.ColorPickerAreaThumb,
+  ChannelInput: colorPickerChannelInput.ColorPickerChannelInput,
+  ChannelSliderBackground: colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground,
+  ChannelSliderThumb: colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb,
+  ChannelSliderTrack: colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack,
+  Content: colorPickerContent.ColorPickerContent,
+  EyeDropperTrigger: colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger,
+  Swatch: colorPickerSwatch.ColorPickerSwatch,
+  SwatchBackground: colorPickerSwatchBackground.ColorPickerSwatchBackground,
+  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup
+});
 
-
-exports.ColorPicker = colorPicker.ColorPicker;
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
 exports.ColorPickerAreaGradient = colorPickerAreaGradient.ColorPickerAreaGradient;
@@ -39,3 +52,4 @@ exports.ColorPickerSwatchBackground = colorPickerSwatchBackground.ColorPickerSwa
 exports.useColorPickerSwatchContext = colorPickerSwatchContext.useColorPickerSwatchContext;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
+exports.ColorPicker = ColorPicker;

package/color-picker/index.d.ts

@@ -1,17 +1,35 @@
-export { ColorPicker, type ColorPickerProps } from './color-picker';
-export { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
-export { useColorPickerAreaContext } from './color-picker-area-context';
-export { ColorPickerAreaGradient, type ColorPickerAreaGradientProps, } from './color-picker-area-gradient';
-export { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
-export { ColorPickerChannelInput, type ColorPickerChannelInputProps, } from './color-picker-channel-input';
-export { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps, } from './color-picker-channel-slider-background';
-export { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps, } from './color-picker-channel-slider-thumb';
-export { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps, } from './color-picker-channel-slider-track';
-export { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
-export { useColorPickerContext } from './color-picker-context';
-export { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger';
-export { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
-export { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps, } from './color-picker-swatch-background';
-export { useColorPickerSwatchContext } from './color-picker-swatch-context';
-export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
-export { colorPickerAnatomy } from './color-picker.anatomy';
+import { JSX } from 'solid-js';
+import { type ColorPickerProps } from './color-picker';
+import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
+import { useColorPickerAreaContext } from './color-picker-area-context';
+import { ColorPickerAreaGradient, type ColorPickerAreaGradientProps } from './color-picker-area-gradient';
+import { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
+import { ColorPickerChannelInput, type ColorPickerChannelInputProps } from './color-picker-channel-input';
+import { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps } from './color-picker-channel-slider-background';
+import { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps } from './color-picker-channel-slider-thumb';
+import { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps } from './color-picker-channel-slider-track';
+import { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
+import { useColorPickerContext } from './color-picker-context';
+import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
+import { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps } from './color-picker-swatch-background';
+import { useColorPickerSwatchContext } from './color-picker-swatch-context';
+import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
+import { colorPickerAnatomy } from './color-picker.anatomy';
+declare const ColorPicker: ((props: ColorPickerProps) => JSX.Element) & {
+    Root: (props: ColorPickerProps) => JSX.Element;
+    Area: (props: ColorPickerAreaProps) => JSX.Element;
+    AreaGradient: (props: ColorPickerAreaGradientProps) => JSX.Element;
+    AreaThumb: (props: ColorPickerAreaThumbProps) => JSX.Element;
+    ChannelInput: (props: ColorPickerChannelInputProps) => JSX.Element;
+    ChannelSliderBackground: (props: ColorPickerChannelSliderBackgroundProps) => JSX.Element;
+    ChannelSliderThumb: (props: ColorPickerChannelSliderThumbProps) => JSX.Element;
+    ChannelSliderTrack: (props: ColorPickerChannelSliderTrackProps) => JSX.Element;
+    Content: (props: ColorPickerContentProps) => JSX.Element;
+    EyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => JSX.Element;
+    Swatch: (props: ColorPickerSwatchProps) => JSX.Element;
+    SwatchBackground: (props: ColorPickerSwatchBackgroundProps) => JSX.Element;
+    SwatchGroup: (props: ColorPickerSwatchGroupProps) => JSX.Element;
+};
+export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup, colorPickerAnatomy, useColorPickerAreaContext, useColorPickerContext, useColorPickerSwatchContext, };
+export type { ColorPickerAreaGradientProps, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderBackgroundProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerEyeDropperTriggerProps, ColorPickerProps, ColorPickerSwatchBackgroundProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, };