colibri-ui 0.8.96 → 0.8.97

package/esm/ColorPicker/components/Palette/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ColorPickerLabels, ColorPickerPreset } from "../../index.props";
+interface PaletteProps {
+    presets: ColorPickerPreset[];
+    /** Normalized `#rrggbb` of the current color. */
+    value: string | null;
+    columns: number;
+    labels: ColorPickerLabels;
+    onSelect: (hex: string) => void;
+    onAddClick: () => void;
+    /** Tab or Shift+Tab leaves the palette. */
+    onTabOut: () => void;
+}
+/**
+ * Preset grid with the "+" button. A current color missing from the presets
+ * is shown as an extra swatch before "+".
+ */
+export declare const Palette: ({ presets, value, columns, labels, onSelect, onAddClick, onTabOut, }: PaletteProps) => React.JSX.Element;
+export {};

package/esm/ColorPicker/components/Palette/index.js

@@ -0,0 +1,92 @@
+import React, { useRef, useEffect } from 'react';
+import { Button } from '../../../Button/index.js';
+import 'tslib';
+import { Plus } from '../../../Icons/Plus.js';
+import { Swatch } from '../Swatch/index.js';
+import styles from './Palette.module.css';
+
+/**
+ * Preset grid with the "+" button. A current color missing from the presets
+ * is shown as an extra swatch before "+".
+ */
+const Palette = ({
+  presets,
+  value,
+  columns,
+  labels,
+  onSelect,
+  onAddClick,
+  onTabOut
+}) => {
+  const rootRef = useRef(null);
+  const hasPreset = presets.some(preset => preset.value === value);
+  const colors = value && !hasPreset ? [...presets, {
+    value,
+    label: value
+  }] : presets;
+  // The dropdown is portaled to the end of the document: move focus into it,
+  // to the selected swatch or the first item ("+" when there are no colors).
+  useEffect(() => {
+    var _a, _b;
+    const root = rootRef.current;
+    (_b = (_a = root === null || root === void 0 ? void 0 : root.querySelector('[aria-checked="true"]')) !== null && _a !== void 0 ? _a : root === null || root === void 0 ? void 0 : root.querySelector("button")) === null || _b === void 0 ? void 0 : _b.focus();
+  }, []);
+  // Arrow keys move focus across the grid, Home/End go to the first and the
+  // last item. Tab leaves the portaled palette through the trigger, so focus
+  // continues from it, also inside a parent focus trap.
+  const handleKeyDown = event => {
+    var _a;
+    if (event.key === "Tab") {
+      onTabOut();
+      return;
+    }
+    const items = Array.from(event.currentTarget.querySelectorAll("button"));
+    const index = items.indexOf(event.target);
+    const offsets = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -columns,
+      ArrowDown: columns,
+      Home: -index,
+      End: items.length - 1 - index
+    };
+    if (index === -1 || !(event.key in offsets)) return;
+    event.preventDefault();
+    (_a = items[index + offsets[event.key]]) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- keys come from the focused items
+    React.createElement("div", {
+      ref: rootRef,
+      role: "group",
+      "aria-label": labels.palette,
+      className: styles.root,
+      onKeyDown: handleKeyDown,
+      style: {
+        gridTemplateColumns: `repeat(${columns}, auto)`
+      }
+    }, colors.map(color => (/*#__PURE__*/React.createElement(Swatch, {
+      key: color.value,
+      color: color.value,
+      label: color.label,
+      selected: color.value === value,
+      onClick: () => onSelect(color.value)
+    }))), /*#__PURE__*/React.createElement(Button, {
+      className: styles.add,
+      variant: "secondary",
+      size: "xs",
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        width: 12,
+        height: 12,
+        "aria-hidden": "true"
+      }),
+      role: "menuitem",
+      "aria-label": labels.addCustom,
+      title: labels.addCustom,
+      onClick: onAddClick
+    }))
+  );
+};
+
+export { Palette };

package/esm/ColorPicker/components/SaturationPanel/SaturationPanel.module.css

@@ -0,0 +1,26 @@
+.root {
+  background-image: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent);
+  border-radius: var(--radius-sm);
+  cursor: crosshair;
+  height: var(--space-32);
+  outline: none;
+  position: relative;
+  touch-action: none;
+  -webkit-user-select: none;
+          user-select: none;
+  width: 100%;
+}
+.root:focus-visible {
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
+}
+
+.thumb {
+  border: var(--focus-ring-width) solid var(--color-neutral-0);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-raised);
+  height: var(--space-5);
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: var(--space-5);
+}

package/esm/ColorPicker/components/SaturationPanel/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { HSV } from "../../utils/color";
+interface SaturationPanelProps {
+    value: HSV;
+    onChange: (value: HSV) => void;
+    "aria-label": string;
+}
+/**
+ * Saturation (horizontal) and brightness (vertical) area. Arrow keys change
+ * by 1, with Shift by 10.
+ */
+export declare const SaturationPanel: ({ value, onChange, "aria-label": ariaLabel, }: SaturationPanelProps) => React.JSX.Element;
+export {};

package/esm/ColorPicker/components/SaturationPanel/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { usePointerDrag } from '../../hooks/usePointerDrag.js';
+import { hsv2css, clamp } from '../../utils/color.js';
+import styles from './SaturationPanel.module.css';
+
+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(({
+    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: clamp(s + delta[0], 0, 100),
+      v: clamp(v + delta[1], 0, 100)
+    });
+  };
+  return /*#__PURE__*/React.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.root,
+    style: {
+      backgroundColor: hsv2css({
+        h,
+        s: 100,
+        v: 100
+      })
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.thumb,
+    style: {
+      left: `${s}%`,
+      top: `${100 - v}%`,
+      backgroundColor: hsv2css(value)
+    }
+  }));
+};
+
+export { SaturationPanel };

package/esm/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/esm/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/esm/ColorPicker/components/Swatch/index.js

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

package/esm/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/esm/ColorPicker/hooks/useEyeDropper.js

@@ -0,0 +1,36 @@
+import { useSyncExternalStore, useCallback } from 'react';
+import { toHex } from '../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 = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  /** `#rrggbb`, or `null` when the user cancels with Escape. */
+  const pick = 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 toHex(sRGBHex);
+    } catch (_a) {
+      return null;
+    }
+  }, []);
+  return {
+    isSupported,
+    pick
+  };
+};
+
+export { useEyeDropper };

package/esm/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/esm/ColorPicker/hooks/useHexDraft.js

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { normalizeHex } from '../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] = useState(null);
+  const commit = text => {
+    const hex = normalizeHex(text);
+    if (hex && hex !== value) onChange(hex);
+  };
+  return {
+    invalid: draft !== null && 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 = normalizeHex(draft);
+        if (hex) {
+          commit(draft);
+          setDraft(hex);
+        }
+      }
+    }
+  };
+};
+
+export { useHexDraft };

package/esm/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/esm/ColorPicker/hooks/usePointerDrag.js

@@ -0,0 +1,53 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { clamp } from '../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 = useRef(null);
+  const onMoveRef = useRef(onMove);
+  useEffect(() => {
+    onMoveRef.current = onMove;
+  });
+  const move = useCallback(event => {
+    const element = ref.current;
+    if (!element) return;
+    const rect = element.getBoundingClientRect();
+    onMoveRef.current({
+      x: clamp((event.clientX - rect.left) / rect.width),
+      y: clamp((event.clientY - rect.top) / rect.height)
+    });
+  }, []);
+  const onPointerDown = 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 = useCallback(event => {
+    var _a;
+    if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.hasPointerCapture(event.pointerId)) move(event);
+  }, [move]);
+  const onPointerUp = 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
+    }
+  };
+};
+
+export { usePointerDrag };

package/esm/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/esm/ColorPicker/index.js

@@ -0,0 +1,2 @@
+export { ColorPicker } from './ColorPicker.js';
+export { COLOR_PICKER_PRESETS } from './presets.js';

package/esm/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/esm/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/esm/ColorPicker/presets.js

@@ -0,0 +1,89 @@
+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"
+};
+
+export { COLOR_PICKER_PRESETS, DEFAULT_LABELS };