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

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

import {
  parseColor
} from "../chunk/MABDB67U.jsx";
import {
  NumberFieldDecrementTrigger,
  NumberFieldHiddenInput,
  NumberFieldIncrementTrigger,
  NumberFieldInput,
  NumberFieldRoot
} from "../chunk/DOJAEHTL.jsx";
import "../chunk/ZAGMEN2K.jsx";
import "../chunk/LR7LBJN3.jsx";
import "../chunk/JHMNWOLY.jsx";
import "../chunk/UKTBL2JL.jsx";
import "../chunk/NGHEENNE.jsx";
import {
  FormControlLabel
} from "../chunk/FOXVCQFV.jsx";
import "../chunk/QJIB6BDF.jsx";
import {
  FormControlErrorMessage
} from "../chunk/ZZYKR3VO.jsx";
import {
  FormControlDescription
} from "../chunk/XUUROM4M.jsx";
import "../chunk/JNCCF6MP.jsx";
import {
  createControllableSignal
} from "../chunk/FN6EICGO.jsx";
import "../chunk/OYES4GOP.jsx";
import "../chunk/FLVHQV4A.jsx";
import "../chunk/5WXHJDCZ.jsx";

// src/color-channel-field/color-channel-field-root.tsx
import { mergeDefaultProps } from "@kobalte/utils";
import {
  createMemo,
  createUniqueId,
  splitProps
} 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) => {
    setValue(
      color().withChannelValue(
        local.channel,
        !Number.isNaN(value2) ? Math.round(
          Math.max(
            Math.min(value2 * multiplier(), range().maxValue),
            range().minValue
          )
        ) : Number.NaN
      )
    );
  };
  return <NumberFieldRoot
    rawValue={Number.isNaN(color().getChannelValue(local.channel)) ? void 0 : color().getChannelValue(local.channel) / multiplier()}
    minValue={range().minValue / multiplier()}
    maxValue={range().maxValue / multiplier()}
    step={range().step / multiplier()}
    formatOptions={formatOptions()}
    onRawValueChange={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,
  NumberFieldDecrementTrigger as DecrementTrigger,
  FormControlDescription as Description,
  FormControlErrorMessage as ErrorMessage,
  NumberFieldHiddenInput as HiddenInput,
  NumberFieldIncrementTrigger as IncrementTrigger,
  NumberFieldInput as Input,
  FormControlLabel as Label,
  ColorChannelFieldRoot as Root
};