@cfx-dev/ui-components 4.5.8 → 4.5.10

package/dist/assets/css/Flyout.css

@@ -1 +1 @@
-.cfxui__Flyout__root__eba04{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--color-overlay-backdrop-background);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__mask__72713{--mask-right: var(--viewport-right, initial);--mask-right-offset: calc(var(--mask-right, initial) - var(--offset-large));position:fixed;top:0;right:0;bottom:0;left:0;mask:linear-gradient(90deg,black 0%,black var(--mask-right-offset, initial),transparent var(--mask-right, initial),transparent 100%);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{--offset-flyout: calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-large));position:fixed;top:var(--offset-flyout, initial);right:0;bottom:var(--offset-flyout, initial);padding:calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc((100vw - (var(--width) - var(--offset-safezone) * 2) * 1) * .5) calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) var(--offset-xlarge);border-radius:var(--border-radius-normal);border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:0 0 0 2px var(--color-flyout-holder-border) inset,var(--shadow-large, initial);--backdrop-color: var(--color-flyout-holder-blur-background);--over-backdrop-color: var(--backdrop-color, transparent);--over-backdrop-image-blur: var(--backdrop-image-blur, url(data:image/png;base64,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));background-color:var(--over-backdrop-color, initial);background-image:linear-gradient(var(--over-backdrop-color, initial),var(--over-backdrop-color, initial)),linear-gradient(var(--color-backdrop-shader),var(--color-backdrop-shader)),var(--over-backdrop-image-blur, initial),var(--over-backdrop-image-blur, initial);background-blend-mode:normal,normal,overlay;background-size:cover,cover,cover,cover;background-attachment:scroll,scroll,fixed,fixed;opacity:0;transform:translate(20px);pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5 .cfxui__Flyout__content__04e42{width:100%;height:100%;overflow:hidden}.cfxui__Flyout__root__eba04.cfxui__Flyout__size-normal__e1165 .cfxui__Flyout__holder__d80b5{left:32vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__size-small__038a5 .cfxui__Flyout__holder__d80b5{left:48vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__size-xsmall__839e8 .cfxui__Flyout__holder__d80b5{left:64vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__backdrop__57f9e{opacity:1;pointer-events:all;animation:cfxui__Flyout__backdrop-appearance__d9564 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__mask__72713{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{opacity:1;transform:translate(0);pointer-events:all;animation:cfxui__Flyout__holder-appearance__e818c .2s ease}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009{display:flex;align-items:center;justify-content:space-between;gap:var(--offset-normal)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009 .cfxui__Flyout__title__b235a{flex-grow:1;width:1px;display:flex;align-items:center;gap:var(--offset-normal);font-size:var(--font-size-xxlarge)}@keyframes cfxui__Flyout__holder-appearance__e818c{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__backdrop-appearance__d9564{0%{opacity:0}to{opacity:1}}
+.cfxui__Flyout__root__eba04{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--color-overlay-backdrop-background);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__mask__72713{--mask-right: var(--viewport-right, initial);--mask-right-offset: calc(var(--mask-right, initial) - var(--offset-large));position:fixed;top:0;right:0;bottom:0;left:0;mask:linear-gradient(90deg,black 0%,black var(--mask-right-offset, initial),transparent var(--mask-right, initial),transparent 100%);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{--offset-flyout: calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-large));position:fixed;top:var(--offset-flyout, initial);right:0;bottom:var(--offset-flyout, initial);padding:calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc((100vw - (var(--width) - var(--offset-safezone) * 2) * 1) * .5) calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) var(--offset-xlarge);border-radius:var(--border-radius-normal);border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:0 0 0 2px var(--color-flyout-holder-border) inset,var(--shadow-large, initial);--backdrop-color: var(--color-flyout-holder-blur-background);--over-backdrop-color: var(--backdrop-color, transparent);--over-backdrop-image-blur: var(--backdrop-image-blur, url(data:image/png;base64,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));background-color:var(--over-backdrop-color, initial);background-image:linear-gradient(var(--over-backdrop-color, initial),var(--over-backdrop-color, initial)),linear-gradient(var(--color-backdrop-shader),var(--color-backdrop-shader)),var(--over-backdrop-image-blur, initial),var(--over-backdrop-image-blur, initial);background-blend-mode:normal,normal,overlay;background-size:cover,cover,cover,cover;background-attachment:scroll,scroll,fixed,fixed;opacity:0;transform:translate(20px);pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5 .cfxui__Flyout__content__04e42{width:100%;height:100%;overflow:hidden}.cfxui__Flyout__root__eba04.cfxui__Flyout__size-normal__e1165 .cfxui__Flyout__holder__d80b5{left:32vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__size-small__038a5 .cfxui__Flyout__holder__d80b5{left:48vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__size-xsmall__839e8 .cfxui__Flyout__holder__d80b5{left:64vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__size-xxsmall__33712 .cfxui__Flyout__holder__d80b5{left:80vw;padding:calc(var(--quant) * 5) calc(var(--quant) * 3.75)}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-filter__1fcce .cfxui__Flyout__holder__d80b5{background:rgba(var(--color-bg),1);border:none;box-shadow:none;top:0;bottom:0}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__backdrop__57f9e{opacity:1;pointer-events:all;animation:cfxui__Flyout__backdrop-appearance__d9564 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__mask__72713{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{opacity:1;transform:translate(0);pointer-events:all;animation:cfxui__Flyout__holder-appearance__e818c .2s ease}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009{display:flex;align-items:center;justify-content:space-between;gap:var(--offset-normal)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009 .cfxui__Flyout__title__b235a{flex-grow:1;width:1px;display:flex;align-items:center;gap:var(--offset-normal);font-size:var(--font-size-xxlarge)}@keyframes cfxui__Flyout__holder-appearance__e818c{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__backdrop-appearance__d9564{0%{opacity:0}to{opacity:1}}

package/dist/components/Button/Button.d.ts

@@ -7,6 +7,7 @@ export interface ButtonProps<T = HTMLButtonElement> {
     title?: string;
     type?: HTMLButtonElement['type'];
     icon?: IconName;
+    iconClassName?: string;
     theme?: ButtonTheme;
     tabIndex?: number;
     className?: string;
@@ -19,8 +20,9 @@ export interface ButtonProps<T = HTMLButtonElement> {
     onMouseUp?: (event: React.MouseEvent<T>) => void;
     decorator?: React.ReactNode;
     ref?: React.Ref<T>;
+    style?: React.CSSProperties;
 }
-export declare function ButtonContent(props: Pick<ButtonProps, 'text' | 'icon' | 'decorator'>): React.ReactNode;
+export declare function ButtonContent(props: Pick<ButtonProps, 'text' | 'icon' | 'decorator' | 'iconClassName'>): React.ReactNode;
 export declare function getButtonClassName<T = HTMLButtonElement>(props: Partial<Omit<ButtonProps<T>, 'onClick'>>): string;
 declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;

package/dist/components/Button/Button.js

@@ -1,113 +1,115 @@
-import { jsx as s, jsxs as W, Fragment as g } from "react/jsx-runtime";
+import { jsx as s, jsxs as A, Fragment as q } from "react/jsx-runtime";
 import m from "react";
-import { Icon as A } from "../Icon/Icon.js";
-import { clsx as q } from "../../utils/clsx.js";
+import { Icon as I } from "../Icon/Icon.js";
+import { clsx as B } from "../../utils/clsx.js";
 import { noop as d } from "../../utils/functional.js";
-const I = "cfxui__Button__unsetAll__44b96", M = "cfxui__Button__root__e2ace", j = "cfxui__Button__fullWidth__f61d9", F = "cfxui__Button__primary__1c59f", v = "cfxui__Button__secondary__b2b84", w = "cfxui__Button__linked__330cb", D = "cfxui__Button__quicklink__204ac", L = "cfxui__Button__icon__44e51", P = "cfxui__Button__icononly__4f786", R = "cfxui__Button__decorator__39a9b", t = {
-  unsetAll: I,
-  root: M,
-  fullWidth: j,
-  primary: F,
-  secondary: v,
+const M = "cfxui__Button__unsetAll__44b96", j = "cfxui__Button__root__e2ace", F = "cfxui__Button__fullWidth__f61d9", v = "cfxui__Button__primary__1c59f", w = "cfxui__Button__secondary__b2b84", D = "cfxui__Button__linked__330cb", L = "cfxui__Button__quicklink__204ac", P = "cfxui__Button__icon__44e51", R = "cfxui__Button__icononly__4f786", U = "cfxui__Button__decorator__39a9b", t = {
+  unsetAll: M,
+  root: j,
+  fullWidth: F,
+  primary: v,
+  secondary: w,
   "on-light": "cfxui__Button__on-light__ae69c",
-  linked: w,
-  quicklink: D,
-  icon: L,
-  icononly: P,
-  decorator: R
+  linked: D,
+  quicklink: L,
+  icon: P,
+  icononly: R,
+  decorator: U
 };
-function U(c) {
+function $(c) {
   const {
     text: o = null,
     icon: n,
+    iconClassName: u,
     decorator: l = null
   } = c;
-  return /* @__PURE__ */ W(g, { children: [
+  return /* @__PURE__ */ A(q, { children: [
     o,
-    !!n && /* @__PURE__ */ s(A, { name: n, className: t.icon }),
+    !!n && /* @__PURE__ */ s(I, { name: n, className: B(t.icon, u) }),
     !!l && /* @__PURE__ */ s("div", { className: t.decorator, children: l })
   ] });
 }
-function $(c) {
+function z(c) {
   const {
     text: o = null,
     icon: n,
-    theme: l = "default",
-    disabled: a = !1,
-    className: u = "",
-    autofocus: _ = !1,
-    fullWidth: e = !1,
-    tabIndex: i
+    theme: u = "default",
+    disabled: l = !1,
+    className: a = "",
+    autofocus: i = !1,
+    fullWidth: _ = !1,
+    tabIndex: e
   } = c;
-  return q(t.unsetAll, t.root, t[l], u, {
-    [t.disabled]: a,
+  return B(t.unsetAll, t.root, t[u], a, {
+    [t.disabled]: l,
     [t.icononly]: !!n && (o === null || typeof o > "u"),
     [t.text]: !!o,
-    [t.autofocus]: _ || typeof i < "u",
-    [t.fullWidth]: e
+    [t.autofocus]: i || typeof e < "u",
+    [t.fullWidth]: _
   });
 }
-function z(c) {
+function E(c) {
   const {
     text: o = null,
     icon: n,
+    iconClassName: u,
     title: l = "",
     type: a = "button",
-    className: u = "",
+    className: i = "",
     theme: _ = "default",
     disabled: e = !1,
-    onClick: i = d,
-    onMouseDown: b = d,
-    onMouseUp: B = d,
+    onClick: x = d,
+    onMouseDown: h = d,
+    onMouseUp: k = d,
     autofocus: r = !1,
     tabIndex: f,
-    fullWidth: x = !1,
-    ariaLabel: h = "",
-    ref: k,
-    ...p
-  } = c, y = m.useMemo(() => $({
+    fullWidth: b = !1,
+    ariaLabel: p = "",
+    ref: y,
+    ...C
+  } = c, N = m.useMemo(() => z({
     text: o,
     icon: n,
     theme: _,
     disabled: e,
-    className: u,
+    className: i,
     autofocus: r,
-    fullWidth: x,
+    fullWidth: b,
     tabIndex: f
   }), [
     r,
-    u,
-    x,
+    i,
+    b,
     e,
     n,
     f,
     o,
     _
-  ]), C = m.useCallback((N) => {
-    e || i(N);
-  }, [e, i]);
+  ]), W = m.useCallback((g) => {
+    e || x(g);
+  }, [e, x]);
   return /* @__PURE__ */ s(
     "button",
     {
-      ref: k,
+      ref: y,
       disabled: e,
-      className: y,
-      onClick: C,
-      onMouseDown: b,
-      onMouseUp: B,
+      className: N,
+      onClick: W,
+      onMouseDown: h,
+      onMouseUp: k,
       autoFocus: r,
       tabIndex: f,
       title: l,
       type: a,
-      "aria-label": h,
-      ...p,
-      children: /* @__PURE__ */ s(U, { ...c })
+      "aria-label": p,
+      ...C,
+      children: /* @__PURE__ */ s($, { ...c })
     }
   );
 }
-const O = m.memo(z);
+const Q = m.memo(E);
 export {
-  U as ButtonContent,
-  O as default,
-  $ as getButtonClassName
+  $ as ButtonContent,
+  Q as default,
+  z as getButtonClassName
 };

package/dist/components/Flyout/Flyout.d.ts

@@ -1,9 +1,11 @@
 import { default as React } from 'react';
 
 export declare const FLYOUT_OUTLET_ID = "flyout-outlet";
-export type FlyoutSize = 'normal' | 'small' | 'xsmall';
+export type FlyoutSize = 'normal' | 'small' | 'xsmall' | 'xxsmall';
+export type FlyoutTheme = 'default' | 'filter';
 export interface FlyoutProps {
     disabled?: boolean;
+    theme?: FlyoutTheme;
     size?: FlyoutSize;
     onClose?(): void;
     children?: React.ReactNode;

package/dist/components/Flyout/Flyout.js

@@ -1,63 +1,66 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import d from "react";
-import { F as f } from "../../Combination-N-vN9BB-.js";
-import p from "../Button/Button.js";
-import { clsx as l } from "../../utils/clsx.js";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import f from "react";
+import { F as p } from "../../Combination-N-vN9BB-.js";
+import h from "../Button/Button.js";
+import { clsx as r } from "../../utils/clsx.js";
 import "../../utils/links.js";
-import { Interactive as h } from "../Interactive/Interactive.js";
+import { Interactive as x } from "../Interactive/Interactive.js";
 import { noop as y } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
-import { useOutlet as x } from "../../utils/hooks/useOutlet.js";
-const k = "cfxui__Flyout__root__eba04", b = "cfxui__Flyout__backdrop__57f9e", v = "cfxui__Flyout__mask__72713", C = "cfxui__Flyout__holder__d80b5", N = "cfxui__Flyout__content__04e42", z = "cfxui__Flyout__active__14a29", L = "cfxui__Flyout__header__40009", O = "cfxui__Flyout__title__b235a", o = {
-  root: k,
-  backdrop: b,
-  mask: v,
+import { useOutlet as k } from "../../utils/hooks/useOutlet.js";
+const b = "cfxui__Flyout__root__eba04", v = "cfxui__Flyout__backdrop__57f9e", z = "cfxui__Flyout__mask__72713", C = "cfxui__Flyout__holder__d80b5", N = "cfxui__Flyout__content__04e42", L = "cfxui__Flyout__active__14a29", O = "cfxui__Flyout__header__40009", E = "cfxui__Flyout__title__b235a", e = {
+  root: b,
+  backdrop: v,
+  mask: z,
   holder: C,
   content: N,
   "size-normal": "cfxui__Flyout__size-normal__e1165",
   "size-small": "cfxui__Flyout__size-small__038a5",
   "size-xsmall": "cfxui__Flyout__size-xsmall__839e8",
-  active: z,
+  "size-xxsmall": "cfxui__Flyout__size-xxsmall__33712",
+  "theme-filter": "cfxui__Flyout__theme-filter__1fcce",
+  active: L,
   "backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
   "holder-appearance": "cfxui__Flyout__holder-appearance__e818c",
-  header: L,
-  title: O
-}, E = "flyout-outlet";
-function I(c) {
+  header: O,
+  title: E
+}, I = "flyout-outlet";
+function T(c) {
   const {
     disabled: t = !1,
-    size: s = "normal",
-    onClose: r = y,
-    children: a,
-    holderClassName: n
-  } = c, m = x(E);
-  d.useEffect(() => {
+    size: l = "normal",
+    theme: a = "default",
+    onClose: s = y,
+    children: n,
+    holderClassName: m
+  } = c, u = k(I);
+  f.useEffect(() => {
     if (t)
       return;
     const _ = document.getElementById("cfxui-root");
     return _ == null || _.classList.add("shrink"), () => _ == null ? void 0 : _.classList.remove("shrink");
-  }, [t]), F(r);
-  const u = l(o.root, o[`size-${s}`], {
-    [o.active]: !t
+  }, [t]), F(s);
+  const d = r(e.root, e[`size-${l}`], e[`theme-${a}`], {
+    [e.active]: !t
   });
-  return /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i("div", { className: u, children: [
-    /* @__PURE__ */ e(h, { showPointer: !1, className: o.backdrop, onClick: r }),
-    /* @__PURE__ */ e("div", { className: o.mask, children: /* @__PURE__ */ e("div", { className: l(o.holder, n), children: /* @__PURE__ */ e(f, { disabled: !!t, className: o.content, children: a }) }) })
+  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ i("div", { className: d, children: [
+    /* @__PURE__ */ o(x, { showPointer: !1, className: e.backdrop, onClick: s }),
+    /* @__PURE__ */ o("div", { className: e.mask, children: /* @__PURE__ */ o("div", { className: r(e.holder, m), children: /* @__PURE__ */ o(p, { disabled: !!t, className: e.content, children: n }) }) })
   ] }) });
 }
-I.Header = function(t) {
+T.Header = function(t) {
   const {
-    onClose: s,
-    children: r,
-    ref: a
+    onClose: l,
+    children: a,
+    ref: s
   } = t;
-  return /* @__PURE__ */ i("div", { ref: a, className: o.header, children: [
-    /* @__PURE__ */ e("div", { className: o.title, children: r }),
-    !!s && /* @__PURE__ */ e(p, { icon: "Close", onClick: s })
+  return /* @__PURE__ */ i("div", { ref: s, className: e.header, children: [
+    /* @__PURE__ */ o("div", { className: e.title, children: a }),
+    !!l && /* @__PURE__ */ o(h, { icon: "Close", onClick: l })
   ] });
 };
 export {
-  E as FLYOUT_OUTLET_ID,
-  I as Flyout
+  I as FLYOUT_OUTLET_ID,
+  T as Flyout
 };

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

@@ -1,2 +1,2 @@
 export { FLYOUT_OUTLET_ID, Flyout } from './Flyout';
-export type { FlyoutProps, FlyoutSize } from './Flyout';
+export type { FlyoutProps, FlyoutSize, FlyoutTheme, } from './Flyout';

package/package.json

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