@ark-ui/solid 0.10.1 → 1.0.0-beta.0

package/carousel/carousel-slide.cjs

@@ -8,11 +8,11 @@ const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const carouselContext = require('./carousel-context.cjs');
 
-const CarouselSlide = props => {
+const CarouselItem = 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);
+  const api = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(slideParams), localProps);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.CarouselSlide = CarouselSlide;
+exports.CarouselItem = CarouselItem;

package/carousel/carousel-slide.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
-import type { SlideProps } from '@zag-js/carousel';
+import type { ItemProps } from '@zag-js/carousel';
 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;
+export type CarouselItemProps = Assign<HTMLArkProps<'div'>, ItemProps>;
+export declare const CarouselItem: (props: CarouselItemProps) => JSX.Element;

package/carousel/carousel-slide.mjs

@@ -4,11 +4,11 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useCarouselContext } from './carousel-context.mjs';
 
-const CarouselSlide = props => {
+const CarouselItem = props => {
   const [slideParams, localProps] = createSplitProps()(props, ['index']);
-  const carousel = useCarouselContext();
-  const sliderProps = mergeProps(() => carousel().getSlideProps(slideParams), localProps);
-  return createComponent(ark.div, sliderProps);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps(() => api().getItemProps(slideParams), localProps);
+  return createComponent(ark.div, mergedProps);
 };
 
-export { CarouselSlide };
+export { CarouselItem };

package/carousel/carousel-viewport.cjs

@@ -8,9 +8,9 @@ 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);
+  const api = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().viewportProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.CarouselViewport = CarouselViewport;

package/carousel/carousel-viewport.mjs

@@ -4,9 +4,9 @@ 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);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps(() => api().viewportProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { CarouselViewport };

package/carousel/carousel.cjs

@@ -10,7 +10,7 @@ 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 [useCarouselProps, localProps] = createSplitProps.createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
   const carousel = useCarousel.useCarousel(useCarouselProps);
   const rootProps = solid.mergeProps(() => carousel().rootProps, localProps);
   return web.createComponent(carouselContext.CarouselProvider, {

package/carousel/carousel.mjs

@@ -6,7 +6,7 @@ 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 [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 createComponent(CarouselProvider, {

package/carousel/index.cjs

@@ -7,22 +7,21 @@ 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 carouselNextTrigger = require('./carousel-next-trigger.cjs');
+const carouselPrevTrigger = require('./carousel-prev-trigger.cjs');
 const carouselSlide = require('./carousel-slide.cjs');
 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,
+  NextTrigger: carouselNextTrigger.CarouselNextTrigger,
+  PrevTrigger: carouselPrevTrigger.CarouselPrevTrigger,
+  Item: carouselSlide.CarouselItem,
+  ItemGroup: carouselSlideGroup.CarouselItemGroup,
   Viewport: carouselViewport.CarouselViewport
 });
 
@@ -30,10 +29,9 @@ 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.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
+exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
+exports.CarouselItem = carouselSlide.CarouselItem;
+exports.CarouselItemGroup = carouselSlideGroup.CarouselItemGroup;
 exports.CarouselViewport = carouselViewport.CarouselViewport;
-exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.Carousel = Carousel;

package/carousel/index.d.ts

@@ -1,25 +1,24 @@
 import { JSX } from 'solid-js';
 import { type CarouselProps } from './carousel';
-import { useCarouselContext } from './carousel-context';
+import { useCarouselContext, type CarouselContext } 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 { CarouselNextTrigger, type CarouselNextTriggerProps } from './carousel-next-trigger';
+import { CarouselPrevTrigger, type CarouselPrevTriggerProps } from './carousel-prev-trigger';
+import { CarouselItem, type CarouselItemProps } from './carousel-slide';
+import { CarouselItemGroup, type CarouselItemGroupProps } 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;
+    NextTrigger: (props: CarouselNextTriggerProps) => JSX.Element;
+    PrevTrigger: (props: CarouselPrevTriggerProps) => JSX.Element;
+    Item: (props: CarouselItemProps) => JSX.Element;
+    ItemGroup: (props: CarouselItemGroupProps) => 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, };
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };
+export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselProps, CarouselViewportProps, };

package/carousel/index.mjs

@@ -3,23 +3,22 @@ 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 { CarouselNextTrigger } from './carousel-next-trigger.mjs';
+import { CarouselPrevTrigger } from './carousel-prev-trigger.mjs';
+import { CarouselItem } from './carousel-slide.mjs';
+import { CarouselItemGroup } 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,
+  NextTrigger: CarouselNextTrigger,
+  PrevTrigger: CarouselPrevTrigger,
+  Item: CarouselItem,
+  ItemGroup: CarouselItemGroup,
   Viewport: CarouselViewport
 });
 
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselNextSlideTrigger, CarouselPrevSlideTrigger, CarouselSlide, CarouselSlideGroup, CarouselViewport };
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport };

package/checkbox/checkbox-control.cjs

@@ -9,11 +9,11 @@ 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), (() => {
+  const api = checkboxContext.useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return [web.createComponent(factory.ark.div, mergedProps), (() => {
     const _el$ = _tmpl$();
-    web.spread(_el$, web.mergeProps(() => checkbox().hiddenInputProps), false, false);
+    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
 };

package/checkbox/checkbox-control.mjs

@@ -5,11 +5,11 @@ 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), (() => {
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return [createComponent(ark.div, mergedProps), (() => {
     const _el$ = _tmpl$();
-    spread(_el$, mergeProps$1(() => checkbox().hiddenInputProps), false, false);
+    spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
 };

package/checkbox/checkbox-indicator.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 checkboxContext = require('./checkbox-context.cjs');
+
+const CheckboxIndicator = props => {
+  const api = checkboxContext.useCheckboxContext();
+  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.CheckboxIndicator = CheckboxIndicator;

package/checkbox/checkbox-indicator.d.ts

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

package/checkbox/checkbox-indicator.mjs

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

package/checkbox/checkbox.cjs

@@ -11,14 +11,14 @@ const checkboxContext = require('./checkbox-context.cjs');
 const useCheckbox = require('./use-checkbox.cjs');
 
 const Checkbox = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps.createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onChange', 'required', 'value']);
+  const [useCheckboxProps, labelprops] = createSplitProps.createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
   const api = useCheckbox.useCheckbox(useCheckboxProps);
-  const rootProps = solid.mergeProps(() => api().rootProps, labelprops);
+  const mergedProps = solid.mergeProps(() => api().rootProps, labelprops);
   const getChildren = () => runIfFn.runIfFn(props.children, api);
   return web.createComponent(checkboxContext.CheckboxProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.label, web.mergeProps(rootProps, {
+      return web.createComponent(factory.ark.label, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }

package/checkbox/checkbox.mjs

@@ -7,14 +7,14 @@ import { CheckboxProvider } from './checkbox-context.mjs';
 import { useCheckbox } from './use-checkbox.mjs';
 
 const Checkbox = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onChange', 'required', 'value']);
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
   const api = useCheckbox(useCheckboxProps);
-  const rootProps = mergeProps(() => api().rootProps, labelprops);
+  const mergedProps = mergeProps(() => api().rootProps, labelprops);
   const getChildren = () => runIfFn(props.children, api);
   return createComponent(CheckboxProvider, {
     value: api,
     get children() {
-      return createComponent(ark.label, mergeProps$1(rootProps, {
+      return createComponent(ark.label, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }

package/checkbox/index.cjs

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

package/checkbox/index.d.ts

@@ -1,14 +1,15 @@
 import { JSX } from 'solid-js';
 import type { CheckedState } from '@zag-js/checkbox';
 import { type CheckboxProps } from './checkbox';
-import { useCheckboxContext } from './checkbox-context';
+import { useCheckboxContext, type CheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
+import { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 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;
+    Indicator: (props: CheckboxIndicatorProps) => JSX.Element;
 };
-export { Checkbox, CheckboxControl, CheckboxLabel, checkboxAnatomy, useCheckboxContext };
-export type { CheckboxControlProps, CheckboxLabelProps, CheckboxProps, CheckedState };
+export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
+export type { CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxProps, CheckedState, };

package/checkbox/index.mjs

@@ -1,13 +1,14 @@
 import { Checkbox as Checkbox$1 } from './checkbox.mjs';
 export { useCheckboxContext } from './checkbox-context.mjs';
 import { CheckboxControl } from './checkbox-control.mjs';
+import { CheckboxIndicator } from './checkbox-indicator.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
+  Label: CheckboxLabel,
+  Indicator: CheckboxIndicator
 });
 
-export { Checkbox, CheckboxControl, CheckboxLabel };
+export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel };

package/color-picker/color-picker-area-background.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 factory = require('../factory.cjs');
+const colorPickerAreaContext = require('./color-picker-area-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerAreaBackground = props => {
+  const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.ColorPickerAreaBackground = ColorPickerAreaBackground;

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

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

package/color-picker/color-picker-area-background.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerAreaContext } from './color-picker-area-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerAreaBackground = props => {
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { ColorPickerAreaBackground };

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

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

package/color-picker/color-picker-area-thumb.cjs

@@ -9,10 +9,10 @@ const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerAreaThumb = props => {
-  const colorPicker = colorPickerContext.useColorPickerContext();
-  const area = colorPickerAreaContext.useColorPickerAreaContext();
-  const areaThumbProps = solid.mergeProps(() => colorPicker().getAreaThumbProps(area), props);
-  return web.createComponent(factory.ark.div, areaThumbProps);
+  const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaThumbProps(colorAreaProps), props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.ColorPickerAreaThumb = ColorPickerAreaThumb;

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

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

package/color-picker/color-picker-area-thumb.mjs

@@ -5,10 +5,10 @@ import { useColorPickerAreaContext } from './color-picker-area-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerAreaThumb = props => {
-  const colorPicker = useColorPickerContext();
-  const area = useColorPickerAreaContext();
-  const areaThumbProps = mergeProps(() => colorPicker().getAreaThumbProps(area), props);
-  return createComponent(ark.div, areaThumbProps);
+  const colorAreaProps = useColorPickerAreaContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getAreaThumbProps(colorAreaProps), props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { ColorPickerAreaThumb };

package/color-picker/color-picker-area.cjs

@@ -10,13 +10,13 @@ const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerArea = props => {
-  const [colorAreaProps, restProps] = createSplitProps.createSplitProps()(props, ['xChannel', 'yChannel']);
-  const colorPicker = colorPickerContext.useColorPickerContext();
-  const areaProps = solid.mergeProps(() => colorPicker().getAreaProps(colorAreaProps), restProps);
+  const [channelProps, divprops] = createSplitProps.createSplitProps()(props, ['xChannel', 'yChannel']);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getAreaProps(channelProps), divprops);
   return web.createComponent(colorPickerAreaContext.ColorPickerAreaProvider, {
-    value: colorAreaProps,
+    value: channelProps,
     get children() {
-      return web.createComponent(factory.ark.div, areaProps);
+      return web.createComponent(factory.ark.div, mergedProps);
     }
   });
 };

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

@@ -1,5 +1,7 @@
 import { JSX } from 'solid-js';
-import type { ColorAreaProps } from '@zag-js/color-picker';
+import type { AreaProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
-export type ColorPickerAreaProps = HTMLArkProps<'div'> & ColorAreaProps;
+import type { Assign } from '../types';
+export interface ColorPickerAreaProps extends Assign<HTMLArkProps<'div'>, AreaProps> {
+}
 export declare const ColorPickerArea: (props: ColorPickerAreaProps) => JSX.Element;

package/color-picker/color-picker-area.mjs

@@ -6,13 +6,13 @@ import { ColorPickerAreaProvider } from './color-picker-area-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerArea = props => {
-  const [colorAreaProps, restProps] = createSplitProps()(props, ['xChannel', 'yChannel']);
-  const colorPicker = useColorPickerContext();
-  const areaProps = mergeProps(() => colorPicker().getAreaProps(colorAreaProps), restProps);
+  const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getAreaProps(channelProps), divprops);
   return createComponent(ColorPickerAreaProvider, {
-    value: colorAreaProps,
+    value: channelProps,
     get children() {
-      return createComponent(ark.div, areaProps);
+      return createComponent(ark.div, mergedProps);
     }
   });
 };

package/color-picker/color-picker-channel-input.cjs

@@ -9,10 +9,10 @@ const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerChannelInput = props => {
-  const [channelProps, restProps] = createSplitProps.createSplitProps()(props, ['channel', 'orientation']);
-  const colorPicker = colorPickerContext.useColorPickerContext();
-  const channelInputProps = solid.mergeProps(() => colorPicker().getChannelInputProps(channelProps), restProps);
-  return web.createComponent(factory.ark.input, channelInputProps);
+  const [channelProps, inputProps] = createSplitProps.createSplitProps()(props, ['channel', 'orientation']);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelInputProps(channelProps), inputProps);
+  return web.createComponent(factory.ark.input, mergedProps);
 };
 
 exports.ColorPickerChannelInput = ColorPickerChannelInput;

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

@@ -1,6 +1,7 @@
 import { JSX } from 'solid-js';
-import type { ColorChannelProps } from '@zag-js/color-picker';
+import type { ChannelInputProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerChannelInputProps = Assign<HTMLArkProps<'input'>, ColorChannelProps>;
+export interface ColorPickerChannelInputProps extends Assign<ChannelInputProps, HTMLArkProps<'input'>> {
+}
 export declare const ColorPickerChannelInput: (props: ColorPickerChannelInputProps) => JSX.Element;

package/color-picker/color-picker-channel-input.mjs

@@ -5,10 +5,10 @@ import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerChannelInput = props => {
-  const [channelProps, restProps] = createSplitProps()(props, ['channel', 'orientation']);
-  const colorPicker = useColorPickerContext();
-  const channelInputProps = mergeProps(() => colorPicker().getChannelInputProps(channelProps), restProps);
-  return createComponent(ark.input, channelInputProps);
+  const [channelProps, inputProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getChannelInputProps(channelProps), inputProps);
+  return createComponent(ark.input, mergedProps);
 };
 
 export { ColorPickerChannelInput };

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

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

package/color-picker/color-picker-channel-slider-thumb.cjs

@@ -9,10 +9,10 @@ const colorPickerChannelSliderContext = require('./color-picker-channel-slider-c
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerChannelSliderThumb = props => {
+  const sliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
   const api = colorPickerContext.useColorPickerContext();
-  const sliderProps = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
-  const thumbProps = solid.mergeProps(() => api().getChannelSliderThumbProps(sliderProps), props);
-  return web.createComponent(factory.ark.div, thumbProps);
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(sliderContext), props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;