colibri-ui 0.8.95 → 0.8.97

package/ColorPicker/utils/color.js

@@ -0,0 +1,162 @@
+'use strict';
+
+const clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+const round1 = value => Math.round(value * 10) / 10;
+const hsv2rgb = ({
+  h,
+  s,
+  v
+}) => {
+  const sat = s / 100;
+  const val = v / 100;
+  const channel = n => {
+    const k = (n + h / 60) % 6;
+    return Math.round((val - val * sat * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
+  };
+  return {
+    r: channel(5),
+    g: channel(3),
+    b: channel(1)
+  };
+};
+// Not rounded, so repeated conversions do not accumulate errors.
+const rgb2hsv = ({
+  r,
+  g,
+  b
+}) => {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rn) {
+      h = (gn - bn) / delta % 6;
+    } else if (max === gn) {
+      h = (bn - rn) / delta + 2;
+    } else {
+      h = (rn - gn) / delta + 4;
+    }
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return {
+    h,
+    s: max === 0 ? 0 : delta / max * 100,
+    v: max * 100
+  };
+};
+/** HSV → `hsl(...)` for inline styles. */
+const hsv2css = ({
+  h,
+  s,
+  v
+}) => {
+  const sat = s / 100;
+  const val = v / 100;
+  const l = val * (1 - sat / 2);
+  const sl = l === 0 || l === 1 ? 0 : (val - l) / Math.min(l, 1 - l);
+  return `hsl(${round1(h)}, ${round1(sl * 100)}%, ${round1(l * 100)}%)`;
+};
+const HEX_RE = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+/** `#ABC`, `abc`, `#aabbcc` → `#aabbcc`. Invalid input → `null`. */
+const normalizeHex = input => {
+  const match = HEX_RE.exec(input.trim());
+  if (!match) return null;
+  const digits = match[1].length === 3 ? match[1].replace(/./g, c => c + c) : match[1];
+  return `#${digits.toLowerCase()}`;
+};
+const hex2rgb = hex => {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const int = parseInt(normalized.slice(1), 16);
+  return {
+    r: int >> 16 & 255,
+    g: int >> 8 & 255,
+    b: int & 255
+  };
+};
+const rgb2hex = ({
+  r,
+  g,
+  b
+}) => `#${[r, g, b].map(c => Math.round(clamp(c, 0, 255)).toString(16).padStart(2, "0")).join("")}`;
+const hsv2hex = hsv => rgb2hex(hsv2rgb(hsv));
+const hex2hsv = hex => {
+  const rgb = hex2rgb(hex);
+  return rgb ? rgb2hsv(rgb) : null;
+};
+const RGB_RE = /^rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})/i;
+/** HEX or `rgb()`/`rgba()` → `#rrggbb`. Invalid input → `null`. */
+const toHex = input => {
+  const rgbMatch = RGB_RE.exec(input.trim());
+  if (rgbMatch) {
+    const [r, g, b] = rgbMatch.slice(1).map(Number);
+    return rgb2hex({
+      r,
+      g,
+      b
+    });
+  }
+  return normalizeHex(input);
+};
+/**
+ * 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).
+ */
+const toHsvPreservingHue = (hex, prev) => {
+  const next = hex2hsv(hex);
+  if (!next) return null;
+  if (next.v === 0) return {
+    h: prev.h,
+    s: prev.s,
+    v: 0
+  };
+  if (next.s === 0) return {
+    h: prev.h,
+    s: 0,
+    v: next.v
+  };
+  return next;
+};
+/** WCAG 2.x relative luminance, 0–1. */
+const relativeLuminance = ({
+  r,
+  g,
+  b
+}) => {
+  const [lr, lg, lb] = [r, g, b].map(c => {
+    const x = c / 255;
+    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+};
+const WHITE_LUMINANCE = 1;
+const BLACK_LUMINANCE = 0;
+const contrast = (a, b) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+/** Whether light text reads better than dark text on `background` (HEX). */
+const prefersLightText = background => {
+  const rgb = hex2rgb(background);
+  if (!rgb) return false;
+  const luminance = relativeLuminance(rgb);
+  return contrast(luminance, WHITE_LUMINANCE) >= contrast(luminance, BLACK_LUMINANCE);
+};
+/** A light color that merges with a light surface and needs an outline. */
+const isLightColor = (hex, threshold = 0.85) => {
+  const rgb = hex2rgb(hex);
+  return rgb ? relativeLuminance(rgb) >= threshold : false;
+};
+
+exports.clamp = clamp;
+exports.hex2hsv = hex2hsv;
+exports.hsv2css = hsv2css;
+exports.hsv2hex = hsv2hex;
+exports.isLightColor = isLightColor;
+exports.normalizeHex = normalizeHex;
+exports.prefersLightText = prefersLightText;
+exports.toHex = toHex;
+exports.toHsvPreservingHue = toHsvPreservingHue;

package/Icons/Pipette.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { Props } from "./index.props";
+export declare const Pipette: ({ fill, width, height, ref, ...props }: Props) => React.JSX.Element;

package/Icons/Pipette.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Pipette = _a => {
+  var {
+      fill = "currentColor",
+      width = 24,
+      height = 24,
+      ref
+    } = _a,
+    props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height
+  }, props, {
+    ref: ref,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    stroke: fill,
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M14.5 4.5l5 5M17 2.5a2.12 2.12 0 0 1 3 3L17.5 8l1 1-1.5 1.5-5-5L13.5 4l1 1L17 2.5zM12 7l-8 8v4h4l8-8"
+  }));
+};
+
+exports.Pipette = Pipette;

package/Icons/index.d.ts

@@ -14,6 +14,7 @@ export { Help } from "./Help";
 export { Info } from "./Info";
 export { Minus } from "./Minus";
 export { More } from "./More";
+export { Pipette } from "./Pipette";
 export { Plus } from "./Plus";
 export { Setting } from "./Setting";
 export { Shield } from "./Shield";

package/Icons/index.js

@@ -16,6 +16,7 @@ var Help = require('./Help.js');
 var Info = require('./Info.js');
 var Minus = require('./Minus.js');
 var More = require('./More.js');
+var Pipette = require('./Pipette.js');
 var Plus = require('./Plus.js');
 var Setting = require('./Setting.js');
 var Shield = require('./Shield.js');
@@ -40,6 +41,7 @@ exports.Help = Help.Help;
 exports.Info = Info.Info;
 exports.Minus = Minus.Minus;
 exports.More = More.More;
+exports.Pipette = Pipette.Pipette;
 exports.Plus = Plus.Plus;
 exports.Setting = Setting.Setting;
 exports.Shield = Shield.Shield;

package/Modal/Modal.module.css

@@ -61,4 +61,14 @@
   max-height: calc(100% - var(--space-8));
   max-width: calc(100% - var(--space-8));
   min-width: 0;
+}
+
+.modal-wrapper_contained.modal-wrapper_fill {
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  max-height: none;
+  max-width: none;
+  min-width: 0;
+  width: 100%;
 }

package/Modal/index.js

@@ -30,7 +30,8 @@ const ModalRoot = ({
   className,
   onClose,
   title,
-  withinParent = false
+  withinParent = false,
+  fillParent = false
 }) => {
   const [dialog, setDialog] = React.useState(null);
   const [container, setContainer] = React.useState(null);
@@ -108,7 +109,8 @@ const ModalRoot = ({
     className: clsx__default.default(styles__default.default["modal-wrapper"], {
       [styles__default.default["modal-wrapper_desktop"]]: isDesktop,
       [styles__default.default["modal-wrapper_mobile"]]: !isDesktop,
-      [styles__default.default["modal-wrapper_contained"]]: isContained
+      [styles__default.default["modal-wrapper_contained"]]: isContained,
+      [styles__default.default["modal-wrapper_fill"]]: isContained && fillParent
     }, className),
     ref: setContainer
   }, content))));

package/Modal/index.props.d.ts

@@ -13,6 +13,12 @@ export type ModalProps = {
      * rendered inside another `Modal`.
      */
     withinParent?: boolean;
+    /**
+     * Makes a `withinParent` modal take the whole parent window, with no
+     * offset. The parent border and radius form the edges. Has no effect
+     * without `withinParent` or a parent modal.
+     */
+    fillParent?: boolean;
 };
 export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
     /**

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

@@ -0,0 +1,108 @@
+import React, { useState, useRef, useMemo } from 'react';
+import clsx from 'clsx';
+import { Button } from '../Button/index.js';
+import { Dropdown } from '../Dropdown/index.js';
+import { CustomColorModal } from './components/CustomColorModal/index.js';
+import { Palette } from './components/Palette/index.js';
+import { DEFAULT_LABELS, COLOR_PICKER_PRESETS } from './presets.js';
+import { normalizeHex } from './utils/color.js';
+import styles from './ColorPicker.module.css';
+
+const normalizePresets = presets => presets.flatMap(preset => {
+  const value = normalizeHex(preset.value);
+  return value ? [Object.assign(Object.assign({}, preset), {
+    value
+  })] : [];
+});
+const ColorPicker = ({
+  value,
+  onChange,
+  presets = COLOR_PICKER_PRESETS,
+  columns = 6,
+  disabled,
+  placement = "bottom-start",
+  zIndex,
+  labels: labelsProp,
+  children
+}) => {
+  var _a, _b;
+  const [isOpen, setOpen] = useState(false);
+  const [isCustomOpen, setCustomOpen] = useState(false);
+  const rootRef = useRef(null);
+  const overlayRef = useRef(null);
+  const labels = Object.assign(Object.assign({}, DEFAULT_LABELS), labelsProp);
+  const current = value ? normalizeHex(value) : null;
+  const normalizedPresets = useMemo(() => normalizePresets(presets), [presets]);
+  // 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.createElement(Button, {
+    variant: "outline",
+    className: clsx({
+      [styles.trigger_empty]: !current
+    }),
+    disabled: disabled,
+    "aria-label": labels.trigger,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: clsx(styles.dot, {
+        [styles.dot_hidden]: !current
+      }),
+      style: current ? {
+        backgroundColor: current
+      } : undefined
+    })
+  }));
+  return /*#__PURE__*/React.createElement("span", {
+    ref: rootRef,
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ["click"],
+    visible: isOpen,
+    onVisibleChange: handleVisibleChange,
+    preventAutoClose: true,
+    disabled: disabled,
+    placement: placement,
+    zIndex: zIndex,
+    overlay: /*#__PURE__*/React.createElement("div", {
+      ref: overlayRef
+    }, /*#__PURE__*/React.createElement(Palette, {
+      presets: normalizedPresets,
+      value: current,
+      columns: columns,
+      labels: labels,
+      onSelect: handleSelect,
+      onAddClick: handleAddClick,
+      onTabOut: closeDropdown
+    }))
+  }, trigger), isCustomOpen && (/*#__PURE__*/React.createElement(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)
+  })));
+};
+
+export { ColorPicker };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import { hsv2hex, prefersLightText } from '../../utils/color.js';
+import styles from './ColorPreview.module.css';
+
+/** Circle with the color and a sample text in the automatically adjusted color. */
+const ColorPreview = ({
+  color,
+  children
+}) => {
+  const hex = hsv2hex(color);
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    className: clsx(styles.root, prefersLightText(hex) ? styles.text_light : styles.text_dark),
+    style: {
+      backgroundColor: hex
+    }
+  }, children);
+};
+
+export { ColorPreview };

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

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { Button } from '../../../Button/index.js';
+import 'tslib';
+import { Pipette } from '../../../Icons/Pipette.js';
+import { Input } from '../../../Input/index.js';
+import { Modal } from '../../../Modal/index.js';
+import { Typography } from '../../../Typography/index.js';
+import { useEyeDropper } from '../../hooks/useEyeDropper.js';
+import { useHexDraft } from '../../hooks/useHexDraft.js';
+import { hex2hsv, hsv2hex, toHsvPreservingHue } from '../../utils/color.js';
+import { ColorPreview } from '../ColorPreview/index.js';
+import { HueSlider } from '../HueSlider/index.js';
+import { SaturationPanel } from '../SaturationPanel/index.js';
+import styles from './CustomColorModal.module.css';
+
+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, setColor] = useState(() => {
+    var _a;
+    return (_a = hex2hsv(initialColor)) !== null && _a !== void 0 ? _a : BLACK;
+  });
+  const hex = hsv2hex(color);
+  const {
+    isSupported,
+    pick
+  } = useEyeDropper();
+  const setHex = next => setColor(prev => {
+    var _a;
+    return (_a = toHsvPreservingHue(next, prev)) !== null && _a !== void 0 ? _a : prev;
+  });
+  const {
+    invalid,
+    inputProps
+  } = useHexDraft(hex, setHex);
+  const handlePick = async () => {
+    const picked = await pick();
+    if (picked) setHex(picked);
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Modal.Title, null, labels.customTitle)), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Typography, {
+    tag: "p",
+    variant: "secondary",
+    size: "text-sm"
+  }, labels.customDescription), /*#__PURE__*/React.createElement("div", {
+    className: styles.picker
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.side
+  }, /*#__PURE__*/React.createElement(ColorPreview, {
+    color: color
+  }, labels.preview), isSupported && (/*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    size: "l",
+    icon: /*#__PURE__*/React.createElement(Pipette, {
+      width: 20,
+      height: 20,
+      "aria-hidden": "true"
+    }),
+    "aria-label": labels.eyeDropper,
+    title: labels.eyeDropper,
+    onClick: handlePick
+  }))), /*#__PURE__*/React.createElement(SaturationPanel, {
+    value: color,
+    onChange: setColor,
+    "aria-label": labels.saturation
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.full_row
+  }, /*#__PURE__*/React.createElement(HueSlider, {
+    value: color,
+    onChange: setColor,
+    "aria-label": labels.hue
+  })), /*#__PURE__*/React.createElement(Input, Object.assign({
+    className: styles.full_row,
+    label: labels.hex,
+    hasError: invalid,
+    maxLength: 7,
+    spellCheck: false,
+    autoComplete: "off"
+  }, inputProps)))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "clear",
+    onClick: onClose
+  }, labels.cancel), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => onSave(hex)
+  }, labels.save)));
+};
+
+export { CustomColorModal };

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