@ark-ui/solid/dist/chunk/RDUJFJ2K.js

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

import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext } from './SIT3D7TL.js';
import { useFieldContext } from './VJ2ZFW6U.js';
import { composeRefs } from './ROP6QZQ7.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import * as colorPicker from '@zag-js/color-picker';
import { anatomy } from '@zag-js/color-picker';
export { parse } from '@zag-js/color-picker';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Show, createMemo, Index, createUniqueId } from 'solid-js';

// 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 createComponent(ColorPickerAreaPropsProvider, {
    value: channelProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ColorPickerAreaBackground = (props) => {
  const api = useColorPickerContext();
  const areaProps = useColorPickerAreaPropsContext();
  const mergedProps = mergeProps(() => api().getAreaBackgroundProps(areaProps), props);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerAreaThumb = (props) => {
  const api = useColorPickerContext();
  const areaProps = useColorPickerAreaPropsContext();
  const mergedProps = mergeProps(() => api().getAreaThumbProps(areaProps), props);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerChannelInput = (props) => {
  const [channelProps, inputProps] = createSplitProps()(props, ["channel", "orientation"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getChannelInputProps(channelProps), inputProps);
  return createComponent(ark.input, mergedProps);
};

// 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 = mergeProps(channelProps, formatProps);
  const mergedProps = mergeProps(() => api().getChannelSliderProps(channelSliderProps), localProps);
  return createComponent(ColorPickerChannelPropsProvider, {
    value: channelProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ColorPickerChannelSliderLabel = (props) => {
  const colorPicker2 = useColorPickerContext();
  const channelProps = useColorPickerChannelPropsContext();
  const mergedProps = mergeProps(() => colorPicker2().getChannelSliderLabelProps(channelProps), props);
  return createComponent(ark.label, mergedProps);
};
var ColorPickerChannelSliderThumb = (props) => {
  const api = useColorPickerContext();
  const formatProps = useColorPickerFormatPropsContext();
  const channelProps = useColorPickerChannelPropsContext();
  const channelSliderProps = mergeProps(channelProps, formatProps);
  const mergedProps = mergeProps(() => api().getChannelSliderThumbProps(channelSliderProps), props);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerChannelSliderTrack = (props) => {
  const api = useColorPickerContext();
  const formatProps = useColorPickerFormatPropsContext();
  const channelProps = useColorPickerChannelPropsContext();
  const channelSliderProps = mergeProps(channelProps, formatProps);
  const mergedProps = mergeProps(() => api().getChannelSliderTrackProps(channelSliderProps), props);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerChannelSliderValueText = (props) => {
  const colorPicker2 = useColorPickerContext();
  const localeContext = useLocaleContext();
  const channelProps = useColorPickerChannelPropsContext();
  const mergedProps = mergeProps(() => colorPicker2().getChannelSliderValueTextProps(channelProps), props);
  return createComponent(ark.span, mergeProps$1(mergedProps, {
    get children() {
      return props.children || colorPicker2().getChannelValueText(channelProps.channel, localeContext().locale);
    }
  }));
};
var ColorPickerContent = (props) => {
  const api = useColorPickerContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presenceApi().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};

// src/components/color-picker/color-picker-context.tsx
var ColorPickerContext = (props) => props.children(useColorPickerContext());
var ColorPickerControl = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getControlProps(), props);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerEyeDropperTrigger = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getEyeDropperTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var ColorPickerFormatSelect = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getFormatSelectProps(), props);
  return createComponent(ark.select, mergeProps$1(mergedProps, {
    get children() {
      return createComponent(Index, {
        each: ["rgba", "hsla", "hsba"],
        children: (format) => createComponent(ark.option, {
          get value() {
            return format();
          },
          get children() {
            return format();
          }
        })
      });
    }
  }));
};
var ColorPickerFormatTrigger = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getFormatTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var ColorPickerHiddenInput = (props) => {
  const colorPicker2 = useColorPickerContext();
  const mergedProps = mergeProps(() => colorPicker2().getHiddenInputProps(), props);
  const field = useFieldContext();
  return createComponent(ark.input, mergeProps$1({
    get ["aria-describedby"]() {
      return field?.().ariaDescribedby;
    }
  }, mergedProps));
};
var ColorPickerLabel = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getLabelProps(), props);
  return createComponent(ark.label, mergedProps);
};
var ColorPickerPositioner = (props) => {
  const api = useColorPickerContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getPositionerProps(), props);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
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(mergeProps(presenceProps, () => ({
    present: api().open
  })));
  const mergedProps = mergeProps(() => api().getRootProps(), localProps);
  return createComponent(ColorPickerProvider, {
    value: api,
    get children() {
      return createComponent(PresenceProvider, {
        value: apiPresence,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};
var ColorPickerRootProvider = (props) => {
  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
  const [{
    value: colorPicker2
  }, localProps] = createSplitProps()(colorPickerProps, ["value"]);
  const apiPresence = usePresence(mergeProps(presenceProps, () => ({
    present: colorPicker2().open
  })));
  const mergedProps = mergeProps(() => colorPicker2().getRootProps(), localProps);
  return createComponent(ColorPickerProvider, {
    value: colorPicker2,
    get children() {
      return createComponent(PresenceProvider, {
        value: apiPresence,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};

// 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 = mergeProps(() => api().getSwatchProps(swatchProps), localProps);
  return createComponent(ColorPickerSwatchPropsProvider, {
    value: swatchProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ColorPickerSwatchGroup = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getSwatchGroupProps(), props);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerSwatchIndicator = (props) => {
  const api = useColorPickerContext();
  const swatchProps = useColorPickerSwatchPropsContext();
  const mergedProps = mergeProps(() => api().getSwatchIndicatorProps(swatchProps), props);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerSwatchTrigger = (props) => {
  const [triggerProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
  return createComponent(ark.button, mergedProps);
};
var ColorPickerTransparencyGrid = (props) => {
  const [gridProps, localProps] = createSplitProps()(props, ["size"]);
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getTransparencyGridProps(gridProps), localProps);
  return createComponent(ark.div, mergedProps);
};
var ColorPickerTrigger = (props) => {
  const api = useColorPickerContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var ColorPickerValueSwatch = (props) => {
  const [{
    respectAlpha
  }, localProps] = createSplitProps()(props, ["respectAlpha"]);
  const colorPicker2 = useColorPickerContext();
  const swatchProps = createMemo(() => ({
    respectAlpha,
    value: colorPicker2().value
  }));
  const mergedProps = mergeProps(() => colorPicker2().getSwatchProps(swatchProps()), localProps);
  return createComponent(ColorPickerSwatchPropsProvider, {
    get value() {
      return swatchProps();
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ColorPickerValueText = (props) => {
  const colorPicker2 = useColorPickerContext();
  const [formatProps, localProps] = createSplitProps()(props, ["format"]);
  const mergedProps = mergeProps(() => colorPicker2().getValueTextProps(), localProps);
  const valueAsString = createMemo(() => formatProps.format ? colorPicker2().value.toString(formatProps.format) : colorPicker2().valueAsString);
  return createComponent(ark.span, mergeProps$1(mergedProps, {
    get children() {
      return props.children || valueAsString();
    }
  }));
};
var colorPickerAnatomy = anatomy.extendWith("view");

// src/components/color-picker/color-picker-view.tsx
var ColorPickerView = (props) => {
  const api = useColorPickerContext();
  const [formatProps, localProps] = createSplitProps()(props, ["format"]);
  const mergedProps = mergeProps(() => colorPickerAnatomy.build().view.attrs, localProps);
  return createComponent(ColorPickerFormatPropsProvider, {
    value: formatProps,
    get children() {
      return createComponent(Show, {
        get when() {
          return api().format === props.format;
        },
        get children() {
          return createComponent(ark.div, mergeProps$1({
            get ["data-format"]() {
              return props.format;
            }
          }, mergedProps));
        }
      });
    }
  });
};

// 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 { ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderLabel, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerChannelSliderValueText, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueSwatch, ColorPickerValueText, ColorPickerView, colorPickerAnatomy, color_picker_exports, useColorPicker, useColorPickerContext };