@ark-ui/solid/dist/chunk/JNBFQ7ZP.jsx

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

import {
  useFieldContext
} from "./7HLG62OR.jsx";
import {
  colorPickerAnatomy
} from "./4ZHXHGFF.jsx";
import {
  PresenceProvider,
  splitPresenceProps,
  usePresence,
  usePresenceContext
} from "./2P5Y3YCK.jsx";
import {
  composeRefs
} from "./PT2CJE3O.jsx";
import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  ark
} from "./UFYZ7HLU.jsx";
import {
  useEnvironmentContext
} from "./CGW54HAQ.jsx";
import {
  useLocaleContext
} from "./JFOWNFC7.jsx";
import {
  runIfFn
} from "./KGOB2IMX.jsx";
import {
  createContext
} from "./UZJJWJQM.jsx";
import {
  __export
} from "./7IUG3E2V.jsx";

// src/components/color-picker/index.tsx
import { parse } from "@zag-js/color-picker";

// src/components/color-picker/color-picker-area.tsx
import { mergeProps } from "@zag-js/solid";

// src/components/color-picker/use-color-picker-area-props-context.ts
var [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext({
  hookName: "useColorPickerAreaContext",
  providerName: "<ColorPickerAreaProvider />"
});

// src/components/color-picker/use-color-picker-context.ts
var [ColorPickerProvider, useColorPickerContext] = createContext({
  hookName: "useColorPickerContext",
  providerName: "<ColorPickerProvider />"
});

// src/components/color-picker/color-picker-area.tsx
var ColorPickerArea = (props) => {
  const [channelProps, divprops] = createSplitProps()(props, ["xChannel", "yChannel"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getAreaProps(channelProps), divprops);
  return <ColorPickerAreaPropsProvider value={channelProps}>
      <ark.div {...mergedProps} />
    </ColorPickerAreaPropsProvider>;
};

// src/components/color-picker/color-picker-area-background.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var ColorPickerAreaBackground = (props) => {
  const api = useColorPickerContext();
  const areaProps = useColorPickerAreaPropsContext();
  const mergedProps = mergeProps2(() => api().getAreaBackgroundProps(areaProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-area-thumb.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var ColorPickerAreaThumb = (props) => {
  const api = useColorPickerContext();
  const areaProps = useColorPickerAreaPropsContext();
  const mergedProps = mergeProps3(() => api().getAreaThumbProps(areaProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-channel-input.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var ColorPickerChannelInput = (props) => {
  const [channelProps, inputProps] = createSplitProps()(props, ["channel", "orientation"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps4(() => api().getChannelInputProps(channelProps), inputProps);
  return <ark.input {...mergedProps} />;
};

// src/components/color-picker/color-picker-channel-slider.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";

// src/components/color-picker/use-color-picker-channel-props-context.ts
var [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext({
  hookName: "useColorPickerChannelSliderContext",
  providerName: "<ColorPickerChannelSliderProvider />"
});

// src/components/color-picker/use-color-picker-format-context.ts
var [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext({
  hookName: "useColorPickerFormatPropsContext",
  providerName: "<ColorPickerFormatPropsProvider />",
  strict: false
});

// src/components/color-picker/color-picker-channel-slider.tsx
var ColorPickerChannelSlider = (props) => {
  const [channelProps, localProps] = createSplitProps()(props, ["channel", "orientation"]);
  const api = useColorPickerContext();
  const formatProps = useColorPickerFormatPropsContext();
  const channelSliderProps = mergeProps5(channelProps, formatProps);
  const mergedProps = mergeProps5(() => api().getChannelSliderProps(channelSliderProps), localProps);
  return <ColorPickerChannelPropsProvider value={channelProps}>
      <ark.div {...mergedProps} />
    </ColorPickerChannelPropsProvider>;
};

// src/components/color-picker/color-picker-channel-slider-label.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var ColorPickerChannelSliderLabel = (props) => {
  const colorPicker2 = useColorPickerContext();
  const channelProps = useColorPickerChannelPropsContext();
  const mergedProps = mergeProps6(() => colorPicker2().getChannelSliderLabelProps(channelProps), props);
  return <ark.label {...mergedProps} />;
};

// src/components/color-picker/color-picker-channel-slider-thumb.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var ColorPickerChannelSliderThumb = (props) => {
  const api = useColorPickerContext();
  const formatProps = useColorPickerFormatPropsContext();
  const channelProps = useColorPickerChannelPropsContext();
  const channelSliderProps = mergeProps7(channelProps, formatProps);
  const mergedProps = mergeProps7(() => api().getChannelSliderThumbProps(channelSliderProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-channel-slider-track.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
var ColorPickerChannelSliderTrack = (props) => {
  const api = useColorPickerContext();
  const formatProps = useColorPickerFormatPropsContext();
  const channelProps = useColorPickerChannelPropsContext();
  const channelSliderProps = mergeProps8(channelProps, formatProps);
  const mergedProps = mergeProps8(() => api().getChannelSliderTrackProps(channelSliderProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-channel-slider-value-text.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
var ColorPickerChannelSliderValueText = (props) => {
  const colorPicker2 = useColorPickerContext();
  const localeContext = useLocaleContext();
  const channelProps = useColorPickerChannelPropsContext();
  const mergedProps = mergeProps9(() => colorPicker2().getChannelSliderValueTextProps(channelProps), props);
  return <ark.span {...mergedProps}>
      {props.children || colorPicker2().getChannelValueText(channelProps.channel, localeContext().locale)}
    </ark.span>;
};

// src/components/color-picker/color-picker-content.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
import { Show } from "solid-js";
var ColorPickerContent = (props) => {
  const api = useColorPickerContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps10(
    () => api().getContentProps(),
    () => presenceApi().presenceProps,
    props
  );
  return <Show when={!presenceApi().unmounted}>
      <ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} />
    </Show>;
};

// src/components/color-picker/color-picker-context.tsx
var ColorPickerContext = (props) => props.children(useColorPickerContext());

// src/components/color-picker/color-picker-control.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
var ColorPickerControl = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps11(() => api().getControlProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-eye-dropper-trigger.tsx
import { mergeProps as mergeProps12 } from "@zag-js/solid";
var ColorPickerEyeDropperTrigger = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps12(() => api().getEyeDropperTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/color-picker/color-picker-format-select.tsx
import { mergeProps as mergeProps13 } from "@zag-js/solid";
import { Index } from "solid-js";
var ColorPickerFormatSelect = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps13(() => api().getFormatSelectProps(), props);
  return <ark.select {...mergedProps}>
      <Index each={["rgba", "hsla", "hsba"]}>{(format) => <ark.option value={format()}>{format()}</ark.option>}</Index>
    </ark.select>;
};

// src/components/color-picker/color-picker-format-trigger.tsx
import { mergeProps as mergeProps14 } from "@zag-js/solid";
var ColorPickerFormatTrigger = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps14(() => api().getFormatTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/color-picker/color-picker-hidden-input.tsx
import { mergeProps as mergeProps15 } from "@zag-js/solid";
var ColorPickerHiddenInput = (props) => {
  const colorPicker2 = useColorPickerContext();
  const mergedProps = mergeProps15(() => colorPicker2().getHiddenInputProps(), props);
  const field = useFieldContext();
  return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
};

// src/components/color-picker/color-picker-label.tsx
import { mergeProps as mergeProps16 } from "@zag-js/solid";
var ColorPickerLabel = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps16(() => api().getLabelProps(), props);
  return <ark.label {...mergedProps} />;
};

// src/components/color-picker/color-picker-positioner.tsx
import { mergeProps as mergeProps17 } from "@zag-js/solid";
import { Show as Show2 } from "solid-js";
var ColorPickerPositioner = (props) => {
  const api = useColorPickerContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps17(() => api().getPositionerProps(), props);
  return <Show2 when={!presenceApi().unmounted}>
      <ark.div {...mergedProps} />
    </Show2>;
};

// src/components/color-picker/color-picker-root.tsx
import { mergeProps as mergeProps18 } from "@zag-js/solid";

// src/components/color-picker/use-color-picker.ts
import * as colorPicker from "@zag-js/color-picker";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo, createUniqueId } from "solid-js";
var useColorPicker = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const field = useFieldContext();
  const machineProps = createMemo(() => ({
    id,
    ids: {
      label: field?.().ids.label,
      input: field?.().ids.control
    },
    dir: locale().dir,
    disabled: field?.().disabled,
    invalid: field?.().invalid,
    readOnly: field?.().readOnly,
    required: field?.().required,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(colorPicker.machine, machineProps);
  return createMemo(() => colorPicker.connect(service, normalizeProps));
};

// src/components/color-picker/color-picker-root.tsx
var ColorPickerRoot = (props) => {
  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
    "closeOnSelect",
    "defaultOpen",
    "defaultValue",
    "defaultFormat",
    "disabled",
    "format",
    "id",
    "ids",
    "initialFocusEl",
    "invalid",
    "name",
    "name",
    "onFocusOutside",
    "onFormatChange",
    "onInteractOutside",
    "onOpenChange",
    "onPointerDownOutside",
    "onValueChange",
    "onValueChangeEnd",
    "open",
    "openAutoFocus",
    "positioning",
    "readOnly",
    "required",
    "inline",
    "value"
  ]);
  const api = useColorPicker(useColorPickerProps);
  const apiPresence = usePresence(mergeProps18(presenceProps, () => ({ present: api().open })));
  const mergedProps = mergeProps18(() => api().getRootProps(), localProps);
  return <ColorPickerProvider value={api}>
      <PresenceProvider value={apiPresence}>
        <ark.div {...mergedProps} />
      </PresenceProvider>
    </ColorPickerProvider>;
};

// src/components/color-picker/color-picker-root-provider.tsx
import { mergeProps as mergeProps19 } from "@zag-js/solid";
var ColorPickerRootProvider = (props) => {
  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
  const [{ value: colorPicker2 }, localProps] = createSplitProps()(colorPickerProps, ["value"]);
  const apiPresence = usePresence(mergeProps19(presenceProps, () => ({ present: colorPicker2().open })));
  const mergedProps = mergeProps19(() => colorPicker2().getRootProps(), localProps);
  return <ColorPickerProvider value={colorPicker2}>
      <PresenceProvider value={apiPresence}>
        <ark.div {...mergedProps} />
      </PresenceProvider>
    </ColorPickerProvider>;
};

// src/components/color-picker/color-picker-swatch.tsx
import { mergeProps as mergeProps20 } from "@zag-js/solid";

// src/components/color-picker/use-color-picker-swatch-props-context.ts
var [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
  hookName: "useColorPickerSwatchContext",
  providerName: "<ColorPickerSwatchProvider />"
});

// src/components/color-picker/color-picker-swatch.tsx
var ColorPickerSwatch = (props) => {
  const [swatchProps, localProps] = createSplitProps()(props, ["respectAlpha", "value"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps20(() => api().getSwatchProps(swatchProps), localProps);
  return <ColorPickerSwatchPropsProvider value={swatchProps}>
      <ark.div {...mergedProps} />
    </ColorPickerSwatchPropsProvider>;
};

// src/components/color-picker/color-picker-swatch-group.tsx
import { mergeProps as mergeProps21 } from "@zag-js/solid";
var ColorPickerSwatchGroup = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps21(() => api().getSwatchGroupProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-swatch-indicator.tsx
import { mergeProps as mergeProps22 } from "@zag-js/solid";
var ColorPickerSwatchIndicator = (props) => {
  const api = useColorPickerContext();
  const swatchProps = useColorPickerSwatchPropsContext();
  const mergedProps = mergeProps22(() => api().getSwatchIndicatorProps(swatchProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-swatch-trigger.tsx
import { mergeProps as mergeProps23 } from "@zag-js/solid";
var ColorPickerSwatchTrigger = (props) => {
  const [triggerProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps23(() => api().getSwatchTriggerProps(triggerProps), localProps);
  return <ark.button {...mergedProps} />;
};

// src/components/color-picker/color-picker-transparency-grid.tsx
import { mergeProps as mergeProps24 } from "@zag-js/solid";
var ColorPickerTransparencyGrid = (props) => {
  const [gridProps, localProps] = createSplitProps()(props, ["size"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps24(() => api().getTransparencyGridProps(gridProps), localProps);
  return <ark.div {...mergedProps} />;
};

// src/components/color-picker/color-picker-trigger.tsx
import { mergeProps as mergeProps25 } from "@zag-js/solid";
var ColorPickerTrigger = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps25(() => api().getTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/color-picker/color-picker-value-swatch.tsx
import { mergeProps as mergeProps26 } from "@zag-js/solid";
import { createMemo as createMemo2 } from "solid-js";
var ColorPickerValueSwatch = (props) => {
  const [{ respectAlpha }, localProps] = createSplitProps()(props, ["respectAlpha"]);
  const colorPicker2 = useColorPickerContext();
  const swatchProps = createMemo2(() => ({
    respectAlpha,
    value: colorPicker2().value
  }));
  const mergedProps = mergeProps26(() => colorPicker2().getSwatchProps(swatchProps()), localProps);
  return <ColorPickerSwatchPropsProvider value={swatchProps()}>
      <ark.div {...mergedProps} />
    </ColorPickerSwatchPropsProvider>;
};

// src/components/color-picker/color-picker-value-text.tsx
import { mergeProps as mergeProps27 } from "@zag-js/solid";
import { createMemo as createMemo3 } from "solid-js";
var ColorPickerValueText = (props) => {
  const colorPicker2 = useColorPickerContext();
  const [formatProps, localProps] = createSplitProps()(props, ["format"]);
  const mergedProps = mergeProps27(() => colorPicker2().getValueTextProps(), localProps);
  const valueAsString = createMemo3(
    () => formatProps.format ? colorPicker2().value.toString(formatProps.format) : colorPicker2().valueAsString
  );
  return <ark.span {...mergedProps}>{props.children || valueAsString()}</ark.span>;
};

// src/components/color-picker/color-picker-view.tsx
import { mergeProps as mergeProps28 } from "@zag-js/solid";
import { Show as Show3 } from "solid-js";
var ColorPickerView = (props) => {
  const api = useColorPickerContext();
  const [formatProps, localProps] = createSplitProps()(props, ["format"]);
  const mergedProps = mergeProps28(() => colorPickerAnatomy.build().view.attrs, localProps);
  return <ColorPickerFormatPropsProvider value={formatProps}>
      <Show3 when={api().format === props.format}>
        <ark.div data-format={props.format} {...mergedProps} />
      </Show3>
    </ColorPickerFormatPropsProvider>;
};

// src/components/color-picker/color-picker.ts
var color_picker_exports = {};
__export(color_picker_exports, {
  Area: () => ColorPickerArea,
  AreaBackground: () => ColorPickerAreaBackground,
  AreaThumb: () => ColorPickerAreaThumb,
  ChannelInput: () => ColorPickerChannelInput,
  ChannelSlider: () => ColorPickerChannelSlider,
  ChannelSliderLabel: () => ColorPickerChannelSliderLabel,
  ChannelSliderThumb: () => ColorPickerChannelSliderThumb,
  ChannelSliderTrack: () => ColorPickerChannelSliderTrack,
  ChannelSliderValueText: () => ColorPickerChannelSliderValueText,
  Content: () => ColorPickerContent,
  Context: () => ColorPickerContext,
  Control: () => ColorPickerControl,
  EyeDropperTrigger: () => ColorPickerEyeDropperTrigger,
  FormatSelect: () => ColorPickerFormatSelect,
  FormatTrigger: () => ColorPickerFormatTrigger,
  HiddenInput: () => ColorPickerHiddenInput,
  Label: () => ColorPickerLabel,
  Positioner: () => ColorPickerPositioner,
  Root: () => ColorPickerRoot,
  RootProvider: () => ColorPickerRootProvider,
  Swatch: () => ColorPickerSwatch,
  SwatchGroup: () => ColorPickerSwatchGroup,
  SwatchIndicator: () => ColorPickerSwatchIndicator,
  SwatchTrigger: () => ColorPickerSwatchTrigger,
  TransparencyGrid: () => ColorPickerTransparencyGrid,
  Trigger: () => ColorPickerTrigger,
  ValueSwatch: () => ColorPickerValueSwatch,
  ValueText: () => ColorPickerValueText,
  View: () => ColorPickerView
});

export {
  useColorPickerContext,
  ColorPickerArea,
  ColorPickerAreaBackground,
  ColorPickerAreaThumb,
  ColorPickerChannelInput,
  ColorPickerChannelSlider,
  ColorPickerChannelSliderLabel,
  ColorPickerChannelSliderThumb,
  ColorPickerChannelSliderTrack,
  ColorPickerChannelSliderValueText,
  ColorPickerContent,
  ColorPickerContext,
  ColorPickerControl,
  ColorPickerEyeDropperTrigger,
  ColorPickerFormatSelect,
  ColorPickerFormatTrigger,
  ColorPickerHiddenInput,
  ColorPickerLabel,
  ColorPickerPositioner,
  useColorPicker,
  ColorPickerRoot,
  ColorPickerRootProvider,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchIndicator,
  ColorPickerSwatchTrigger,
  ColorPickerTransparencyGrid,
  ColorPickerTrigger,
  ColorPickerValueSwatch,
  ColorPickerValueText,
  ColorPickerView,
  color_picker_exports,
  parse
};