@cfx-dev/ui-components 1.0.0 → 2.0.0

package/dist/components/Modal/Modal.js

@@ -1,42 +1,83 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { Button as _ } from "../Button/Button.js";
-import { Overlay as s } from "../Overlay/Overlay.js";
-import { I as f } from "../../Icons-BlBKvJD8.js";
-import { noop as n } from "../../utils/functional.js";
-import { useKeyboardClose as h } from "../../utils/hooks.js";
-import '../../assets/Modal.css';const v = "_root_1v8ee_1", C = "_close_1v8ee_27", u = "_header_1v8ee_37", N = "_footer_1v8ee_47", r = {
-  root: v,
-  "modal-appearance": "_modal-appearance_1v8ee_1",
-  close: C,
-  header: u,
-  footer: N
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import h from "react";
+import "../Button/Button.js";
+import { ButtonBar as C } from "../Button/ButtonBar.js";
+import "../Button/LinkButton.js";
+import N from "../IconButton/IconButton.js";
+import { Overlay as l } from "../Overlay/Overlay.js";
+import { Text as d } from "../Text/Text.js";
+import { clsx as m } from "../../utils/clsx.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import { useKeyboardClose as k } from "../../utils/hooks/useKeyboardClose.js";
+import "../../index-2hJuj4UN.js";
+import '../../assets/Modal.css';const y = "_root_1u329_1", B = "_close_1u329_26", x = "_header_1u329_32", g = "_footer_1u329_38", s = {
+  root: y,
+  "modal-appearance": "_modal-appearance_1u329_1",
+  close: B,
+  header: x,
+  footer: g
 };
-function l(a) {
+function p(t) {
   const {
-    onClose: e = n,
-    children: d,
-    backdropClassName: i,
-    contentClassName: m,
-    disableBackdropClose: p = !1
-  } = a, t = p ? n : e;
-  return h(t), /* @__PURE__ */ c(s, { children: [
-    /* @__PURE__ */ o(s.Backdrop, { onClick: t, className: i }),
-    /* @__PURE__ */ o(s.Content, { className: m, children: /* @__PURE__ */ c("div", { className: r.root, children: [
-      !!e && /* @__PURE__ */ o("div", { className: r.close, children: /* @__PURE__ */ o(_, { size: "large", theme: "transparent", icon: f.exit, onClick: e }) }),
-      d
-    ] }) })
+    onClose: o,
+    children: a,
+    className: e,
+    backdropClassName: f,
+    contentClassName: u,
+    ariaDescribedby: _,
+    ariaLabelledby: b,
+    disableBackdropClose: i = !1
+  } = t, n = h.useCallback(() => {
+    i || !o || o();
+  }, [o, i]);
+  return k(n), /* @__PURE__ */ c(l, { children: [
+    /* @__PURE__ */ r(l.Backdrop, { onClick: n, className: f }),
+    /* @__PURE__ */ r(l.Content, { className: u, children: /* @__PURE__ */ c(
+      "div",
+      {
+        role: "dialog",
+        "aria-describedby": _,
+        "aria-labelledby": b,
+        className: m(s.root, e),
+        children: [
+          !!o && /* @__PURE__ */ r(N, { className: s.close, name: "Close", onClick: o }),
+          a
+        ]
+      }
+    ) })
   ] });
 }
-l.Header = function({
-  children: e
-}) {
-  return /* @__PURE__ */ o("div", { className: r.header, children: e });
+p.Header = function(o) {
+  const {
+    title: a,
+    description: e
+  } = o;
+  return /* @__PURE__ */ c("div", { className: s.header, children: [
+    /* @__PURE__ */ r(
+      d,
+      {
+        weight: "bold",
+        size: "large",
+        children: a
+      }
+    ),
+    e && /* @__PURE__ */ r(
+      d,
+      {
+        size: "small",
+        color: "secondary",
+        children: e
+      }
+    )
+  ] });
 };
-l.Footer = function({
-  children: e
-}) {
-  return /* @__PURE__ */ o("div", { className: r.footer, children: e });
+p.Footer = function(o) {
+  const {
+    className: a,
+    ...e
+  } = o;
+  return /* @__PURE__ */ r(C, { ...e, className: m(s.footer, a) });
 };
 export {
-  l as Modal
+  p as Modal
 };

package/dist/components/Modal/ModalShowcase.d.ts

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

package/dist/components/Modal/ModalShowcase.js

@@ -0,0 +1,52 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import r from "react";
+import { Button as l } from "../Button/Button.js";
+import "../Button/LinkButton.js";
+import { LOREM_IPSUM as s } from "../../utils/loremipsum.js";
+import { Modal as i } from "./Modal.js";
+function m() {
+  const [a, d] = r.useState(!1), e = r.useCallback(() => d((n) => !n), []);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        minHeight: "600px",
+        display: "flex"
+      },
+      children: [
+        /* @__PURE__ */ o("div", { id: "backdrop" }),
+        /* @__PURE__ */ o("div", { id: "overlay-outlet" }),
+        /* @__PURE__ */ o(l, { theme: "primary", onClick: e, text: "Toggle Modal" }),
+        a && /* @__PURE__ */ t(i, { onClose: e, children: [
+          /* @__PURE__ */ o(i.Header, { title: "Modal Title", description: "Modal Description" }),
+          "Modal content: ",
+          s,
+          /* @__PURE__ */ t(i.Footer, { children: [
+            /* @__PURE__ */ o(
+              l,
+              {
+                fullWidth: !0,
+                theme: "secondary",
+                onClick: e,
+                text: "Close"
+              }
+            ),
+            /* @__PURE__ */ o(
+              l,
+              {
+                fullWidth: !0,
+                theme: "primary",
+                onClick: e,
+                text: "Confirm"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const x = r.memo(m);
+export {
+  x as default
+};

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalHeaderProps, ModalFooterProps, } from './Modal';

package/dist/components/Modal/index.js

@@ -0,0 +1,4 @@
+import { Modal as a } from "./Modal.js";
+export {
+  a as Modal
+};

package/dist/components/NavList/NavList.js

@@ -4,12 +4,12 @@ import { Interactive as _ } from "../Interactive/Interactive.js";
 import { clsx as v } from "../../utils/clsx.js";
 import { noop as f } from "../../utils/functional.js";
 import { getValue as c } from "../../utils/getValue.js";
-import '../../assets/NavList.css';const p = "_root_2ug76_1", u = "_item_2ug76_5", N = "_active_2ug76_23", g = "_icon_2ug76_33", t = {
+import '../../assets/NavList.css';const p = "_root_14z0z_1", z = "_item_14z0z_5", N = "_active_14z0z_20", h = "_icon_14z0z_30", t = {
   root: p,
-  item: u,
+  item: z,
   active: N,
-  icon: g
-}, k = d.forwardRef(function(e, r) {
+  icon: h
+}, g = d.forwardRef(function(e, r) {
   const {
     items: n,
     activeItemId: s,
@@ -29,5 +29,5 @@ import '../../assets/NavList.css';const p = "_root_2ug76_1", u = "_item_2ug76_5"
   return /* @__PURE__ */ i("div", { ref: r, className: t.root, children: m });
 });
 export {
-  k as NavList
+  g as NavList
 };

package/dist/components/OnScreenSensor.js

@@ -1,26 +1,29 @@
 import { jsx as a } from "react/jsx-runtime";
 import t from "react";
 import { noop as o } from "../utils/functional.js";
-import { useDynamicRef as s } from "../utils/hooks.js";
+import { useDynamicRef as s } from "../utils/hooks/useDynamicRef.js";
+import "../utils/hooks/useGlobalKeyboardEvent.js";
+import "../utils/hooks/useKeyboardClose.js";
+import "../index-2hJuj4UN.js";
 const l = {
   width: "0",
   height: "0"
 };
-function h(c) {
+function w(c) {
   const {
-    onEnter: f = o,
-    onLeave: i = o
-  } = c, u = s(f), m = s(i), e = t.useRef(null);
+    onEnter: i = o,
+    onLeave: f = o
+  } = c, u = s(i), m = s(f), e = t.useRef(null);
   return t.useEffect(() => {
     if (!e.current)
       return;
-    const n = new IntersectionObserver((p) => {
-      const [r] = p;
-      r && (r.isIntersecting ? u.current() : m.current());
+    const r = new IntersectionObserver((p) => {
+      const [n] = p;
+      n && (n.isIntersecting ? u.current() : m.current());
     });
-    return n.observe(e.current), () => n.disconnect();
+    return r.observe(e.current), () => r.disconnect();
   }, []), /* @__PURE__ */ a("span", { ref: e, style: l });
 }
 export {
-  h as OnScreenSensor
+  w as OnScreenSensor
 };

package/dist/components/Overlay/Overlay.js

@@ -1,27 +1,29 @@
 import { jsx as r } from "react/jsx-runtime";
 import a from "react";
-import { F as i } from "../../Combination-Dp_plIQU.js";
+import { F as d } from "../../Combination-BRUj3CHE.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
 import { clsx as e } from "../../utils/clsx.js";
-import { useOutlet as u } from "../../utils/hooks.js";
-import '../../assets/Overlay.css';const _ = "_root_15udb_1", f = "_backdrop_15udb_9", p = "_content_15udb_27", n = {
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import "../../utils/hooks/useKeyboardClose.js";
+import { useOutlet as u } from "../../utils/hooks/useOutlet.js";
+import '../../assets/Overlay.css';const _ = "_root_15udb_1", p = "_backdrop_15udb_9", f = "_content_15udb_27", n = {
   root: _,
-  backdrop: f,
+  backdrop: p,
   "backdrop-appearance": "_backdrop-appearance_15udb_1",
-  content: p
+  content: f
 }, b = "overlay-outlet";
 function l(c) {
   const {
     className: o,
     children: t
-  } = c, s = e(n.root, o), d = u(b);
-  return /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r("div", { className: s, children: t }) });
+  } = c, i = e(n.root, o), s = u(b);
+  return /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: i, children: t }) });
 }
 l.Backdrop = a.forwardRef(function(o, t) {
   return /* @__PURE__ */ r(m, { ref: t, onClick: o.onClick, className: e(n.backdrop, o.className), children: o.children });
 });
 l.Content = a.forwardRef(function(o, t) {
-  return /* @__PURE__ */ r("div", { ref: t, className: e(n.content, o.className), children: /* @__PURE__ */ r(i, { children: o.children }) });
+  return /* @__PURE__ */ r("div", { ref: t, className: e(n.content, o.className), children: /* @__PURE__ */ r(d, { children: o.children }) });
 });
 export {
   b as OVERLAY_OUTLET_ID,

package/dist/components/Popover/Popover.d.ts

@@ -1,12 +1,14 @@
 import { default as React } from 'react';
 import { InteractiveProps } from '../Interactive/Interactive';
 
-type PopoverPosition = 'top-right';
+export type PopoverPosition = 'top-right' | 'top-left';
 export interface PopoverProps extends Omit<InteractiveProps, 'children'> {
-    at: PopoverPosition;
+    at?: PopoverPosition;
+    as?: React.ElementType;
     popover: React.ReactNode;
     children: (active: boolean) => React.ReactNode;
     active?: boolean;
+    rootClassName?: string;
+    popoverClassName?: string;
 }
 export declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/components/Popover/Popover.js

@@ -1,40 +1,46 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import u from "react";
-import { Interactive as h } from "../Interactive/Interactive.js";
+import { jsxs as d, jsx as u } from "react/jsx-runtime";
+import N from "react";
+import { Interactive as x } from "../Interactive/Interactive.js";
 import { clsx as t } from "../../utils/clsx.js";
-import '../../assets/Popover.css';const x = "_root_14ed3_1", N = "_active_14ed3_4", M = "_popover_14ed3_4", g = "_appearance_14ed3_1", o = {
-  root: x,
-  active: N,
+import '../../assets/Popover.css';const C = "_root_3gp1h_1", w = "_active_3gp1h_4", M = "_popover_3gp1h_4", P = "_appearance_3gp1h_1", o = {
+  root: C,
+  active: w,
   popover: M,
-  appearance: g,
-  "pos-top-right": "_pos-top-right_14ed3_37"
-}, R = u.forwardRef(function(r, s) {
+  appearance: P,
+  "pos-top-right": "_pos-top-right_3gp1h_37",
+  "pos-top-left": "_pos-top-left_3gp1h_41"
+}, I = N.forwardRef(function(s, p) {
   const {
-    at: c,
-    popover: p,
-    children: a,
-    active: n = !1,
-    onMouseEnter: i,
+    at: r = "top-right",
+    as: a = "div",
+    popover: c,
+    children: n,
+    active: i = !1,
+    onMouseEnter: _,
     onMouseLeave: v,
-    onMouseDown: _
-  } = r, e = n, m = t(o.root, {
+    onMouseDown: l,
+    rootClassName: m,
+    popoverClassName: f
+  } = s, e = i, h = t(o.root, m, {
     [o.active]: e
-  }), d = t(o.popover, o[`pos-${c}`]);
-  return /* @__PURE__ */ f(
-    h,
+  }), g = t(o.popover, f, o[`pos-${r}`]);
+  return /* @__PURE__ */ d(
+    x,
     {
-      ref: s,
-      className: m,
-      onMouseEnter: i,
+      as: a,
+      ref: p,
+      showPointer: !1,
+      className: h,
+      onMouseEnter: _,
       onMouseLeave: v,
-      onMouseDown: _,
+      onMouseDown: l,
       children: [
-        a(e),
-        e && /* @__PURE__ */ l("div", { className: d, children: p })
+        n(e),
+        e && /* @__PURE__ */ u("div", { className: g, children: c })
       ]
     }
   );
 });
 export {
-  R as Popover
+  I as Popover
 };

package/dist/components/Popover/PopoverShowcase.d.ts

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

package/dist/components/Popover/PopoverShowcase.js

@@ -0,0 +1,53 @@
+import { jsx as o } from "react/jsx-runtime";
+import s from "react";
+import { Button as m } from "../Button/Button.js";
+import "../Button/LinkButton.js";
+import { Flex as a } from "../Layout/Flex/Flex.js";
+import { usePopoverController as i } from "../../utils/hooks/usePopoverController.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import "../../utils/hooks/useKeyboardClose.js";
+import "../../index-2hJuj4UN.js";
+import { Popover as l } from "./Popover.js";
+import '../../assets/PopoverShowcase.css';const v = "_popover_1s88x_1", u = {
+  popover: v
+};
+function c() {
+  const {
+    active: e,
+    wrapperRef: r,
+    handleMouseEnter: t,
+    handleMouseLeave: p,
+    handleMouseDown: n
+  } = i();
+  return /* @__PURE__ */ o(
+    a,
+    {
+      fullWidth: !0,
+      centered: !0,
+      children: /* @__PURE__ */ o(
+        l,
+        {
+          as: "span",
+          at: "top-left",
+          ref: r,
+          onMouseEnter: t,
+          onMouseLeave: p,
+          onMouseDown: n,
+          active: e,
+          popover: /* @__PURE__ */ o("div", { style: { padding: "20px" }, children: "Popover content" }),
+          popoverClassName: u.popover,
+          children: () => /* @__PURE__ */ o(
+            m,
+            {
+              text: "Hover me"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const D = s.memo(c);
+export {
+  D as default
+};

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverPosition } from './Popover';

package/dist/components/Popover/index.js

@@ -0,0 +1,4 @@
+import { Popover as e } from "./Popover.js";
+export {
+  e as Popover
+};

package/dist/components/Prose/Prose.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../assets/Prose.css';const r = "_root_17gjt_1", s = {
+import '../../assets/Prose.css';const r = "_root_n8l9t_1", s = {
   root: r
 };
 function c({

package/dist/components/Radio/Radio.js

@@ -1,30 +1,30 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import s from "react";
-import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Radio.css';const u = "_root_1wr8g_1", p = "_indicator_1wr8g_32", w = "_disabled_1wr8g_50", e = {
-  root: u,
-  "size-normal": "_size-normal_1wr8g_22",
-  "size-large": "_size-large_1wr8g_25",
-  indicator: p,
-  disabled: w
+import { clsx as g } from "../../utils/clsx.js";
+import '../../assets/Radio.css';const h = "_root_e4x8g_1", u = "_indicator_e4x8g_29", p = "_disabled_e4x8g_44", e = {
+  root: h,
+  "size-normal": "_size-normal_e4x8g_19",
+  "size-large": "_size-large_e4x8g_22",
+  indicator: u,
+  disabled: p
 };
-let n = 1;
-function C(i) {
+let i = 1;
+function I(l) {
   const {
     checked: a,
-    onChange: l,
+    onChange: r,
     label: d,
     size: c = "normal",
     className: _,
     disabled: t = !1
-  } = i, m = s.useRef(n);
+  } = l, m = s.useRef(i);
   s.useEffect(() => {
-    n += 1;
+    i += 1;
   }, []);
-  const b = () => {
-    l(!a);
-  }, r = s.useId(), f = h(e.root, _, e[`size-${c}`], { [e.disabled]: t });
-  return /* @__PURE__ */ g("label", { className: f, htmlFor: r, children: [
+  const x = () => {
+    r(!a);
+  }, n = s.useId(), b = g(e.root, _, e[`size-${c}`], { [e.disabled]: t });
+  return /* @__PURE__ */ f("label", { className: b, htmlFor: n, children: [
     /* @__PURE__ */ o(
       "input",
       {
@@ -32,8 +32,8 @@ function C(i) {
         tabIndex: m.current,
         checked: a,
         disabled: t,
-        onChange: b,
-        id: r
+        onChange: x,
+        id: n
       }
     ),
     /* @__PURE__ */ o("div", { className: e.indicator }),
@@ -41,5 +41,5 @@ function C(i) {
   ] });
 }
 export {
-  C as Radio
+  I as Radio
 };

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { InputSize } from '../Input';
 
 export interface SelectOption<T> {
     value: T;
@@ -6,11 +7,12 @@ export interface SelectOption<T> {
 }
 export interface SelectProps<T = string> {
     options: SelectOption<T>[];
-    value: T;
+    value?: T;
     onChange: (value: string) => void;
     className?: string;
+    placeholder?: React.ReactNode;
     disabled?: boolean;
-    size?: 'normal' | 'small';
+    size?: InputSize;
+    fullWidth?: boolean;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<unknown>>;
-export declare const Select2: <T extends string | number>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;