colibri-ui 0.8.96 → 0.8.97

package/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ColorPickerProps } from "./index.props";
+export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, }: ColorPickerProps) => React.JSX.Element;

package/ColorPicker/ColorPicker.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var index = require('../Button/index.js');
+var index$1 = require('../Dropdown/index.js');
+var index$3 = require('./components/CustomColorModal/index.js');
+var index$2 = require('./components/Palette/index.js');
+var presets = require('./presets.js');
+var color = require('./utils/color.js');
+var styles = require('./ColorPicker.module.css');
+
+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);
+
+const normalizePresets = presets => presets.flatMap(preset => {
+  const value = color.normalizeHex(preset.value);
+  return value ? [Object.assign(Object.assign({}, preset), {
+    value
+  })] : [];
+});
+const ColorPicker = ({
+  value,
+  onChange,
+  presets: presets$1 = presets.COLOR_PICKER_PRESETS,
+  columns = 6,
+  disabled,
+  placement = "bottom-start",
+  zIndex,
+  labels: labelsProp,
+  children
+}) => {
+  var _a, _b;
+  const [isOpen, setOpen] = React.useState(false);
+  const [isCustomOpen, setCustomOpen] = React.useState(false);
+  const rootRef = React.useRef(null);
+  const overlayRef = React.useRef(null);
+  const labels = Object.assign(Object.assign({}, presets.DEFAULT_LABELS), labelsProp);
+  const current = value ? color.normalizeHex(value) : null;
+  const normalizedPresets = React.useMemo(() => normalizePresets(presets$1), [presets$1]);
+  // Selection, "+" and Escape remove the focused swatch together with the
+  // dropdown: return focus to the trigger. The custom color dialog then
+  // restores focus to the trigger as well.
+  const closeDropdown = () => {
+    var _a, _b;
+    const trigger = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (((_b = overlayRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement)) && trigger instanceof HTMLElement) {
+      trigger.focus();
+    }
+    setOpen(false);
+  };
+  const handleVisibleChange = visible => {
+    if (visible) setOpen(true);else closeDropdown();
+  };
+  const handleSelect = hex => {
+    closeDropdown();
+    onChange(hex);
+  };
+  const handleAddClick = () => {
+    closeDropdown();
+    setCustomOpen(true);
+  };
+  const handleSave = hex => {
+    setCustomOpen(false);
+    onChange(hex);
+  };
+  const trigger = children !== null && children !== void 0 ? children : (/*#__PURE__*/React__default.default.createElement(index.Button, {
+    variant: "outline",
+    className: clsx__default.default({
+      [styles__default.default.trigger_empty]: !current
+    }),
+    disabled: disabled,
+    "aria-label": labels.trigger,
+    icon: /*#__PURE__*/React__default.default.createElement("span", {
+      className: clsx__default.default(styles__default.default.dot, {
+        [styles__default.default.dot_hidden]: !current
+      }),
+      style: current ? {
+        backgroundColor: current
+      } : undefined
+    })
+  }));
+  return /*#__PURE__*/React__default.default.createElement("span", {
+    ref: rootRef,
+    className: styles__default.default.root
+  }, /*#__PURE__*/React__default.default.createElement(index$1.Dropdown, {
+    trigger: ["click"],
+    visible: isOpen,
+    onVisibleChange: handleVisibleChange,
+    preventAutoClose: true,
+    disabled: disabled,
+    placement: placement,
+    zIndex: zIndex,
+    overlay: /*#__PURE__*/React__default.default.createElement("div", {
+      ref: overlayRef
+    }, /*#__PURE__*/React__default.default.createElement(index$2.Palette, {
+      presets: normalizedPresets,
+      value: current,
+      columns: columns,
+      labels: labels,
+      onSelect: handleSelect,
+      onAddClick: handleAddClick,
+      onTabOut: closeDropdown
+    }))
+  }, trigger), isCustomOpen && (/*#__PURE__*/React__default.default.createElement(index$3.CustomColorModal, {
+    initialColor: (_b = current !== null && current !== void 0 ? current : (_a = normalizedPresets[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "#000000",
+    labels: labels,
+    onSave: handleSave,
+    onClose: () => setCustomOpen(false)
+  })));
+};
+
+exports.ColorPicker = ColorPicker;

package/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,22 @@
+.root {
+  display: contents;
+}
+
+.dot {
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-default);
+  display: block;
+  height: var(--space-4);
+  width: var(--space-4);
+}
+
+.trigger_empty {
+  background-image: url("./assets/none.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.dot_hidden {
+  display: none;
+}

package/ColorPicker/components/ColorPreview/ColorPreview.module.css

@@ -0,0 +1,23 @@
+.root {
+  align-items: center;
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-subtle);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-family: var(--font-family-ui);
+  font-size: var(--font-size-heading-md);
+  font-weight: var(--font-weight-medium);
+  height: var(--space-12);
+  justify-content: center;
+  line-height: 1;
+  transition: background-color 0.1s ease, color 0.1s ease;
+  width: var(--space-12);
+}
+
+.text_light {
+  color: var(--color-neutral-0);
+}
+
+.text_dark {
+  color: var(--color-neutral-950);
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { HSV } from "../../utils/color";
+interface ColorPreviewProps {
+    color: HSV;
+    children: ReactNode;
+}
+/** Circle with the color and a sample text in the automatically adjusted color. */
+export declare const ColorPreview: ({ color, children }: ColorPreviewProps) => React.JSX.Element;
+export {};

package/ColorPicker/components/ColorPreview/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var color = require('../../utils/color.js');
+var styles = require('./ColorPreview.module.css');
+
+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);
+
+/** Circle with the color and a sample text in the automatically adjusted color. */
+const ColorPreview = ({
+  color: color$1,
+  children
+}) => {
+  const hex = color.hsv2hex(color$1);
+  return /*#__PURE__*/React__default.default.createElement("span", {
+    "aria-hidden": "true",
+    className: clsx__default.default(styles__default.default.root, color.prefersLightText(hex) ? styles__default.default.text_light : styles__default.default.text_dark),
+    style: {
+      backgroundColor: hex
+    }
+  }, children);
+};
+
+exports.ColorPreview = ColorPreview;

package/ColorPicker/components/CustomColorModal/CustomColorModal.module.css

@@ -0,0 +1,18 @@
+.picker {
+  align-items: start;
+  display: grid;
+  gap: var(--space-5) var(--space-4);
+  grid-template-columns: auto 1fr;
+  margin-top: var(--space-5);
+}
+
+.side {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.full_row {
+  grid-column: 1/-1;
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ColorPickerLabels } from "../../index.props";
+interface CustomColorModalProps {
+    /** `#rrggbb` the picker starts from. */
+    initialColor: string;
+    labels: ColorPickerLabels;
+    onSave: (hex: string) => void;
+    onClose: () => void;
+}
+/**
+ * "Choose custom color" dialog. The draft is kept in HSV: HEX loses hue and
+ * saturation of grey and black, and the sliders would jump.
+ */
+export declare const CustomColorModal: ({ initialColor, labels, onSave, onClose, }: CustomColorModalProps) => React.JSX.Element;
+export {};

package/ColorPicker/components/CustomColorModal/index.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var React = require('react');
+var index$3 = require('../../../Button/index.js');
+require('../../../Icons/index.js');
+var index$6 = require('../../../Input/index.js');
+var index = require('../../../Modal/index.js');
+var index$1 = require('../../../Typography/index.js');
+var useEyeDropper = require('../../hooks/useEyeDropper.js');
+var useHexDraft = require('../../hooks/useHexDraft.js');
+var color = require('../../utils/color.js');
+var index$2 = require('../ColorPreview/index.js');
+var index$5 = require('../HueSlider/index.js');
+var index$4 = require('../SaturationPanel/index.js');
+var styles = require('./CustomColorModal.module.css');
+var Pipette = require('../../../Icons/Pipette.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const BLACK = {
+  h: 0,
+  s: 0,
+  v: 0
+};
+/**
+ * "Choose custom color" dialog. The draft is kept in HSV: HEX loses hue and
+ * saturation of grey and black, and the sliders would jump.
+ */
+const CustomColorModal = ({
+  initialColor,
+  labels,
+  onSave,
+  onClose
+}) => {
+  const [color$1, setColor] = React.useState(() => {
+    var _a;
+    return (_a = color.hex2hsv(initialColor)) !== null && _a !== void 0 ? _a : BLACK;
+  });
+  const hex = color.hsv2hex(color$1);
+  const {
+    isSupported,
+    pick
+  } = useEyeDropper.useEyeDropper();
+  const setHex = next => setColor(prev => {
+    var _a;
+    return (_a = color.toHsvPreservingHue(next, prev)) !== null && _a !== void 0 ? _a : prev;
+  });
+  const {
+    invalid,
+    inputProps
+  } = useHexDraft.useHexDraft(hex, setHex);
+  const handlePick = async () => {
+    const picked = await pick();
+    if (picked) setHex(picked);
+  };
+  return /*#__PURE__*/React__default.default.createElement(index.Modal, {
+    onClose: onClose
+  }, /*#__PURE__*/React__default.default.createElement(index.Modal.Header, null, /*#__PURE__*/React__default.default.createElement(index.Modal.Title, null, labels.customTitle)), /*#__PURE__*/React__default.default.createElement(index.Modal.Body, null, /*#__PURE__*/React__default.default.createElement(index$1.Typography, {
+    tag: "p",
+    variant: "secondary",
+    size: "text-sm"
+  }, labels.customDescription), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.picker
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.side
+  }, /*#__PURE__*/React__default.default.createElement(index$2.ColorPreview, {
+    color: color$1
+  }, labels.preview), isSupported && (/*#__PURE__*/React__default.default.createElement(index$3.Button, {
+    variant: "secondary",
+    size: "l",
+    icon: /*#__PURE__*/React__default.default.createElement(Pipette.Pipette, {
+      width: 20,
+      height: 20,
+      "aria-hidden": "true"
+    }),
+    "aria-label": labels.eyeDropper,
+    title: labels.eyeDropper,
+    onClick: handlePick
+  }))), /*#__PURE__*/React__default.default.createElement(index$4.SaturationPanel, {
+    value: color$1,
+    onChange: setColor,
+    "aria-label": labels.saturation
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.full_row
+  }, /*#__PURE__*/React__default.default.createElement(index$5.HueSlider, {
+    value: color$1,
+    onChange: setColor,
+    "aria-label": labels.hue
+  })), /*#__PURE__*/React__default.default.createElement(index$6.Input, Object.assign({
+    className: styles__default.default.full_row,
+    label: labels.hex,
+    hasError: invalid,
+    maxLength: 7,
+    spellCheck: false,
+    autoComplete: "off"
+  }, inputProps)))), /*#__PURE__*/React__default.default.createElement(index.Modal.Footer, null, /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+    variant: "clear",
+    onClick: onClose
+  }, labels.cancel), /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+    onClick: () => onSave(hex)
+  }, labels.save)));
+};
+
+exports.CustomColorModal = CustomColorModal;

package/ColorPicker/components/HueSlider/HueSlider.module.css

@@ -0,0 +1,31 @@
+.root {
+  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  height: var(--space-3);
+  outline: none;
+  position: relative;
+  touch-action: none;
+  -webkit-user-select: none;
+          user-select: none;
+}
+.root::before {
+  content: "";
+  inset: calc(var(--space-2) * -1) 0;
+  position: absolute;
+}
+.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;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--space-5);
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { HSV } from "../../utils/color";
+interface HueSliderProps {
+    value: HSV;
+    onChange: (value: HSV) => void;
+    "aria-label": string;
+}
+/** Hue bar. Arrow keys change by 1°, with Shift by 10°, Home/End go to the ends. */
+export declare const HueSlider: ({ value, onChange, "aria-label": ariaLabel, }: HueSliderProps) => React.JSX.Element;
+export {};

package/ColorPicker/components/HueSlider/index.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var React = require('react');
+var usePointerDrag = require('../../hooks/usePointerDrag.js');
+var color = require('../../utils/color.js');
+var styles = require('./HueSlider.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;
+/** Hue bar. Arrow keys change by 1°, with Shift by 10°, Home/End go to the ends. */
+const HueSlider = ({
+  value,
+  onChange,
+  "aria-label": ariaLabel
+}) => {
+  const {
+    h
+  } = value;
+  const {
+    ref,
+    handlers
+  } = usePointerDrag.usePointerDrag(({
+    x
+  }) => onChange(Object.assign(Object.assign({}, value), {
+    h: x * 360
+  })));
+  const handleKeyDown = event => {
+    const step = event.shiftKey ? BIG_STEP : STEP;
+    const next = {
+      ArrowLeft: h - step,
+      ArrowDown: h - step,
+      ArrowRight: h + step,
+      ArrowUp: h + step,
+      Home: 0,
+      End: 360
+    };
+    if (!(event.key in next)) return;
+    event.preventDefault();
+    onChange(Object.assign(Object.assign({}, value), {
+      h: color.clamp(next[event.key], 0, 360)
+    }));
+  };
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({
+    ref: ref
+  }, handlers, {
+    role: "slider",
+    tabIndex: 0,
+    "aria-label": ariaLabel,
+    "aria-orientation": "horizontal",
+    "aria-valuemin": 0,
+    "aria-valuemax": 360,
+    "aria-valuenow": Math.round(h),
+    onKeyDown: handleKeyDown,
+    className: styles__default.default.root
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.thumb,
+    style: {
+      left: `${h / 360 * 100}%`,
+      backgroundColor: color.hsv2css({
+        h,
+        s: 100,
+        v: 100
+      })
+    }
+  }));
+};
+
+exports.HueSlider = HueSlider;

package/ColorPicker/components/Palette/Palette.module.css

@@ -0,0 +1,12 @@
+.root {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-3);
+}
+
+.add {
+  height: var(--space-6);
+  min-width: 0;
+  padding: 0;
+  width: var(--space-6);
+}

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

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+var index$1 = require('../../../Button/index.js');
+require('../../../Icons/index.js');
+var index = require('../Swatch/index.js');
+var styles = require('./Palette.module.css');
+var Plus = require('../../../Icons/Plus.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+/**
+ * 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 = React.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).
+  React.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__default.default.createElement("div", {
+      ref: rootRef,
+      role: "group",
+      "aria-label": labels.palette,
+      className: styles__default.default.root,
+      onKeyDown: handleKeyDown,
+      style: {
+        gridTemplateColumns: `repeat(${columns}, auto)`
+      }
+    }, colors.map(color => (/*#__PURE__*/React__default.default.createElement(index.Swatch, {
+      key: color.value,
+      color: color.value,
+      label: color.label,
+      selected: color.value === value,
+      onClick: () => onSelect(color.value)
+    }))), /*#__PURE__*/React__default.default.createElement(index$1.Button, {
+      className: styles__default.default.add,
+      variant: "secondary",
+      size: "xs",
+      icon: /*#__PURE__*/React__default.default.createElement(Plus.Plus, {
+        width: 12,
+        height: 12,
+        "aria-hidden": "true"
+      }),
+      role: "menuitem",
+      "aria-label": labels.addCustom,
+      title: labels.addCustom,
+      onClick: onAddClick
+    }))
+  );
+};
+
+exports.Palette = Palette;

package/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/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 {};