@ark-ui/solid 1.0.0-beta.1 → 1.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -47,8 +47,28 @@
   "bugs": {
     "url": "https://github.com/chakra-ui/ark/issues"
   },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "solid": "./source/index.jsx",
+      "import": "./esm/index.js",
+      "browser": {
+        "import": "./esm/index.js",
+        "require": "./cjs/index.js"
+      },
+      "require": "./cjs/index.js",
+      "node": "./cjs/index.js"
+    }
+  },
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "./"
+  ],
   "scripts": {
-    "build": "vite build",
+    "build": "rollup -c",
     "lint": "eslint --ext .ts,.tsx src",
     "test": "vitest",
     "test:ci": "vitest --run --coverage",
@@ -94,18 +114,18 @@
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
     "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-interactions": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/blocks": "7.4.6",
+    "@storybook/addon-essentials": "7.5.1",
+    "@storybook/addon-interactions": "7.5.1",
+    "@storybook/addon-links": "7.5.1",
+    "@storybook/blocks": "7.5.1",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.3",
+    "@types/jsdom": "21.1.4",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/parser": "6.8.0",
     "@vitest/coverage-v8": "0.34.3",
     "eslint": "8.51.0",
     "globby": "13.2.2",
@@ -113,176 +133,18 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "release-it": "16.2.1",
+    "rollup": "4.1.4",
+    "rollup-preset-solid": "2.0.1",
     "solid-js": "1.8.1",
-    "storybook": "7.4.6",
+    "storybook": "7.5.1",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.2.2",
     "vite": "4.4.11",
-    "vite-plugin-dts": "3.6.0",
     "vite-plugin-solid": "2.7.2",
     "vitest": "0.34.2"
   },
   "peerDependencies": {
     "solid-js": ">=1.6.0"
-  },
-  "main": "index.cjs",
-  "module": "index.mjs",
-  "types": "index.d.ts",
-  "files": [
-    "./"
-  ],
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.mjs",
-      "require": "./index.cjs"
-    },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "import": "./accordion/index.mjs",
-      "require": "./accordion/index.cjs"
-    },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "import": "./avatar/index.mjs",
-      "require": "./avatar/index.cjs"
-    },
-    "./carousel": {
-      "types": "./carousel/index.d.ts",
-      "import": "./carousel/index.mjs",
-      "require": "./carousel/index.cjs"
-    },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "import": "./checkbox/index.mjs",
-      "require": "./checkbox/index.cjs"
-    },
-    "./color-picker": {
-      "types": "./color-picker/index.d.ts",
-      "import": "./color-picker/index.mjs",
-      "require": "./color-picker/index.cjs"
-    },
-    "./combobox": {
-      "types": "./combobox/index.d.ts",
-      "import": "./combobox/index.mjs",
-      "require": "./combobox/index.cjs"
-    },
-    "./date-picker": {
-      "types": "./date-picker/index.d.ts",
-      "import": "./date-picker/index.mjs",
-      "require": "./date-picker/index.cjs"
-    },
-    "./dialog": {
-      "types": "./dialog/index.d.ts",
-      "import": "./dialog/index.mjs",
-      "require": "./dialog/index.cjs"
-    },
-    "./editable": {
-      "types": "./editable/index.d.ts",
-      "import": "./editable/index.mjs",
-      "require": "./editable/index.cjs"
-    },
-    "./environment": {
-      "types": "./environment/index.d.ts",
-      "import": "./environment/index.mjs",
-      "require": "./environment/index.cjs"
-    },
-    "./hover-card": {
-      "types": "./hover-card/index.d.ts",
-      "import": "./hover-card/index.mjs",
-      "require": "./hover-card/index.cjs"
-    },
-    "./menu": {
-      "types": "./menu/index.d.ts",
-      "import": "./menu/index.mjs",
-      "require": "./menu/index.cjs"
-    },
-    "./number-input": {
-      "types": "./number-input/index.d.ts",
-      "import": "./number-input/index.mjs",
-      "require": "./number-input/index.cjs"
-    },
-    "./pagination": {
-      "types": "./pagination/index.d.ts",
-      "import": "./pagination/index.mjs",
-      "require": "./pagination/index.cjs"
-    },
-    "./pin-input": {
-      "types": "./pin-input/index.d.ts",
-      "import": "./pin-input/index.mjs",
-      "require": "./pin-input/index.cjs"
-    },
-    "./popover": {
-      "types": "./popover/index.d.ts",
-      "import": "./popover/index.mjs",
-      "require": "./popover/index.cjs"
-    },
-    "./presence": {
-      "types": "./presence/index.d.ts",
-      "import": "./presence/index.mjs",
-      "require": "./presence/index.cjs"
-    },
-    "./radio-group": {
-      "types": "./radio-group/index.d.ts",
-      "import": "./radio-group/index.mjs",
-      "require": "./radio-group/index.cjs"
-    },
-    "./rating-group": {
-      "types": "./rating-group/index.d.ts",
-      "import": "./rating-group/index.mjs",
-      "require": "./rating-group/index.cjs"
-    },
-    "./segment-group": {
-      "types": "./segment-group/index.d.ts",
-      "import": "./segment-group/index.mjs",
-      "require": "./segment-group/index.cjs"
-    },
-    "./select": {
-      "types": "./select/index.d.ts",
-      "import": "./select/index.mjs",
-      "require": "./select/index.cjs"
-    },
-    "./slider": {
-      "types": "./slider/index.d.ts",
-      "import": "./slider/index.mjs",
-      "require": "./slider/index.cjs"
-    },
-    "./splitter": {
-      "types": "./splitter/index.d.ts",
-      "import": "./splitter/index.mjs",
-      "require": "./splitter/index.cjs"
-    },
-    "./switch": {
-      "types": "./switch/index.d.ts",
-      "import": "./switch/index.mjs",
-      "require": "./switch/index.cjs"
-    },
-    "./tabs": {
-      "types": "./tabs/index.d.ts",
-      "import": "./tabs/index.mjs",
-      "require": "./tabs/index.cjs"
-    },
-    "./tags-input": {
-      "types": "./tags-input/index.d.ts",
-      "import": "./tags-input/index.mjs",
-      "require": "./tags-input/index.cjs"
-    },
-    "./toast": {
-      "types": "./toast/index.d.ts",
-      "import": "./toast/index.mjs",
-      "require": "./toast/index.cjs"
-    },
-    "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
-      "import": "./toggle-group/index.mjs",
-      "require": "./toggle-group/index.cjs"
-    },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "import": "./tooltip/index.mjs",
-      "require": "./tooltip/index.cjs"
-    },
-    "./package.json": "./package.json"
   }
 }

package/source/accordion/accordion-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [AccordionProvider, useAccordionContext] = createContext({
+    hookName: 'useAccordionContext',
+    providerName: '<AccordionProvider />',
+});

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

@@ -0,0 +1,14 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
+import { useAccordionContext } from './accordion-context';
+import { useAccordionItemContext } from './accordion-item-context';
+export const AccordionItemContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useAccordionContext();
+    const accordionItem = useAccordionItemContext();
+    const contentProps = mergeProps(() => api().getItemContentProps(accordionItem), localProps);
+    return (<Presence present={accordionItem.isOpen} {...presenceProps}>
+      <ark.div {...contentProps}/>
+    </Presence>);
+};

package/source/accordion/accordion-item-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [AccordionItemProvider, useAccordionItemContext] = createContext({
+    hookName: 'useAccordionItemContext',
+    providerName: '<AccordionItemProvider />',
+});

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useAccordionContext } from './accordion-context';
+import { useAccordionItemContext } from './accordion-item-context';
+export const AccordionItemIndicator = (props) => {
+    const api = useAccordionContext();
+    const itemParams = useAccordionItemContext();
+    const mergedProps = mergeProps(() => api().getItemIndicatorProps(itemParams), props);
+    return <ark.div {...mergedProps}/>;
+};

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useAccordionContext } from './accordion-context';
+import { useAccordionItemContext } from './accordion-item-context';
+export const AccordionItemTrigger = (props) => {
+    const api = useAccordionContext();
+    const item = useAccordionItemContext();
+    const mergedProps = mergeProps(() => api().getItemTriggerProps(item), props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/accordion/accordion-item.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useAccordionContext } from './accordion-context';
+import { AccordionItemProvider } from './accordion-item-context';
+export const AccordionItem = (props) => {
+    const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+    const api = useAccordionContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), restProps);
+    const accordionItem = mergeProps(() => api().getItemState(itemProps), itemProps);
+    const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemProps));
+    return (<AccordionItemProvider value={accordionItem}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </AccordionItemProvider>);
+};

package/source/accordion/accordion.jsx

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

package/source/accordion/index.js

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

package/source/accordion/use-accordion.js

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

package/source/avatar/avatar-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [AvatarProvider, useAvatarContext] = createContext({
+    hookName: 'useAvatarContext',
+    providerName: '<AvatarProvider />',
+});

package/source/avatar/avatar-fallback.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useAvatarContext } from './avatar-context';
+export const AvatarFallback = (props) => {
+    const avatar = useAvatarContext();
+    const fallbackProps = mergeProps(() => avatar().fallbackProps, props);
+    return <ark.span {...fallbackProps}/>;
+};

package/source/avatar/avatar-image.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useAvatarContext } from './avatar-context';
+export const AvatarImage = (props) => {
+    const avatar = useAvatarContext();
+    const imageProps = mergeProps(() => avatar().imageProps, props);
+    return <ark.img {...imageProps}/>;
+};

package/source/avatar/avatar.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 Avatar = (props) => {
+    const [params, localProps] = createSplitProps()(props, [
+        'dir',
+        'getRootNode',
+        'id',
+        'onLoadingStatusChange',
+    ]);
+    const api = useAvatar(params);
+    const rootProps = mergeProps(() => api().rootProps, localProps);
+    return (<AvatarProvider value={api}>
+      <ark.div {...rootProps}/>
+    </AvatarProvider>);
+};

package/source/avatar/index.js

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

package/source/avatar/use-avatar.js

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

package/source/carousel/carousel-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [CarouselProvider, useCarouselContext] = createContext({
+    hookName: 'useCarouselContext',
+    providerName: '<CarouselProvider />',
+});

package/source/carousel/carousel-control.jsx

@@ -0,0 +1,7 @@
+import { carouselAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+export const CarouselControl = (props) => {
+    const mergedProps = mergeProps(() => carouselAnatomy.build().control.attrs, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/carousel/carousel-indicator-group.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCarouselContext } from './carousel-context';
+export const CarouselIndicatorGroup = (props) => {
+    const api = useCarouselContext();
+    const mergedProps = mergeProps(() => api().indicatorGroupProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/carousel/carousel-indicator.jsx

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

package/source/carousel/carousel-next-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCarouselContext } from './carousel-context';
+export const CarouselNextTrigger = (props) => {
+    const api = useCarouselContext();
+    const mergedProps = mergeProps(() => api().nextTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/carousel/carousel-prev-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCarouselContext } from './carousel-context';
+export const CarouselPrevTrigger = (props) => {
+    const api = useCarouselContext();
+    const mergedProps = mergeProps(() => api().prevTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/carousel/carousel-slide-group.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCarouselContext } from './carousel-context';
+export const CarouselItemGroup = (props) => {
+    const api = useCarouselContext();
+    const mergedProps = mergeProps(() => api().itemGroupProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/carousel/carousel-slide.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useCarouselContext } from './carousel-context';
+export const CarouselItem = (props) => {
+    const [slideParams, localProps] = createSplitProps()(props, ['index']);
+    const api = useCarouselContext();
+    const mergedProps = mergeProps(() => api().getItemProps(slideParams), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/carousel/carousel-viewport.jsx

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

package/source/carousel/carousel.jsx

@@ -0,0 +1,25 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+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 carousel = useCarousel(useCarouselProps);
+    const rootProps = mergeProps(() => carousel().rootProps, localProps);
+    return (<CarouselProvider value={carousel}>
+      <ark.div {...rootProps}/>
+    </CarouselProvider>);
+};

package/source/carousel/index.js

@@ -0,0 +1,22 @@
+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 { CarouselNextTrigger } from './carousel-next-trigger';
+import { CarouselPrevTrigger } from './carousel-prev-trigger';
+import { CarouselItem } from './carousel-slide';
+import { CarouselItemGroup } from './carousel-slide-group';
+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, };

package/source/carousel/use-carousel.js

@@ -0,0 +1,10 @@
+import * as carousel from '@zag-js/carousel';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export 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));
+};

package/source/checkbox/checkbox-context.js

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

package/source/checkbox/checkbox-control.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCheckboxContext } from './checkbox-context';
+export const CheckboxControl = (props) => {
+    const api = useCheckboxContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/source/checkbox/checkbox-indicator.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCheckboxContext } from './checkbox-context';
+export const CheckboxIndicator = (props) => {
+    const api = useCheckboxContext();
+    const mergedProps = mergeProps(() => api().indicatorProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/checkbox/checkbox-label.jsx

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