@cfx-dev/ui-components 2.1.22 → 2.1.24

package/dist/components/Accordion/Accordion.js

@@ -1,88 +1,88 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import b, { createContext as I, useState as u, useContext as w, useEffect as v } from "react";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import f, { createContext as x, useState as u, useContext as A, useEffect as b } from "react";
 import { Icon as C } from "../Icon/Icon.js";
-import { Flex as x } from "../Layout/Flex/Flex.js";
-import { Text as y } from "../Text/Text.js";
+import { Flex as k } from "../Layout/Flex/Flex.js";
+import { Text as I } from "../Text/Text.js";
 import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Accordion.css';const q = "_root_y0b1q_1", D = "_item_y0b1q_5", F = "_header_y0b1q_5", N = "_triggerContainer_y0b1q_10", U = "_iconFlip_y0b1q_23", T = "_iconUp_y0b1q_26", R = "_iconDown_y0b1q_29", $ = "_iconLeft_y0b1q_32", k = "_iconRight_y0b1q_36", E = "_content_y0b1q_49", L = "_open_y0b1q_56", n = {
-  root: q,
-  item: D,
+import '../../assets/Accordion.css';const D = "_root_1pwnk_1", y = "_item_1pwnk_5", F = "_header_1pwnk_5", N = "_triggerContainer_1pwnk_10", U = "_iconFlip_1pwnk_23", T = "_iconUp_1pwnk_26", R = "_iconDown_1pwnk_29", $ = "_iconLeft_1pwnk_32", E = "_iconRight_1pwnk_36", L = "_content_1pwnk_49", O = "_open_1pwnk_56", o = {
+  root: D,
+  item: y,
   header: F,
   triggerContainer: N,
   iconFlip: U,
   iconUp: T,
   iconDown: R,
   iconLeft: $,
-  iconRight: k,
-  content: E,
-  open: L
-}, g = I(void 0), M = function({
+  iconRight: E,
+  content: L,
+  open: O
+}, w = x(void 0), P = function({
   children: t,
-  className: e
+  className: n
 }) {
-  const [c, s] = u(/* @__PURE__ */ new Set()), a = b.useCallback((r) => {
-    s((_) => {
-      const i = new Set(_);
-      return i.has(r) ? i.delete(r) : i.add(r), i;
+  const [r, s] = u(/* @__PURE__ */ new Set()), a = f.useCallback((c) => {
+    s((m) => {
+      const i = new Set(m);
+      return i.has(c) ? i.delete(c) : i.add(c), i;
     });
-  }, []), m = b.useMemo(() => ({
-    openItems: c,
+  }, []), d = f.useMemo(() => ({
+    openItems: r,
     toggleItem: a
-  }), [c, a]);
-  return /* @__PURE__ */ o(g.Provider, { value: m, children: /* @__PURE__ */ o("div", { className: h(n.root, e), role: "presentation", children: t }) });
-}, P = function({
+  }), [r, a]);
+  return /* @__PURE__ */ e(w.Provider, { value: d, children: /* @__PURE__ */ e("div", { className: h(o.root, n), role: "presentation", children: t }) });
+}, V = function({
   children: t,
-  id: e
+  id: n
 }) {
-  return /* @__PURE__ */ o("div", { className: n.item, id: e, role: "region", "aria-labelledby": `${e}-header`, children: t });
-}, V = function({
+  return /* @__PURE__ */ e("div", { className: o.item, id: n, role: "region", "aria-labelledby": `${n}-header`, children: t });
+}, q = function({
   children: t
 }) {
-  return /* @__PURE__ */ o("div", { className: n.header, children: t });
+  return /* @__PURE__ */ e("div", { className: o.header, children: t });
 }, B = function({
   text: t,
-  id: e,
-  iconLeft: c
+  id: n,
+  iconLeft: r
 }) {
-  const s = w(g);
+  const s = A(w);
   if (!s)
     throw new Error("AccordionTrigger must be used within an Accordion");
   const {
     toggleItem: a,
-    openItems: m
-  } = s, r = m.has(e), [_, i] = u(!1), [p, A] = u(r ? "UpChevron" : "DownChevron");
-  return v(() => {
-    const d = setTimeout(() => {
-      A(r ? "UpChevron" : "DownChevron"), i(!1);
+    openItems: d
+  } = s, c = d.has(n), [m, i] = u(!1), [_, v] = u(c ? "UpChevron" : "DownChevron");
+  return b(() => {
+    const p = setTimeout(() => {
+      v(c ? "UpChevron" : "DownChevron"), i(!1);
     }, 300);
-    return i(!0), () => clearTimeout(d);
-  }, [r]), /* @__PURE__ */ f(
+    return i(!0), () => clearTimeout(p);
+  }, [c]), /* @__PURE__ */ g(
     "div",
     {
-      className: n.triggerContainer,
-      onClick: () => a(e),
-      onKeyDown: (d) => {
-        (d.key === "Enter" || d.key === " ") && a(e);
+      className: o.triggerContainer,
+      onClick: () => a(n),
+      onKeyDown: (p) => {
+        (p.key === "Enter" || p.key === " ") && a(n);
       },
       role: "button",
       tabIndex: 0,
-      "aria-expanded": r,
-      "aria-controls": `${e}-content`,
-      id: `${e}-header`,
+      "aria-expanded": c,
+      "aria-controls": `${n}-content`,
+      id: `${n}-header`,
       children: [
-        /* @__PURE__ */ f(x, { centered: !0, children: [
-          c && /* @__PURE__ */ o(C, { name: c, className: n.iconLeft }),
-          /* @__PURE__ */ o(y, { size: "xxsmall", children: t })
+        /* @__PURE__ */ g(k, { centered: !0, children: [
+          r && /* @__PURE__ */ e(C, { name: r, className: o.iconLeft }),
+          /* @__PURE__ */ e(I, { size: "normal", children: t })
         ] }),
-        /* @__PURE__ */ o(x, { centered: !0, children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e(k, { centered: !0, children: /* @__PURE__ */ e(
           C,
           {
-            className: h(n.iconRight, {
-              [n.iconFlip]: _,
-              [n.iconUp]: p === "UpChevron",
-              [n.iconDown]: p === "DownChevron"
+            className: h(o.iconRight, {
+              [o.iconFlip]: m,
+              [o.iconUp]: _ === "UpChevron",
+              [o.iconDown]: _ === "DownChevron"
             }),
-            name: p
+            name: _
           }
         ) })
       ]
@@ -90,29 +90,29 @@ import '../../assets/Accordion.css';const q = "_root_y0b1q_1", D = "_item_y0b1q_
   );
 }, G = function({
   children: t,
-  id: e
+  id: n
 }) {
-  const c = w(g);
-  if (!c)
+  const r = A(w);
+  if (!r)
     throw new Error("AccordionContent must be used within an Accordion");
   const {
     openItems: s
-  } = c;
-  return /* @__PURE__ */ o(
+  } = r;
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: h(n.content, { [n.open]: s.has(e) }),
-      id: `${e}-content`,
+      className: h(o.content, { [o.open]: s.has(n) }),
+      id: `${n}-content`,
       role: "region",
-      "aria-labelledby": `${e}-header`,
-      children: /* @__PURE__ */ o(y, { color: "secondary", size: "xxsmall", children: t })
+      "aria-labelledby": `${n}-header`,
+      children: /* @__PURE__ */ e(I, { color: "secondary", size: "normal", typographic: !0, children: t })
     }
   );
 };
 export {
-  M as Accordion,
+  P as Accordion,
   G as AccordionContent,
-  V as AccordionHeader,
-  P as AccordionItem,
+  q as AccordionHeader,
+  V as AccordionItem,
   B as AccordionTrigger
 };

package/dist/components/Accordion/AccordionShowcase.js

@@ -2,11 +2,11 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import a from "react";
 import { Flex as c } from "../Layout/Flex/Flex.js";
 import { Text as d } from "../Text/Text.js";
-import { Accordion as l, AccordionItem as i, AccordionHeader as o, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
-function h() {
+import { Accordion as h, AccordionItem as i, AccordionHeader as o, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
+function l() {
   return /* @__PURE__ */ e(c, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(c, { fullWidth: !0, vertical: !0, children: [
     /* @__PURE__ */ e(d, { size: "large", children: "Accordion" }),
-    /* @__PURE__ */ t(l, { children: [
+    /* @__PURE__ */ t(h, { children: [
       /* @__PURE__ */ t(i, { id: "item1", children: [
         /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
           n,
@@ -16,7 +16,11 @@ function h() {
             iconLeft: "MoreInfo"
           }
         ) }),
-        /* @__PURE__ */ e(r, { id: "item1", children: "Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it." })
+        /* @__PURE__ */ t(r, { id: "item1", children: [
+          "Nope! ",
+          /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
+          " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it."
+        ] })
       ] }),
       /* @__PURE__ */ t(i, { id: "item2", children: [
         /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
@@ -54,7 +58,7 @@ function h() {
     ] })
   ] }) });
 }
-const b = a.memo(h);
+const b = a.memo(l);
 export {
   b as default
 };

package/dist/components/Button/Button.js

@@ -1,108 +1,109 @@
-import { jsx as u, jsxs as g, Fragment as B } from "react/jsx-runtime";
+import { jsx as r, jsxs as W, Fragment as g } from "react/jsx-runtime";
 import m from "react";
-import { Icon as q } from "../Icon/Icon.js";
-import { clsx as I } from "../../utils/clsx.js";
-import { noop as h } from "../../utils/functional.js";
-import '../../assets/Button.css';const M = "_root_1cisu_1", j = "_fullWidth_1cisu_33", w = "_primary_1cisu_53", F = "_secondary_1cisu_74", R = "_linked_1cisu_116", v = "_quicklink_1cisu_145", D = "_icon_1cisu_152", L = "_icononly_1cisu_177", U = "_decorator_1cisu_182", o = {
-  root: M,
-  fullWidth: j,
-  primary: w,
-  secondary: F,
-  "on-light": "_on-light_1cisu_95",
-  linked: R,
-  quicklink: v,
-  icon: D,
-  icononly: L,
-  decorator: U
+import { Icon as A } from "../Icon/Icon.js";
+import { clsx as B } from "../../utils/clsx.js";
+import { noop as y } from "../../utils/functional.js";
+import '../../assets/Button.css';const q = "_unsetAll_13zdy_1", I = "_root_13zdy_5", M = "_fullWidth_13zdy_38", j = "_primary_13zdy_58", w = "_secondary_13zdy_79", F = "_linked_13zdy_121", R = "_quicklink_13zdy_150", v = "_icon_13zdy_157", D = "_icononly_13zdy_182", L = "_decorator_13zdy_187", o = {
+  unsetAll: q,
+  root: I,
+  fullWidth: M,
+  primary: j,
+  secondary: w,
+  "on-light": "_on-light_13zdy_100",
+  linked: F,
+  quicklink: R,
+  icon: v,
+  icononly: D,
+  decorator: L
 };
-function z(l) {
+function U(c) {
   const {
     text: t = null,
-    icon: c,
+    icon: l,
     decorator: n = null
-  } = l;
-  return /* @__PURE__ */ g(B, { children: [
+  } = c;
+  return /* @__PURE__ */ W(g, { children: [
     t,
-    !!c && /* @__PURE__ */ u(q, { name: c, className: o.icon }),
-    !!n && /* @__PURE__ */ u("div", { className: o.decorator, children: n })
+    !!l && /* @__PURE__ */ r(A, { name: l, className: o.icon }),
+    !!n && /* @__PURE__ */ r("div", { className: o.decorator, children: n })
   ] });
 }
-function A(l) {
+function E(c) {
   const {
     text: t = null,
-    icon: c,
+    icon: l,
     theme: n = "default",
-    disabled: i = !1,
-    className: r = "",
-    autofocus: d = !1,
-    fullWidth: s = !1,
-    tabIndex: a
-  } = l;
-  return I(o.root, o[n], r, {
-    [o.disabled]: i,
-    [o.icononly]: !!c && (t === null || typeof t > "u"),
+    disabled: s = !1,
+    className: d = "",
+    autofocus: u = !1,
+    fullWidth: a = !1,
+    tabIndex: i
+  } = c;
+  return B(o.unsetAll, o.root, o[n], d, {
+    [o.disabled]: s,
+    [o.icononly]: !!l && (t === null || typeof t > "u"),
     [o.text]: !!t,
-    [o.autofocus]: d || typeof a < "u",
-    [o.fullWidth]: s
+    [o.autofocus]: u || typeof i < "u",
+    [o.fullWidth]: a
   });
 }
-const O = m.forwardRef(function(t, c) {
+const P = m.forwardRef(function(t, l) {
   const {
     text: n = null,
-    icon: i,
-    title: r = "",
-    type: d = "button",
-    className: s = "",
-    theme: a = "default",
+    icon: s,
+    title: d = "",
+    type: u = "button",
+    className: a = "",
+    theme: i = "default",
     disabled: e = !1,
-    onClick: k = h,
-    onMouseDown: p = h,
-    onMouseUp: b = h,
-    autofocus: f = !1,
-    tabIndex: _,
-    fullWidth: y = !1,
-    ariaLabel: x = ""
-  } = t, C = m.useMemo(() => A({
+    onClick: h = y,
+    onMouseDown: p = y,
+    onMouseUp: z = y,
+    autofocus: _ = !1,
+    tabIndex: f,
+    fullWidth: k = !1,
+    ariaLabel: b = ""
+  } = t, x = m.useMemo(() => E({
     text: n,
-    icon: i,
-    theme: a,
+    icon: s,
+    theme: i,
     disabled: e,
-    className: s,
-    autofocus: f,
-    fullWidth: y,
-    tabIndex: _
+    className: a,
+    autofocus: _,
+    fullWidth: k,
+    tabIndex: f
   }), [
-    f,
-    s,
-    y,
-    e,
-    i,
     _,
+    a,
+    k,
+    e,
+    s,
+    f,
     n,
-    a
-  ]), N = m.useCallback((W) => {
-    e || k(W);
-  }, [e, k]);
-  return /* @__PURE__ */ u(
+    i
+  ]), C = m.useCallback((N) => {
+    e || h(N);
+  }, [e, h]);
+  return /* @__PURE__ */ r(
     "button",
     {
-      ref: c,
+      ref: l,
       disabled: e,
-      className: C,
-      onClick: N,
+      className: x,
+      onClick: C,
       onMouseDown: p,
-      onMouseUp: b,
-      autoFocus: f,
-      tabIndex: _,
-      title: r,
-      type: d,
-      "aria-label": x,
-      children: /* @__PURE__ */ u(z, { ...t })
+      onMouseUp: z,
+      autoFocus: _,
+      tabIndex: f,
+      title: d,
+      type: u,
+      "aria-label": b,
+      children: /* @__PURE__ */ r(U, { ...t })
     }
   );
 });
 export {
-  O as Button,
-  z as ButtonContent,
-  A as getButtonClassName
+  P as Button,
+  U as ButtonContent,
+  E as getButtonClassName
 };

package/dist/components/Button/ButtonShowcase.js

@@ -1,15 +1,16 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { Flex as n } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import { Button as t } from "./Button.js";
-import { ButtonBar as c } from "./ButtonBar.js";
-function o() {
-  return /* @__PURE__ */ r(n, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+import { Button as r } from "./Button.js";
+import { ButtonBar as o } from "./ButtonBar.js";
+import { LinkButton as c } from "./LinkButton.js";
+function a() {
+  return /* @__PURE__ */ t(n, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Default" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "default",
@@ -17,10 +18,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Primary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "primary",
@@ -28,10 +29,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Secondary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "secondary",
@@ -39,10 +40,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "On Light" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "on-light",
@@ -50,10 +51,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Quick Link" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "quicklink",
@@ -61,20 +62,20 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "No Icon" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "default"
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Full Width" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "default",
@@ -83,11 +84,11 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Linked" }),
-      /* @__PURE__ */ r(n, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
+      /* @__PURE__ */ t(n, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
         /* @__PURE__ */ e(
-          t,
+          r,
           {
             text: "Sign In",
             theme: "linked",
@@ -95,7 +96,7 @@ function o() {
           }
         ),
         /* @__PURE__ */ e(
-          t,
+          r,
           {
             disabled: !0,
             text: "Copy",
@@ -105,19 +106,31 @@ function o() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "LinkButton - look like button but its anchor" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        c,
+        {
+          to: "/",
+          text: "Sign In",
+          theme: "primary",
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Button Bar" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(c, { children: [
-        /* @__PURE__ */ e(t, { text: "Sign In", theme: "primary", icon: "Users" }),
-        /* @__PURE__ */ e(t, { text: "Register", theme: "secondary", icon: "Users" }),
-        /* @__PURE__ */ e(t, { text: "Sign Out", theme: "on-light", icon: "Users" }),
-        /* @__PURE__ */ e(t, { text: "Create Account", theme: "default", icon: "Users" })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(r, { text: "Sign In", theme: "primary", icon: "Users" }),
+        /* @__PURE__ */ e(r, { text: "Register", theme: "secondary", icon: "Users" }),
+        /* @__PURE__ */ e(r, { text: "Sign Out", theme: "on-light", icon: "Users" }),
+        /* @__PURE__ */ e(r, { text: "Create Account", theme: "default", icon: "Users" })
       ] }) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Long text" }),
       /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Long text that should wrap around",
           theme: "default",
@@ -127,7 +140,7 @@ function o() {
     ] })
   ] });
 }
-const g = l.memo(o);
+const x = l.memo(a);
 export {
-  g as default
+  x as default
 };