colibri-ui 0.8.95 → 0.8.97

package/ColorPicker/components/SaturationPanel/index.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+var usePointerDrag = require('../../hooks/usePointerDrag.js');
+var color = require('../../utils/color.js');
+var styles = require('./SaturationPanel.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const STEP = 1;
+const BIG_STEP = 10;
+/**
+ * Saturation (horizontal) and brightness (vertical) area. Arrow keys change
+ * by 1, with Shift by 10.
+ */
+const SaturationPanel = ({
+  value,
+  onChange,
+  "aria-label": ariaLabel
+}) => {
+  const {
+    h,
+    s,
+    v
+  } = value;
+  const {
+    ref,
+    handlers
+  } = usePointerDrag.usePointerDrag(({
+    x,
+    y
+  }) => onChange({
+    h,
+    s: x * 100,
+    v: (1 - y) * 100
+  }));
+  const handleKeyDown = event => {
+    const step = event.shiftKey ? BIG_STEP : STEP;
+    const deltas = {
+      ArrowLeft: [-step, 0],
+      ArrowRight: [step, 0],
+      ArrowUp: [0, step],
+      ArrowDown: [0, -step]
+    };
+    const delta = deltas[event.key];
+    if (!delta) return;
+    event.preventDefault();
+    onChange({
+      h,
+      s: color.clamp(s + delta[0], 0, 100),
+      v: color.clamp(v + delta[1], 0, 100)
+    });
+  };
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({
+    ref: ref
+  }, handlers, {
+    role: "slider",
+    tabIndex: 0,
+    "aria-label": ariaLabel,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": Math.round(s),
+    "aria-valuetext": `${Math.round(s)}%, ${Math.round(v)}%`,
+    onKeyDown: handleKeyDown,
+    className: styles__default.default.root,
+    style: {
+      backgroundColor: color.hsv2css({
+        h,
+        s: 100,
+        v: 100
+      })
+    }
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.thumb,
+    style: {
+      left: `${s}%`,
+      top: `${100 - v}%`,
+      backgroundColor: color.hsv2css(value)
+    }
+  }));
+};
+
+exports.SaturationPanel = SaturationPanel;

package/ColorPicker/components/Swatch/Swatch.module.css

@@ -0,0 +1,36 @@
+.root {
+  align-items: center;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--space-6);
+  justify-content: center;
+  padding: 0;
+  transition: transform 0.1s ease;
+  width: var(--space-6);
+}
+.root:hover {
+  transform: scale(1.1);
+}
+.root:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+
+.check_light {
+  color: var(--color-neutral-0);
+}
+
+.check_dark {
+  color: var(--color-neutral-950);
+}
+
+.outlined {
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-default);
+}
+
+.check {
+  height: var(--space-4);
+  width: var(--space-4);
+}

package/ColorPicker/components/Swatch/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ButtonHTMLAttributes } from "react";
+interface SwatchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "type"> {
+    /** `#rrggbb` */
+    color: string;
+    label: string;
+    selected: boolean;
+}
+/**
+ * Color circle button. The check mark adapts to the color, light colors get
+ * an outline.
+ */
+export declare const Swatch: ({ color, label, selected, className, ...props }: SwatchProps) => React.JSX.Element;
+export {};

package/ColorPicker/components/Swatch/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+require('../../../Icons/index.js');
+var color = require('../../utils/color.js');
+var styles = require('./Swatch.module.css');
+var Check = require('../../../Icons/Check.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+/**
+ * Color circle button. The check mark adapts to the color, light colors get
+ * an outline.
+ */
+const Swatch = _a => {
+  var {
+      color: color$1,
+      label,
+      selected,
+      className
+    } = _a,
+    props = tslib.__rest(_a, ["color", "label", "selected", "className"]);
+  return /*#__PURE__*/React__default.default.createElement("button", Object.assign({}, props, {
+    type: "button",
+    role: "menuitemradio",
+    "aria-checked": selected,
+    "aria-label": label,
+    title: label,
+    className: clsx__default.default(styles__default.default.root, color.prefersLightText(color$1) ? styles__default.default.check_light : styles__default.default.check_dark, {
+      [styles__default.default.outlined]: color.isLightColor(color$1)
+    }, className),
+    style: {
+      backgroundColor: color$1
+    }
+  }), selected && /*#__PURE__*/React__default.default.createElement(Check.Check, {
+    className: styles__default.default.check,
+    "aria-hidden": "true"
+  }));
+};
+
+exports.Swatch = Swatch;

package/ColorPicker/hooks/useEyeDropper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Native browser eye dropper (EyeDropper API). Chromium only: in Safari and
+ * Firefox `isSupported` is `false`.
+ */
+export declare const useEyeDropper: () => {
+    isSupported: boolean;
+    pick: () => Promise<string | null>;
+};

package/ColorPicker/hooks/useEyeDropper.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var color = require('../utils/color.js');
+
+const subscribe = () => () => {};
+const getSnapshot = () => "EyeDropper" in window;
+// No API on the server, so hydration does not mismatch.
+const getServerSnapshot = () => false;
+/**
+ * Native browser eye dropper (EyeDropper API). Chromium only: in Safari and
+ * Firefox `isSupported` is `false`.
+ */
+const useEyeDropper = () => {
+  const isSupported = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  /** `#rrggbb`, or `null` when the user cancels with Escape. */
+  const pick = React.useCallback(async () => {
+    const {
+      EyeDropper
+    } = window;
+    if (!EyeDropper) return null;
+    try {
+      // eslint-disable-next-line compat/compat -- guarded by the feature check above
+      const {
+        sRGBHex
+      } = await new EyeDropper().open();
+      return color.toHex(sRGBHex);
+    } catch (_a) {
+      return null;
+    }
+  }, []);
+  return {
+    isSupported,
+    pick
+  };
+};
+
+exports.useEyeDropper = useEyeDropper;

package/ColorPicker/hooks/useHexDraft.d.ts

@@ -0,0 +1,19 @@
+import type { ChangeEvent, KeyboardEvent } from "react";
+/**
+ * HEX field logic for `Input`:
+ * - while focused, the field keeps a draft, so it can be cleared and retyped;
+ * - a full `#rrggbb` applies while typing;
+ * - a short `#abc` applies on blur or Enter (focus stays), so typing
+ *   `#abcdef` does not flash `#aabbcc`;
+ * - invalid input reverts to the current value on blur.
+ */
+export declare const useHexDraft: (value: string, onChange: (hex: string) => void) => {
+    invalid: boolean;
+    inputProps: {
+        value: string;
+        onFocus: () => void;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        onBlur: () => void;
+        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    };
+};

package/ColorPicker/hooks/useHexDraft.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var React = require('react');
+var color = require('../utils/color.js');
+
+const FULL_HEX_RE = /^#?[0-9a-f]{6}$/i;
+/**
+ * HEX field logic for `Input`:
+ * - while focused, the field keeps a draft, so it can be cleared and retyped;
+ * - a full `#rrggbb` applies while typing;
+ * - a short `#abc` applies on blur or Enter (focus stays), so typing
+ *   `#abcdef` does not flash `#aabbcc`;
+ * - invalid input reverts to the current value on blur.
+ */
+const useHexDraft = (value, onChange) => {
+  // null: not editing, show `value`.
+  const [draft, setDraft] = React.useState(null);
+  const commit = text => {
+    const hex = color.normalizeHex(text);
+    if (hex && hex !== value) onChange(hex);
+  };
+  return {
+    invalid: draft !== null && color.normalizeHex(draft) === null,
+    inputProps: {
+      value: draft !== null && draft !== void 0 ? draft : value,
+      onFocus: () => setDraft(value),
+      onChange: event => {
+        const text = event.target.value;
+        setDraft(text);
+        if (FULL_HEX_RE.test(text.trim())) commit(text);
+      },
+      onBlur: () => {
+        if (draft !== null) commit(draft);
+        setDraft(null);
+      },
+      // Applies a short HEX and keeps focus in the field.
+      onKeyDown: event => {
+        if (event.key !== "Enter" || draft === null) return;
+        const hex = color.normalizeHex(draft);
+        if (hex) {
+          commit(draft);
+          setDraft(hex);
+        }
+      }
+    }
+  };
+};
+
+exports.useHexDraft = useHexDraft;

package/ColorPicker/hooks/usePointerDrag.d.ts

@@ -0,0 +1,20 @@
+import type { PointerEvent as ReactPointerEvent } from "react";
+/** Pointer position inside the element, 0–1 on each axis. */
+export interface DragPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Dragging inside an element with Pointer Events (mouse, touch, pen).
+ * Pointer capture keeps tracking outside the element without document
+ * listeners. The element needs `touch-action: none`.
+ */
+export declare const usePointerDrag: <T extends HTMLElement>(onMove: (position: DragPosition) => void) => {
+    ref: import("react").RefObject<T | null>;
+    handlers: {
+        onPointerDown: (event: ReactPointerEvent<T>) => void;
+        onPointerMove: (event: ReactPointerEvent<T>) => void;
+        onPointerUp: (event: ReactPointerEvent<T>) => void;
+        onPointerCancel: (event: ReactPointerEvent<T>) => void;
+    };
+};

package/ColorPicker/hooks/usePointerDrag.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var React = require('react');
+var color = require('../utils/color.js');
+
+/**
+ * Dragging inside an element with Pointer Events (mouse, touch, pen).
+ * Pointer capture keeps tracking outside the element without document
+ * listeners. The element needs `touch-action: none`.
+ */
+const usePointerDrag = onMove => {
+  const ref = React.useRef(null);
+  const onMoveRef = React.useRef(onMove);
+  React.useEffect(() => {
+    onMoveRef.current = onMove;
+  });
+  const move = React.useCallback(event => {
+    const element = ref.current;
+    if (!element) return;
+    const rect = element.getBoundingClientRect();
+    onMoveRef.current({
+      x: color.clamp((event.clientX - rect.left) / rect.width),
+      y: color.clamp((event.clientY - rect.top) / rect.height)
+    });
+  }, []);
+  const onPointerDown = React.useCallback(event => {
+    if (event.button !== 0 || !ref.current) return;
+    // preventDefault stops text selection but also focus, so focus manually.
+    event.preventDefault();
+    ref.current.setPointerCapture(event.pointerId);
+    ref.current.focus();
+    move(event);
+  }, [move]);
+  const onPointerMove = React.useCallback(event => {
+    var _a;
+    if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.hasPointerCapture(event.pointerId)) move(event);
+  }, [move]);
+  const onPointerUp = React.useCallback(event => {
+    var _a;
+    if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.hasPointerCapture(event.pointerId)) {
+      ref.current.releasePointerCapture(event.pointerId);
+    }
+  }, []);
+  return {
+    ref,
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp
+    }
+  };
+};
+
+exports.usePointerDrag = usePointerDrag;

package/ColorPicker/index.d.ts

@@ -0,0 +1,3 @@
+export { ColorPicker } from "./ColorPicker";
+export { COLOR_PICKER_PRESETS } from "./presets";
+export type { ColorPickerLabels, ColorPickerPreset, ColorPickerProps, } from "./index.props";

package/ColorPicker/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var ColorPicker = require('./ColorPicker.js');
+var presets = require('./presets.js');
+
+
+
+exports.ColorPicker = ColorPicker.ColorPicker;
+exports.COLOR_PICKER_PRESETS = presets.COLOR_PICKER_PRESETS;

package/ColorPicker/index.props.d.ts

@@ -0,0 +1,43 @@
+import type { ReactElement } from "react";
+import type { Placement } from "@floating-ui/react";
+export interface ColorPickerPreset {
+    /** HEX color, for example `#d81b60`. */
+    value: string;
+    /** Accessible name and tooltip of the swatch. */
+    label: string;
+}
+export interface ColorPickerLabels {
+    /** Accessible name of the default trigger. */
+    trigger: string;
+    /** Accessible name of the preset grid. */
+    palette: string;
+    /** "+" button that opens the custom color dialog. */
+    addCustom: string;
+    customTitle: string;
+    customDescription: string;
+    /** Sample text in the preview circle. */
+    preview: string;
+    hex: string;
+    eyeDropper: string;
+    saturation: string;
+    hue: string;
+    cancel: string;
+    save: string;
+}
+export interface ColorPickerProps {
+    /** Current color in HEX. A color missing from `presets` is shown as an extra swatch. */
+    value?: string;
+    /** Called with the chosen color as lowercase `#rrggbb`. */
+    onChange: (color: string) => void;
+    /** Preset colors. Defaults to `COLOR_PICKER_PRESETS`. */
+    presets?: ColorPickerPreset[];
+    /** Number of grid columns. */
+    columns?: number;
+    disabled?: boolean;
+    placement?: Placement;
+    zIndex?: number;
+    /** Texts and accessible names. Missing keys use English defaults. */
+    labels?: Partial<ColorPickerLabels>;
+    /** Custom trigger element. Defaults to a round button with the current color. */
+    children?: ReactElement;
+}

package/ColorPicker/package.json

@@ -0,0 +1,9 @@
+{
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "module": "../esm/ColorPicker/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ColorPicker/presets.d.ts

@@ -0,0 +1,3 @@
+import type { ColorPickerLabels, ColorPickerPreset } from "./index.props";
+export declare const COLOR_PICKER_PRESETS: ColorPickerPreset[];
+export declare const DEFAULT_LABELS: ColorPickerLabels;

package/ColorPicker/presets.js

@@ -0,0 +1,92 @@
+'use strict';
+
+const COLOR_PICKER_PRESETS = [{
+  value: "#ad1457",
+  label: "Radicchio"
+}, {
+  value: "#f4511e",
+  label: "Tangerine"
+}, {
+  value: "#e4c441",
+  label: "Citron"
+}, {
+  value: "#0b8043",
+  label: "Basil"
+}, {
+  value: "#3f51b5",
+  label: "Blueberry"
+}, {
+  value: "#8e24aa",
+  label: "Grape"
+}, {
+  value: "#d81b60",
+  label: "Cherry blossom"
+}, {
+  value: "#ef6c00",
+  label: "Pumpkin"
+}, {
+  value: "#c0ca33",
+  label: "Avocado"
+}, {
+  value: "#009688",
+  label: "Eucalyptus"
+}, {
+  value: "#7986cb",
+  label: "Lavender"
+}, {
+  value: "#795548",
+  label: "Cocoa"
+}, {
+  value: "#d50000",
+  label: "Tomato"
+}, {
+  value: "#f09300",
+  label: "Mango"
+}, {
+  value: "#7cb342",
+  label: "Pistachio"
+}, {
+  value: "#039be5",
+  label: "Peacock"
+}, {
+  value: "#b39ddb",
+  label: "Wisteria"
+}, {
+  value: "#616161",
+  label: "Graphite"
+}, {
+  value: "#e67c73",
+  label: "Flamingo"
+}, {
+  value: "#f6bf26",
+  label: "Banana"
+}, {
+  value: "#33b679",
+  label: "Sage"
+}, {
+  value: "#4285f4",
+  label: "Cobalt"
+}, {
+  value: "#9e69af",
+  label: "Amethyst"
+}, {
+  value: "#a79b8e",
+  label: "Birch"
+}];
+const DEFAULT_LABELS = {
+  trigger: "Choose color",
+  palette: "Colors",
+  addCustom: "Add custom color",
+  customTitle: "Choose custom color",
+  customDescription: "Choose a background color. The text color will be adjusted automatically.",
+  preview: "A",
+  hex: "Hex",
+  eyeDropper: "Pick a color from the screen",
+  saturation: "Saturation and brightness",
+  hue: "Hue",
+  cancel: "Cancel",
+  save: "Save"
+};
+
+exports.COLOR_PICKER_PRESETS = COLOR_PICKER_PRESETS;
+exports.DEFAULT_LABELS = DEFAULT_LABELS;

package/ColorPicker/utils/color.d.ts

@@ -0,0 +1,25 @@
+/** h: 0–360, s: 0–100, v: 0–100 */
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export declare const clamp: (value: number, min?: number, max?: number) => number;
+/** HSV → `hsl(...)` for inline styles. */
+export declare const hsv2css: ({ h, s, v }: HSV) => string;
+/** `#ABC`, `abc`, `#aabbcc` → `#aabbcc`. Invalid input → `null`. */
+export declare const normalizeHex: (input: string) => string | null;
+export declare const hsv2hex: (hsv: HSV) => string;
+export declare const hex2hsv: (hex: string) => HSV | null;
+/** HEX or `rgb()`/`rgba()` → `#rrggbb`. Invalid input → `null`. */
+export declare const toHex: (input: string) => string | null;
+/**
+ * HEX → HSV that keeps hue and saturation from `prev` where the color has
+ * none: grey has no hue, black has neither. Without this, typing `#000000`
+ * would jump the hue slider to 0 (red).
+ */
+export declare const toHsvPreservingHue: (hex: string, prev: HSV) => HSV | null;
+/** Whether light text reads better than dark text on `background` (HEX). */
+export declare const prefersLightText: (background: string) => boolean;
+/** A light color that merges with a light surface and needs an outline. */
+export declare const isLightColor: (hex: string, threshold?: number) => boolean;