@cfx-dev/ui-components 0.0.26 → 1.0.1

package/dist/main.js

@@ -54,7 +54,7 @@ import { Text as gr, TextBlock as hr } from "./components/Text/Text.js";
 import { Textarea as Cr } from "./components/Textarea/Textarea.js";
 import { TITLE_OUTLET_ID as Pr, Title as _r } from "./components/Title/Title.js";
 import { InputDropzone as Fr } from "./components/InputDropzone/InputDropzone.js";
-import { B as Ar, I as zr } from "./Icons-BlBKvJD8.js";
+import { B as Ar, I as zr } from "./Icons-CIXYyG0c.js";
 import { OnScreenSensor as Vr } from "./components/OnScreenSensor.js";
 import { ui as Nr } from "./components/ui.js";
 import { Symbols as Gr } from "./components/Symbols.js";

package/dist/style-guide/Icons/IconDisplayGrid.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { I as s } from "../../Icons-BlBKvJD8.js";
+import { I as s } from "../../Icons-CIXYyG0c.js";
 function a() {
   const i = Object.entries(s).map(([e, t]) => ({
     name: e,

package/dist/style-guide/Icons/Icons.d.ts

@@ -28,6 +28,8 @@ export declare namespace Icons {
     const serverBoost: import("react/jsx-runtime").JSX.Element;
     const serverBoostUnstyled: import("react/jsx-runtime").JSX.Element;
     const serverBurst: import("react/jsx-runtime").JSX.Element;
+    const upvotesBurst: import("react/jsx-runtime").JSX.Element;
+    const upvotesRecurring: import("react/jsx-runtime").JSX.Element;
 }
 export declare const BrandIcon: {
     gta5: import("react/jsx-runtime").JSX.Element;

package/dist/style-guide/Icons/Icons.js

@@ -1,7 +1,9 @@
 import "react/jsx-runtime";
-import { B as n, I as p } from "../../Icons-BlBKvJD8.js";
+import { B as a, I as n } from "../../Icons-CIXYyG0c.js";
 import "../../index.esm-BkynlSN6.js";
+import "./NewIcons/UpvotesBurst.js";
+import "./NewIcons/UpvotesRecurring.js";
 export {
-  n as BrandIcon,
-  p as Icons
+  a as BrandIcon,
+  n as Icons
 };

package/dist/style-guide/Icons/NewIcons/UpvotesBurst.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function UpvotesBurst(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof UpvotesBurst>;
+export default _default;

package/dist/style-guide/Icons/NewIcons/UpvotesBurst.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import r from "react";
+function e(o) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...o,
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M7.75 2.75V12.75M12.75 7.75H2.75M4.89 4.89L10.61 10.61M10.61 4.89L4.89 10.61",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+const i = r.memo(e);
+export {
+  i as default
+};

package/dist/style-guide/Icons/NewIcons/UpvotesRecurring.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function UpvotesRecurring(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof UpvotesRecurring>;
+export default _default;

package/dist/style-guide/Icons/NewIcons/UpvotesRecurring.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "react";
+function t(r) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...r,
+      children: /* @__PURE__ */ o(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M12.33 9.75C11.56 11.52 9.8 12.75 7.75 12.75C4.99 12.75 2.75 10.51 2.75 7.75C2.75 4.99 4.99 2.75 7.75 2.75C9.8 2.75 11.56 3.98 12.33 5.75M13.76 4.13L12.89 7L10.02 6.13M7.53998 5.56995V8.51995L8.68998 9.67995"
+        }
+      )
+    }
+  );
+}
+const s = e.memo(t);
+export {
+  s as default
+};

package/dist/styles-scss/_colors.scss

@@ -1,211 +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'),
-  ));
-}
-
+@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'),
+  ));
+}
+

package/dist/utils/hooks.js

@@ -1,12 +1,12 @@
 import { jsx as E } from "react/jsx-runtime";
 import o from "react";
-import { R as m } from "../index-2hJuj4UN.js";
-const a = Symbol("Uninitialized");
-function h(e, ...t) {
-  const r = o.useRef(a);
-  return r.current === a && (r.current = e(...t)), r.current;
+import { $ as m } from "../index-C1KmDBa6.js";
+const l = Symbol("Uninitialized");
+function v(e, ...t) {
+  const r = o.useRef(l);
+  return r.current === l && (r.current = e(...t)), r.current;
 }
-function l(e) {
+function a(e) {
   const t = o.useRef(e);
   return t.current = e, t;
 }
@@ -36,14 +36,14 @@ i.shouldProcessEvent = (e) => {
   return !0;
 };
 function d(e) {
-  const t = l((r) => {
+  const t = a((r) => {
     d.isCloseEvent(r) && e();
   });
   i(t);
 }
 d.isCloseEvent = (e) => e.key === "Escape";
-function v(e) {
-  const t = l(e);
+function R(e) {
+  const t = a(e);
   o.useEffect(() => {
     const r = () => t.current();
     return window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
@@ -70,10 +70,10 @@ function g(e, t = "original") {
   }, [e, t]), r;
 }
 export {
-  l as useDynamicRef,
+  a as useDynamicRef,
   i as useGlobalKeyboardEvent,
-  h as useInstance,
+  v as useInstance,
   d as useKeyboardClose,
   g as useOutlet,
-  v as useWindowResize
+  R as useWindowResize
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "0.0.26",
+  "version": "1.0.1",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",

package/dist/utils/outlet.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-
-export declare function attachOutlet(id: string): React.FC<React.PropsWithChildren>;
-export declare function createOutlet(): React.FC<React.PropsWithChildren>;

package/dist/utils/outlet.js

@@ -1,21 +0,0 @@
-import { R as o } from "../index-2hJuj4UN.js";
-function u(t) {
-  let e = null;
-  if (typeof window < "u" && (e = document.getElementById(t)), !e)
-    throw new Error(`Attempted to connect the outlet to the DOM node with ID #${t}, but no such node exists.`);
-  return ({
-    children: n
-  }) => o.createPortal(n, e);
-}
-function l() {
-  let t = null;
-  if (typeof window < "u" && (t = document.createElement("div"), document.body.appendChild(t)), !t)
-    throw new Error("Attempted to create an outlet, but no such outlet exists.");
-  return ({
-    children: e
-  }) => o.createPortal(e, t);
-}
-export {
-  u as attachOutlet,
-  l as createOutlet
-};