prime-ui-kit 0.9.0 → 0.9.1

package/dist/chunks/chunk-KCQFOORX.js

@@ -0,0 +1,379 @@
+import {
+  Button,
+  ColorSwatches,
+  Icon,
+  Input,
+  Select,
+  SwatchChip,
+  createComponentContext,
+  cx,
+  fieldSurfaceClass
+} from "./chunk-NHOWNIAR.js";
+
+// src/components/color-picker/ColorPicker.tsx
+import * as React from "react";
+import {
+  ColorArea as AriaColorArea,
+  ColorPicker as AriaColorPicker,
+  ColorSlider as AriaColorSlider,
+  ColorThumb as AriaColorThumb,
+  SliderOutput as AriaSliderOutput,
+  SliderTrack as AriaSliderTrack,
+  ColorPickerStateContext,
+  composeRenderProps,
+  parseColor
+} from "react-aria-components";
+
+// src/components/color-picker/ColorPicker.module.css
+var ColorPicker_default = {
+  panel: "ColorPicker_panel",
+  slider: "ColorPicker_slider",
+  sliderHeader: "ColorPicker_sliderHeader",
+  sliderLabel: "ColorPicker_sliderLabel",
+  sliderValue: "ColorPicker_sliderValue",
+  sliderTrack: "ColorPicker_sliderTrack",
+  thumb: "ColorPicker_thumb",
+  thumbArea: "ColorPicker_thumbArea",
+  area: "ColorPicker_area",
+  formatSelectWrap: "ColorPicker_formatSelectWrap",
+  channelStrip: "ColorPicker_channelStrip",
+  channelStripLead: "ColorPicker_channelStripLead",
+  channelStripEyedropperBtn: "ColorPicker_channelStripEyedropperBtn",
+  channelCell: "ColorPicker_channelCell",
+  channelInput: "ColorPicker_channelInput",
+  channelCellHex: "ColorPicker_channelCellHex",
+  channelSuffix: "ColorPicker_channelSuffix",
+  eyeDropperSquare: "ColorPicker_eyeDropperSquare"
+};
+
+// src/components/color-picker/ColorPicker.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var COLOR_PICKER_LABELS = {
+  format: "\u0424\u043E\u0440\u043C\u0430\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0446\u0432\u0435\u0442\u0430",
+  eyeDropper: "\u041F\u0438\u043F\u0435\u0442\u043A\u0430",
+  hex: "Hex",
+  hue: "\u041E\u0442\u0442\u0435\u043D\u043E\u043A, \u0433\u0440\u0430\u0434\u0443\u0441\u044B",
+  saturation: "\u041D\u0430\u0441\u044B\u0449\u0435\u043D\u043D\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
+  lightness: "\u042F\u0440\u043A\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
+  alpha: "\u041D\u0435\u043F\u0440\u043E\u0437\u0440\u0430\u0447\u043D\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
+  red: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439, 0\u2013255",
+  green: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439, 0\u2013255",
+  blue: "\u0421\u0438\u043D\u0438\u0439, 0\u2013255"
+};
+var CHECKER_BG = "repeating-conic-gradient(var(--prime-color-bg-surface) 0deg 90deg, var(--prime-color-fill-strong) 90deg 180deg) 0% 0% / var(--prime-space-2) var(--prime-space-2)";
+var [ColorPickerProvider, useColorPickerContext] = createComponentContext("ColorPicker");
+function useColorState() {
+  const state = React.useContext(ColorPickerStateContext);
+  if (!state) throw new Error("ColorPicker parts must be used inside <ColorPicker.Root>.");
+  return state;
+}
+function toHexText(color) {
+  return color.toString(color.getChannelValue("alpha") < 1 ? "hexa" : "hex");
+}
+function useColorDraft(read, parse) {
+  const state = useColorState();
+  const inputRef = React.useRef(null);
+  const [text, setText] = React.useState(() => read(state.color));
+  const fingerprint = state.color.toString("hexa");
+  React.useEffect(() => {
+    if (inputRef.current && document.activeElement === inputRef.current) return;
+    setText(read(state.color));
+  }, [fingerprint]);
+  const commit = () => {
+    const next = parse(text.trim(), state.color);
+    if (next) state.setColor(next);
+    setText(read(next ?? state.color));
+  };
+  return { inputRef, text, setText, commit };
+}
+function onCommitKeyDown(commit) {
+  return (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    commit();
+    event.currentTarget.blur();
+  };
+}
+var parseHex = (text) => {
+  try {
+    return parseColor(text);
+  } catch {
+    return null;
+  }
+};
+var FORMAT_LABELS = { hsl: "HSL", rgb: "RGB", hex: "Hex" };
+var isFormat = (value) => value in FORMAT_LABELS;
+function FormatSelect({ className, ...rest }) {
+  const { format, setFormat, labels } = useColorPickerContext();
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx(ColorPicker_default.formatSelectWrap, className), children: /* @__PURE__ */ jsxs(Select.Root, { value: format, onValueChange: (value) => isFormat(value) && setFormat(value), children: [
+    /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": labels.format, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+    /* @__PURE__ */ jsx(Select.Content, { children: Object.entries(FORMAT_LABELS).map(([value, label]) => /* @__PURE__ */ jsx(Select.Item, { label, value, children: label }, value)) })
+  ] }) });
+}
+function displayChannelValue(color, channel, space) {
+  const raw = color.toFormat(space).getChannelValue(channel);
+  return String(Math.round(channel === "alpha" ? raw * 100 : raw));
+}
+function parseChannelValue(text, color, channel, space) {
+  const n = Number.parseFloat(text.replace(",", "."));
+  if (Number.isNaN(n)) return null;
+  if (channel === "alpha")
+    return color.withChannelValue("alpha", Math.min(100, Math.max(0, n)) / 100);
+  const c = color.toFormat(space);
+  const range = c.getChannelRange(channel);
+  return c.withChannelValue(channel, Math.min(range.maxValue, Math.max(range.minValue, n)));
+}
+function ChannelField({
+  channel,
+  space,
+  suffix
+}) {
+  const { labels } = useColorPickerContext();
+  const { inputRef, text, setText, commit } = useColorDraft(
+    (color) => displayChannelValue(color, channel, space),
+    (value, color) => parseChannelValue(value, color, channel, space)
+  );
+  return /* @__PURE__ */ jsxs("label", { className: cx(fieldSurfaceClass, ColorPicker_default.channelCell), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        "aria-label": labels[channel],
+        className: ColorPicker_default.channelInput,
+        inputMode: "decimal",
+        value: text,
+        onBlur: commit,
+        onChange: (e) => setText(e.target.value),
+        onKeyDown: onCommitKeyDown(commit)
+      }
+    ),
+    suffix ? /* @__PURE__ */ jsx("span", { className: ColorPicker_default.channelSuffix, children: suffix }) : null
+  ] });
+}
+function StripHexField() {
+  const { labels } = useColorPickerContext();
+  const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
+  return /* @__PURE__ */ jsx("label", { className: cx(fieldSurfaceClass, ColorPicker_default.channelCell, ColorPicker_default.channelCellHex), children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      "aria-label": labels.hex,
+      autoCapitalize: "off",
+      autoCorrect: "off",
+      className: ColorPicker_default.channelInput,
+      spellCheck: false,
+      value: text,
+      onBlur: commit,
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: onCommitKeyDown(commit)
+    }
+  ) });
+}
+function ChannelStrip({ className, focusRing = true, ...rest }) {
+  const { format } = useColorPickerContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx(ColorPicker_default.channelStrip, className),
+      "data-focus-ring": focusRing ? void 0 : "false",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: ColorPicker_default.channelStripLead, children: /* @__PURE__ */ jsx(EyeDropperButton, { className: ColorPicker_default.channelStripEyedropperBtn }) }),
+        format === "hex" ? /* @__PURE__ */ jsx(StripHexField, {}) : format === "hsl" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChannelField, { channel: "hue", space: "hsl", suffix: "\xB0" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "saturation", space: "hsl", suffix: "%" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "lightness", space: "hsl", suffix: "%" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "alpha", space: "hsl", suffix: "%" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChannelField, { channel: "red", space: "rgb", suffix: "" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "green", space: "rgb", suffix: "" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "blue", space: "rgb", suffix: "" }),
+          /* @__PURE__ */ jsx(ChannelField, { channel: "alpha", space: "rgb", suffix: "%" })
+        ] })
+      ]
+    }
+  );
+}
+function Panel({ surface = "none", className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx(ColorPicker_default.panel, className), "data-surface": surface, ...rest });
+}
+Panel.displayName = "ColorPicker.Panel";
+function ColorPickerRoot({
+  value,
+  defaultValue,
+  onValueChange,
+  defaultFormat = "hsl",
+  labels: labelsProp,
+  children
+}) {
+  const [format, setFormat] = React.useState(defaultFormat);
+  const labels = React.useMemo(() => ({ ...COLOR_PICKER_LABELS, ...labelsProp }), [labelsProp]);
+  const contextValue = React.useMemo(() => ({ format, setFormat, labels }), [format, labels]);
+  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx(AriaColorPicker, { value, defaultValue, onChange: onValueChange, children }) });
+}
+ColorPickerRoot.displayName = "ColorPicker.Root";
+function Slider({ className, disabled, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorSlider,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.slider, c)),
+      isDisabled: disabled,
+      ...props
+    }
+  );
+}
+function Area({ className, disabled, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorArea,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.area, c)),
+      isDisabled: disabled,
+      ...props
+    }
+  );
+}
+function SliderTrack({ className, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaSliderTrack,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.sliderTrack, c)),
+      style: (renderProps) => {
+        const fromUser = typeof style === "function" ? style(renderProps) : style;
+        const baseBg = renderProps.defaultStyle.background;
+        const layered = renderProps.isDisabled || baseBg === void 0 ? baseBg : `${String(baseBg)}, ${CHECKER_BG}`;
+        return {
+          ...renderProps.defaultStyle,
+          ...fromUser,
+          ...layered !== void 0 ? { background: layered } : null
+        };
+      },
+      ...props
+    }
+  );
+}
+function Thumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorThumb,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.thumb, c)),
+      ...props
+    }
+  );
+}
+function AreaThumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaColorThumb,
+    {
+      className: composeRenderProps(className, (c) => cx(ColorPicker_default.thumbArea, c)),
+      ...props
+    }
+  );
+}
+function Swatches(props) {
+  const state = useColorState();
+  return /* @__PURE__ */ jsx(
+    ColorSwatches,
+    {
+      ...props,
+      value: state.color.toString("hex"),
+      onValueChange: (next) => next && state.setColor(parseColor(next))
+    }
+  );
+}
+Swatches.displayName = "ColorPicker.Swatches";
+function SliderMeta({ label, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx(ColorPicker_default.sliderHeader, className), children: [
+    /* @__PURE__ */ jsx("span", { className: ColorPicker_default.sliderLabel, children: label }),
+    /* @__PURE__ */ jsx(AriaSliderOutput, { className: ColorPicker_default.sliderValue })
+  ] });
+}
+function HexInput({ label, hint, error, focusRing = true, ...rest }) {
+  const { labels } = useColorPickerContext();
+  const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
+  return /* @__PURE__ */ jsx(
+    Input.Root,
+    {
+      ...rest,
+      label: label ?? labels.hex,
+      hint,
+      error,
+      focusRing,
+      children: /* @__PURE__ */ jsx(Input.Wrapper, { children: /* @__PURE__ */ jsx(
+        Input.Field,
+        {
+          ref: inputRef,
+          autoCapitalize: "off",
+          autoCorrect: "off",
+          spellCheck: false,
+          value: text,
+          onBlur: commit,
+          onChange: (e) => setText(e.target.value),
+          onKeyDown: onCommitKeyDown(commit)
+        }
+      ) })
+    }
+  );
+}
+HexInput.displayName = "ColorPicker.HexInput";
+function EyeDropperButton({
+  children,
+  onClick,
+  type = "button",
+  className,
+  ref,
+  ...rest
+}) {
+  const { labels } = useColorPickerContext();
+  const state = useColorState();
+  const EyeDropperApi = typeof window === "undefined" ? void 0 : window.EyeDropper;
+  const supported = EyeDropperApi !== void 0;
+  return /* @__PURE__ */ jsx(
+    Button.Root,
+    {
+      variant: "soft",
+      tone: "neutral",
+      ref,
+      type,
+      "aria-label": labels.eyeDropper,
+      "aria-hidden": supported ? void 0 : true,
+      disabled: !supported,
+      tabIndex: supported ? void 0 : -1,
+      className: cx(ColorPicker_default.eyeDropperSquare, className),
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || !EyeDropperApi) return;
+        void new EyeDropperApi().open().then((result) => state.setColor(parseColor(result.sRGBHex))).catch(() => {
+        });
+      },
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(Button.Icon, { children: /* @__PURE__ */ jsx(Icon, { name: "action.eyedropper" }) })
+    }
+  );
+}
+EyeDropperButton.displayName = "ColorPicker.EyeDropperButton";
+function TriggerSwatch(props) {
+  const state = useColorState();
+  return /* @__PURE__ */ jsx(SwatchChip, { ...props, value: state.color.toString("css") });
+}
+TriggerSwatch.displayName = "ColorPicker.TriggerSwatch";
+var ColorPicker = {
+  Root: ColorPickerRoot,
+  Panel,
+  TriggerSwatch,
+  FormatSelect,
+  ChannelStrip,
+  HexInput,
+  Area,
+  AreaThumb,
+  Slider,
+  SliderMeta,
+  SliderTrack,
+  Thumb,
+  Swatches,
+  EyeDropperButton
+};
+
+export {
+  parseColor,
+  ColorPicker
+};