@cfx-dev/ui-components 0.0.19 → 0.0.21

package/dist/index.esm-BkynlSN6.js

@@ -0,0 +1,72 @@
+import l from "react";
+var d = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+}, f = l.createContext && l.createContext(d), c = function() {
+  return c = Object.assign || function(t) {
+    for (var r, e = 1, n = arguments.length; e < n; e++) {
+      r = arguments[e];
+      for (var a in r) Object.prototype.hasOwnProperty.call(r, a) && (t[a] = r[a]);
+    }
+    return t;
+  }, c.apply(this, arguments);
+}, v = function(t, r) {
+  var e = {};
+  for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && r.indexOf(n) < 0 && (e[n] = t[n]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function") for (var a = 0, n = Object.getOwnPropertySymbols(t); a < n.length; a++)
+    r.indexOf(n[a]) < 0 && Object.prototype.propertyIsEnumerable.call(t, n[a]) && (e[n[a]] = t[n[a]]);
+  return e;
+};
+function m(t) {
+  return t && t.map(function(r, e) {
+    return l.createElement(r.tag, c({
+      key: e
+    }, r.attr), m(r.child));
+  });
+}
+function o(t) {
+  return function(r) {
+    return l.createElement(h, c({
+      attr: c({}, t.attr)
+    }, r), m(t.child));
+  };
+}
+function h(t) {
+  var r = function(e) {
+    var n = t.attr, a = t.size, u = t.title, g = v(t, ["attr", "size", "title"]), s = a || e.size || "1em", i;
+    return e.className && (i = e.className), t.className && (i = (i ? i + " " : "") + t.className), l.createElement("svg", c({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, e.attr, n, g, {
+      className: i,
+      style: c(c({
+        color: t.color || e.color
+      }, e.style), t.style),
+      height: s,
+      width: s,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), u && l.createElement("title", null, u), t.children);
+  };
+  return f !== void 0 ? l.createElement(f.Consumer, null, function(e) {
+    return r(e);
+  }) : r(d);
+}
+function w(t) {
+  return o({ tag: "svg", attr: { viewBox: "0 0 640 512" }, child: [{ tag: "path", attr: { d: "M48 0C21.53 0 0 21.53 0 48v64c0 8.84 7.16 16 16 16h80V48C96 21.53 74.47 0 48 0zm208 412.57V352h288V96c0-52.94-43.06-96-96-96H111.59C121.74 13.41 128 29.92 128 48v368c0 38.87 34.65 69.65 74.75 63.12C234.22 474 256 444.46 256 412.57zM288 384v32c0 52.93-43.06 96-96 96h336c61.86 0 112-50.14 112-112 0-8.84-7.16-16-16-16H288z" } }] })(t);
+}
+function O(t) {
+  return o({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z" } }] })(t);
+}
+function x(t) {
+  return o({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z" } }] })(t);
+}
+export {
+  x as F,
+  o as G,
+  O as a,
+  w as b
+};

package/dist/main.d.ts

@@ -1,37 +1,26 @@
-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 { mergeRefs } from './utils/mergeRefs';
+export { clsx } from './utils/clsx';
+export { getValue } from './utils/getValue';
+export { useInstance, useDynamicRef, useGlobalKeyboardEvent, useKeyboardClose, useWindowResize, useOutlet, } from './utils/hooks';
+export { noop, returnTrue, returnFalse, identity, invoke, } from './utils/functional';
+export { isExternalUrl, matchLinks, matchLinkNodes, defaultLinkReplacerx, defaultLinkReplacer, linkifyx, linkify, Linkify, } from './utils/links';
+export { clamp01, clamp, } from './utils/math';
+export { unicodeCharAt, splitByIndices, replaceRange, normalizeSlashes, isTrueString, isFalseString, } from './utils/string';
 export type { ValueOrGetter } from './utils/getValue';
-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 type { ILinkSubstitute, ILinkMatch, LinkifyProps, } from './utils/links';
+export type { OutletPosition } from './utils/hooks';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Button } from './components/Button/Button';
 export { LinkButton } from './components/Button/LinkButton';
 export { ButtonBar } from './components/Button/ButtonBar';
 export { Avatar } from './components/Avatar/Avatar';
-export { BackdropPortal } from './components/BackdropPortal/BackdropPortal';
+export { BackdropPortal, BACKDROP_OUTLET_ID } 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 { Flyout, FLYOUT_OUTLET_ID } from './components/Flyout/Flyout';
 export { Icon } from './components/Icon/Icon';
 export { Indicator } from './components/Indicator/Indicator';
 export { InfoPanel } from './components/InfoPanel/InfoPanel';
@@ -50,7 +39,7 @@ export { VirtualScrollable } from './components/Layout/Scrollable/VirtualScrolla
 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 { Overlay, OVERLAY_OUTLET_ID } from './components/Overlay/Overlay';
 export { Popover } from './components/Popover/Popover';
 export { PremiumBadge } from './components/PremiumBadge/PremiumBadge';
 export { Prose } from './components/Prose/Prose';
@@ -64,8 +53,10 @@ export { Switch } from './components/Switch/Switch';
 export { Tabular } from './components/Tabular/Tabular';
 export { Text, TextBlock } from './components/Text/Text';
 export { Textarea } from './components/Textarea/Textarea';
-export { Title } from './components/Title/Title';
-export { Icons, BrandIcon } from './components/Icons';
+export { Title, TITLE_OUTLET_ID } from './components/Title/Title';
+export { InputDropzone } from './components/InputDropzone/InputDropzone';
+export type { InputDropzoneProps, FileWithPath } from './components/InputDropzone/InputDropzone';
+export { Icons, BrandIcon } from './style-guide/Icons/Icons';
 export { OnScreenSensor } from './components/OnScreenSensor';
 export { ui } from './components/ui';
 export { Symbols } from './components/Symbols';

package/dist/main.js

@@ -1,124 +1,147 @@
-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-GAujvL7d.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-B11a3Kgw.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 { LinkButton as v } from "./components/Button/LinkButton.js";
-import { ButtonBar as T } from "./components/Button/ButtonBar.js";
-import { Avatar as R } from "./components/Avatar/Avatar.js";
-import { BackdropPortal as D } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as V } from "./components/Badge/Badge.js";
-import { ControlBox as A } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as N } from "./components/CountryFlag/CountryFlag.js";
-import { Decorate as q } from "./components/Decorate/Decorate.js";
-import { Dot as E } from "./components/Dot/Dot.js";
-import { Flyout as H } from "./components/Flyout/Flyout.js";
-import { Icon as K } from "./components/Icon/Icon.js";
-import { Indicator as U } from "./components/Indicator/Indicator.js";
-import { InfoPanel as X } from "./components/InfoPanel/InfoPanel.js";
-import { Input as Z } from "./components/Input/Input.js";
-import { RichInput as $ } from "./components/Input/RichInput.js";
-import { Interactive as ro } from "./components/Interactive/Interactive.js";
-import { Island as eo } from "./components/Island/Island.js";
-import { Box as po } from "./components/Layout/Box/Box.js";
-import { Center as xo } from "./components/Layout/Center/Center.js";
-import { Flex as lo } from "./components/Layout/Flex/Flex.js";
-import { FlexRestricter as io } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as co } from "./components/Layout/Pad/Pad.js";
-import { Page as Bo } from "./components/Layout/Page/Page.js";
-import { Scrollable as Io } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as ho } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as ko } from "./components/Loaf/Loaf.js";
-import { Modal as bo } from "./components/Modal/Modal.js";
-import { NavList as Co } from "./components/NavList/NavList.js";
-import { Overlay as Fo } from "./components/Overlay/Overlay.js";
-import { Popover as Lo } from "./components/Popover/Popover.js";
-import { PremiumBadge as Oo } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as wo } from "./components/Prose/Prose.js";
-import { Radio as Mo } from "./components/Radio/Radio.js";
-import { Select as jo } from "./components/Select/Select.js";
-import { Separator as zo } from "./components/Separator/Separator.js";
-import { Shroud as Go } from "./components/Shroud/Shroud.js";
-import { Spacer as Jo } from "./components/Spacer/Spacer.js";
-import { Style as Qo, useContextualStyle as Uo } from "./components/Style/Style.js";
-import { Switch as Xo } from "./components/Switch/Switch.js";
-import { Tabular as Zo } from "./components/Tabular/Tabular.js";
-import { Text as $o, TextBlock as or } from "./components/Text/Text.js";
-import { Textarea as tr } from "./components/Textarea/Textarea.js";
-import { Title as mr } from "./components/Title/Title.js";
-import { B as fr, I as xr } from "./Icons-B26SczGZ.js";
-import { OnScreenSensor as lr } from "./components/OnScreenSensor.js";
-import { ui as ir } from "./components/ui.js";
-import { Symbols as cr } from "./components/Symbols.js";
-const I = {
-  clsx: o,
-  getValue: t,
-  mergeRefs: f,
-  functional: r,
-  hooks: e,
-  links: m,
-  math: p,
-  outlet: x,
-  string: a
-};
+import { mergeRefs as e } from "./utils/mergeRefs.js";
+import { clsx as p } from "./utils/clsx.js";
+import { getValue as m } from "./utils/getValue.js";
+import { useDynamicRef as a, useGlobalKeyboardEvent as n, useInstance as l, useKeyboardClose as i, useOutlet as s, useWindowResize as u } from "./utils/hooks.js";
+import { identity as d, invoke as I, noop as T, returnFalse as L, returnTrue as S } from "./utils/functional.js";
+import { Linkify as B, defaultLinkReplacer as k, defaultLinkReplacerx as R, isExternalUrl as O, linkify as g, linkifyx as D, matchLinkNodes as b, matchLinks as h } from "./utils/links.js";
+import { clamp as E, clamp01 as P } from "./utils/math.js";
+import { isFalseString as v, isTrueString as F, normalizeSlashes as U, replaceRange as A, splitByIndices as z, unicodeCharAt as K } from "./utils/string.js";
+import { Checkbox as w } from "./components/Checkbox/Checkbox.js";
+import { Button as Y } from "./components/Button/Button.js";
+import { LinkButton as M } from "./components/Button/LinkButton.js";
+import { ButtonBar as j } from "./components/Button/ButtonBar.js";
+import { Avatar as H } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Q, BackdropPortal as X } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as $ } from "./components/Badge/Badge.js";
+import { ControlBox as or } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as tr } from "./components/CountryFlag/CountryFlag.js";
+import { Decorate as xr } from "./components/Decorate/Decorate.js";
+import { Dot as fr } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as nr, Flyout as lr } from "./components/Flyout/Flyout.js";
+import { Icon as sr } from "./components/Icon/Icon.js";
+import { Indicator as cr } from "./components/Indicator/Indicator.js";
+import { InfoPanel as Ir } from "./components/InfoPanel/InfoPanel.js";
+import { Input as Lr } from "./components/Input/Input.js";
+import { RichInput as yr } from "./components/Input/RichInput.js";
+import { Interactive as kr } from "./components/Interactive/Interactive.js";
+import { Island as Or } from "./components/Island/Island.js";
+import { Box as Dr } from "./components/Layout/Box/Box.js";
+import { Center as hr } from "./components/Layout/Center/Center.js";
+import { Flex as Er } from "./components/Layout/Flex/Flex.js";
+import { FlexRestricter as _r } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as Fr } from "./components/Layout/Pad/Pad.js";
+import { Page as Ar } from "./components/Layout/Page/Page.js";
+import { Scrollable as Kr } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as wr } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as Yr } from "./components/Loaf/Loaf.js";
+import { Modal as Mr } from "./components/Modal/Modal.js";
+import { NavList as jr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Hr, Overlay as Jr } from "./components/Overlay/Overlay.js";
+import { Popover as Xr } from "./components/Popover/Popover.js";
+import { PremiumBadge as $r } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as oo } from "./components/Prose/Prose.js";
+import { Radio as to } from "./components/Radio/Radio.js";
+import { Select as xo } from "./components/Select/Select.js";
+import { Separator as fo } from "./components/Separator/Separator.js";
+import { Shroud as no } from "./components/Shroud/Shroud.js";
+import { Spacer as io } from "./components/Spacer/Spacer.js";
+import { Style as uo, useContextualStyle as co } from "./components/Style/Style.js";
+import { Switch as To } from "./components/Switch/Switch.js";
+import { Tabular as So } from "./components/Tabular/Tabular.js";
+import { Text as Bo, TextBlock as ko } from "./components/Text/Text.js";
+import { Textarea as Oo } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as Do, Title as bo } from "./components/Title/Title.js";
+import { InputDropzone as Co } from "./components/InputDropzone/InputDropzone.js";
+import { B as Po, I as _o } from "./Icons-BlBKvJD8.js";
+import { OnScreenSensor as Fo } from "./components/OnScreenSensor.js";
+import { ui as Ao } from "./components/ui.js";
+import { Symbols as Ko } from "./components/Symbols.js";
 export {
-  R as Avatar,
-  D as BackdropPortal,
-  V as Badge,
-  po as Box,
-  fr as BrandIcon,
-  y as Button,
-  T as ButtonBar,
-  xo as Center,
-  P as Checkbox,
-  A as ControlBox,
-  N as CountryFlag,
-  q as Decorate,
-  E as Dot,
-  lo as Flex,
-  io as FlexRestricter,
-  H as Flyout,
-  K as Icon,
-  xr as Icons,
-  U as Indicator,
-  X as InfoPanel,
-  Z as Input,
-  ro as Interactive,
-  eo as Island,
-  v as LinkButton,
-  ko as Loaf,
-  bo as Modal,
-  Co as NavList,
-  lr as OnScreenSensor,
-  Fo as Overlay,
-  co as Pad,
-  Bo as Page,
-  Lo as Popover,
-  Oo as PremiumBadge,
-  wo as Prose,
-  Mo as Radio,
-  $ as RichInput,
-  Io as Scrollable,
-  jo as Select,
-  zo as Separator,
-  Go as Shroud,
-  Jo as Spacer,
-  Qo as Style,
-  Xo as Switch,
-  cr as Symbols,
-  Zo as Tabular,
-  $o as Text,
-  or as TextBlock,
-  tr as Textarea,
-  mr as Title,
-  ho as VirtualScrollable,
-  ir as ui,
-  Uo as useContextualStyle,
-  I as utils
+  H as Avatar,
+  Q as BACKDROP_OUTLET_ID,
+  X as BackdropPortal,
+  $ as Badge,
+  Dr as Box,
+  Po as BrandIcon,
+  Y as Button,
+  j as ButtonBar,
+  hr as Center,
+  w as Checkbox,
+  or as ControlBox,
+  tr as CountryFlag,
+  xr as Decorate,
+  fr as Dot,
+  nr as FLYOUT_OUTLET_ID,
+  Er as Flex,
+  _r as FlexRestricter,
+  lr as Flyout,
+  sr as Icon,
+  _o as Icons,
+  cr as Indicator,
+  Ir as InfoPanel,
+  Lr as Input,
+  Co as InputDropzone,
+  kr as Interactive,
+  Or as Island,
+  M as LinkButton,
+  B as Linkify,
+  Yr as Loaf,
+  Mr as Modal,
+  jr as NavList,
+  Hr as OVERLAY_OUTLET_ID,
+  Fo as OnScreenSensor,
+  Jr as Overlay,
+  Fr as Pad,
+  Ar as Page,
+  Xr as Popover,
+  $r as PremiumBadge,
+  oo as Prose,
+  to as Radio,
+  yr as RichInput,
+  Kr as Scrollable,
+  xo as Select,
+  fo as Separator,
+  no as Shroud,
+  io as Spacer,
+  uo as Style,
+  To as Switch,
+  Ko as Symbols,
+  Do as TITLE_OUTLET_ID,
+  So as Tabular,
+  Bo as Text,
+  ko as TextBlock,
+  Oo as Textarea,
+  bo as Title,
+  wr as VirtualScrollable,
+  E as clamp,
+  P as clamp01,
+  p as clsx,
+  k as defaultLinkReplacer,
+  R as defaultLinkReplacerx,
+  m as getValue,
+  d as identity,
+  I as invoke,
+  O as isExternalUrl,
+  v as isFalseString,
+  F as isTrueString,
+  g as linkify,
+  D as linkifyx,
+  b as matchLinkNodes,
+  h as matchLinks,
+  e as mergeRefs,
+  T as noop,
+  U as normalizeSlashes,
+  A as replaceRange,
+  L as returnFalse,
+  S as returnTrue,
+  z as splitByIndices,
+  Ao as ui,
+  K as unicodeCharAt,
+  co as useContextualStyle,
+  a as useDynamicRef,
+  n as useGlobalKeyboardEvent,
+  l as useInstance,
+  i as useKeyboardClose,
+  s as useOutlet,
+  u as useWindowResize
 };

package/dist/{medium-Dc7QRuE0.js → medium-JVtzoF2c.js}

@@ -1,6 +1,6 @@
 import * as l from "react";
 import { useState as g } from "react";
-import { _ as p } from "./tslib.es6-Dd_EkEfR.js";
+import { _ as p } from "./tslib.es6-CBKHJX9H.js";
 function o(e, u) {
   return typeof e == "function" ? e(u) : e && (e.current = u), e;
 }
@@ -112,7 +112,7 @@ function w(e) {
   return u.options = p({ async: !0, ssr: !1 }, e), u;
 }
 export {
-  k as a,
-  w as c,
+  w as a,
+  k as c,
   b as u
 };

package/dist/style-guide/Colours/DarkThemeSwatches.d.ts

@@ -0,0 +1,2 @@
+declare const DarkThemeSwatches: React.FC;
+export default DarkThemeSwatches;

package/dist/style-guide/Colours/DarkThemeSwatches.js

@@ -0,0 +1,110 @@
+import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
+const r = [
+  {
+    name: "$bg",
+    colorValue: "#161923"
+  },
+  {
+    name: "$fg",
+    colorValue: "#fffff0"
+  },
+  {
+    name: "primary",
+    colorValue: "#e50448"
+  },
+  // #f50551 darkened by 10%
+  {
+    name: ".color-1",
+    colorValue: "#ff6659"
+  },
+  // #F44336 lightened by 30%
+  {
+    name: ".color-2",
+    colorValue: "#83e176"
+  },
+  // #4CAF50 lightened by 30%
+  {
+    name: ".color-3",
+    colorValue: "#ffff99"
+  },
+  // #FFEB3B lightened by 30%
+  {
+    name: ".color-4",
+    colorValue: "#8acfff"
+  },
+  // #42A5F5 lightened by 30%
+  {
+    name: ".color-5",
+    colorValue: "#80d4ff"
+  },
+  // #03A9F4 lightened by 30%
+  {
+    name: ".color-6",
+    colorValue: "#e1a3e0"
+  },
+  // #9C27B0 lightened by 30%
+  {
+    name: ".color-8",
+    colorValue: "#ff8a66"
+  },
+  // #FF5722 lightened by 30%
+  {
+    name: ".color-9",
+    colorValue: "#cccccc"
+  }
+  // #9E9E9E lightened by 30%
+], i = function() {
+  return /* @__PURE__ */ a(l, { children: [
+    /* @__PURE__ */ e("h1", { children: " Dark Theme " }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+          gap: "20px",
+          padding: "20px"
+        },
+        children: r.map((o) => /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              backgroundColor: o.colorValue,
+              color: "#FFF",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100px",
+              borderRadius: "8px",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+              padding: "10px",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "-50px",
+                  textAlign: "center",
+                  padding: "5px 10px",
+                  color: "#FFF"
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { children: o.name }),
+                  /* @__PURE__ */ e("br", {}),
+                  /* @__PURE__ */ e("span", { children: o.colorValue })
+                ]
+              }
+            )
+          },
+          o.name
+        ))
+      }
+    )
+  ] });
+};
+export {
+  i as default
+};

package/dist/style-guide/Colours/LightThemeSwatches.d.ts

@@ -0,0 +1,2 @@
+declare const LightThemeSwatches: React.FC;
+export default LightThemeSwatches;