@cfx-dev/ui-components 0.0.5

package/dist/components/Layout/Flex/Flex.js

@@ -0,0 +1,75 @@
+import { jsx as r } from "react/jsx-runtime";
+import w from "react";
+import { clsx as b } from "../../../utils/clsx.js";
+import { FlexRestricter as R } from "./FlexRestricter.js";
+import '../../../assets/Flex.css';const F = "_root_1audv_1", z = "_centered_1audv_11", C = "_vertical_1audv_30", N = "_repell_1audv_36", E = "_wrap_1audv_39", T = "_stretch_1audv_51", j = "_horizontal_1audv_57", e = {
+  root: F,
+  "full-width": "_full-width_1audv_5",
+  "full-height": "_full-height_1audv_8",
+  centered: z,
+  "centered-axis": "_centered-axis_1audv_15",
+  "centered-cross-axis": "_centered-cross-axis_1audv_18",
+  "baseline-axis": "_baseline-axis_1audv_21",
+  "baseline-cross-axis": "_baseline-cross-axis_1audv_24",
+  "reverse-order": "_reverse-order_1audv_27",
+  vertical: C,
+  repell: N,
+  wrap: E,
+  "align-to-end": "_align-to-end_1audv_42",
+  "align-to-end-axis": "_align-to-end-axis_1audv_45",
+  "space-between": "_space-between_1audv_48",
+  stretch: T,
+  horizontal: j,
+  "gap-none": "_gap-none_1audv_63",
+  "gap-thin": "_gap-thin_1audv_66",
+  "gap-xsmall": "_gap-xsmall_1audv_69",
+  "gap-small": "_gap-small_1audv_72",
+  "gap-normal": "_gap-normal_1audv_75",
+  "gap-large": "_gap-large_1audv_78",
+  "gap-xlarge": "_gap-xlarge_1audv_81"
+};
+function A(l, s) {
+  const {
+    fullWidth: _ = !1,
+    fullHeight: o = !1,
+    vertical: t = !1,
+    centered: a = !1,
+    repell: i = !1,
+    stretch: d = !1,
+    wrap: c = !1,
+    alignToEnd: u = !1,
+    alignToEndAxis: p = !1,
+    spaceBetween: v = !1,
+    reverseOrder: g = !1,
+    gap: x = "normal",
+    children: f,
+    className: h
+  } = l, m = b(e.root, h, e[`gap-${x}`], {
+    [e["full-width"]]: _,
+    [e["full-height"]]: o,
+    [e.centered]: a === !0,
+    [e["centered-axis"]]: a === "axis",
+    [e["centered-cross-axis"]]: a === "cross-axis",
+    [e["baseline-axis"]]: a === "baseline-axis",
+    [e["baseline-cross-axis"]]: a === "baseline-cross-axis",
+    [e.vertical]: t,
+    [e.horizontal]: !t,
+    [e.repell]: i,
+    [e.stretch]: d,
+    [e.wrap]: c,
+    [e["align-to-end"]]: u,
+    [e["align-to-end-axis"]]: p,
+    [e["space-between"]]: v,
+    [e["reverse-order"]]: g
+  });
+  return /* @__PURE__ */ r("div", { ref: s, className: m, children: f });
+}
+const B = w.forwardRef(A), n = B;
+n.Restricted = function({
+  children: s
+}) {
+  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(R, { children: s }) });
+};
+export {
+  n as Flex
+};

package/dist/components/Layout/Flex/FlexRestricter.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export interface FlexRestricterProps {
+    vertical?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Useful when you have some flex layout and need to restrict something within to the limits of layout itself
+ *
+ * To allow scrollable strictly within flex layout, for example
+ */
+export declare const FlexRestricter: React.ForwardRefExoticComponent<FlexRestricterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Layout/Flex/FlexRestricter.js

@@ -0,0 +1,20 @@
+import { jsx as i } from "react/jsx-runtime";
+import l from "react";
+import { clsx as s } from "../../../utils/clsx.js";
+import '../../../assets/FlexRestricter.css';const n = "_root_1jvko_1", _ = "_vertical_1jvko_4", v = "_horizontal_1jvko_7", o = {
+  root: n,
+  vertical: _,
+  horizontal: v
+}, d = l.forwardRef(function(r, e) {
+  const {
+    vertical: t = !1,
+    children: c
+  } = r, a = s(o.root, {
+    [o.vertical]: t,
+    [o.horizontal]: !t
+  });
+  return /* @__PURE__ */ i("div", { ref: e, className: a, children: c });
+});
+export {
+  d as FlexRestricter
+};

package/dist/components/Layout/Pad/Pad.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface PadProps {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * 'normal' by default
+     */
+    size?: 'none' | 'small' | 'normal' | 'large' | 'xlarge';
+    top?: boolean;
+    left?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+}
+export declare function Pad(props: PadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Layout/Pad/Pad.js

@@ -0,0 +1,36 @@
+import { jsx as i } from "react/jsx-runtime";
+import { clsx as q } from "../../../utils/clsx.js";
+import '../../../assets/Pad.css';const y = "_root_166qt_1", o = {
+  root: y,
+  "offset-none": "_offset-none_166qt_1",
+  "offset-thin": "_offset-thin_166qt_4",
+  "offset-xsmall": "_offset-xsmall_166qt_7",
+  "offset-small": "_offset-small_166qt_10",
+  "offset-normal": "_offset-normal_166qt_13",
+  "offset-large": "_offset-large_166qt_16",
+  "offset-xlarge": "_offset-xlarge_166qt_19",
+  "only-top": "_only-top_166qt_22",
+  "only-left": "_only-left_166qt_25",
+  "only-right": "_only-right_166qt_28",
+  "only-bottom": "_only-bottom_166qt_31"
+};
+function h(_) {
+  const {
+    top: f = !1,
+    left: l = !1,
+    right: s = !1,
+    bottom: e = !1,
+    size: n = "normal",
+    children: r,
+    className: a
+  } = _, t = !(f || l || s || e), m = q(o.root, a, o[`offset-${n}`], {
+    [o["only-top"]]: t || f,
+    [o["only-left"]]: t || l,
+    [o["only-right"]]: t || s,
+    [o["only-bottom"]]: t || e
+  });
+  return /* @__PURE__ */ i("div", { className: m, children: r });
+}
+export {
+  h as Pad
+};

package/dist/components/Layout/Page/Page.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface PageProps {
+    children?: React.ReactNode;
+    className?: string;
+    showLoader?: boolean;
+}
+export declare function Page(props: PageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Layout/Page/Page.js

@@ -0,0 +1,21 @@
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import { clsx as n } from "../../../utils/clsx.js";
+import '../../../assets/Page.css';const d = "_root_18k7e_1", _ = "_loader_18k7e_8", m = "_wtf_18k7e_1", o = {
+  root: d,
+  loader: _,
+  wtf: m
+};
+function w(s) {
+  const {
+    children: r,
+    className: t,
+    showLoader: e = !1
+  } = s, a = n(o.root, t);
+  return /* @__PURE__ */ c("div", { className: a, children: [
+    r,
+    e && /* @__PURE__ */ l("div", { className: o.loader })
+  ] });
+}
+export {
+  w as Page
+};

package/dist/components/Layout/Scrollable/Rail.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+interface RailProps {
+    axis: 'x' | 'y';
+    pos: number;
+    rootRef: React.RefObject<HTMLDivElement>;
+    size: number;
+    scrollSize: number;
+    minThumbSize: number;
+    setRootActive(active: boolean): void;
+}
+export declare function Rail(props: RailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Layout/Scrollable/Rail.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "react";
+import "../../Interactive/Interactive.js";
+import "../../../utils/clsx.js";
+import "../../../hooks-Bv1kQUpO.js";
+import "../../../math-i2ceybzU.js";
+import { R as e } from "../../../Rail-DoYzqKk4.js";
+export {
+  e as Rail
+};

package/dist/components/Layout/Scrollable/Scrollable.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+export interface ScrollableProps {
+    minThumbSize?: number;
+    className?: string;
+    children?: React.ReactNode;
+    onScroll?: (event: WheelEvent | React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    scrollerRef?: React.Ref<HTMLDivElement>;
+    /**
+     * If true, will repurpose wheel events for horizontal scroll instead
+     */
+    verticalAsHorizontal?: boolean;
+}
+export declare const Scrollable: React.ForwardRefExoticComponent<ScrollableProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Layout/Scrollable/Scrollable.js

@@ -0,0 +1,89 @@
+import { jsxs as j, jsx as n } from "react/jsx-runtime";
+import r from "react";
+import { useContextualStyle as W } from "../../Style/Style.js";
+import { clsx as b } from "../../../utils/clsx.js";
+import k from "../../../utils/mergeRefs.js";
+import { s as o, R as w } from "../../../Rail-DoYzqKk4.js";
+const N = {
+  size: 0,
+  scrollPos: 0,
+  scrollSize: 0
+}, K = r.forwardRef(function(f, P) {
+  const {
+    children: y,
+    className: A,
+    onScroll: i,
+    minThumbSize: S = 20,
+    verticalAsHorizontal: a = !1
+  } = f, e = r.useRef(null), u = r.useRef(null), [L, m] = r.useState(!1), [l, E] = r.useState(N), [T, g] = r.useState(0), [c, C] = r.useState(N), [I, X] = r.useState(0), Y = b(o.root, A, {
+    [o.active]: L
+  });
+  r.useLayoutEffect(() => {
+    if (!u.current)
+      throw new Error("No scrollable content ref");
+    const s = new ResizeObserver(() => {
+      var t, d, h, v, p, x;
+      C({
+        size: ((t = e.current) == null ? void 0 : t.clientHeight) || 0,
+        scrollPos: ((d = e.current) == null ? void 0 : d.scrollTop) || 0,
+        scrollSize: ((h = e.current) == null ? void 0 : h.scrollHeight) || 0
+      }), E({
+        size: ((v = e.current) == null ? void 0 : v.clientWidth) || 0,
+        scrollPos: ((p = e.current) == null ? void 0 : p.scrollLeft) || 0,
+        scrollSize: ((x = e.current) == null ? void 0 : x.scrollWidth) || 0
+      });
+    });
+    return s.observe(u.current), () => s.disconnect();
+  }, []);
+  const _ = r.useCallback(
+    (s) => {
+      e.current && (i == null || i(s), X(e.current.scrollTop), g(e.current.scrollLeft));
+    },
+    [a]
+  );
+  r.useEffect(() => {
+    if (!a || !e.current)
+      return;
+    const s = (t) => {
+      t.preventDefault(), t.stopPropagation(), e.current && (e.current.scrollLeft += t.deltaY);
+    };
+    return e.current.addEventListener("wheel", s), () => {
+      var t;
+      return (t = e.current) == null ? void 0 : t.removeEventListener("wheel", s);
+    };
+  }, [a]);
+  const z = l.scrollSize - l.size > 1, R = c.scrollSize - c.size > 1, H = b(o.scroller, {
+    [o["no-x-scroll"]]: !z,
+    [o["no-y-scroll"]]: !R
+  });
+  return /* @__PURE__ */ j("div", { ref: P, style: W(), className: Y, children: [
+    /* @__PURE__ */ n("div", { ref: k(e, f.scrollerRef), className: H, onScroll: _, children: /* @__PURE__ */ n("div", { ref: u, className: o.content, children: y }) }),
+    R && /* @__PURE__ */ n(
+      w,
+      {
+        rootRef: e,
+        axis: "y",
+        size: c.size,
+        pos: I,
+        scrollSize: c.scrollSize,
+        setRootActive: m,
+        minThumbSize: S
+      }
+    ),
+    z && /* @__PURE__ */ n(
+      w,
+      {
+        rootRef: e,
+        axis: "x",
+        size: l.size,
+        pos: T,
+        scrollSize: l.scrollSize,
+        setRootActive: m,
+        minThumbSize: S
+      }
+    )
+  ] });
+});
+export {
+  K as Scrollable
+};

package/dist/components/Layout/Scrollable/VirtualScrollable.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface VirtualScrollableProps {
+    className?: string;
+    itemCount: number;
+    itemHeight: number;
+    renderItem(index: number): React.ReactNode;
+    onScrollUpdate?(offset: number): void;
+    initialScrollOffset?: number;
+}
+export declare function VirtualScrollable(props: VirtualScrollableProps): import("react/jsx-runtime").JSX.Element;