Build & Release v1.5.5

dist/common/color.d.ts

@@ -23,3 +23,55 @@ export declare class Color {
      */
     static lookup(value: number, colors: Color[]): Color;
 }
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface RgbaColor extends RgbColor {
+    a: number;
+}
+export interface HslColor {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface HslaColor extends HslColor {
+    a: number;
+}
+export interface HsvColor {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface HsvaColor extends HsvColor {
+    a: number;
+}
+export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+export type AnyColor = string | ObjectColor;
+export declare const hexToHsva: (hex: string) => HsvaColor;
+export declare const hexToRgba: (hex: string) => RgbaColor;
+export declare const parseHue: (value: string, unit?: string) => number;
+export declare const hslaStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
+export declare const hsvaToHex: (hsva: HsvaColor) => string;
+export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+export declare const hsvaToHslString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvaString: (hsva: HsvaColor) => string;
+export declare const hsvaToHslaString: (hsva: HsvaColor) => string;
+export declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+export declare const hsvaToRgbString: (hsva: HsvaColor) => string;
+export declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
+export declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
+export declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
+export declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+export declare const roundHsva: (hsva: HsvaColor) => HsvaColor;
+export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+export declare const hsvaToHsv: (hsva: HsvaColor) => HsvColor;
+export declare const validHex: (value: string, alpha?: boolean) => boolean;

dist/common/color.js

@@ -1,25 +1,25 @@
-var g = Object.defineProperty;
-var u = (e, t, r) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var i = (e, t, r) => u(e, typeof t != "symbol" ? t + "" : t, r);
-class n {
-  constructor(t = 0, r = 0, s = 0, a = 1) {
-    i(this, "r");
-    i(this, "g");
-    i(this, "b");
-    i(this, "a");
-    this.r = t, this.g = r, this.b = s, this.a = a;
+var v = Object.defineProperty;
+var H = (r, t, s) => t in r ? v(r, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[t] = s;
+var c = (r, t, s) => H(r, typeof t != "symbol" ? t + "" : t, s);
+class u {
+  constructor(t = 0, s = 0, n = 0, e = 1) {
+    c(this, "r");
+    c(this, "g");
+    c(this, "b");
+    c(this, "a");
+    this.r = t, this.g = s, this.b = n, this.a = e;
   }
   toString() {
     let t = this.a;
     return typeof t == "string" && (t = Number.parseFloat(this.a)), Number.isNaN(t) && (t = 1), `rgba(${this.r | 0}, ${this.g | 0}, ${this.b | 0}, ${t})`;
   }
   /**  Darkens a color by a given percent. Returns a color, which can have toString called to get it's rgba() css value. */
   darken(t) {
-    const r = t / 100;
-    return new n(
-      this.r - this.r * r,
-      this.g - this.g * r,
-      this.b - this.b * r,
+    const s = t / 100;
+    return new u(
+      this.r - this.r * s,
+      this.g - this.g * s,
+      this.b - this.b * s,
       this.a
     );
   }
@@ -31,7 +31,7 @@ class n {
    * Creates a color from the CSS hex color notation.
    */
   static fromHex(t) {
-    return new n(
+    return new u(
       Number.parseInt(t.slice(1, 3), 16),
       Number.parseInt(t.slice(3, 5), 16),
       Number.parseInt(t.slice(5, 7), 16)
@@ -40,31 +40,169 @@ class n {
   /**
    * Linear interpolation of two colors.
    */
-  static lerp(t, r, s) {
-    return new n(
-      (r.r - t.r) * s + t.r,
-      (r.g - t.g) * s + t.g,
-      (r.b - t.b) * s + t.b,
-      (r.a - t.a) * s + t.a
+  static lerp(t, s, n) {
+    return new u(
+      (s.r - t.r) * n + t.r,
+      (s.g - t.g) * n + t.g,
+      (s.b - t.b) * n + t.b,
+      (s.a - t.a) * n + t.a
     );
   }
   /**
    * Loops up the color in the provided list of colors
    * with linear interpolation.
    */
-  static lookup(t, r) {
-    const s = r.length;
-    if (s < 2)
+  static lookup(t, s) {
+    const n = s.length;
+    if (n < 2)
       throw new Error("Needs at least two colors!");
-    const a = t * (s - 1);
+    const e = t * (n - 1);
     if (t < 1e-4)
-      return r[0];
+      return s[0];
     if (t >= 1 - 1e-4)
-      return r[s - 1];
-    const b = a % 1, h = a | 0;
-    return n.lerp(r[h], r[h + 1], b);
+      return s[n - 1];
+    const o = e % 1, h = e | 0;
+    return u.lerp(s[h], s[h + 1], o);
   }
 }
+const a = (r, t = 0, s = 10 ** t) => Math.round(s * r) / s, T = {
+  grad: 360 / 400,
+  turn: 360,
+  rad: 360 / (Math.PI * 2)
+}, E = (r) => N(p(r)), p = (r) => {
+  let t = r;
+  return t[0] === "#" && (t = t.substring(1)), t.length < 6 ? {
+    r: Number.parseInt(t[0] + t[0], 16),
+    g: Number.parseInt(t[1] + t[1], 16),
+    b: Number.parseInt(t[2] + t[2], 16),
+    a: t.length === 4 ? a(Number.parseInt(t[3] + t[3], 16) / 255, 2) : 1
+  } : {
+    r: Number.parseInt(t.substring(0, 2), 16),
+    g: Number.parseInt(t.substring(2, 4), 16),
+    b: Number.parseInt(t.substring(4, 6), 16),
+    a: t.length === 8 ? a(Number.parseInt(t.substring(6, 8), 16) / 255, 2) : 1
+  };
+}, $ = (r, t = "deg") => Number(r) * (T[t] || 1), S = (r) => {
+  const s = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);
+  return s ? x({
+    h: $(s[1], s[2]),
+    s: Number(s[3]),
+    l: Number(s[4]),
+    a: s[5] === void 0 ? 1 : Number(s[5]) / (s[6] ? 100 : 1)
+  }) : { h: 0, s: 0, v: 0, a: 1 };
+}, P = S, x = ({ h: r, s: t, l: s, a: n }) => (t *= (s < 50 ? s : 100 - s) / 100, {
+  h: r,
+  s: t > 0 ? 2 * t / (s + t) * 100 : 0,
+  v: s + t,
+  a: n
+}), k = (r) => w(m(r)), l = ({ h: r, s: t, v: s, a: n }) => {
+  const e = (200 - t) * s / 100;
+  return {
+    h: a(r),
+    s: a(
+      e > 0 && e < 200 ? t * s / 100 / (e <= 100 ? e : 200 - e) * 100 : 0
+    ),
+    l: a(e / 2),
+    a: a(n, 2)
+  };
+}, L = (r) => {
+  const { h: t, s, l: n } = l(r);
+  return `hsl(${t}, ${s}%, ${n}%)`;
+}, O = (r) => {
+  const { h: t, s, v: n } = g(r);
+  return `hsv(${t}, ${s}%, ${n}%)`;
+}, F = (r) => {
+  const { h: t, s, v: n, a: e } = g(r);
+  return `hsva(${t}, ${s}%, ${n}%, ${e})`;
+}, y = (r) => {
+  const { h: t, s, l: n, a: e } = l(r);
+  return `hsla(${t}, ${s}%, ${n}%, ${e})`;
+}, m = ({ h: r, s: t, v: s, a: n }) => {
+  r = r / 360 * 6, t = t / 100, s = s / 100;
+  const e = Math.floor(r), o = s * (1 - t), h = s * (1 - (r - e) * t), b = s * (1 - (1 - r + e) * t), d = e % 6;
+  return {
+    r: [s, h, o, o, b, s][d] * 255,
+    g: [b, s, s, h, o, o][d] * 255,
+    b: [o, o, b, s, s, h][d] * 255,
+    a: a(n, 2)
+  };
+}, A = (r) => {
+  const { r: t, g: s, b: n } = m(r);
+  return `rgb(${a(t)}, ${a(s)}, ${a(n)})`;
+}, U = (r) => {
+  const { r: t, g: s, b: n, a: e } = m(r);
+  return `rgba(${a(t)}, ${a(s)}, ${a(n)}, ${a(e, 2)})`;
+}, I = (r) => {
+  const s = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);
+  return s ? g({
+    h: $(s[1], s[2]),
+    s: Number(s[3]),
+    v: Number(s[4]),
+    a: s[5] === void 0 ? 1 : Number(s[5]) / (s[6] ? 100 : 1)
+  }) : { h: 0, s: 0, v: 0, a: 1 };
+}, V = I, f = (r) => {
+  const s = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);
+  return s ? N({
+    r: Number(s[1]) / (s[2] ? 100 / 255 : 1),
+    g: Number(s[3]) / (s[4] ? 100 / 255 : 1),
+    b: Number(s[5]) / (s[6] ? 100 / 255 : 1),
+    a: s[7] === void 0 ? 1 : Number(s[7]) / (s[8] ? 100 : 1)
+  }) : { h: 0, s: 0, v: 0, a: 1 };
+}, j = f, i = (r) => {
+  const t = r.toString(16);
+  return t.length < 2 ? `0${t}` : t;
+}, w = ({ r, g: t, b: s, a: n }) => {
+  const e = n < 1 ? i(a(n * 255)) : "";
+  return `#${i(a(r))}${i(a(t))}${i(a(s))}${e}`;
+}, N = ({ r, g: t, b: s, a: n }) => {
+  const e = Math.max(r, t, s), o = e - Math.min(r, t, s), h = o ? e === r ? (t - s) / o : e === t ? 2 + (s - r) / o : 4 + (r - t) / o : 0;
+  return {
+    h: 60 * (h < 0 ? h + 6 : h),
+    s: e ? o / e * 100 : 0,
+    v: e / 255 * 100,
+    a: n
+  };
+}, g = (r) => ({
+  h: a(r.h),
+  s: a(r.s),
+  v: a(r.v),
+  a: a(r.a, 2)
+}), q = ({ r, g: t, b: s }) => ({ r, g: t, b: s }), z = ({ h: r, s: t, l: s }) => ({ h: r, s: t, l: s }), B = (r) => {
+  const { h: t, s, v: n } = g(r);
+  return { h: t, s, v: n };
+}, M = /^#?([0-9A-F]{3,8})$/i, D = (r, t) => {
+  const s = M.exec(r), n = s ? s[1].length : 0;
+  return n === 3 || // '#rgb' format
+  n === 6 || // '#rrggbb' format
+  !!t && n === 4 || // '#rgba' format
+  !!t && n === 8;
+};
 export {
-  n as Color
+  u as Color,
+  E as hexToHsva,
+  p as hexToRgba,
+  P as hslStringToHsva,
+  S as hslaStringToHsva,
+  z as hslaToHsl,
+  x as hslaToHsva,
+  V as hsvStringToHsva,
+  I as hsvaStringToHsva,
+  k as hsvaToHex,
+  L as hsvaToHslString,
+  l as hsvaToHsla,
+  y as hsvaToHslaString,
+  B as hsvaToHsv,
+  O as hsvaToHsvString,
+  F as hsvaToHsvaString,
+  A as hsvaToRgbString,
+  m as hsvaToRgba,
+  U as hsvaToRgbaString,
+  $ as parseHue,
+  j as rgbStringToHsva,
+  f as rgbaStringToHsva,
+  w as rgbaToHex,
+  N as rgbaToHsva,
+  q as rgbaToRgb,
+  g as roundHsva,
+  D as validHex
 };

dist/components/Dropdown.js

@@ -1,5 +1,5 @@
-import { jsx as l, jsxs as p, Fragment as W } from "react/jsx-runtime";
-import { useState as F, useRef as L, useEffect as S } from "react";
+import { jsx as l, jsxs as p, Fragment as F } from "react/jsx-runtime";
+import { useState as L, useRef as S, useEffect as V } from "react";
 import { classes as N } from "../common/react.js";
 import { unit as $ } from "../common/ui.js";
 import { Button as D } from "./Button.js";
@@ -9,17 +9,17 @@ const z = -1;
 function h(u) {
   return typeof u == "string" ? u : u.value;
 }
-function X(u) {
+function Y(u) {
   const {
     autoScroll: v = !0,
     buttons: I,
     className: O,
-    clipSelectedText: k = !0,
+    clipSelectedText: T = !0,
     color: B = "default",
     disabled: d,
     displayText: E,
     icon: x,
-    iconRotation: T,
+    iconRotation: k,
     iconSpin: j,
     menuWidth: C = "15rem",
     noChevron: R,
@@ -30,13 +30,12 @@ function X(u) {
     placeholder: K = "Select...",
     selected: m,
     width: P = "15rem"
-  } = u, [r, f] = F(!1), V = y ? !r : r, w = L(null), i = c.findIndex((e) => h(e) === m) || 0;
+  } = u, [r, f] = L(!1), W = y ? !r : r, w = S(null), i = c.findIndex((e) => h(e) === m) || 0;
   function g(e) {
-    var t;
     let s = e;
     e < i ? s = e < 2 ? 0 : e - 2 : s = e > c.length - 3 ? c.length - 1 : e - 2;
-    const n = (t = w.current) == null ? void 0 : t.children[s];
-    n == null || n.scrollIntoView({ block: "nearest" });
+    const n = w.current, t = n == null ? void 0 : n.children[s];
+    n && t && (n.scrollTop = t.offsetTop);
   }
   function _(e) {
     if (c.length < 1 || d)
@@ -45,7 +44,7 @@ function X(u) {
     let t;
     i < 0 ? t = e === "next" ? n : s : e === "next" ? t = i === n ? s : i + 1 : t = i === s ? n : i - 1, r && v && g(t), o == null || o(h(c[t]));
   }
-  return S(() => {
+  return V(() => {
     var e;
     r && (v && i !== z && g(i), (e = w.current) == null || e.focus());
   }, [r]), /* @__PURE__ */ l(
@@ -104,22 +103,22 @@ function X(u) {
               e.key === "Enter" && !d && (f(!r), a == null || a(e));
             },
             children: [
-              x && /* @__PURE__ */ l(b, { mr: 1, name: x, rotation: T, spin: j }),
+              x && /* @__PURE__ */ l(b, { mr: 1, name: x, rotation: k, spin: j }),
               /* @__PURE__ */ l(
                 "span",
                 {
                   className: "Dropdown__selected-text",
                   style: {
-                    overflow: k ? "hidden" : "visible"
+                    overflow: T ? "hidden" : "visible"
                   },
                   children: E || m && h(m) || K
                 }
               ),
-              !R && /* @__PURE__ */ l("span", { className: "Dropdown__arrow-button", children: /* @__PURE__ */ l(b, { name: V ? "chevron-up" : "chevron-down" }) })
+              !R && /* @__PURE__ */ l("span", { className: "Dropdown__arrow-button", children: /* @__PURE__ */ l(b, { name: W ? "chevron-up" : "chevron-down" }) })
             ]
           }
         ),
-        I && /* @__PURE__ */ p(W, { children: [
+        I && /* @__PURE__ */ p(F, { children: [
           /* @__PURE__ */ l(
             D,
             {
@@ -154,5 +153,5 @@ function X(u) {
   );
 }
 export {
-  X as Dropdown
+  Y as Dropdown
 };