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

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

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

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

@@ -5,10 +5,10 @@ import { useColorPickerChannelSliderContext } from './color-picker-channel-slide
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerChannelSliderThumb = props => {
+  const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const sliderProps = useColorPickerChannelSliderContext();
-  const thumbProps = mergeProps(() => api().getChannelSliderThumbProps(sliderProps), props);
-  return createComponent(ark.div, thumbProps);
+  const mergedProps = mergeProps(() => api().getChannelSliderThumbProps(sliderContext), props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { ColorPickerChannelSliderThumb };

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

@@ -4,21 +4,15 @@ 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 colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerChannelSliderTrack = props => {
-  const [colorChannelProps, localProps] = createSplitProps.createSplitProps()(props, ['channel', 'orientation']);
+  const sliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
   const api = colorPickerContext.useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(colorChannelProps), localProps);
-  return web.createComponent(colorPickerChannelSliderContext.ColorPickerChannelSliderProvider, {
-    value: colorChannelProps,
-    get children() {
-      return web.createComponent(factory.ark.div, mergedProps);
-    }
-  });
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(sliderContext), props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;

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

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

package/color-picker/color-picker-channel-slider-track.mjs

@@ -1,20 +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 { ColorPickerChannelSliderProvider } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerChannelSliderTrack = props => {
-  const [colorChannelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps(() => api().getChannelSliderTrackProps(colorChannelProps), localProps);
-  return createComponent(ColorPickerChannelSliderProvider, {
-    value: colorChannelProps,
-    get children() {
-      return createComponent(ark.div, mergedProps);
-    }
-  });
+  const mergedProps = mergeProps(() => api().getChannelSliderTrackProps(sliderContext), props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { ColorPickerChannelSliderTrack };

package/color-picker/color-picker-channel-slider.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 colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerChannelSlider = props => {
+  const [channelProps, localProps] = createSplitProps.createSplitProps()(props, ['channel', 'orientation']);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
+  return web.createComponent(colorPickerChannelSliderContext.ColorPickerChannelSliderProvider, {
+    value: channelProps,
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  });
+};
+
+exports.ColorPickerChannelSlider = ColorPickerChannelSlider;

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

@@ -0,0 +1,7 @@
+import { JSX } from 'solid-js';
+import type { ChannelProps } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface ColorPickerChannelSliderProps extends Assign<HTMLArkProps<'div'>, ChannelProps> {
+}
+export declare const ColorPickerChannelSlider: (props: ColorPickerChannelSliderProps) => JSX.Element;

package/color-picker/color-picker-channel-slider.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 { ColorPickerChannelSliderProvider } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelSlider = props => {
+  const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
+  return createComponent(ColorPickerChannelSliderProvider, {
+    value: channelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+export { ColorPickerChannelSlider };

package/color-picker/color-picker-content.cjs

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerContent = props => {
-  const colorPicker = colorPickerContext.useColorPickerContext();
-  const contentProps = solid.mergeProps(() => colorPicker().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.ColorPickerContent = ColorPickerContent;

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

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

package/color-picker/color-picker-content.mjs

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerContent = props => {
-  const colorPicker = useColorPickerContext();
-  const contentProps = mergeProps(() => colorPicker().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().contentProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { ColorPickerContent };

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

@@ -1,4 +1,5 @@
 import { ContextProviderComponent } from 'solid-js';
 import { type UseColorPickerReturn } from './use-color-picker';
-export type ColorPickerContext = UseColorPickerReturn;
-export declare const ColorPickerProvider: ContextProviderComponent<UseColorPickerReturn>, useColorPickerContext: () => UseColorPickerReturn;
+export interface ColorPickerContext extends UseColorPickerReturn {
+}
+export declare const ColorPickerProvider: ContextProviderComponent<ColorPickerContext>, useColorPickerContext: () => ColorPickerContext;

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

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

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

package/color-picker/color-picker-control.mjs

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

package/color-picker/color-picker-eye-dropper-trigger.cjs

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerEyeDropperTrigger = props => {
-  const colorPicker = colorPickerContext.useColorPickerContext();
-  const triggerProps = solid.mergeProps(() => colorPicker().eyeDropperTriggerProps, props);
-  return web.createComponent(factory.ark.button, triggerProps);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().eyeDropperTriggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;

package/color-picker/color-picker-eye-dropper-trigger.d.ts

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

package/color-picker/color-picker-eye-dropper-trigger.mjs

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerEyeDropperTrigger = props => {
-  const colorPicker = useColorPickerContext();
-  const triggerProps = mergeProps(() => colorPicker().eyeDropperTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().eyeDropperTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 export { ColorPickerEyeDropperTrigger };

package/color-picker/color-picker-label.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 colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerLabel = props => {
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, mergedProps);
+};
+
+exports.ColorPickerLabel = ColorPickerLabel;

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

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

package/color-picker/color-picker-label.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerLabel = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+export { ColorPickerLabel };

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

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

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

package/color-picker/color-picker-positioner.mjs

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

package/color-picker/color-picker-swatch-group.cjs

@@ -5,11 +5,12 @@ 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 colorPicker_anatomy = require('./color-picker.anatomy.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerSwatchGroup = props => {
-  const groupProps = solid.mergeProps(colorPicker_anatomy.parts.swatchGroup.attrs, props);
-  return web.createComponent(factory.ark.div, groupProps);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().swatchGroupProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;

package/color-picker/color-picker-swatch-group.d.ts

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

package/color-picker/color-picker-swatch-group.mjs

@@ -1,11 +1,12 @@
 import { createComponent } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
-import { parts } from './color-picker.anatomy.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerSwatchGroup = props => {
-  const groupProps = mergeProps(parts.swatchGroup.attrs, props);
-  return createComponent(ark.div, groupProps);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().swatchGroupProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { ColorPickerSwatchGroup };

package/color-picker/color-picker-swatch-trigger.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 colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerSwatchTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.ColorPickerSwatchTrigger = ColorPickerSwatchTrigger;

package/color-picker/color-picker-swatch-trigger.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'solid-js';
+import type { Color } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+interface SwatchTriggerProps {
+    value: string | Color;
+}
+export interface ColorPickerSwatchTriggerProps extends Assign<HTMLArkProps<'button'>, SwatchTriggerProps> {
+}
+export declare const ColorPickerSwatchTrigger: (props: ColorPickerSwatchTriggerProps) => JSX.Element;
+export {};

package/color-picker/color-picker-swatch-trigger.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 { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerSwatchTrigger = props => {
+  const [triggerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { ColorPickerSwatchTrigger };

package/color-picker/color-picker-swatch.cjs

@@ -7,22 +7,12 @@ const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
-const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 
 const ColorPickerSwatch = props => {
-  const [colorSwatchProps, localProps] = createSplitProps.createSplitProps()(props, ['readOnly', 'value']);
+  const [colorSwatchProps, localProps] = createSplitProps.createSplitProps()(props, ['respectAlpha', 'value']);
   const api = colorPickerContext.useColorPickerContext();
   const mergedProps = solid.mergeProps(() => api().getSwatchProps(colorSwatchProps), localProps);
-  return web.createComponent(colorPickerSwatchContext.ColorPickerSwatchProvider, {
-    value: colorSwatchProps,
-    get children() {
-      return web.createComponent(factory.ark.button, web.mergeProps(mergedProps, {
-        get disabled() {
-          return colorSwatchProps.readOnly;
-        }
-      }));
-    }
-  });
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.ColorPickerSwatch = ColorPickerSwatch;

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

@@ -1,6 +1,7 @@
 import { JSX } from 'solid-js';
-import type { ColorSwatchProps } from '@zag-js/color-picker';
+import type { SwatchProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerSwatchProps = Assign<HTMLArkProps<'button'>, ColorSwatchProps>;
+export interface ColorPickerSwatchProps extends Assign<HTMLArkProps<'div'>, SwatchProps> {
+}
 export declare const ColorPickerSwatch: (props: ColorPickerSwatchProps) => JSX.Element;

package/color-picker/color-picker-swatch.mjs

@@ -1,24 +1,14 @@
-import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+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 { useColorPickerContext } from './color-picker-context.mjs';
-import { ColorPickerSwatchProvider } from './color-picker-swatch-context.mjs';
 
 const ColorPickerSwatch = props => {
-  const [colorSwatchProps, localProps] = createSplitProps()(props, ['readOnly', 'value']);
+  const [colorSwatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
   const api = useColorPickerContext();
   const mergedProps = mergeProps(() => api().getSwatchProps(colorSwatchProps), localProps);
-  return createComponent(ColorPickerSwatchProvider, {
-    value: colorSwatchProps,
-    get children() {
-      return createComponent(ark.button, mergeProps$1(mergedProps, {
-        get disabled() {
-          return colorSwatchProps.readOnly;
-        }
-      }));
-    }
-  });
+  return createComponent(ark.div, mergedProps);
 };
 
 export { ColorPickerSwatch };

package/color-picker/{color-picker-swatch-background.cjs → color-picker-transparency-grid.cjs}

@@ -4,15 +4,15 @@ 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 colorPickerContext = require('./color-picker-context.cjs');
-const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 
-const ColorPickerSwatchBackground = props => {
+const ColorPickerTransparencyGrid = props => {
+  const [gridProps, localProps] = createSplitProps.createSplitProps()(props, ['size']);
   const api = colorPickerContext.useColorPickerContext();
-  const colorChannelProps = colorPickerSwatchContext.useColorPickerSwatchContext();
-  const mergedProps = solid.mergeProps(api().getSwatchBackgroundProps(colorChannelProps), props);
+  const mergedProps = solid.mergeProps(() => api().getTransparencyGridProps(gridProps), localProps);
   return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.ColorPickerSwatchBackground = ColorPickerSwatchBackground;
+exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;

package/color-picker/color-picker-transparency-grid.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+interface TransparancyGridProps {
+    size: string;
+}
+export interface ColorPickerTransparencyGridPrps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
+}
+export declare const ColorPickerTransparencyGrid: (props: ColorPickerTransparencyGridPrps) => JSX.Element;
+export {};

package/color-picker/color-picker-transparency-grid.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 { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerTransparencyGrid = props => {
+  const [gridProps, localProps] = createSplitProps()(props, ['size']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getTransparencyGridProps(gridProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { ColorPickerTransparencyGrid };

package/color-picker/color-picker-trigger.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 colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerTrigger = props => {
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.ColorPickerTrigger = ColorPickerTrigger;

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

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

package/color-picker/color-picker-trigger.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerTrigger = props => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { ColorPickerTrigger };

package/color-picker/color-picker.cjs

@@ -3,19 +3,31 @@
 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 runIfFn = require('../run-if-fn.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const ColorPicker = props => {
-  const [useColorPickerProps, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
-  const api = useColorPicker.useColorPicker(useColorPickerProps);
-  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
+  const [colorPickerProps, localProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const api = useColorPicker.useColorPicker(colorPickerProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   return web.createComponent(colorPickerContext.ColorPickerProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return [web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      })), (() => {
+        const _el$ = _tmpl$();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };