@ark-ui/solid 0.8.0 → 0.9.0

package/color-picker/color-picker-area-gradient.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 ColorPickerAreaGradient = props => {
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const area = colorPickerAreaContext.useColorPickerAreaContext();
+  const areaGradientProps = solid.mergeProps(() => colorPicker().getAreaGradientProps(area), props);
+  return web.createComponent(factory.ark.div, areaGradientProps);
+};
+
+exports.ColorPickerAreaGradient = ColorPickerAreaGradient;

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

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

package/color-picker/color-picker-area-gradient.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 ColorPickerAreaGradient = props => {
+  const colorPicker = useColorPickerContext();
+  const area = useColorPickerAreaContext();
+  const areaGradientProps = mergeProps(() => colorPicker().getAreaGradientProps(area), props);
+  return createComponent(ark.div, areaGradientProps);
+};
+
+export { ColorPickerAreaGradient };

package/color-picker/color-picker-area-thumb.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 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);
+};
+
+exports.ColorPickerAreaThumb = ColorPickerAreaThumb;

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

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

package/color-picker/color-picker-area-thumb.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 ColorPickerAreaThumb = props => {
+  const colorPicker = useColorPickerContext();
+  const area = useColorPickerAreaContext();
+  const areaThumbProps = mergeProps(() => colorPicker().getAreaThumbProps(area), props);
+  return createComponent(ark.div, areaThumbProps);
+};
+
+export { ColorPickerAreaThumb };

package/color-picker/color-picker-area.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 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);
+  return web.createComponent(colorPickerAreaContext.ColorPickerAreaProvider, {
+    value: colorAreaProps,
+    get children() {
+      return web.createComponent(factory.ark.div, areaProps);
+    }
+  });
+};
+
+exports.ColorPickerArea = ColorPickerArea;

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

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

package/color-picker/color-picker-area.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 { 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);
+  return createComponent(ColorPickerAreaProvider, {
+    value: colorAreaProps,
+    get children() {
+      return createComponent(ark.div, areaProps);
+    }
+  });
+};
+
+export { ColorPickerArea };

package/color-picker/color-picker-channel-input.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 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);
+};
+
+exports.ColorPickerChannelInput = ColorPickerChannelInput;

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

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

package/color-picker/color-picker-channel-input.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 ColorPickerChannelInput = props => {
+  const [channelProps, restProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const colorPicker = useColorPickerContext();
+  const channelInputProps = mergeProps(() => colorPicker().getChannelInputProps(channelProps), restProps);
+  return createComponent(ark.input, channelInputProps);
+};
+
+export { ColorPickerChannelInput };

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

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

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

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

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelSliderBackground = props => {
+  const api = useColorPickerContext();
+  const colorChannelProps = useColorPickerChannelSliderContext();
+  const mergedProps = mergeProps(api().getChannelSliderBackgroundProps(colorChannelProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { ColorPickerChannelSliderBackground };

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = createContext.createContext({
+  hookName: "useColorPickerChannelSliderContext",
+  providerName: "<ColorPickerChannelSliderProvider />"
+});
+
+exports.ColorPickerChannelSliderProvider = ColorPickerChannelSliderProvider;
+exports.useColorPickerChannelSliderContext = useColorPickerChannelSliderContext;

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

@@ -0,0 +1,3 @@
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import type { ColorChannelProps } from '@zag-js/color-picker';
+export declare const ColorPickerChannelSliderProvider: ContextProviderComponent<ColorChannelProps>, useColorPickerChannelSliderContext: () => ColorChannelProps;

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

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

package/color-picker/color-picker-channel-slider-thumb.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 colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerChannelSliderThumb = props => {
+  const api = colorPickerContext.useColorPickerContext();
+  const sliderProps = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
+  const thumbProps = solid.mergeProps(() => api().getChannelSliderThumbProps(sliderProps), props);
+  return web.createComponent(factory.ark.div, thumbProps);
+};
+
+exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;

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

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

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

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelSliderThumb = props => {
+  const api = useColorPickerContext();
+  const sliderProps = useColorPickerChannelSliderContext();
+  const thumbProps = mergeProps(() => api().getChannelSliderThumbProps(sliderProps), props);
+  return createComponent(ark.div, thumbProps);
+};
+
+export { ColorPickerChannelSliderThumb };

package/color-picker/color-picker-channel-slider-track.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 ColorPickerChannelSliderTrack = props => {
+  const [colorChannelProps, localProps] = createSplitProps.createSplitProps()(props, ['channel', 'orientation']);
+  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);
+    }
+  });
+};
+
+exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;

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

@@ -0,0 +1,6 @@
+import type { 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 declare const ColorPickerChannelSliderTrack: (props: ColorPickerChannelSliderTrackProps) => JSX.Element;

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

package/color-picker/color-picker-content.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 ColorPickerContent = props => {
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const contentProps = solid.mergeProps(() => colorPicker().contentProps, props);
+  return web.createComponent(factory.ark.div, contentProps);
+};
+
+exports.ColorPickerContent = ColorPickerContent;

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

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

package/color-picker/color-picker-content.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 ColorPickerContent = props => {
+  const colorPicker = useColorPickerContext();
+  const contentProps = mergeProps(() => colorPicker().contentProps, props);
+  return createComponent(ark.div, contentProps);
+};
+
+export { ColorPickerContent };

package/color-picker/color-picker-context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [ColorPickerProvider, useColorPickerContext] = createContext.createContext({
+  hookName: "useColorPickerContext",
+  providerName: "<ColorPickerProvider />"
+});
+
+exports.ColorPickerProvider = ColorPickerProvider;
+exports.useColorPickerContext = useColorPickerContext;

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

@@ -0,0 +1,7 @@
+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<PublicApi<PropTypes>>>, useColorPickerContext: () => Accessor<PublicApi<PropTypes>>;

package/color-picker/color-picker-context.mjs

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

package/color-picker/color-picker-eye-dropper-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 ColorPickerEyeDropperTrigger = props => {
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const triggerProps = solid.mergeProps(() => colorPicker().eyeDropperTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
+};
+
+exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;

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

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

package/color-picker/color-picker-eye-dropper-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 ColorPickerEyeDropperTrigger = props => {
+  const colorPicker = useColorPickerContext();
+  const triggerProps = mergeProps(() => colorPicker().eyeDropperTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+export { ColorPickerEyeDropperTrigger };

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext.createContext({
+  hookName: "useColorPickerSwatchContext",
+  providerName: "<ColorPickerSwatchProvider />"
+});
+
+exports.ColorPickerSwatchProvider = ColorPickerSwatchProvider;
+exports.useColorPickerSwatchContext = useColorPickerSwatchContext;

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

@@ -0,0 +1,3 @@
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import type { ColorSwatchProps } from '@zag-js/color-picker';
+export declare const ColorPickerSwatchProvider: ContextProviderComponent<ColorSwatchProps>, useColorPickerSwatchContext: () => ColorSwatchProps;

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

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

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

@@ -0,0 +1,15 @@
+'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 colorPicker_anatomy = require('./color-picker.anatomy.cjs');
+
+const ColorPickerSwatchGroup = props => {
+  const groupProps = solid.mergeProps(colorPicker_anatomy.parts.swatchGroup.attrs, props);
+  return web.createComponent(factory.ark.div, groupProps);
+};
+
+exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;

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

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

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

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

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

@@ -0,0 +1,28 @@
+'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 colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
+
+const ColorPickerSwatch = props => {
+  const [colorSwatchProps, localProps] = createSplitProps.createSplitProps()(props, ['readOnly', '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;
+        }
+      }));
+    }
+  });
+};
+
+exports.ColorPickerSwatch = ColorPickerSwatch;

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

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

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

@@ -0,0 +1,24 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { 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 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;
+        }
+      }));
+    }
+  });
+};
+
+export { ColorPickerSwatch };