@kobalte/core/dist/color-channel-field/index.js

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

import { parseColor } from '../chunk/MQHWXXI2.js';
import { NumberFieldHiddenInput, NumberFieldInput, NumberFieldIncrementTrigger, NumberFieldDecrementTrigger, NumberFieldRoot } from '../chunk/364BYRTW.js';
export { NumberFieldDecrementTrigger as DecrementTrigger, NumberFieldHiddenInput as HiddenInput, NumberFieldIncrementTrigger as IncrementTrigger, NumberFieldInput as Input } from '../chunk/364BYRTW.js';
import { FormControlLabel } from '../chunk/7ZHN3PYD.js';
export { FormControlLabel as Label } from '../chunk/7ZHN3PYD.js';
import { FormControlErrorMessage } from '../chunk/ICNSTULC.js';
export { FormControlErrorMessage as ErrorMessage } from '../chunk/ICNSTULC.js';
import { FormControlDescription } from '../chunk/YKGT7A57.js';
export { FormControlDescription as Description } from '../chunk/YKGT7A57.js';
import { createControllableSignal } from '../chunk/BLN63FDC.js';
import { createComponent, mergeProps, memo } from 'solid-js/web';
import { mergeDefaultProps, clamp } from '@kobalte/utils';
import { createUniqueId, splitProps, createMemo } from 'solid-js';

function ColorChannelFieldRoot(props) {
  const defaultId = `colorchannelfield-${createUniqueId()}`;
  const mergedProps = mergeDefaultProps({
    id: defaultId
  }, props);
  const [local, others] = splitProps(mergedProps, ["value", "defaultValue", "onChange", "channel", "colorSpace"]);
  const [value, setValue] = createControllableSignal({
    value: () => local.value,
    defaultValue: () => local.defaultValue ?? parseColor("hsl(0, 100%, 50%)"),
    onChange: (value2) => local.onChange?.(value2)
  });
  const color = createMemo(() => local.colorSpace ? value().toFormat(local.colorSpace) : value());
  const range = createMemo(() => color().getChannelRange(local.channel));
  const formatOptions = createMemo(() => color().getChannelFormatOptions(local.channel));
  const multiplier = createMemo(() => formatOptions().style === "percent" && range().maxValue === 100 ? 100 : 1);
  const onRawValueChange = (value2) => {
    if (Number.isNaN(value2)) {
      setValue(color().withChannelValue(local.channel, Number.NaN));
      return;
    }
    const clampedValue = clamp(value2 * multiplier(), range().minValue, range().maxValue);
    const digits = formatOptions().maximumFractionDigits ?? 0;
    const roundedValue = Math.round(clampedValue * 10 ** digits) / 10 ** digits;
    setValue(color().withChannelValue(local.channel, roundedValue));
  };
  return createComponent(NumberFieldRoot, mergeProps({
    get rawValue() {
      return memo(() => !!Number.isNaN(color().getChannelValue(local.channel)))() ? void 0 : color().getChannelValue(local.channel) / multiplier();
    },
    get minValue() {
      return range().minValue / multiplier();
    },
    get maxValue() {
      return range().maxValue / multiplier();
    },
    get step() {
      return range().step / multiplier();
    },
    get formatOptions() {
      return formatOptions();
    },
    onRawValueChange
  }, others));
}

// src/color-channel-field/index.tsx
var ColorChannelField = Object.assign(ColorChannelFieldRoot, {
  Description: FormControlDescription,
  ErrorMessage: FormControlErrorMessage,
  HiddenInput: NumberFieldHiddenInput,
  Input: NumberFieldInput,
  IncrementTrigger: NumberFieldIncrementTrigger,
  DecrementTrigger: NumberFieldDecrementTrigger,
  Label: FormControlLabel
});

export { ColorChannelField, ColorChannelFieldRoot as Root };