@cfx-dev/ui-components 2.0.0 → 2.0.1

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,26 @@
+import { default as React, PropsWithChildren } from 'react';
+import { IconName } from '../Icon';
+
+export interface AccordionContextProps {
+    openItems: Set<string>;
+    toggleItem: (id: string) => void;
+}
+export interface AccordionProps {
+    className?: string;
+}
+export declare const Accordion: React.FC<PropsWithChildren<AccordionProps>>;
+export declare const AccordionItem: React.FC<React.PropsWithChildren<{
+    id: string;
+}>>;
+export declare const AccordionHeader: React.FC<React.PropsWithChildren>;
+interface AccordionTriggerProps {
+    id: string;
+    text: string;
+    iconLeft?: IconName;
+}
+export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
+interface AccordionContentProps {
+    id: string;
+}
+export declare const AccordionContent: React.FC<React.PropsWithChildren<AccordionContentProps>>;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,120 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import w, { createContext as D, useState as p, useContext as A, useEffect as U } from "react";
+import { Icon as C } from "../Icon/Icon.js";
+import { Flex as x } from "../Layout/Flex/Flex.js";
+import { Text as I } from "../Text/Text.js";
+import { clsx as u } from "../../utils/clsx.js";
+import '../../assets/Accordion.css';const b = "_root_44hi4_1", S = "_item_44hi4_5", F = "_header_44hi4_5", N = "_triggerContainer_44hi4_10", y = "_iconFlip_44hi4_23", T = "_iconUp_44hi4_26", R = "_iconDown_44hi4_29", $ = "_iconLeft_44hi4_32", k = "_iconRight_44hi4_36", E = "_content_44hi4_49", L = "_open_44hi4_56", O = "_iconSlideUp_44hi4_1", j = "_iconSlideDown_44hi4_1", o = {
+  root: b,
+  item: S,
+  header: F,
+  triggerContainer: N,
+  iconFlip: y,
+  iconUp: T,
+  iconDown: R,
+  iconLeft: $,
+  iconRight: k,
+  content: E,
+  open: L,
+  iconSlideUp: O,
+  iconSlideDown: j
+}, g = D(void 0), q = function({
+  children: t,
+  className: n
+}) {
+  const [c, s] = p(/* @__PURE__ */ new Set()), a = w.useCallback((i) => {
+    s((m) => {
+      const r = new Set(m);
+      return r.has(i) ? r.delete(i) : r.add(i), r;
+    });
+  }, []), h = w.useMemo(() => ({
+    openItems: c,
+    toggleItem: a
+  }), [c, a]);
+  return /* @__PURE__ */ e(g.Provider, { value: h, children: /* @__PURE__ */ e("div", { className: u(o.root, n), role: "presentation", children: t }) });
+}, B = function({
+  children: t,
+  id: n
+}) {
+  return /* @__PURE__ */ e("div", { className: o.item, id: n, role: "region", "aria-labelledby": `${n}-header`, children: t });
+}, G = function({
+  children: t
+}) {
+  return /* @__PURE__ */ e("div", { className: o.header, children: t });
+}, J = function({
+  text: t,
+  id: n,
+  iconLeft: c
+}) {
+  const s = A(g);
+  if (!s)
+    throw new Error("AccordionTrigger must be used within an Accordion");
+  const {
+    toggleItem: a,
+    openItems: h
+  } = s, i = h.has(n), [m, r] = p(!1), [_, v] = p(i ? "UpChevron" : "DownChevron");
+  return U(() => {
+    const d = setTimeout(() => {
+      v(i ? "UpChevron" : "DownChevron"), r(!1);
+    }, 300);
+    return r(!0), () => clearTimeout(d);
+  }, [i]), /* @__PURE__ */ f(
+    "div",
+    {
+      className: o.triggerContainer,
+      onClick: () => a(n),
+      onKeyDown: (d) => {
+        (d.key === "Enter" || d.key === " ") && a(n);
+      },
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": i,
+      "aria-controls": `${n}-content`,
+      id: `${n}-header`,
+      children: [
+        /* @__PURE__ */ f(x, { centered: !0, children: [
+          c && /* @__PURE__ */ e(C, { name: c, className: o.iconLeft }),
+          /* @__PURE__ */ e(I, { size: "xxsmall", children: t })
+        ] }),
+        /* @__PURE__ */ e(x, { centered: !0, children: /* @__PURE__ */ e(
+          C,
+          {
+            className: u(o.iconRight, {
+              [o.iconFlip]: m,
+              [o.iconUp]: _ === "UpChevron",
+              [o.iconDown]: _ === "DownChevron"
+            }),
+            name: _
+          }
+        ) })
+      ]
+    }
+  );
+}, Q = function({
+  children: t,
+  id: n
+}) {
+  const c = A(g);
+  if (!c)
+    throw new Error("AccordionContent must be used within an Accordion");
+  const {
+    openItems: s
+  } = c;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: u(o.content, { [o.open]: s.has(n) }),
+      id: `${n}-content`,
+      role: "region",
+      "aria-labelledby": `${n}-header`,
+      children: /* @__PURE__ */ e(I, { color: "secondary", size: "xxsmall", children: t })
+    }
+  );
+};
+export {
+  q as Accordion,
+  Q as AccordionContent,
+  G as AccordionHeader,
+  B as AccordionItem,
+  J as AccordionTrigger
+};

package/dist/components/Accordion/AccordionShowcase.d.ts

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

package/dist/components/Accordion/AccordionShowcase.js

@@ -0,0 +1,60 @@
+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() {
+  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(i, { id: "item1", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item1",
+            text: "Will I get banned from GTA:O?",
+            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(i, { id: "item2", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item2",
+            text: "Can I cheat on FiveM?",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ e(r, { id: "item2", children: "Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned! Dont be a cheater, you will get banned!" })
+      ] }),
+      /* @__PURE__ */ t(i, { id: "item3", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item3",
+            text: "Is this accordion any good?",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ e(r, { id: "item3", children: "Obviously!" })
+      ] }),
+      /* @__PURE__ */ t(i, { id: "item4", children: [
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          n,
+          {
+            id: "item4",
+            text: "Who said?",
+            iconLeft: "MoreInfo"
+          }
+        ) }),
+        /* @__PURE__ */ e(r, { id: "item4", children: "Me!" })
+      ] })
+    ] })
+  ] }) });
+}
+const b = a.memo(h);
+export {
+  b as default
+};

package/dist/components/Accordion/index.js

@@ -0,0 +1 @@
+

package/dist/styles-scss/global.scss

@@ -22,6 +22,7 @@ body {
   @include title-tokens;
   @include button-tokens;
   @include badge-tokens;
+  @include accordion-tokens;
 
   // initiat fonts
   @include font-HelveticaNow;

package/dist/styles-scss/tokens.scss

@@ -117,6 +117,11 @@ $control-heights: (
   @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
 }
 
+@mixin accordion-tokens() {
+  @include ui.define-color-token('accordion-border-color', ui.color('secondary', 'pure', .1));
+  @include ui.define-color-token('accordion-background', ui.color('bg'));
+}
+
 @mixin select-tokens() {
   @include ui.define-color-token('interactive-list-background', ui.color('bg-light'));
   @include ui.define-color-token('interactive-list-item-background', transparent);

package/package.json

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