@ark-ui/solid 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -6,6 +6,15 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.9.0] - 2023-08-06
+
+### Added
+
+- Enhanced `Carousel` component: Introduced `CarouselIndicator` and `CarouselIndicatorGroup` components. These sub-components offer finer control over the carousel navigation, enabling users to directly access desired carousel slides.
+- Expose `use<X>Context` for all components that use context.
+- Added `ComboboxOptionGroup` and `ComboboxClearTrigger` components to the `Combobox` component.
+- Developers can now set default options for all `Toast` components in their application, ensuring a consistent look and feel across the board.
+
 ## [0.8.1] - 2023-07-10
 
 ### Fixed
@@ -110,7 +119,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.8.1...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.9.0...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.3.0
@@ -120,5 +129,6 @@ description: All notable changes to this project will be documented in this file
 [0.7.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.0
 [0.7.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.1
 [0.8.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.8.0
-
 [0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.8.1
+
+[0.9.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.9.0

package/accordion/accordion-context.d.ts

@@ -1,24 +1,7 @@
-import type { ItemProps, ItemState } from '@zag-js/accordion';
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { PublicApi } from '@zag-js/accordion';
+import type { Accessor } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type UseAccordionReturn } from './use-accordion';
 export type AccordionContext = UseAccordionReturn;
-export declare const AccordionProvider: ContextProviderComponent<Accessor<{
-    rootProps: JSX.HTMLAttributes<any>;
-    getItemProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getContentProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getTriggerProps(props: ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    focusedValue: string | null;
-    value: string | string[] | null;
-    setValue: (value: string | string[]) => void;
-    getItemState: (props: ItemProps) => ItemState;
-}>>, useAccordionContext: () => Accessor<{
-    rootProps: JSX.HTMLAttributes<any>;
-    getItemProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getContentProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getTriggerProps(props: ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    focusedValue: string | null;
-    value: string | string[] | null;
-    setValue: (value: string | string[]) => void;
-    getItemState: (props: ItemProps) => ItemState;
-}>;
+export declare const AccordionProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useAccordionContext: () => Accessor<PublicApi<PropTypes>>;

package/accordion/index.cjs

@@ -4,7 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const accordion = require('./accordion.cjs');
 const accordionContent = require('./accordion-content.cjs');
+const accordionContext = require('./accordion-context.cjs');
 const accordionItem = require('./accordion-item.cjs');
+const accordionItemContext = require('./accordion-item-context.cjs');
 const accordionTrigger = require('./accordion-trigger.cjs');
 const accordion$1 = require('@zag-js/accordion');
 
@@ -12,7 +14,9 @@ const accordion$1 = require('@zag-js/accordion');
 
 exports.Accordion = accordion.Accordion;
 exports.AccordionContent = accordionContent.AccordionContent;
+exports.useAccordionContext = accordionContext.useAccordionContext;
 exports.AccordionItem = accordionItem.AccordionItem;
+exports.useAccordionItemContext = accordionItemContext.useAccordionItemContext;
 exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
 Object.defineProperty(exports, 'accordionAnatomy', {
 	enumerable: true,

package/accordion/index.d.ts

@@ -1,5 +1,7 @@
 export { Accordion, type AccordionProps } from './accordion';
 export { AccordionContent, type AccordionContentProps } from './accordion-content';
+export { useAccordionContext } from './accordion-context';
 export { AccordionItem, type AccordionItemProps } from './accordion-item';
+export { useAccordionItemContext } from './accordion-item-context';
 export { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
 export { accordionAnatomy } from './accordion.anatomy';

package/accordion/index.mjs

@@ -1,5 +1,7 @@
 export { Accordion } from './accordion.mjs';
 export { AccordionContent } from './accordion-content.mjs';
+export { useAccordionContext } from './accordion-context.mjs';
 export { AccordionItem } from './accordion-item.mjs';
+export { useAccordionItemContext } from './accordion-item-context.mjs';
 export { AccordionTrigger } from './accordion-trigger.mjs';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/accordion/use-accordion.d.ts

@@ -1,15 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { Accessor } from 'solid-js';
 import * as accordion from '@zag-js/accordion';
 import { type Optional } from '../types';
 export type UseAccordionProps = Optional<accordion.Context, 'id'>;
 export type UseAccordionReturn = ReturnType<typeof useAccordion>;
-export declare const useAccordion: (props: UseAccordionProps) => Accessor<{
-    rootProps: JSX.HTMLAttributes<any>;
-    getItemProps(props: accordion.ItemProps): JSX.HTMLAttributes<any>;
-    getContentProps(props: accordion.ItemProps): JSX.HTMLAttributes<any>;
-    getTriggerProps(props: accordion.ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    focusedValue: string | null;
-    value: string | string[] | null;
-    setValue: (value: string | string[]) => void;
-    getItemState: (props: accordion.ItemProps) => accordion.ItemState;
-}>;
+export declare const useAccordion: (props: UseAccordionProps) => Accessor<accordion.PublicApi<PropTypes>>;

package/avatar/avatar-context.d.ts

@@ -1,23 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { PublicApi } from '@zag-js/avatar';
+import type { Accessor } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type UseAvatarReturn } from './use-avatar';
 export type AvatarContext = UseAvatarReturn;
-export declare const AvatarProvider: ContextProviderComponent<Accessor<{
-    isLoaded: boolean;
-    showFallback: boolean;
-    setSrc(src: string): void;
-    setLoaded(): void;
-    setError(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
-    fallbackProps: JSX.HTMLAttributes<any>;
-}>>, useAvatarContext: () => Accessor<{
-    isLoaded: boolean;
-    showFallback: boolean;
-    setSrc(src: string): void;
-    setLoaded(): void;
-    setError(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
-    fallbackProps: JSX.HTMLAttributes<any>;
-}>;
+export declare const AvatarProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useAvatarContext: () => Accessor<PublicApi<PropTypes>>;

package/avatar/index.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const avatar = require('./avatar.cjs');
+const avatarContext = require('./avatar-context.cjs');
 const avatarFallback = require('./avatar-fallback.cjs');
 const avatarImage = require('./avatar-image.cjs');
 const avatar$1 = require('@zag-js/avatar');
@@ -10,6 +11,7 @@ const avatar$1 = require('@zag-js/avatar');
 
 
 exports.Avatar = avatar.Avatar;
+exports.useAvatarContext = avatarContext.useAvatarContext;
 exports.AvatarFallback = avatarFallback.AvatarFallback;
 exports.AvatarImage = avatarImage.AvatarImage;
 Object.defineProperty(exports, 'avatarAnatomy', {

package/avatar/index.d.ts

@@ -1,4 +1,5 @@
 export { Avatar, type AvatarProps } from './avatar';
+export { useAvatarContext } from './avatar-context';
 export { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 export { AvatarImage, type AvatarImageProps } from './avatar-image';
 export { avatarAnatomy } from './avatar.anatomy';

package/avatar/index.mjs

@@ -1,4 +1,5 @@
 export { Avatar } from './avatar.mjs';
+export { useAvatarContext } from './avatar-context.mjs';
 export { AvatarFallback } from './avatar-fallback.mjs';
 export { AvatarImage } from './avatar-image.mjs';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';

package/avatar/use-avatar.d.ts

@@ -1,15 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { Accessor } from 'solid-js';
 import * as avatar from '@zag-js/avatar';
 import { type Optional } from '../types';
 export type UseAvatarProps = Optional<avatar.Context, 'id'>;
 export type UseAvatarReturn = ReturnType<typeof useAvatar>;
-export declare const useAvatar: (props: UseAvatarProps) => Accessor<{
-    isLoaded: boolean;
-    showFallback: boolean;
-    setSrc(src: string): void;
-    setLoaded(): void;
-    setError(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
-    fallbackProps: JSX.HTMLAttributes<any>;
-}>;
+export declare const useAvatar: (props: UseAvatarProps) => Accessor<avatar.PublicApi<PropTypes>>;

package/carousel/carousel-context.d.ts

@@ -1,62 +1,7 @@
-import type { SlideProps } from '@zag-js/carousel/dist/carousel.types';
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { PublicApi } from '@zag-js/carousel';
+import type { Accessor } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type UseCarouselReturn } from './use-carousel';
 export type CarouselContext = UseCarouselReturn;
-export declare const CarouselProvider: ContextProviderComponent<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>;
-}>>, useCarouselContext: () => 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 declare const CarouselProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useCarouselContext: () => Accessor<PublicApi<PropTypes>>;

package/carousel/carousel-indicator-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 CarouselIndicatorGroup = props => {
+  const carousel = carouselContext.useCarouselContext();
+  const indicatorGroupProps = solid.mergeProps(() => carousel().indicatorGroupProps, props);
+  return web.createComponent(factory.ark.div, indicatorGroupProps);
+};
+
+exports.CarouselIndicatorGroup = CarouselIndicatorGroup;

package/carousel/carousel-indicator-group.d.ts

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

package/carousel/carousel-indicator-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 CarouselIndicatorGroup = props => {
+  const carousel = useCarouselContext();
+  const indicatorGroupProps = mergeProps(() => carousel().indicatorGroupProps, props);
+  return createComponent(ark.div, indicatorGroupProps);
+};
+
+export { CarouselIndicatorGroup };

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 type { 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-slide.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'solid-js';
-import type { SlideProps } from '@zag-js/carousel/dist/carousel.types';
+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/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');
@@ -14,7 +17,10 @@ const carousel_anatomy = require('./carousel.anatomy.cjs');
 
 
 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;

package/carousel/index.d.ts

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

package/carousel/index.mjs

@@ -1,5 +1,8 @@
 export { Carousel } 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';

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 type { PropTypes } from '@zag-js/solid';
+import type { Accessor } 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 declare const useCarousel: (props: UseCarouselProps) => Accessor<carousel.PublicApi<PropTypes>>;
 export type UseCarouselReturn = ReturnType<typeof useCarousel>;

package/checkbox/checkbox-context.d.ts

@@ -1,30 +1,7 @@
-import type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
-import type { Accessor, JSX } from 'solid-js';
+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 { 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<Accessor<PublicApi<PropTypes>>>, useCheckboxContext: () => Accessor<PublicApi<PropTypes>>;

package/checkbox/index.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const checkbox = 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');
@@ -11,6 +12,7 @@ const checkbox$1 = require('@zag-js/checkbox');
 
 
 exports.Checkbox = checkbox.Checkbox;
+exports.useCheckboxContext = checkboxContext.useCheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxInput = checkboxInput.CheckboxInput;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;

package/checkbox/index.d.ts

@@ -1,5 +1,6 @@
-export type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
+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';

package/checkbox/index.mjs

@@ -1,4 +1,5 @@
 export { Checkbox } 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';

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 type { PropTypes } from '@zag-js/solid';
+import type { Accessor } from 'solid-js';
 import * as checkbox from '@zag-js/checkbox';
 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 declare const useCheckbox: (props: UseCheckboxProps) => Accessor<checkbox.PublicApi<PropTypes>>;

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

@@ -1,45 +1,7 @@
-import type { ColorFormat, ColorChannelInputProps } from '@zag-js/color-picker/dist/color-picker.types';
-import type { Color, ColorChannel, ColorAreaProps, ColorChannelProps, ColorSwatchProps } from '@zag-js/color-picker';
-import type { Accessor, JSX } from 'solid-js';
+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 { type UseColorPickerReturn } from './use-color-picker';
 export type ColorPickerContext = UseColorPickerReturn;
-export declare const ColorPickerProvider: ContextProviderComponent<Accessor<{
-    isDragging: boolean;
-    value: string;
-    valueAsColor: Color;
-    channels: [ColorChannel, ColorChannel, ColorChannel];
-    setColor(value: string | Color): void;
-    setChannelValue(channel: ColorChannel, value: number): void;
-    setFormat(format: ColorFormat): void;
-    contentProps: JSX.HTMLAttributes<any>;
-    getAreaProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaGradientProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaThumbProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getChannelSliderTrackProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderBackgroundProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderThumbProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelInputProps(props: ColorChannelInputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    eyeDropperTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getSwatchBackgroundProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-    getSwatchProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-}>>, useColorPickerContext: () => Accessor<{
-    isDragging: boolean;
-    value: string;
-    valueAsColor: Color;
-    channels: [ColorChannel, ColorChannel, ColorChannel];
-    setColor(value: string | Color): void;
-    setChannelValue(channel: ColorChannel, value: number): void;
-    setFormat(format: ColorFormat): void;
-    contentProps: JSX.HTMLAttributes<any>;
-    getAreaProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaGradientProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaThumbProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getChannelSliderTrackProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderBackgroundProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderThumbProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelInputProps(props: ColorChannelInputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    eyeDropperTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getSwatchBackgroundProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-    getSwatchProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-}>;
+export declare const ColorPickerProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useColorPickerContext: () => Accessor<PublicApi<PropTypes>>;

package/color-picker/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const colorPicker = require('./color-picker.cjs');
 const colorPickerArea = require('./color-picker-area.cjs');
+const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerAreaGradient = require('./color-picker-area-gradient.cjs');
 const colorPickerAreaThumb = require('./color-picker-area-thumb.cjs');
 const colorPickerChannelInput = require('./color-picker-channel-input.cjs');
@@ -11,9 +12,11 @@ const colorPickerChannelSliderBackground = require('./color-picker-channel-slide
 const colorPickerChannelSliderThumb = require('./color-picker-channel-slider-thumb.cjs');
 const colorPickerChannelSliderTrack = require('./color-picker-channel-slider-track.cjs');
 const colorPickerContent = require('./color-picker-content.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 const colorPickerEyeDropperTrigger = require('./color-picker-eye-dropper-trigger.cjs');
 const colorPickerSwatch = require('./color-picker-swatch.cjs');
 const colorPickerSwatchBackground = require('./color-picker-swatch-background.cjs');
+const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 
@@ -21,6 +24,7 @@ const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 
 exports.ColorPicker = colorPicker.ColorPicker;
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
+exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
 exports.ColorPickerAreaGradient = colorPickerAreaGradient.ColorPickerAreaGradient;
 exports.ColorPickerAreaThumb = colorPickerAreaThumb.ColorPickerAreaThumb;
 exports.ColorPickerChannelInput = colorPickerChannelInput.ColorPickerChannelInput;
@@ -28,8 +32,10 @@ exports.ColorPickerChannelSliderBackground = colorPickerChannelSliderBackground.
 exports.ColorPickerChannelSliderThumb = colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb;
 exports.ColorPickerChannelSliderTrack = colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack;
 exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
+exports.useColorPickerContext = colorPickerContext.useColorPickerContext;
 exports.ColorPickerEyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
 exports.ColorPickerSwatchBackground = colorPickerSwatchBackground.ColorPickerSwatchBackground;
+exports.useColorPickerSwatchContext = colorPickerSwatchContext.useColorPickerSwatchContext;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;