@cfx-dev/ui-components 4.5.1 → 4.5.4

package/dist/components/Modal/Modal.js

@@ -1,60 +1,81 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import N from "react";
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import B from "react";
 import "../Button/Button.js";
-import { ButtonBar as k } from "../Button/ButtonBar.js";
+import { ButtonBar as M } from "../Button/ButtonBar.js";
 import "../../utils/links.js";
-import y from "../IconButton/IconButton.js";
-import { Overlay as t } from "../Overlay/Overlay.js";
-import { Text as m } from "../Text/Text.js";
-import "../../utils/ui/ui.js";
-import { clsx as s } from "../../utils/clsx.js";
+import g from "../Flex/Flex.js";
+import { clsx as i } from "../../utils/clsx.js";
+import { IconBig as w } from "../IconBig/IconBig.js";
+import O from "../IconButton/IconButton.js";
+import { Overlay as u } from "../Overlay/Overlay.js";
+import { Text as b } from "../Text/Text.js";
+import { ui as C } from "../../utils/ui/ui.js";
+import { ColorEnum as z } from "../../utils/ui/ui.types.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as x } from "../../utils/hooks/useKeyboardClose.js";
+import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
-const M = "cfxui__Modal__root__53283", B = "cfxui__Modal__close__2df9b", v = "cfxui__Modal__header__bec76", g = "cfxui__Modal__footer__bb2fc", r = {
-  root: M,
-  close: B,
-  header: v,
-  footer: g
+const H = "cfxui__Modal__root__53283", I = "cfxui__Modal__colored__649d1", L = "cfxui__Modal__close__2df9b", T = "cfxui__Modal__header__bec76", j = "cfxui__Modal__footer__bb2fc", l = {
+  root: H,
+  colored: I,
+  close: L,
+  header: T,
+  footer: j
 };
-function _(c) {
+var A = /* @__PURE__ */ ((o) => (o.default = "default", o.danger = "danger", o.success = "success", o.warning = "warning", o))(A || {});
+const h = {
+  default: void 0,
+  danger: "red",
+  success: "green",
+  warning: "yellow"
+};
+function N(o) {
   const {
-    onClose: o,
-    children: l,
-    className: e,
-    overlayClassName: f,
-    backdropClassName: p,
-    contentClassName: b,
-    ariaDescribedby: u,
-    ariaLabelledby: h,
-    disableBackdropClose: d = !1,
-    disableFocusLock: C = !1
-  } = c, n = N.useCallback(() => {
-    d || !o || o();
-  }, [o, d]);
-  return x(n), /* @__PURE__ */ i(t, { className: s(r.overlay, f), children: [
+    theme: r = "default",
+    color: c,
+    onClose: e,
+    children: t,
+    className: s,
+    overlayClassName: m,
+    backdropClassName: f,
+    contentClassName: y,
+    ariaDescribedby: v,
+    ariaLabelledby: x,
+    disableBackdropClose: _ = !1,
+    disableFocusLock: k = !1
+  } = o, p = B.useCallback(() => {
+    _ || !e || e();
+  }, [e, _]);
+  F(p);
+  const n = c || h[r];
+  return /* @__PURE__ */ d(u, { className: i(l.overlay, m), children: [
     /* @__PURE__ */ a(
-      t.Backdrop,
+      u.Backdrop,
       {
-        onClick: n,
-        className: s(r.backdrop, p)
+        onClick: p,
+        className: i(l.backdrop, f)
       }
     ),
     /* @__PURE__ */ a(
-      t.Content,
+      u.Content,
       {
-        className: b,
-        disableFocusLock: C,
-        children: /* @__PURE__ */ i(
+        className: y,
+        disableFocusLock: k,
+        children: /* @__PURE__ */ d(
           "div",
           {
             role: "dialog",
-            "aria-describedby": u,
-            "aria-labelledby": h,
-            className: s(r.root, e),
+            "aria-describedby": v,
+            "aria-labelledby": x,
+            className: i(l.root, s, {
+              [l.colored]: !!n
+            }),
+            style: {
+              "--modal-color": n ? C.color(n) : void 0,
+              "--modal-color-bg": n ? C.color(n, void 0, 0.2) : void 0
+            },
             children: [
-              !!o && /* @__PURE__ */ a(y, { areaSize: "large", className: r.close, name: "Close", onClick: o }),
-              l
+              !!e && /* @__PURE__ */ a(O, { areaSize: "large", className: l.close, name: "Close", onClick: e }),
+              t
             ]
           }
         )
@@ -62,37 +83,82 @@ function _(c) {
     )
   ] });
 }
-_.Header = function(o) {
+function D(o) {
+  switch (o) {
+    case "danger":
+      return "Warni";
+    case "success":
+      return "Confirm";
+    default:
+      return;
+  }
+}
+function P(o) {
   const {
-    title: l,
-    description: e
+    theme: r = "default",
+    iconName: c,
+    iconColor: e
   } = o;
-  return /* @__PURE__ */ i("div", { className: r.header, children: [
-    /* @__PURE__ */ a(
-      m,
+  if (!c && !r)
+    return null;
+  const t = c || D(r), s = e || h[r] || z.primary;
+  return t ? /* @__PURE__ */ a(g, { centered: !0, children: /* @__PURE__ */ a(
+    w,
+    {
+      name: t,
+      color: s,
+      size: "normal"
+    }
+  ) }) : null;
+}
+N.Header = function(r) {
+  const {
+    title: c,
+    description: e,
+    theme: t = "default",
+    icon: s,
+    iconName: m,
+    iconColor: f
+  } = r;
+  return /* @__PURE__ */ d(g, { vertical: !0, gap: "large", children: [
+    s || /* @__PURE__ */ a(
+      P,
       {
-        weight: "bold",
-        size: "large",
-        children: l
+        theme: t,
+        iconName: m,
+        iconColor: f
       }
     ),
-    e && /* @__PURE__ */ a(
-      m,
-      {
-        size: "small",
-        color: "secondary",
-        children: e
-      }
-    )
+    /* @__PURE__ */ d("div", { className: l.header, children: [
+      /* @__PURE__ */ a(
+        b,
+        {
+          weight: "bold",
+          size: "large",
+          children: c
+        }
+      ),
+      e && /* @__PURE__ */ a(
+        b,
+        {
+          size: "small",
+          color: "secondary",
+          typographic: !0,
+          children: e
+        }
+      )
+    ] })
   ] });
 };
-_.Footer = function(o) {
+N.Footer = function(r) {
   const {
-    className: l,
+    className: c,
     ...e
-  } = o;
-  return /* @__PURE__ */ a(k, { ...e, className: s(r.footer, l) });
+  } = r;
+  return /* @__PURE__ */ a(M, { ...e, className: i(l.footer, c) });
 };
 export {
-  _ as Modal
+  h as MODAL_THEME_TO_COLOR_MAP,
+  N as Modal,
+  A as ModalThemeEnum
 };

package/dist/components/Modal/ModalShowcase.js

@@ -1,17 +1,17 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import i from "react";
+import r from "react";
 import n from "../Box/Box.js";
 import "../../utils/ui/ui.js";
-import l from "../Button/Button.js";
+import i from "../Button/Button.js";
 import "../../utils/links.js";
-import p from "../Input/Input.js";
+import c from "../Input/Input.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
-import { LOREM_IPSUM as c } from "../../utils/loremipsum.js";
-import { Modal as r } from "./Modal.js";
+import { LOREM_IPSUM as p } from "../../utils/loremipsum.js";
+import { Modal as l } from "./Modal.js";
 function s() {
-  const [d, m] = i.useState(!1), t = i.useCallback(() => m((a) => !a), []);
+  const [a, d] = r.useState(!1), t = r.useCallback(() => d((m) => !m), []);
   return /* @__PURE__ */ e(
     "div",
     {
@@ -22,16 +22,24 @@ function s() {
       children: [
         /* @__PURE__ */ o("div", { id: "backdrop" }),
         /* @__PURE__ */ o("div", { id: "overlay-outlet" }),
-        /* @__PURE__ */ o(l, { theme: "primary", onClick: t, text: "Toggle Modal" }),
-        d && /* @__PURE__ */ e(r, { onClose: t, children: [
-          /* @__PURE__ */ o(r.Header, { title: "Modal Title", description: "Modal Description" }),
-          /* @__PURE__ */ o(n, { mb: 4, children: /* @__PURE__ */ o(p, { theme: "onlight", placeholder: "Input", fullWidth: !0 }) }),
+        /* @__PURE__ */ o(i, { theme: "primary", onClick: t, text: "Toggle Modal" }),
+        a && /* @__PURE__ */ e(l, { onClose: t, children: [
+          /* @__PURE__ */ o(
+            l.Header,
+            {
+              iconName: "Subscriptions",
+              iconColor: "accent",
+              title: "Modal Title",
+              description: "Modal Description"
+            }
+          ),
+          /* @__PURE__ */ o(n, { mb: 4, children: /* @__PURE__ */ o(c, { theme: "onlight", placeholder: "Input", fullWidth: !0 }) }),
           "Modal content:",
           " ",
-          c,
-          /* @__PURE__ */ e(r.Footer, { children: [
+          p,
+          /* @__PURE__ */ e(l.Footer, { children: [
             /* @__PURE__ */ o(
-              l,
+              i,
               {
                 fullWidth: !0,
                 theme: "secondary",
@@ -40,7 +48,7 @@ function s() {
               }
             ),
             /* @__PURE__ */ o(
-              l,
+              i,
               {
                 fullWidth: !0,
                 theme: "primary",
@@ -54,7 +62,7 @@ function s() {
     }
   );
 }
-const b = i.memo(s);
+const w = r.memo(s);
 export {
-  b as default
+  w as default
 };

package/dist/components/Radio/Radio.d.ts

@@ -8,5 +8,6 @@ export interface RadioProps {
     size?: RadioSize;
     disabled?: boolean;
     className?: string;
+    name?: string;
 }
 export declare function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Radio/Radio.js

@@ -1,45 +1,47 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
 import a from "react";
-import { clsx as b } from "../../utils/clsx.js";
-const h = "cfxui__Radio__root__05f1c", R = "cfxui__Radio__indicator__2181e", p = "cfxui__Radio__disabled__c411f", o = {
-  root: h,
+import { clsx as h } from "../../utils/clsx.js";
+const R = "cfxui__Radio__root__05f1c", p = "cfxui__Radio__indicator__2181e", z = "cfxui__Radio__disabled__c411f", e = {
+  root: R,
   "size-normal": "cfxui__Radio__size-normal__6dccc",
   "size-large": "cfxui__Radio__size-large__0a074",
-  indicator: R,
-  disabled: p
+  indicator: p,
+  disabled: z
 };
 let t = 1;
-function C(d) {
+function N(d) {
   const {
     checked: i,
     onChange: n,
     label: _,
     size: l = "normal",
     className: r,
-    disabled: s = !1
-  } = d, f = a.useRef(t);
+    disabled: s = !1,
+    name: f
+  } = d, m = a.useRef(t);
   a.useEffect(() => {
     t += 1;
   }, []);
-  const m = () => {
+  const u = () => {
     n(!i);
-  }, c = a.useId(), u = b(o.root, r, o[`size-${l}`], { [o.disabled]: s });
-  return /* @__PURE__ */ x("label", { className: u, htmlFor: c, children: [
-    /* @__PURE__ */ e(
+  }, c = a.useId(), x = h(e.root, r, e[`size-${l}`], { [e.disabled]: s });
+  return /* @__PURE__ */ b("label", { className: x, htmlFor: c, children: [
+    /* @__PURE__ */ o(
       "input",
       {
         type: "radio",
-        tabIndex: f.current,
+        tabIndex: m.current,
         checked: i,
         disabled: s,
-        onChange: m,
-        id: c
+        onChange: u,
+        id: c,
+        name: f
       }
     ),
-    /* @__PURE__ */ e("div", { className: o.indicator }),
-    /* @__PURE__ */ e("div", { className: o.label, children: _ })
+    /* @__PURE__ */ o("div", { className: e.indicator }),
+    /* @__PURE__ */ o("div", { className: e.label, children: _ })
   ] });
 }
 export {
-  C as Radio
+  N as Radio
 };

package/dist/components/StyledInput/StyledInput.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { InputSize, InputTheme } from '../Input/Input.types';
+import { ResponsiveValueType } from '../../utils/ui';
+
+export interface StyledInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    className?: string;
+    size?: ResponsiveValueType<InputSize>;
+    theme?: InputTheme;
+    ref?: React.Ref<HTMLInputElement>;
+}
+declare function StyledInput(props: StyledInputProps): import("react/jsx-runtime").JSX.Element;
+export default StyledInput;

package/dist/components/StyledInput/StyledInput.js

@@ -0,0 +1,46 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as m } from "../../utils/clsx.js";
+import { ui as p } from "../../utils/ui/ui.js";
+const s = "cfxui__StyledInput__root__37064", S = "cfxui__StyledInput__small__0f240", r = "cfxui__StyledInput__large__a3ad2", d = "cfxui__StyledInput__onlight__dcd8f", l = {
+  root: s,
+  small: S,
+  large: r,
+  onlight: d,
+  "inputSizeinitial-large": "cfxui__StyledInput__inputSizeinitial-large__a31e6",
+  "inputSizeinitial-small": "cfxui__StyledInput__inputSizeinitial-small__77433",
+  "inputSizesmall-large": "cfxui__StyledInput__inputSizesmall-large__eb62a",
+  "inputSizesmall-small": "cfxui__StyledInput__inputSizesmall-small__d5e87",
+  "inputSizesmall-medium-large": "cfxui__StyledInput__inputSizesmall-medium-large__b13be",
+  "inputSizesmall-medium-small": "cfxui__StyledInput__inputSizesmall-medium-small__a9d00",
+  "inputSizemedium-large": "cfxui__StyledInput__inputSizemedium-large__75764",
+  "inputSizemedium-small": "cfxui__StyledInput__inputSizemedium-small__43151",
+  "inputSizemedium-large-large": "cfxui__StyledInput__inputSizemedium-large-large__3f450",
+  "inputSizemedium-large-small": "cfxui__StyledInput__inputSizemedium-large-small__eba0f",
+  "inputSizelarge-large": "cfxui__StyledInput__inputSizelarge-large__19572",
+  "inputSizelarge-small": "cfxui__StyledInput__inputSizelarge-small__3ecc3",
+  "inputSizexlarge-large": "cfxui__StyledInput__inputSizexlarge-large__06e9b",
+  "inputSizexlarge-small": "cfxui__StyledInput__inputSizexlarge-small__b318f"
+};
+function f(e) {
+  const {
+    className: i,
+    size: _ = "normal",
+    theme: t = "default",
+    ...u
+  } = e;
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      className: m(
+        i,
+        l.root,
+        l[t],
+        p.getResponsiveFlatClassnames("input-size", _).map((a) => l[a])
+      ),
+      ...u
+    }
+  );
+}
+export {
+  f as default
+};

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

@@ -0,0 +1,2 @@
+export { default as StyledInput } from './StyledInput';
+export type { StyledInputProps } from './StyledInput';

package/dist/components/StyledInput/index.js

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

package/dist/components/StyledTextarea/StyledTextarea.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export type TextareaResizeType = 'none' | 'vertical' | 'horizontal' | 'both';
+export interface StyledTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    resize?: TextareaResizeType;
+    ref?: React.Ref<HTMLTextAreaElement>;
+}
+declare function StyledTextarea(props: StyledTextareaProps): import("react/jsx-runtime").JSX.Element;
+export default StyledTextarea;

package/dist/components/StyledTextarea/StyledTextarea.js

@@ -0,0 +1,32 @@
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as i } from "../../utils/clsx.js";
+const c = "cfxui__StyledTextarea__root__8c3b9", e = {
+  root: c,
+  "resize-none": "cfxui__StyledTextarea__resize-none__e5b55",
+  "resize-vertical": "cfxui__StyledTextarea__resize-vertical__717ec",
+  "resize-horizontal": "cfxui__StyledTextarea__resize-horizontal__4f44b",
+  "resize-both": "cfxui__StyledTextarea__resize-both__c451f"
+};
+function n(r) {
+  const {
+    className: t,
+    resize: _ = "none",
+    ref: o,
+    ...a
+  } = r;
+  return /* @__PURE__ */ s(
+    "textarea",
+    {
+      className: i(
+        e.root,
+        t,
+        e[`resize-${_}`]
+      ),
+      ref: o,
+      ...a
+    }
+  );
+}
+export {
+  n as default
+};

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

@@ -0,0 +1,2 @@
+export { default as StyledTextarea } from './StyledTextarea';
+export type { StyledTextareaProps, TextareaResizeType } from './StyledTextarea';

package/dist/components/StyledTextarea/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./StyledTextarea.js";
+export {
+  t as StyledTextarea
+};