@kobalte/core/dist/color-slider/index.jsx

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

import {
  COLOR_INTL_TRANSLATIONS,
  parseColor
} from "../chunk/KNLKPWUU.jsx";
import {
  SliderInput,
  SliderRoot,
  SliderThumb,
  SliderTrack,
  SliderValueLabel,
  useSliderContext
} from "../chunk/65CAYJLE.jsx";
import "../chunk/GIRHAWVP.jsx";
import "../chunk/SOM3K36D.jsx";
import {
  useLocale
} from "../chunk/LR7LBJN3.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/EJ5I5XML.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-slider/color-slider-root.tsx
import { mergeDefaultProps } from "@kobalte/utils";
import {
  createMemo,
  createUniqueId,
  splitProps
} from "solid-js";

// src/color-slider/color-slider-context.tsx
import { createContext, useContext } from "solid-js";
var ColorSliderContext = createContext();
function useColorSliderContext() {
  const context = useContext(ColorSliderContext);
  if (context === void 0) {
    throw new Error(
      "[kobalte]: `useColorSliderContext` must be used within a `ColorSlider.Root` component"
    );
  }
  return context;
}

// src/color-slider/color-slider-root.tsx
function ColorSliderRoot(props) {
  const defaultId = `colorslider-${createUniqueId()}`;
  const mergedProps = mergeDefaultProps(
    {
      id: defaultId,
      translations: COLOR_INTL_TRANSLATIONS,
      defaultValue: parseColor("hsl(0, 100%, 50%)")
    },
    props
  );
  const [local, others] = splitProps(mergedProps, [
    "value",
    "defaultValue",
    "onChange",
    "onChangeEnd",
    "channel",
    "colorSpace",
    "getValueLabel",
    "translations"
  ]);
  const [value, setValue] = createControllableSignal({
    value: () => local.value,
    defaultValue: () => local.defaultValue,
    onChange: (value2) => local.onChange?.(value2)
  });
  const color = createMemo(() => {
    return local.colorSpace ? value().toFormat(local.colorSpace) : value();
  });
  const onChange = (value2) => {
    setValue(color().withChannelValue(local.channel, value2[0]));
  };
  const onChangeEnd = (value2) => {
    local.onChangeEnd?.(color().withChannelValue(local.channel, value2[0]));
  };
  const getValueLabel = createMemo(() => {
    if (local.getValueLabel) {
      return local.getValueLabel(color());
    }
    return color().formatChannelValue(local.channel);
  });
  const getDisplayColor = createMemo(() => {
    switch (local.channel) {
      case "hue":
        return parseColor(`hsl(${color().getChannelValue("hue")}, 100%, 50%)`);
      case "lightness":
      case "brightness":
      case "saturation":
      case "red":
      case "green":
      case "blue":
        return color().withChannelValue("alpha", 1);
      case "alpha": {
        return color();
      }
      default:
        throw new Error(`Unknown color channel: ${local.channel}`);
    }
  });
  const context = {
    value: color,
    channel: () => local.channel,
    getDisplayColor,
    translations: () => local.translations
  };
  return <ColorSliderContext.Provider value={context}><SliderRoot
    value={[color().getChannelValue(local.channel)]}
    onChange={onChange}
    onChangeEnd={onChangeEnd}
    getValueLabel={getValueLabel}
    {...color().getChannelRange(local.channel)}
    {...others}
  /></ColorSliderContext.Provider>;
}

// src/color-slider/color-slider-thumb.tsx
import { combineStyle } from "@solid-primitives/props";
import {
  createMemo as createMemo2,
  splitProps as splitProps2
} from "solid-js";
function ColorSliderThumb(props) {
  const context = useColorSliderContext();
  const [local, others] = splitProps2(props, ["style"]);
  const valueText = createMemo2(() => {
    const formattedValue = context.value()?.formatChannelValue(context.channel());
    if (context.channel() === "hue") {
      return `${formattedValue}, ${context.getDisplayColor().getHueName(context.translations())}`;
    }
    if (context.channel() !== "alpha") {
      return `${formattedValue}, ${context.getDisplayColor().getColorName(context.translations())}`;
    }
    return formattedValue;
  });
  return <SliderThumb
    style={combineStyle(
      {
        "forced-color-adjust": "none",
        "--kb-color-current": context.value().toString()
      },
      local.style
    )}
    aria-valuetext={valueText()}
    {...others}
  />;
}

// src/color-slider/color-slider-track.tsx
import { combineStyle as combineStyle2 } from "@solid-primitives/props";
import {
  createMemo as createMemo3,
  splitProps as splitProps3
} from "solid-js";
function ColorSliderTrack(props) {
  const sliderContext = useSliderContext();
  const context = useColorSliderContext();
  const [local, others] = splitProps3(props, ["style"]);
  const { direction } = useLocale();
  const backgroundStyles = createMemo3(() => {
    let to;
    if (sliderContext.state.orientation() === "vertical") {
      to = "top";
    } else if (direction() === "ltr") {
      to = "right";
    } else {
      to = "left";
    }
    switch (context.channel()) {
      case "hue": {
        const stops = [0, 60, 120, 180, 240, 300, 360].map(
          (hue) => context.getDisplayColor().withChannelValue("hue", hue).toString("css")
        ).join(", ");
        return `linear-gradient(to ${to}, ${stops})`;
      }
      case "lightness": {
        const min = sliderContext.state.getThumbMinValue(0);
        const max = sliderContext.state.getThumbMaxValue(0);
        const start = context.getDisplayColor().withChannelValue(context.channel(), min).toString("css");
        const middle = context.getDisplayColor().withChannelValue(context.channel(), (max - min) / 2).toString("css");
        const end = context.getDisplayColor().withChannelValue(context.channel(), max).toString("css");
        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
      }
      case "saturation":
      case "brightness":
      case "red":
      case "green":
      case "blue":
      case "alpha": {
        const start = context.getDisplayColor().withChannelValue(
          context.channel(),
          sliderContext.state.getThumbMinValue(0)
        ).toString("css");
        const end = context.getDisplayColor().withChannelValue(
          context.channel(),
          sliderContext.state.getThumbMaxValue(0)
        ).toString("css");
        return `linear-gradient(to ${to}, ${start}, ${end})`;
      }
      default:
        throw new Error(`Unknown color channel: ${context.channel()}`);
    }
  });
  return <SliderTrack
    style={combineStyle2(
      {
        "forced-color-adjust": "none",
        background: backgroundStyles()
      },
      local.style
    )}
    {...others}
  />;
}

// src/color-slider/index.tsx
var ColorSlider = Object.assign(ColorSliderRoot, {
  Description: FormControlDescription,
  ErrorMessage: FormControlErrorMessage,
  Input: SliderInput,
  Label: FormControlLabel,
  Thumb: ColorSliderThumb,
  Track: ColorSliderTrack,
  ValueLabel: SliderValueLabel
});
export {
  ColorSlider,
  FormControlDescription as Description,
  FormControlErrorMessage as ErrorMessage,
  SliderInput as Input,
  FormControlLabel as Label,
  ColorSliderRoot as Root,
  ColorSliderThumb as Thumb,
  ColorSliderTrack as Track,
  SliderValueLabel as ValueLabel,
  useColorSliderContext
};