@ark-ui/solid 0.2.0 → 0.4.0

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

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useCarouselContext } from './carousel-context.mjs';
+
+const CarouselPrevSlideTrigger = props => {
+  const carousel = useCarouselContext();
+  const prevTriggerProps = mergeProps(() => carousel().prevTriggerProps, props);
+  return createComponent(ark.button, prevTriggerProps);
+};
+
+export { CarouselPrevSlideTrigger };

package/dist/carousel/carousel-slide-group.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const carouselContext = require('./carousel-context.cjs');
+
+const CarouselSlideGroup = props => {
+  const carousel = carouselContext.useCarouselContext();
+  const groupProps = solid.mergeProps(() => carousel().slideGroupProps, props);
+  return web.createComponent(factory.ark.div, groupProps);
+};
+
+exports.CarouselSlideGroup = CarouselSlideGroup;

package/dist/carousel/carousel-slide-group.d.ts

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

package/dist/carousel/carousel-slide-group.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useCarouselContext } from './carousel-context.mjs';
+
+const CarouselSlideGroup = props => {
+  const carousel = useCarouselContext();
+  const groupProps = mergeProps(() => carousel().slideGroupProps, props);
+  return createComponent(ark.div, groupProps);
+};
+
+export { CarouselSlideGroup };

package/dist/carousel/carousel-slide.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 CarouselSlide = props => {
+  const [slideParams, localProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const carousel = carouselContext.useCarouselContext();
+  const sliderProps = solid.mergeProps(() => carousel().getSlideProps(slideParams), localProps);
+  return web.createComponent(factory.ark.div, sliderProps);
+};
+
+exports.CarouselSlide = CarouselSlide;

package/dist/carousel/carousel-slide.d.ts

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

package/dist/carousel/carousel-slide.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 CarouselSlide = props => {
+  const [slideParams, localProps] = createSplitProps()(props, ['index']);
+  const carousel = useCarouselContext();
+  const sliderProps = mergeProps(() => carousel().getSlideProps(slideParams), localProps);
+  return createComponent(ark.div, sliderProps);
+};
+
+export { CarouselSlide };

package/dist/carousel/carousel-viewport.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const carouselContext = require('./carousel-context.cjs');
+
+const CarouselViewport = props => {
+  const carousel = carouselContext.useCarouselContext();
+  const viewportProps = solid.mergeProps(() => carousel().viewportProps, props);
+  return web.createComponent(factory.ark.div, viewportProps);
+};
+
+exports.CarouselViewport = CarouselViewport;

package/dist/carousel/carousel-viewport.d.ts

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

package/dist/carousel/carousel-viewport.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useCarouselContext } from './carousel-context.mjs';
+
+const CarouselViewport = props => {
+  const carousel = useCarouselContext();
+  const viewportProps = mergeProps(() => carousel().viewportProps, props);
+  return createComponent(ark.div, viewportProps);
+};
+
+export { CarouselViewport };

package/dist/carousel/carousel.anatomy.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const carousel = require('@zag-js/carousel');
+
+const carouselAnatomy = carousel.anatomy.extendWith("control");
+carouselAnatomy.build();
+
+exports.carouselAnatomy = carouselAnatomy;

package/dist/carousel/carousel.anatomy.d.ts

@@ -0,0 +1,3 @@
+import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy/dist/create-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>;

package/dist/carousel/carousel.anatomy.mjs

@@ -0,0 +1,6 @@
+import { anatomy } from '@zag-js/carousel';
+
+const carouselAnatomy = anatomy.extendWith("control");
+carouselAnatomy.build();
+
+export { carouselAnatomy };

package/dist/carousel/carousel.cjs

@@ -0,0 +1,24 @@
+'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 useCarousel = require('./use-carousel.cjs');
+
+const Carousel = props => {
+  const [useCarouselProps, localProps] = createSplitProps.createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onSlideChange', 'orientation', 'slidesPerView', 'spacing']);
+  const carousel = useCarousel.useCarousel(useCarouselProps);
+  const rootProps = solid.mergeProps(() => carousel().rootProps, localProps);
+  return web.createComponent(carouselContext.CarouselProvider, {
+    value: carousel,
+    get children() {
+      return web.createComponent(factory.ark.div, rootProps);
+    }
+  });
+};
+
+exports.Carousel = Carousel;

package/dist/carousel/carousel.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseCarouselProps } from './use-carousel';
+export type CarouselProps = Assign<HTMLArkProps<'div'>, UseCarouselProps>;
+export declare const Carousel: (props: CarouselProps) => JSX.Element;

package/dist/carousel/carousel.mjs

@@ -0,0 +1,20 @@
+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 { CarouselProvider } from './carousel-context.mjs';
+import { useCarousel } from './use-carousel.mjs';
+
+const Carousel = props => {
+  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onSlideChange', 'orientation', 'slidesPerView', 'spacing']);
+  const carousel = useCarousel(useCarouselProps);
+  const rootProps = mergeProps(() => carousel().rootProps, localProps);
+  return createComponent(CarouselProvider, {
+    value: carousel,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+export { Carousel };

package/dist/carousel/index.d.ts

@@ -0,0 +1,8 @@
+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';

package/dist/carousel/use-carousel.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const carousel = require('@zag-js/carousel');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel);
+
+const useCarousel = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const [state, send] = solid.useMachine(carousel__namespace.machine(context), { context });
+  return solidJs.createMemo(() => carousel__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.useCarousel = useCarousel;

package/dist/carousel/use-carousel.d.ts

@@ -0,0 +1,35 @@
+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 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>;

package/dist/carousel/use-carousel.mjs

@@ -0,0 +1,13 @@
+import * as carousel from '@zag-js/carousel';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useCarousel = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+  const [state, send] = useMachine(carousel.machine(context), { context });
+  return createMemo(() => carousel.connect(state, send, normalizeProps));
+};
+
+export { useCarousel };

package/dist/checkbox/checkbox-context.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const createContext = require('../create-context.cjs');
 
 const [CheckboxProvider, useCheckboxContext] = createContext.createContext({
-  hookName: 'useCheckboxContext',
-  providerName: '<CheckboxProvider />'
+  hookName: "useCheckboxContext",
+  providerName: "<CheckboxProvider />"
 });
 
 exports.CheckboxProvider = CheckboxProvider;

package/dist/checkbox/checkbox-context.d.ts

@@ -1,3 +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 { type UseCheckboxReturn } from './use-checkbox';
@@ -5,12 +6,11 @@ export type CheckboxContext = UseCheckboxReturn;
 export declare const CheckboxProvider: ContextProviderComponent<Accessor<{
     isChecked: boolean;
     isDisabled: boolean | undefined;
-    isIndeterminate: boolean | undefined;
-    isFocused: boolean;
-    isReadOnly: boolean | undefined;
-    view: string;
-    setChecked(checked: boolean): void;
-    setIndeterminate(indeterminate: boolean): void;
+    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>;
@@ -18,12 +18,11 @@ export declare const CheckboxProvider: ContextProviderComponent<Accessor<{
 }>>, useCheckboxContext: () => Accessor<{
     isChecked: boolean;
     isDisabled: boolean | undefined;
-    isIndeterminate: boolean | undefined;
-    isFocused: boolean;
-    isReadOnly: boolean | undefined;
-    view: string;
-    setChecked(checked: boolean): void;
-    setIndeterminate(indeterminate: boolean): void;
+    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>;

package/dist/checkbox/checkbox-context.mjs

@@ -1,8 +1,8 @@
 import { createContext } from '../create-context.mjs';
 
 const [CheckboxProvider, useCheckboxContext] = createContext({
-  hookName: 'useCheckboxContext',
-  providerName: '<CheckboxProvider />'
+  hookName: "useCheckboxContext",
+  providerName: "<CheckboxProvider />"
 });
 
 export { CheckboxProvider, useCheckboxContext };

package/dist/checkbox/checkbox-control.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
 const CheckboxControl = props => {
   const checkbox = checkboxContext.useCheckboxContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => checkbox().controlProps, props));
+  const controlProps = solid.mergeProps(() => checkbox().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.CheckboxControl = CheckboxControl;

package/dist/checkbox/checkbox-control.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
 const CheckboxControl = props => {
   const checkbox = useCheckboxContext();
-  return createComponent(ark.div, mergeProps(() => checkbox().controlProps, props));
+  const controlProps = mergeProps(() => checkbox().controlProps, props);
+  return createComponent(ark.div, controlProps);
 };
 
 export { CheckboxControl };

package/dist/checkbox/checkbox-input.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
 const CheckboxInput = props => {
   const checkbox = checkboxContext.useCheckboxContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => checkbox().inputProps, props));
+  const inputProps = solid.mergeProps(() => checkbox().inputProps, props);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.CheckboxInput = CheckboxInput;

package/dist/checkbox/checkbox-input.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
 const CheckboxInput = props => {
   const checkbox = useCheckboxContext();
-  return createComponent(ark.input, mergeProps(() => checkbox().inputProps, props));
+  const inputProps = mergeProps(() => checkbox().inputProps, props);
+  return createComponent(ark.input, inputProps);
 };
 
 export { CheckboxInput };

package/dist/checkbox/checkbox-label.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
 const CheckboxLabel = props => {
   const checkbox = checkboxContext.useCheckboxContext();
-  return web.createComponent(factory.ark.span, web.mergeProps(() => checkbox().labelProps, props));
+  const labelProps = solid.mergeProps(() => checkbox().labelProps, props);
+  return web.createComponent(factory.ark.span, labelProps);
 };
 
 exports.CheckboxLabel = CheckboxLabel;

package/dist/checkbox/checkbox-label.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
 const CheckboxLabel = props => {
   const checkbox = useCheckboxContext();
-  return createComponent(ark.span, mergeProps(() => checkbox().labelProps, props));
+  const labelProps = mergeProps(() => checkbox().labelProps, props);
+  return createComponent(ark.span, labelProps);
 };
 
 export { CheckboxLabel };

package/dist/checkbox/checkbox.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
@@ -11,23 +11,20 @@ const checkboxContext = require('./checkbox-context.cjs');
 const useCheckbox = require('./use-checkbox.cjs');
 
 const Checkbox = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps.createSplitProps()(props, ['aria-describedby', 'aria-label', 'aria-labelledby', 'checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'indeterminate', 'invalid', 'name', 'onChange', 'readOnly', 'required', 'value']);
-  const checkbox = useCheckbox.useCheckbox(useCheckboxProps);
+  const [useCheckboxProps, labelprops] = createSplitProps.createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onChange', 'required', 'value']);
+  const api = useCheckbox.useCheckbox(useCheckboxProps);
+  const rootProps = solid.mergeProps(() => api().rootProps, labelprops);
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
   return web.createComponent(checkboxContext.CheckboxProvider, {
-    value: checkbox,
+    value: api,
     get children() {
-      return web.createComponent(CheckboxContextWrapper, labelprops);
+      return web.createComponent(factory.ark.label, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
-const CheckboxContextWrapper = props => {
-  const checkbox = checkboxContext.useCheckboxContext();
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, checkbox));
-  return web.createComponent(factory.ark.label, web.mergeProps(() => checkbox().rootProps, props, {
-    get children() {
-      return view();
-    }
-  }));
-};
 
 exports.Checkbox = Checkbox;

package/dist/checkbox/checkbox.d.ts

@@ -1,11 +1,9 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type CheckboxContext } from './checkbox-context';
 import { type UseCheckboxProps } from './use-checkbox';
-export type CheckboxProps = Assign<CheckboxContextWrapperProps, UseCheckboxProps>;
-export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
-type CheckboxContextWrapperProps = Assign<HTMLArkProps<'label'>, {
+export type CheckboxProps = Assign<HTMLArkProps<'label'>, UseCheckboxProps & {
     children?: JSX.Element | ((context: CheckboxContext) => JSX.Element);
 }>;
-export {};
+export declare const Checkbox: (props: CheckboxProps) => JSX.Element;

package/dist/checkbox/checkbox.mjs

@@ -1,29 +1,26 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
-import { CheckboxProvider, useCheckboxContext } from './checkbox-context.mjs';
+import { CheckboxProvider } from './checkbox-context.mjs';
 import { useCheckbox } from './use-checkbox.mjs';
 
 const Checkbox = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['aria-describedby', 'aria-label', 'aria-labelledby', 'checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'indeterminate', 'invalid', 'name', 'onChange', 'readOnly', 'required', 'value']);
-  const checkbox = useCheckbox(useCheckboxProps);
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onChange', 'required', 'value']);
+  const api = useCheckbox(useCheckboxProps);
+  const rootProps = mergeProps(() => api().rootProps, labelprops);
+  const getChildren = () => runIfFn(props.children, api);
   return createComponent(CheckboxProvider, {
-    value: checkbox,
+    value: api,
     get children() {
-      return createComponent(CheckboxContextWrapper, labelprops);
+      return createComponent(ark.label, mergeProps$1(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
-const CheckboxContextWrapper = props => {
-  const checkbox = useCheckboxContext();
-  const view = children(() => runIfFn(props.children, checkbox));
-  return createComponent(ark.label, mergeProps(() => checkbox().rootProps, props, {
-    get children() {
-      return view();
-    }
-  }));
-};
 
 export { Checkbox };

package/dist/checkbox/index.d.ts

@@ -1,3 +1,4 @@
+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';

package/dist/checkbox/use-checkbox.cjs

@@ -28,7 +28,7 @@ const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
 
 const useCheckbox = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
   const [state, send] = solid.useMachine(checkbox__namespace.machine(context), { context });
   return solidJs.createMemo(() => checkbox__namespace.connect(state, send, solid.normalizeProps));
 };

package/dist/checkbox/use-checkbox.d.ts

@@ -1,3 +1,4 @@
+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 Optional } from '../types';
@@ -6,12 +7,11 @@ export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
 export declare const useCheckbox: (props: UseCheckboxProps) => Accessor<{
     isChecked: boolean;
     isDisabled: boolean | undefined;
-    isIndeterminate: boolean | undefined;
-    isFocused: boolean;
-    isReadOnly: boolean | undefined;
-    view: string;
-    setChecked(checked: boolean): void;
-    setIndeterminate(indeterminate: boolean): void;
+    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>;

package/dist/checkbox/use-checkbox.mjs

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