@cfx-dev/ui-components 0.0.5

package/dist/main.d.ts

@@ -0,0 +1,68 @@
+import { clsx } from './utils/clsx';
+import { getValue } from './utils/getValue';
+import { default as mergeRefs } from './utils/mergeRefs';
+
+import * as functional from './utils/functional';
+import * as hooks from './utils/hooks';
+import * as links from './utils/links';
+import * as math from './utils/math';
+import * as outlet from './utils/outlet';
+import * as string from './utils/string';
+export declare const utils: {
+    clsx: typeof clsx;
+    getValue: typeof getValue;
+    mergeRefs: typeof mergeRefs;
+    functional: typeof functional;
+    hooks: typeof hooks;
+    links: typeof links;
+    math: typeof math;
+    outlet: typeof outlet;
+    string: typeof string;
+};
+export { Checkbox } from './components/Checkbox/Checkbox';
+export { Button } from './components/Button/Button';
+export { ButtonBar } from './components/Button/ButtonBar';
+export { Avatar } from './components/Avatar/Avatar';
+export { BackdropPortal } from './components/BackdropPortal/BackdropPortal';
+export { Badge } from './components/Badge/Badge';
+export { ControlBox } from './components/ControlBox/ControlBox';
+export { CountryFlag } from './components/CountryFlag/CountryFlag';
+export { Decorate } from './components/Decorate/Decorate';
+export { Dot } from './components/Dot/Dot';
+export { Flyout } from './components/Flyout/Flyout';
+export { Icon } from './components/Icon/Icon';
+export { Indicator } from './components/Indicator/Indicator';
+export { InfoPanel } from './components/InfoPanel/InfoPanel';
+export { Input } from './components/Input/Input';
+export { RichInput } from './components/Input/RichInput';
+export { Interactive } from './components/Interactive/Interactive';
+export { Island } from './components/Island/Island';
+export { Box } from './components/Layout/Box/Box';
+export { Center } from './components/Layout/Center/Center';
+export { Flex } from './components/Layout/Flex/Flex';
+export { Pad } from './components/Layout/Pad/Pad';
+export { Page } from './components/Layout/Page/Page';
+export { Scrollable } from './components/Layout/Scrollable/Scrollable';
+export { Loaf } from './components/Loaf/Loaf';
+export { Modal } from './components/Modal/Modal';
+export { NavList } from './components/NavList/NavList';
+export { Overlay } from './components/Overlay/Overlay';
+export { Popover } from './components/Popover/Popover';
+export { PremiumBadge } from './components/PremiumBadge/PremiumBadge';
+export { Prose } from './components/Prose/Prose';
+export { Radio } from './components/Radio/Radio';
+export { Select } from './components/Select/Select';
+export { Separator } from './components/Separator/Separator';
+export { Shroud } from './components/Shroud/Shroud';
+export { Spacer } from './components/Spacer/Spacer';
+export { Style } from './components/Style/Style';
+export { Switch } from './components/Switch/Switch';
+export { Tabular } from './components/Tabular/Tabular';
+export { Text } from './components/Text/Text';
+export { Textarea } from './components/Textarea/Textarea';
+export { Title } from './components/Title/Title';
+export { Icons, BrandIcon } from './components/Icons';
+export * as outlets from './components/outlets';
+export { OnScreenSensor } from './components/OnScreenSensor';
+export { ui } from './components/ui';
+export { Symbols } from './components/Symbols';

package/dist/main.js

@@ -0,0 +1,118 @@
+import { clsx as o } from "./utils/clsx.js";
+import { f as r } from "./functional-C0pE183N.js";
+import { getValue as t } from "./utils/getValue.js";
+import { h as e } from "./hooks-Bv1kQUpO.js";
+import { l as m } from "./links-CgOD-Vfj.js";
+import { m as p } from "./math-i2ceybzU.js";
+import f from "./utils/mergeRefs.js";
+import { o as x } from "./outlet-C4wpavcH.js";
+import { s as a } from "./string-NVxCUbqk.js";
+import { Checkbox as P } from "./components/Checkbox/Checkbox.js";
+import { Button as y } from "./components/Button/Button.js";
+import { ButtonBar as k } from "./components/Button/ButtonBar.js";
+import { Avatar as T } from "./components/Avatar/Avatar.js";
+import { BackdropPortal as R } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as L } from "./components/Badge/Badge.js";
+import { ControlBox as w } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as M } from "./components/CountryFlag/CountryFlag.js";
+import { Decorate as V } from "./components/Decorate/Decorate.js";
+import { Dot as q } from "./components/Dot/Dot.js";
+import { Flyout as E } from "./components/Flyout/Flyout.js";
+import { Icon as H } from "./components/Icon/Icon.js";
+import { Indicator as K } from "./components/Indicator/Indicator.js";
+import { InfoPanel as U } from "./components/InfoPanel/InfoPanel.js";
+import { Input as X } from "./components/Input/Input.js";
+import { RichInput as Z } from "./components/Input/RichInput.js";
+import { Interactive as $ } from "./components/Interactive/Interactive.js";
+import { Island as ro } from "./components/Island/Island.js";
+import { Box as eo } from "./components/Layout/Box/Box.js";
+import { Center as po } from "./components/Layout/Center/Center.js";
+import { Flex as xo } from "./components/Layout/Flex/Flex.js";
+import { Pad as lo } from "./components/Layout/Pad/Pad.js";
+import { Page as so } from "./components/Layout/Page/Page.js";
+import { Scrollable as co } from "./components/Layout/Scrollable/Scrollable.js";
+import { Loaf as Bo } from "./components/Loaf/Loaf.js";
+import { Modal as So } from "./components/Modal/Modal.js";
+import { NavList as ho } from "./components/NavList/NavList.js";
+import { Overlay as vo } from "./components/Overlay/Overlay.js";
+import { Popover as bo } from "./components/Popover/Popover.js";
+import { PremiumBadge as Co } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as Fo } from "./components/Prose/Prose.js";
+import { Radio as Do } from "./components/Radio/Radio.js";
+import { Select as Oo } from "./components/Select/Select.js";
+import { Separator as Ao } from "./components/Separator/Separator.js";
+import { Shroud as No } from "./components/Shroud/Shroud.js";
+import { Spacer as jo } from "./components/Spacer/Spacer.js";
+import { Style as zo } from "./components/Style/Style.js";
+import { Switch as Go } from "./components/Switch/Switch.js";
+import { Tabular as Jo } from "./components/Tabular/Tabular.js";
+import { Text as Qo } from "./components/Text/Text.js";
+import { Textarea as Wo } from "./components/Textarea/Textarea.js";
+import { Title as Yo } from "./components/Title/Title.js";
+import { B as _o, I as $o } from "./Icons-B26SczGZ.js";
+import { o as rr } from "./outlets-BsMV5obW.js";
+import { OnScreenSensor as er } from "./components/OnScreenSensor.js";
+import { ui as pr } from "./components/ui.js";
+import { Symbols as xr } from "./components/Symbols.js";
+const S = {
+  clsx: o,
+  getValue: t,
+  mergeRefs: f,
+  functional: r,
+  hooks: e,
+  links: m,
+  math: p,
+  outlet: x,
+  string: a
+};
+export {
+  T as Avatar,
+  R as BackdropPortal,
+  L as Badge,
+  eo as Box,
+  _o as BrandIcon,
+  y as Button,
+  k as ButtonBar,
+  po as Center,
+  P as Checkbox,
+  w as ControlBox,
+  M as CountryFlag,
+  V as Decorate,
+  q as Dot,
+  xo as Flex,
+  E as Flyout,
+  H as Icon,
+  $o as Icons,
+  K as Indicator,
+  U as InfoPanel,
+  X as Input,
+  $ as Interactive,
+  ro as Island,
+  Bo as Loaf,
+  So as Modal,
+  ho as NavList,
+  er as OnScreenSensor,
+  vo as Overlay,
+  lo as Pad,
+  so as Page,
+  bo as Popover,
+  Co as PremiumBadge,
+  Fo as Prose,
+  Do as Radio,
+  Z as RichInput,
+  co as Scrollable,
+  Oo as Select,
+  Ao as Separator,
+  No as Shroud,
+  jo as Spacer,
+  zo as Style,
+  Go as Switch,
+  xr as Symbols,
+  Jo as Tabular,
+  Qo as Text,
+  Wo as Textarea,
+  Yo as Title,
+  rr as outlets,
+  pr as ui,
+  S as utils
+};

package/dist/math-i2ceybzU.js

@@ -0,0 +1,16 @@
+function a(t) {
+  return t < 0 ? 0 : t > 1 ? 1 : t;
+}
+function n(t, e, r) {
+  return Math.min(r, Math.max(e, t));
+}
+const o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  clamp: n,
+  clamp01: a
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  n as a,
+  a as c,
+  o as m
+};

package/dist/medium-Dc7QRuE0.js

@@ -0,0 +1,118 @@
+import * as l from "react";
+import { useState as g } from "react";
+import { _ as p } from "./tslib.es6-Dd_EkEfR.js";
+function o(e, u) {
+  return typeof e == "function" ? e(u) : e && (e.current = u), e;
+}
+function E(e, u) {
+  var n = g(function() {
+    return {
+      // value
+      value: e,
+      // last callback
+      callback: u,
+      // "memoized" public interface
+      facade: {
+        get current() {
+          return n.value;
+        },
+        set current(r) {
+          var c = n.value;
+          c !== r && (n.value = r, n.callback(r, c));
+        }
+      }
+    };
+  })[0];
+  return n.callback = u, n.facade;
+}
+var M = typeof window < "u" ? l.useLayoutEffect : l.useEffect, v = /* @__PURE__ */ new WeakMap();
+function b(e, u) {
+  var n = E(null, function(r) {
+    return e.forEach(function(c) {
+      return o(c, r);
+    });
+  });
+  return M(function() {
+    var r = v.get(n);
+    if (r) {
+      var c = new Set(r), i = new Set(e), t = n.current;
+      c.forEach(function(a) {
+        i.has(a) || o(a, null);
+      }), i.forEach(function(a) {
+        c.has(a) || o(a, t);
+      });
+    }
+    v.set(n, e);
+  }, [e]), n;
+}
+function d(e) {
+  return e;
+}
+function h(e, u) {
+  u === void 0 && (u = d);
+  var n = [], r = !1, c = {
+    read: function() {
+      if (r)
+        throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");
+      return n.length ? n[n.length - 1] : e;
+    },
+    useMedium: function(i) {
+      var t = u(i, r);
+      return n.push(t), function() {
+        n = n.filter(function(a) {
+          return a !== t;
+        });
+      };
+    },
+    assignSyncMedium: function(i) {
+      for (r = !0; n.length; ) {
+        var t = n;
+        n = [], t.forEach(i);
+      }
+      n = {
+        push: function(a) {
+          return i(a);
+        },
+        filter: function() {
+          return n;
+        }
+      };
+    },
+    assignMedium: function(i) {
+      r = !0;
+      var t = [];
+      if (n.length) {
+        var a = n;
+        n = [], a.forEach(i), t = n;
+      }
+      var m = function() {
+        var f = t;
+        t = [], f.forEach(i);
+      }, s = function() {
+        return Promise.resolve().then(m);
+      };
+      s(), n = {
+        push: function(f) {
+          t.push(f), s();
+        },
+        filter: function(f) {
+          return t = t.filter(f), n;
+        }
+      };
+    }
+  };
+  return c;
+}
+function k(e, u) {
+  return u === void 0 && (u = d), h(e, u);
+}
+function w(e) {
+  e === void 0 && (e = {});
+  var u = h(null);
+  return u.options = p({ async: !0, ssr: !1 }, e), u;
+}
+export {
+  k as a,
+  w as c,
+  b as u
+};

package/dist/outlet-C4wpavcH.js

@@ -0,0 +1,25 @@
+import { $ as o } from "./index-C75OpfGQ.js";
+function n(t) {
+  const e = document.getElementById(t);
+  if (!e)
+    throw new Error(`Tried to attach outlet to the DOM node #${t}, but there is no such`);
+  return ({
+    children: r
+  }) => o.createPortal(r, e);
+}
+function a() {
+  const t = document.createElement("div");
+  return document.body.appendChild(t), ({
+    children: e
+  }) => o.createPortal(e, t);
+}
+const u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  attachOutlet: n,
+  createOutlet: a
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  n as a,
+  a as c,
+  u as o
+};

package/dist/outlets-BsMV5obW.js

@@ -0,0 +1,13 @@
+import { c as t } from "./outlet-C4wpavcH.js";
+const e = t(), o = t(), l = t(), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AfterTitleOutlet: l,
+  PreTitleOutlet: e,
+  TitleOutlet: o
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  l as A,
+  e as P,
+  o as T,
+  s as o
+};

package/dist/string-NVxCUbqk.js

@@ -0,0 +1,54 @@
+function h(t, e) {
+  const n = t.charCodeAt(e);
+  let r;
+  return n >= 55296 && n <= 56319 && t.length > e + 1 && (r = t.charCodeAt(e + 1), r >= 56320 && r <= 57343) ? t.substring(e, e + 2) : t[e];
+}
+function b(t, e) {
+  return t[e];
+}
+function S(t, e) {
+  return t - e;
+}
+function d(t, e, n = !1) {
+  const r = n ? h : b, a = e.filter((s, g, p) => p.lastIndexOf(s) !== g ? !1 : s < t.length && s > 0).sort(S);
+  if (a.length === 0)
+    return /* @__PURE__ */ new Map([[0, t]]);
+  const o = /* @__PURE__ */ new Map();
+  let l = "", i = 0, u = 0, c = 0, f = 0;
+  for (; u < t.length; ) {
+    const s = r(t, u);
+    l += s, u += s.length, i += 1, a[c] === i && (o.set(f, l), l = "", f = a[c], c += 1);
+  }
+  return l && o.set(f, l), o;
+}
+function A(t, e, n, r) {
+  const a = t.substring(0, n), o = t.substring(r);
+  return `${a}${e}${o}`;
+}
+function C(t) {
+  return t.replace(/\\/g, "/");
+}
+function I(t) {
+  return !!t || t === "true" || t === "1";
+}
+function P(t) {
+  return !t || t === "false" || t === "0";
+}
+const _ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  isFalseString: P,
+  isTrueString: I,
+  normalizeSlashes: C,
+  replaceRange: A,
+  splitByIndices: d,
+  unicodeCharAt: h
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  d as a,
+  P as b,
+  I as i,
+  C as n,
+  A as r,
+  _ as s,
+  h as u
+};

package/dist/styles-scss/_colors.scss

@@ -0,0 +1,211 @@
+@use "sass:math";
+@use "sass:list";
+
+@function get-luminance($color) {
+  $colors: (
+    'red': red($color),
+    'green': green($color),
+    'blue': blue($color)
+  );
+
+  @each $name, $value in $colors {
+    $adjusted: 0;
+    $value: math.div($value, 255);
+
+    @if $value < 0.03928 {
+      $value: math.div($value, 12.92);
+    } @else {
+      $value: math.div($value + .055, 1.055);
+      $value: math.pow($value, 2.4);
+    }
+
+    $colors: map-merge($colors, ($name: $value));
+  }
+
+  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
+}
+
+@function interpolate($c1, $c2, $f) {
+  $c1r: red($c1);
+  $c1g: green($c1);
+  $c1b: blue($c1);
+
+  $c2r: red($c2);
+  $c2g: green($c2);
+  $c2b: blue($c2);
+
+  @return rgb(
+    $c1r + $f * ($c2r - $c1r),
+    $c1g + $f * ($c2g - $c1g),
+    $c1b + $f * ($c2b - $c1b),
+  );
+}
+
+@function set-luminance($color, $lum) {
+  $itersLeft: 20;
+  $low: rgb(0, 0, 0);
+  $high: rgb(255, 255, 255);
+
+  @if get-luminance($color) > $lum {
+    $high: $color;
+  } @else {
+    $low: $color;
+  }
+
+  $mid: interpolate($low, $high, .5);
+  $lm: get-luminance($mid);
+
+  @while math.abs($lum - $lm) >= 1e-7 and $itersLeft > 0 {
+    $itersLeft: $itersLeft - 1;
+
+    $mid: interpolate($low, $high, .5);
+    $lm: get-luminance($mid);
+
+    @if $lm > $lum {
+      $high: $mid;
+    } @else {
+      $low: $mid;
+    }
+  }
+
+  @return $mid;
+}
+
+@function color-triplet($color) {
+  @return #{red($color)}, #{green($color)}, #{blue($color)};
+}
+
+
+// LAB <-> RGB
+$oneThird: math.div(1, 3);
+$_16OVER116: math.div(16, 116);
+$_1OVER2P4: math.div(1, 2.4);
+
+@function rgb2lab($color) {
+  $r: math.div(red($color), 255);
+  $g: math.div(green($color), 255);
+  $b: math.div(blue($color), 255);
+
+  @if $r > 0.04045 {
+    $r: math.pow(math.div($r + 0.055, 1.055), 2.4);
+  } @else {
+    $r: math.div($r, 12.92);
+  }
+  @if $g > 0.04045 {
+    $g: math.pow(math.div($g + 0.055, 1.055), 2.4);
+  } @else {
+    $g: math.div($g, 12.92);
+  }
+  @if $b > 0.04045 {
+    $b: math.pow(math.div($b + 0.055, 1.055), 2.4);
+  } @else {
+    $b: math.div($b, 12.92);
+  }
+
+  $x: math.div($r * 0.4124 + $g * 0.3576 + $b * 0.1805, 0.95047);
+  $y: math.div($r * 0.2126 + $g * 0.7152 + $b * 0.0722, 1.00000);
+  $z: math.div($r * 0.0193 + $g * 0.1192 + $b * 0.9505, 1.08883);
+
+  @if $x > 0.008856 {
+    $x: math.pow($x, $oneThird);
+  } @else {
+    $x: (7.787 * $x) + $_16OVER116;
+  }
+  @if $y > 0.008856 {
+    $y: math.pow($y, $oneThird);
+  } @else {
+    $y: (7.787 * $y) + $_16OVER116;
+  }
+  @if $z > 0.008856 {
+    $z: math.pow($z, $oneThird);
+  } @else {
+    $z: (7.787 * $z) + $_16OVER116;
+  }
+
+  @return (
+    'L': (116 * $y) - 16,
+    'a': 500 * ($x - $y),
+    'b': 200 * ($y - $z),
+  );
+}
+
+@function lab2rgb($lab) {
+  $y: math.div(map-get($lab, 'L') + 16, 116);
+  $x: math.div(map-get($lab, 'a'), 500) + $y;
+  $z: $y - math.div(map-get($lab, 'b'), 200);
+
+  $x3: math.pow($x, 3);
+  $y3: math.pow($y, 3);
+  $z3: math.pow($z, 3);
+
+  @if $x3 > 0.008856 {
+    $x: $x3;
+  } @else {
+    $x: math.div($x - $_16OVER116 , 7.787);
+  }
+  @if $y3 > 0.008856 {
+    $y: $y3;
+  } @else {
+    $y: math.div($y - $_16OVER116 , 7.787);
+  }
+  @if $z3 > 0.008856 {
+    $z: $z3;
+  } @else {
+    $z: math.div($z - $_16OVER116 , 7.787);
+  }
+
+  $x: $x * 0.95047;
+  $y: $y * 1.00000;
+  $z: $z * 1.08883;
+
+  $r: $x *  3.2406 + $y * -1.5372 + $z * -0.4986;
+  $g: $x * -0.9689 + $y *  1.8758 + $z *  0.0415;
+  $b: $x *  0.0557 + $y * -0.2040 + $z *  1.0570;
+
+  @if $r > 0.0031308 {
+    $r: 1.055 * math.pow($r, $_1OVER2P4) - 0.055;
+  } @else {
+    $r: 12.92 * $r;
+  }
+  @if $g > 0.0031308 {
+    $g: 1.055 * math.pow($g, $_1OVER2P4) - 0.055;
+  } @else {
+    $g: 12.92 * $g;
+  }
+  @if $b > 0.0031308 {
+    $b: 1.055 * math.pow($b, $_1OVER2P4) - 0.055;
+  } @else {
+    $b: 12.92 * $b;
+  }
+
+  @return rgb(
+    math.clamp(0, $r, 1) * 255,
+    math.clamp(0, $g, 1) * 255,
+    math.clamp(0, $b, 1) * 255,
+  );
+}
+
+@function lab-gradient($s, $e, $start, $stop) {
+  $lst: ();
+
+  @for $i from $start to $stop {
+    $lst: list.append($lst, lab-gradient-step($s, $e, $i, $stop));
+  }
+
+  @return $lst;
+}
+
+@function lab-gradient-step($s, $e, $i, $stop) {
+  $s: rgb2lab($s);
+  $e: rgb2lab($e);
+
+  $a: math.div($i, $stop - 1);
+  $ia: 1 - $a;
+
+  @return lab2rgb((
+    'L': $ia * map-get($s, 'L') + $a * map-get($e, 'L'),
+    'a': $ia * map-get($s, 'a') + $a * map-get($e, 'a'),
+    'b': $ia * map-get($s, 'b') + $a * map-get($e, 'b'),
+  ));
+}
+