@ark-ui/solid 0.8.0 → 0.8.1

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

@@ -0,0 +1,45 @@
+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 { 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>;
+}>;

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 };

package/color-picker/color-picker.anatomy.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const colorPicker = require('@zag-js/color-picker');
+
+const colorPickerAnatomy = colorPicker.anatomy.extendWith("swatchGroup");
+const parts = colorPickerAnatomy.build();
+
+exports.colorPickerAnatomy = colorPickerAnatomy;
+exports.parts = parts;

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

@@ -0,0 +1,3 @@
+import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup">;
+export declare const parts: Record<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup", AnatomyPart>;

package/color-picker/color-picker.anatomy.mjs

@@ -0,0 +1,6 @@
+import { anatomy } from '@zag-js/color-picker';
+
+const colorPickerAnatomy = anatomy.extendWith("swatchGroup");
+const parts = colorPickerAnatomy.build();
+
+export { colorPickerAnatomy, parts };

package/color-picker/color-picker.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const createSplitProps = require('../create-split-props.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+const useColorPicker = require('./use-color-picker.cjs');
+
+const ColorPicker = props => {
+  const [useColorPickerProps, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
+  const api = useColorPicker.useColorPicker(useColorPickerProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
+  return web.createComponent(colorPickerContext.ColorPickerProvider, {
+    value: api,
+    get children() {
+      return getChildren();
+    }
+  });
+};
+
+exports.ColorPicker = ColorPicker;

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

@@ -0,0 +1,8 @@
+import { type JSX } from 'solid-js';
+import type { HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
+export type ColorPickerProps = Assign<HTMLArkProps<'div'>, UseColorPickerProps & {
+    children?: JSX.Element | ((state: UseColorPickerReturn) => JSX.Element);
+}>;
+export declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;

package/color-picker/color-picker.mjs

@@ -0,0 +1,19 @@
+import { createComponent } from 'solid-js/web';
+import { createSplitProps } from '../create-split-props.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { ColorPickerProvider } from './color-picker-context.mjs';
+import { useColorPicker } from './use-color-picker.mjs';
+
+const ColorPicker = props => {
+  const [useColorPickerProps, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
+  const api = useColorPicker(useColorPickerProps);
+  const getChildren = () => runIfFn(restProps.children, api);
+  return createComponent(ColorPickerProvider, {
+    value: api,
+    get children() {
+      return getChildren();
+    }
+  });
+};
+
+export { ColorPicker };

package/color-picker/index.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const colorPicker = require('./color-picker.cjs');
+const colorPickerArea = require('./color-picker-area.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');
+const colorPickerChannelSliderBackground = require('./color-picker-channel-slider-background.cjs');
+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 colorPickerEyeDropperTrigger = require('./color-picker-eye-dropper-trigger.cjs');
+const colorPickerSwatch = require('./color-picker-swatch.cjs');
+const colorPickerSwatchBackground = require('./color-picker-swatch-background.cjs');
+const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
+const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
+
+
+
+exports.ColorPicker = colorPicker.ColorPicker;
+exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
+exports.ColorPickerAreaGradient = colorPickerAreaGradient.ColorPickerAreaGradient;
+exports.ColorPickerAreaThumb = colorPickerAreaThumb.ColorPickerAreaThumb;
+exports.ColorPickerChannelInput = colorPickerChannelInput.ColorPickerChannelInput;
+exports.ColorPickerChannelSliderBackground = colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground;
+exports.ColorPickerChannelSliderThumb = colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb;
+exports.ColorPickerChannelSliderTrack = colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack;
+exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
+exports.ColorPickerEyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
+exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
+exports.ColorPickerSwatchBackground = colorPickerSwatchBackground.ColorPickerSwatchBackground;
+exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
+exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;

package/color-picker/index.d.ts

@@ -0,0 +1,14 @@
+export { ColorPicker, type ColorPickerProps } from './color-picker';
+export { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
+export { ColorPickerAreaGradient, type ColorPickerAreaGradientProps, } from './color-picker-area-gradient';
+export { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
+export { ColorPickerChannelInput, type ColorPickerChannelInputProps, } from './color-picker-channel-input';
+export { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps, } from './color-picker-channel-slider-background';
+export { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps, } from './color-picker-channel-slider-thumb';
+export { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps, } from './color-picker-channel-slider-track';
+export { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
+export { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger';
+export { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
+export { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps, } from './color-picker-swatch-background';
+export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
+export { colorPickerAnatomy } from './color-picker.anatomy';

package/color-picker/index.mjs

@@ -0,0 +1,14 @@
+export { ColorPicker } from './color-picker.mjs';
+export { ColorPickerArea } from './color-picker-area.mjs';
+export { ColorPickerAreaGradient } from './color-picker-area-gradient.mjs';
+export { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
+export { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
+export { ColorPickerChannelSliderBackground } from './color-picker-channel-slider-background.mjs';
+export { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
+export { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
+export { ColorPickerContent } from './color-picker-content.mjs';
+export { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+export { ColorPickerSwatch } from './color-picker-swatch.mjs';
+export { ColorPickerSwatchBackground } from './color-picker-swatch-background.mjs';
+export { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
+export { colorPickerAnatomy } from './color-picker.anatomy.mjs';

package/color-picker/use-color-picker.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const colorPicker = require('@zag-js/color-picker');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker);
+
+const useColorPicker = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), { context });
+  return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.useColorPicker = useColorPicker;

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

@@ -0,0 +1,26 @@
+import type { ColorFormat, ColorChannelInputProps } from '@zag-js/color-picker/dist/color-picker.types';
+import type { Accessor, JSX } from 'solid-js';
+import * as colorPicker from '@zag-js/color-picker';
+import { type Optional } from '../types';
+export type UseColorPickerProps = Optional<colorPicker.Context, 'id'>;
+export type UseColorPickerReturn = ReturnType<typeof useColorPicker>;
+export declare const useColorPicker: (props: UseColorPickerProps) => Accessor<{
+    isDragging: boolean;
+    value: string;
+    valueAsColor: colorPicker.Color;
+    channels: [colorPicker.ColorChannel, colorPicker.ColorChannel, colorPicker.ColorChannel];
+    setColor(value: string | colorPicker.Color): void;
+    setChannelValue(channel: colorPicker.ColorChannel, value: number): void;
+    setFormat(format: ColorFormat): void;
+    contentProps: JSX.HTMLAttributes<any>;
+    getAreaProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
+    getAreaGradientProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
+    getAreaThumbProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
+    getChannelSliderTrackProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
+    getChannelSliderBackgroundProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
+    getChannelSliderThumbProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
+    getChannelInputProps(props: ColorChannelInputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
+    eyeDropperTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    getSwatchBackgroundProps(props: colorPicker.ColorSwatchProps): JSX.HTMLAttributes<any>;
+    getSwatchProps(props: colorPicker.ColorSwatchProps): JSX.HTMLAttributes<any>;
+}>;

package/color-picker/use-color-picker.mjs

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

package/combobox/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const combobox = require('./combobox.cjs');
+const comboboxContent = require('./combobox-content.cjs');
+const comboboxControl = require('./combobox-control.cjs');
+const comboboxInput = require('./combobox-input.cjs');
+const comboboxLabel = require('./combobox-label.cjs');
+const comboboxOption = require('./combobox-option.cjs');
+const comboboxPositioner = require('./combobox-positioner.cjs');
+const comboboxTrigger = require('./combobox-trigger.cjs');
+const combobox$1 = require('@zag-js/combobox');
+
+
+
+exports.Combobox = combobox.Combobox;
+exports.ComboboxContent = comboboxContent.ComboboxContent;
+exports.ComboboxControl = comboboxControl.ComboboxControl;
+exports.ComboboxInput = comboboxInput.ComboboxInput;
+exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
+exports.ComboboxOption = comboboxOption.ComboboxOption;
+exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
+exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
+Object.defineProperty(exports, 'comboboxAnatomy', {
+	enumerable: true,
+	get: () => combobox$1.anatomy
+});

package/combobox/index.mjs

@@ -0,0 +1,9 @@
+export { Combobox } from './combobox.mjs';
+export { ComboboxContent } from './combobox-content.mjs';
+export { ComboboxControl } from './combobox-control.mjs';
+export { ComboboxInput } from './combobox-input.mjs';
+export { ComboboxLabel } from './combobox-label.mjs';
+export { ComboboxOption } from './combobox-option.mjs';
+export { ComboboxPositioner } from './combobox-positioner.mjs';
+export { ComboboxTrigger } from './combobox-trigger.mjs';
+export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/date-picker/index.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const datePicker = require('./date-picker.cjs');
+const datePickerClearTrigger = require('./date-picker-clear-trigger.cjs');
+const datePickerColumnHeader = require('./date-picker-column-header.cjs');
+const datePickerContent = require('./date-picker-content.cjs');
+const datePickerControl = require('./date-picker-control.cjs');
+const datePickerDayCell = require('./date-picker-day-cell.cjs');
+const datePickerDayCellTrigger = require('./date-picker-day-cell-trigger.cjs');
+const datePickerGrid = require('./date-picker-grid.cjs');
+const datePickerInput = require('./date-picker-input.cjs');
+const datePickerMonthCell = require('./date-picker-month-cell.cjs');
+const datePickerMonthCellTrigger = require('./date-picker-month-cell-trigger.cjs');
+const datePickerMonthSelect = require('./date-picker-month-select.cjs');
+const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
+const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
+const datePickerRow = require('./date-picker-row.cjs');
+const datePickerRowGroup = require('./date-picker-row-group.cjs');
+const datePickerRowHeader = require('./date-picker-row-header.cjs');
+const datePickerTrigger = require('./date-picker-trigger.cjs');
+const datePickerViewTrigger = require('./date-picker-view-trigger.cjs');
+const datePickerYearCell = require('./date-picker-year-cell.cjs');
+const datePickerYearCellTrigger = require('./date-picker-year-cell-trigger.cjs');
+const datePickerYearSelect = require('./date-picker-year-select.cjs');
+const datePicker_anatomy = require('./date-picker.anatomy.cjs');
+
+
+
+exports.DatePicker = datePicker.DatePicker;
+exports.DatePickerClearTrigger = datePickerClearTrigger.DatePickerClearTrigger;
+exports.DatePickerColumnHeader = datePickerColumnHeader.DatePickerColumnHeader;
+exports.DatePickerContent = datePickerContent.DatePickerContent;
+exports.DatePickerControl = datePickerControl.DatePickerControl;
+exports.DatePickerDayCell = datePickerDayCell.DatePickerDayCell;
+exports.DatePickerDayCellTrigger = datePickerDayCellTrigger.DatePickerDayCellTrigger;
+exports.DatePickerGrid = datePickerGrid.DatePickerGrid;
+exports.DatePickerInput = datePickerInput.DatePickerInput;
+exports.DatePickerMonthCell = datePickerMonthCell.DatePickerMonthCell;
+exports.DatePickerMonthCellTrigger = datePickerMonthCellTrigger.DatePickerMonthCellTrigger;
+exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
+exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
+exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
+exports.DatePickerRow = datePickerRow.DatePickerRow;
+exports.DatePickerRowGroup = datePickerRowGroup.DatePickerRowGroup;
+exports.DatePickerRowHeader = datePickerRowHeader.DatePickerRowHeader;
+exports.DatePickerTrigger = datePickerTrigger.DatePickerTrigger;
+exports.DatePickerViewTrigger = datePickerViewTrigger.DatePickerViewTrigger;
+exports.DatePickerYearCell = datePickerYearCell.DatePickerYearCell;
+exports.DatePickerYearCellTrigger = datePickerYearCellTrigger.DatePickerYearCellTrigger;
+exports.DatePickerYearSelect = datePickerYearSelect.DatePickerYearSelect;
+exports.datePickerAnatomy = datePicker_anatomy.datePickerAnatomy;

package/date-picker/index.mjs

@@ -0,0 +1,23 @@
+export { DatePicker } from './date-picker.mjs';
+export { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';
+export { DatePickerColumnHeader } from './date-picker-column-header.mjs';
+export { DatePickerContent } from './date-picker-content.mjs';
+export { DatePickerControl } from './date-picker-control.mjs';
+export { DatePickerDayCell } from './date-picker-day-cell.mjs';
+export { DatePickerDayCellTrigger } from './date-picker-day-cell-trigger.mjs';
+export { DatePickerGrid } from './date-picker-grid.mjs';
+export { DatePickerInput } from './date-picker-input.mjs';
+export { DatePickerMonthCell } from './date-picker-month-cell.mjs';
+export { DatePickerMonthCellTrigger } from './date-picker-month-cell-trigger.mjs';
+export { DatePickerMonthSelect } from './date-picker-month-select.mjs';
+export { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
+export { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
+export { DatePickerRow } from './date-picker-row.mjs';
+export { DatePickerRowGroup } from './date-picker-row-group.mjs';
+export { DatePickerRowHeader } from './date-picker-row-header.mjs';
+export { DatePickerTrigger } from './date-picker-trigger.mjs';
+export { DatePickerViewTrigger } from './date-picker-view-trigger.mjs';
+export { DatePickerYearCell } from './date-picker-year-cell.mjs';
+export { DatePickerYearCellTrigger } from './date-picker-year-cell-trigger.mjs';
+export { DatePickerYearSelect } from './date-picker-year-select.mjs';
+export { datePickerAnatomy } from './date-picker.anatomy.mjs';