colibri-ui 0.8.95 → 0.8.97

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 };

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

package/esm/ColorPicker/utils/color.js

@@ -0,0 +1,152 @@
+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;
+};
+
+export { clamp, hex2hsv, hsv2css, hsv2hex, isLightColor, normalizeHex, prefersLightText, toHex, toHsvPreservingHue };

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

@@ -0,0 +1,29 @@
+import { __rest } from 'tslib';
+import React from 'react';
+
+const Pipette = _a => {
+  var {
+      fill = "currentColor",
+      width = 24,
+      height = 24,
+      ref
+    } = _a,
+    props = __rest(_a, ["fill", "width", "height", "ref"]);
+  return /*#__PURE__*/React.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.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"
+  }));
+};
+
+export { Pipette };

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

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

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

@@ -22,7 +22,8 @@ const ModalRoot = ({
   className,
   onClose,
   title,
-  withinParent = false
+  withinParent = false,
+  fillParent = false
 }) => {
   const [dialog, setDialog] = useState(null);
   const [container, setContainer] = useState(null);
@@ -100,7 +101,8 @@ const ModalRoot = ({
     className: clsx(styles["modal-wrapper"], {
       [styles["modal-wrapper_desktop"]]: isDesktop,
       [styles["modal-wrapper_mobile"]]: !isDesktop,
-      [styles["modal-wrapper_contained"]]: isContained
+      [styles["modal-wrapper_contained"]]: isContained,
+      [styles["modal-wrapper_fill"]]: isContained && fillParent
     }, className),
     ref: setContainer
   }, content))));

package/esm/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/index.d.ts

@@ -18,6 +18,8 @@ export { Chip } from "./Chip";
 export type { ChipProps, ChipSize, ChipVariant } from "./Chip/index.props";
 export { CodeField, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, ONLY_DIGITS_PATTERN, } from "./CodeField";
 export type { CodeErrorBehavior, CodeFieldProps, CodeFieldShape, CodeFieldSize, ItemErrorBehavior, } from "./CodeField";
+export { ColorPicker, COLOR_PICKER_PRESETS } from "./ColorPicker";
+export type { ColorPickerLabels, ColorPickerPreset, ColorPickerProps, } from "./ColorPicker";
 export { Counter } from "./Counter";
 export type { CounterProps } from "./Counter/index.props";
 export { Datepicker } from "./Datepicker";

package/esm/index.js

@@ -8,6 +8,8 @@ export { Card, CardContent, CardInnerContent } from './Card/Card.js';
 export { Checkbox } from './Checkbox/index.js';
 export { Chip } from './Chip/index.js';
 export { CodeField, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, ONLY_DIGITS_PATTERN } from './CodeField/CodeField.js';
+export { ColorPicker } from './ColorPicker/ColorPicker.js';
+export { COLOR_PICKER_PRESETS } from './ColorPicker/presets.js';
 export { Counter } from './Counter/index.js';
 export { Datepicker } from './Datepicker/index.js';
 export { DotsLoader } from './DotsLoader/index.js';
@@ -63,6 +65,7 @@ export { Help } from './Icons/Help.js';
 export { Info } from './Icons/Info.js';
 export { Minus } from './Icons/Minus.js';
 export { More } from './Icons/More.js';
+export { Pipette } from './Icons/Pipette.js';
 export { Plus } from './Icons/Plus.js';
 export { Setting } from './Icons/Setting.js';
 export { Shield } from './Icons/Shield.js';

package/index.d.ts

@@ -18,6 +18,8 @@ export { Chip } from "./Chip";
 export type { ChipProps, ChipSize, ChipVariant } from "./Chip/index.props";
 export { CodeField, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, ONLY_DIGITS_PATTERN, } from "./CodeField";
 export type { CodeErrorBehavior, CodeFieldProps, CodeFieldShape, CodeFieldSize, ItemErrorBehavior, } from "./CodeField";
+export { ColorPicker, COLOR_PICKER_PRESETS } from "./ColorPicker";
+export type { ColorPickerLabels, ColorPickerPreset, ColorPickerProps, } from "./ColorPicker";
 export { Counter } from "./Counter";
 export type { CounterProps } from "./Counter/index.props";
 export { Datepicker } from "./Datepicker";

package/index.js

@@ -10,6 +10,7 @@ require('./Card/index.js');
 var index$4 = require('./Checkbox/index.js');
 var index$5 = require('./Chip/index.js');
 require('./CodeField/index.js');
+require('./ColorPicker/index.js');
 var index$6 = require('./Counter/index.js');
 var index$7 = require('./Datepicker/index.js');
 var index$8 = require('./DotsLoader/index.js');
@@ -52,6 +53,7 @@ require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Autocomplete = require('./Autocomplete/Autocomplete.js');
 var breakpoints = require('./Theme/breakpoints.js');
+var presets = require('./ColorPicker/presets.js');
 var Calendar = require('./Calendar/Calendar.js');
 var Card = require('./Card/Card.js');
 var Cart = require('./Icons/Cart.js');
@@ -59,6 +61,7 @@ var Check = require('./Icons/Check.js');
 var Chevron = require('./Icons/Chevron.js');
 var Close = require('./Icons/Close.js');
 var CodeField = require('./CodeField/CodeField.js');
+var ColorPicker = require('./ColorPicker/ColorPicker.js');
 var Copy = require('./Icons/Copy.js');
 var Cross = require('./Icons/Cross.js');
 var CrossFill = require('./Icons/CrossFill.js');
@@ -80,6 +83,7 @@ var index$k = require('./Modal/components/Title/index.js');
 var More = require('./Icons/More.js');
 var NumberInput = require('./NumberInput/NumberInput.js');
 var Pagination = require('./Pagination/Pagination.js');
+var Pipette = require('./Icons/Pipette.js');
 var Plus = require('./Icons/Plus.js');
 var Progress = require('./Progress/Progress.js');
 var Rating = require('./Rating/Rating.js');
@@ -132,6 +136,7 @@ exports.ArrowNext = ArrowNext.ArrowNext;
 exports.Autocomplete = Autocomplete.Autocomplete;
 exports.BREAKPOINTS = breakpoints.BREAKPOINTS;
 exports.media = breakpoints.media;
+exports.COLOR_PICKER_PRESETS = presets.COLOR_PICKER_PRESETS;
 exports.Calendar = Calendar.Calendar;
 exports.Card = Card.Card;
 exports.CardContent = Card.CardContent;
@@ -144,6 +149,7 @@ exports.CodeField = CodeField.CodeField;
 exports.ONLY_CHARS_PATTERN = CodeField.ONLY_CHARS_PATTERN;
 exports.ONLY_DIGITS_AND_CHARS_PATTERN = CodeField.ONLY_DIGITS_AND_CHARS_PATTERN;
 exports.ONLY_DIGITS_PATTERN = CodeField.ONLY_DIGITS_PATTERN;
+exports.ColorPicker = ColorPicker.ColorPicker;
 exports.Copy = Copy.Copy;
 exports.Cross = Cross.Cross;
 exports.CrossFill = CrossFill.CrossFill;
@@ -170,6 +176,7 @@ exports.ModalTitle = index$k.Title;
 exports.More = More.More;
 exports.NumberInput = NumberInput.NumberInput;
 exports.Pagination = Pagination.Pagination;
+exports.Pipette = Pipette.Pipette;
 exports.Plus = Plus.Plus;
 exports.Progress = Progress.Progress;
 exports.Rating = Rating.Rating;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.95",
+  "version": "0.8.97",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",