@ark-ui/solid 0.8.1 → 0.10.0

package/carousel/carousel-indicator.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const carouselContext = require('./carousel-context.cjs');
+
+const CarouselIndicator = props => {
+  const [indicatorProps, localProps] = createSplitProps.createSplitProps()(props, ['index', 'readOnly']);
+  const carousel = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => carousel().getIndicatorProps(indicatorProps), localProps);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.CarouselIndicator = CarouselIndicator;

package/carousel/carousel-indicator.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { SlideIndicatorProps } from '@zag-js/carousel';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type CarouselIndicatorProps = Assign<HTMLArkProps<'button'>, SlideIndicatorProps>;
+export declare const CarouselIndicator: (props: CarouselIndicatorProps) => JSX.Element;

package/carousel/carousel-indicator.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useCarouselContext } from './carousel-context.mjs';
+
+const CarouselIndicator = props => {
+  const [indicatorProps, localProps] = createSplitProps()(props, ['index', 'readOnly']);
+  const carousel = useCarouselContext();
+  const mergedProps = mergeProps(() => carousel().getIndicatorProps(indicatorProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { CarouselIndicator };

package/carousel/carousel-next-slide-trigger.cjs

@@ -9,8 +9,8 @@ const carouselContext = require('./carousel-context.cjs');
 
 const CarouselNextSlideTrigger = props => {
   const carousel = carouselContext.useCarouselContext();
-  const nextTriggerProps = solid.mergeProps(() => carousel().nextTriggerProps, props);
-  return web.createComponent(factory.ark.button, nextTriggerProps);
+  const mergedProps = solid.mergeProps(() => carousel().nextSlideTriggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.CarouselNextSlideTrigger = CarouselNextSlideTrigger;

package/carousel/carousel-next-slide-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 CarouselNextSlideTriggerProps = HTMLArkProps<'button'>;
 export declare const CarouselNextSlideTrigger: (props: CarouselNextSlideTriggerProps) => JSX.Element;

package/carousel/carousel-next-slide-trigger.mjs

@@ -5,8 +5,8 @@ import { useCarouselContext } from './carousel-context.mjs';
 
 const CarouselNextSlideTrigger = props => {
   const carousel = useCarouselContext();
-  const nextTriggerProps = mergeProps(() => carousel().nextTriggerProps, props);
-  return createComponent(ark.button, nextTriggerProps);
+  const mergedProps = mergeProps(() => carousel().nextSlideTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 export { CarouselNextSlideTrigger };

package/carousel/carousel-prev-slide-trigger.cjs

@@ -9,8 +9,8 @@ const carouselContext = require('./carousel-context.cjs');
 
 const CarouselPrevSlideTrigger = props => {
   const carousel = carouselContext.useCarouselContext();
-  const prevTriggerProps = solid.mergeProps(() => carousel().prevTriggerProps, props);
-  return web.createComponent(factory.ark.button, prevTriggerProps);
+  const mergedProps = solid.mergeProps(() => carousel().prevSlideTriggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.CarouselPrevSlideTrigger = CarouselPrevSlideTrigger;

package/carousel/carousel-prev-slide-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 CarouselPrevSlideTriggerProps = HTMLArkProps<'button'>;
 export declare const CarouselPrevSlideTrigger: (props: CarouselPrevSlideTriggerProps) => JSX.Element;

package/carousel/carousel-prev-slide-trigger.mjs

@@ -5,8 +5,8 @@ import { useCarouselContext } from './carousel-context.mjs';
 
 const CarouselPrevSlideTrigger = props => {
   const carousel = useCarouselContext();
-  const prevTriggerProps = mergeProps(() => carousel().prevTriggerProps, props);
-  return createComponent(ark.button, prevTriggerProps);
+  const mergedProps = mergeProps(() => carousel().prevSlideTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 export { CarouselPrevSlideTrigger };

package/carousel/carousel-slide-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 CarouselSlideGroupProps = HTMLArkProps<'div'>;
 export declare const CarouselSlideGroup: (props: CarouselSlideGroupProps) => JSX.Element;

package/carousel/carousel-slide.d.ts

@@ -1,5 +1,5 @@
-import type { JSX } from 'solid-js';
-import type { SlideProps } from '@zag-js/carousel/dist/carousel.types';
+import { JSX } from 'solid-js';
+import type { SlideProps } from '@zag-js/carousel';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export type CarouselSlideProps = Assign<HTMLArkProps<'div'>, SlideProps>;

package/carousel/carousel-viewport.d.ts

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

package/carousel/carousel.anatomy.d.ts

@@ -1,3 +1,3 @@
-import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const carouselAnatomy: AnatomyInstance<"root" | "viewport" | "slideGroup" | "slide" | "previousTrigger" | "nextTrigger" | "indicatorGroup" | "indicator" | "control">;
-export declare const parts: Record<"root" | "viewport" | "slideGroup" | "slide" | "previousTrigger" | "nextTrigger" | "indicatorGroup" | "indicator" | "control", AnatomyPart>;
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const carouselAnatomy: AnatomyInstance<"root" | "viewport" | "slideGroup" | "slide" | "nextSlideTrigger" | "prevSlideTrigger" | "indicatorGroup" | "indicator" | "control">;
+export declare const parts: Record<"root" | "viewport" | "slideGroup" | "slide" | "nextSlideTrigger" | "prevSlideTrigger" | "indicatorGroup" | "indicator" | "control", AnatomyPart>;

package/carousel/carousel.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseCarouselProps } from './use-carousel';

package/carousel/carousel.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/carousel/index.cjs

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const carousel = require('./carousel.cjs');
+const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
+const carouselIndicator = require('./carousel-indicator.cjs');
+const carouselIndicatorGroup = require('./carousel-indicator-group.cjs');
 const carouselNextSlideTrigger = require('./carousel-next-slide-trigger.cjs');
 const carouselPrevSlideTrigger = require('./carousel-prev-slide-trigger.cjs');
 const carouselSlide = require('./carousel-slide.cjs');
@@ -11,13 +14,26 @@ 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;
+exports.CarouselIndicatorGroup = carouselIndicatorGroup.CarouselIndicatorGroup;
 exports.CarouselNextSlideTrigger = carouselNextSlideTrigger.CarouselNextSlideTrigger;
 exports.CarouselPrevSlideTrigger = carouselPrevSlideTrigger.CarouselPrevSlideTrigger;
 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,8 +1,25 @@
-export { Carousel, type CarouselProps } from './carousel';
-export { CarouselControl, type CarouselControlProps } from './carousel-control';
-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,8 +1,25 @@
-export { Carousel } from './carousel.mjs';
-export { CarouselControl } from './carousel-control.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 { Carousel as Carousel$1 } from './carousel.mjs';
+export { useCarouselContext } from './carousel-context.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,35 +1,7 @@
-import type { SlideProps } from '@zag-js/carousel/dist/carousel.types';
-import type { Accessor, JSX } 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<{
-    index: number;
-    scrollProgress: number;
-    isAutoplay: boolean;
-    canScrollNext: boolean;
-    canScrollPrev: boolean;
-    scrollTo(index: number, jump?: boolean | undefined): void;
-    scrollToNext(): void;
-    scrollToPrevious(): void;
-    getSlideState: (props: SlideProps) => {
-        valueText: string;
-        isCurrent: boolean;
-        isNext: boolean;
-        isPrevious: boolean;
-        isInView: boolean;
-    };
-    play(): void;
-    pause(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    viewportProps: JSX.HTMLAttributes<any>;
-    slideGroupProps: JSX.HTMLAttributes<any>;
-    getSlideProps(props: SlideProps): JSX.HTMLAttributes<any>;
-    prevTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    nextTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    indicatorGroupProps: JSX.HTMLAttributes<any>;
-    getIndicatorProps(props: {
-        index: number;
-    }): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}>;
-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,30 +1,4 @@
-import type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
-import type { Accessor, JSX } 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<{
-    isChecked: boolean;
-    isDisabled: boolean | undefined;
-    isIndeterminate: boolean;
-    isFocused: boolean | undefined;
-    checkedState: CheckedState;
-    setChecked(checked: CheckedState): void;
-    toggleChecked(): void;
-    rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    labelProps: JSX.HTMLAttributes<any>;
-    controlProps: JSX.HTMLAttributes<any>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-}>>, useCheckboxContext: () => Accessor<{
-    isChecked: boolean;
-    isDisabled: boolean | undefined;
-    isIndeterminate: boolean;
-    isFocused: boolean | undefined;
-    checkedState: CheckedState;
-    setChecked(checked: CheckedState): void;
-    toggleChecked(): void;
-    rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    labelProps: JSX.HTMLAttributes<any>;
-    controlProps: JSX.HTMLAttributes<any>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-}>;
+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,19 +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,6 +1,14 @@
-export type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
-export { Checkbox, type CheckboxProps } from './checkbox';
-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,5 +1,13 @@
-export { Checkbox } from './checkbox.mjs';
-export { CheckboxControl } from './checkbox-control.mjs';
-export { CheckboxInput } from './checkbox-input.mjs';
-export { CheckboxLabel } from './checkbox-label.mjs';
+import { Checkbox as Checkbox$1 } from './checkbox.mjs';
+export { useCheckboxContext } from './checkbox-context.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,19 +1,7 @@
-import type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
-import type { Accessor, JSX } 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<{
-    isChecked: boolean;
-    isDisabled: boolean | undefined;
-    isIndeterminate: boolean;
-    isFocused: boolean | undefined;
-    checkedState: CheckedState;
-    setChecked(checked: CheckedState): void;
-    toggleChecked(): void;
-    rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    labelProps: JSX.HTMLAttributes<any>;
-    controlProps: JSX.HTMLAttributes<any>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-}>;
+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;