@cfx-dev/ui-components 2.0.7 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/assets/Accordion.css +1 -1
  2. package/dist/components/Accordion/Accordion.js +58 -60
  3. package/package.json +1 -1
package/dist/assets/Accordion.css CHANGED
@@ -1 +1 @@
1
- ._root_44hi4_1{background-color:var(--color-accordion-background)}._item_44hi4_5,._header_44hi4_5{cursor:pointer;background:var(--color-accordion-background)}._triggerContainer_44hi4_10{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:var(--quant);border-bottom:1px solid var(--color-accordion-border-color);height:calc(var(--quant) * 7.75);transition:border-bottom .25s ease-out}._triggerContainer_44hi4_10:hover{border-bottom:2px solid rgba(var(--color-primary),1)}._triggerContainer_44hi4_10:hover ._iconFlip_44hi4_23{transform:rotateX(90deg)}._triggerContainer_44hi4_10:hover ._iconUp_44hi4_26{top:-8px}._triggerContainer_44hi4_10:hover ._iconDown_44hi4_29{top:8px}._triggerContainer_44hi4_10 ._iconLeft_44hi4_32{margin-right:8px;color:rgba(var(--color-secondary),1)}._triggerContainer_44hi4_10 ._iconRight_44hi4_36{top:0;position:relative;color:rgba(var(--color-secondary),1);margin-left:8px;transition:transform .25s ease-out,top .5s ease;transform-style:preserve-3d}._iconFlip_44hi4_23{transform:rotateX(90deg)}._content_44hi4_49{display:block;padding:calc(var(--quant) * .5) calc(var(--quant) * 6.5);overflow:hidden;max-height:0;transition:max-height .5s ease-in-out}._content_44hi4_49._open_44hi4_56{max-height:calc(var(--quant) * 20)}@keyframes _iconSlideUp_44hi4_1{0%{top:0}to{top:-8px}}@keyframes _iconSlideDown_44hi4_1{0%{top:0}to{top:8px}}
1
+ ._root_y0b1q_1{background-color:var(--color-accordion-background)}._item_y0b1q_5,._header_y0b1q_5{cursor:pointer;background:var(--color-accordion-background)}._triggerContainer_y0b1q_10{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:var(--quant);border-bottom:1px solid var(--color-accordion-border-color);height:calc(var(--quant) * 7.75);transition:border-bottom .25s ease-out}._triggerContainer_y0b1q_10:hover,._triggerContainer_y0b1q_10:focus-visible:not(:hover){border-bottom:2px solid rgba(var(--color-primary),1)}._triggerContainer_y0b1q_10:hover ._iconFlip_y0b1q_23,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconFlip_y0b1q_23{transform:rotateX(90deg)}._triggerContainer_y0b1q_10:hover ._iconUp_y0b1q_26,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconUp_y0b1q_26{top:calc(-1 * var(--offset-small))}._triggerContainer_y0b1q_10:hover ._iconDown_y0b1q_29,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconDown_y0b1q_29{top:var(--offset-small)}._triggerContainer_y0b1q_10 ._iconLeft_y0b1q_32{margin-right:var(--offset-small);color:rgba(var(--color-secondary),1)}._triggerContainer_y0b1q_10 ._iconRight_y0b1q_36{top:0;position:relative;color:rgba(var(--color-secondary),1);margin-left:var(--offset-small);transition:transform .25s ease-out,top .5s ease;transform-style:preserve-3d}._iconFlip_y0b1q_23{transform:rotateX(90deg)}._content_y0b1q_49{display:block;padding:calc(var(--quant) * .5) calc(var(--quant) * 6.5);overflow:hidden;max-height:0;transition:max-height .5s ease-in-out}._content_y0b1q_49._open_y0b1q_56{max-height:calc(var(--quant) * 20)}
package/dist/components/Accordion/Accordion.js CHANGED
@@ -1,120 +1,118 @@
1
- import { jsx as e, jsxs as f } from "react/jsx-runtime";
2
- import w, { createContext as D, useState as p, useContext as A, useEffect as U } from "react";
1
+ import { jsx as o, jsxs as f } from "react/jsx-runtime";
2
+ import b, { createContext as I, useState as u, useContext as w, useEffect as v } from "react";
3
3
  import { Icon as C } from "../Icon/Icon.js";
4
4
  import { Flex as x } from "../Layout/Flex/Flex.js";
5
- import { Text as I } from "../Text/Text.js";
6
- import { clsx as u } from "../../utils/clsx.js";
7
- 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 = {
8
- root: b,
9
- item: S,
5
+ import { Text as y } from "../Text/Text.js";
6
+ import { clsx as h } from "../../utils/clsx.js";
7
+ 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 = {
8
+ root: q,
9
+ item: D,
10
10
  header: F,
11
11
  triggerContainer: N,
12
- iconFlip: y,
12
+ iconFlip: U,
13
13
  iconUp: T,
14
14
  iconDown: R,
15
15
  iconLeft: $,
16
16
  iconRight: k,
17
17
  content: E,
18
- open: L,
19
- iconSlideUp: O,
20
- iconSlideDown: j
21
- }, g = D(void 0), q = function({
18
+ open: L
19
+ }, g = I(void 0), M = function({
22
20
  children: t,
23
- className: n
21
+ className: e
24
22
  }) {
25
- const [c, s] = p(/* @__PURE__ */ new Set()), a = w.useCallback((i) => {
26
- s((m) => {
27
- const r = new Set(m);
28
- return r.has(i) ? r.delete(i) : r.add(i), r;
23
+ const [c, s] = u(/* @__PURE__ */ new Set()), a = b.useCallback((r) => {
24
+ s((_) => {
25
+ const i = new Set(_);
26
+ return i.has(r) ? i.delete(r) : i.add(r), i;
29
27
  });
30
- }, []), h = w.useMemo(() => ({
28
+ }, []), m = b.useMemo(() => ({
31
29
  openItems: c,
32
30
  toggleItem: a
33
31
  }), [c, a]);
34
- return /* @__PURE__ */ e(g.Provider, { value: h, children: /* @__PURE__ */ e("div", { className: u(o.root, n), role: "presentation", children: t }) });
35
- }, B = function({
32
+ return /* @__PURE__ */ o(g.Provider, { value: m, children: /* @__PURE__ */ o("div", { className: h(n.root, e), role: "presentation", children: t }) });
33
+ }, P = function({
36
34
  children: t,
37
- id: n
35
+ id: e
38
36
  }) {
39
- return /* @__PURE__ */ e("div", { className: o.item, id: n, role: "region", "aria-labelledby": `${n}-header`, children: t });
40
- }, G = function({
37
+ return /* @__PURE__ */ o("div", { className: n.item, id: e, role: "region", "aria-labelledby": `${e}-header`, children: t });
38
+ }, V = function({
41
39
  children: t
42
40
  }) {
43
- return /* @__PURE__ */ e("div", { className: o.header, children: t });
44
- }, J = function({
41
+ return /* @__PURE__ */ o("div", { className: n.header, children: t });
42
+ }, B = function({
45
43
  text: t,
46
- id: n,
44
+ id: e,
47
45
  iconLeft: c
48
46
  }) {
49
- const s = A(g);
47
+ const s = w(g);
50
48
  if (!s)
51
49
  throw new Error("AccordionTrigger must be used within an Accordion");
52
50
  const {
53
51
  toggleItem: a,
54
- openItems: h
55
- } = s, i = h.has(n), [m, r] = p(!1), [_, v] = p(i ? "UpChevron" : "DownChevron");
56
- return U(() => {
52
+ openItems: m
53
+ } = s, r = m.has(e), [_, i] = u(!1), [p, A] = u(r ? "UpChevron" : "DownChevron");
54
+ return v(() => {
57
55
  const d = setTimeout(() => {
58
- v(i ? "UpChevron" : "DownChevron"), r(!1);
56
+ A(r ? "UpChevron" : "DownChevron"), i(!1);
59
57
  }, 300);
60
- return r(!0), () => clearTimeout(d);
61
- }, [i]), /* @__PURE__ */ f(
58
+ return i(!0), () => clearTimeout(d);
59
+ }, [r]), /* @__PURE__ */ f(
62
60
  "div",
63
61
  {
64
- className: o.triggerContainer,
65
- onClick: () => a(n),
62
+ className: n.triggerContainer,
63
+ onClick: () => a(e),
66
64
  onKeyDown: (d) => {
67
- (d.key === "Enter" || d.key === " ") && a(n);
65
+ (d.key === "Enter" || d.key === " ") && a(e);
68
66
  },
69
67
  role: "button",
70
68
  tabIndex: 0,
71
- "aria-expanded": i,
72
- "aria-controls": `${n}-content`,
73
- id: `${n}-header`,
69
+ "aria-expanded": r,
70
+ "aria-controls": `${e}-content`,
71
+ id: `${e}-header`,
74
72
  children: [
75
73
  /* @__PURE__ */ f(x, { centered: !0, children: [
76
- c && /* @__PURE__ */ e(C, { name: c, className: o.iconLeft }),
77
- /* @__PURE__ */ e(I, { size: "xxsmall", children: t })
74
+ c && /* @__PURE__ */ o(C, { name: c, className: n.iconLeft }),
75
+ /* @__PURE__ */ o(y, { size: "xxsmall", children: t })
78
76
  ] }),
79
- /* @__PURE__ */ e(x, { centered: !0, children: /* @__PURE__ */ e(
77
+ /* @__PURE__ */ o(x, { centered: !0, children: /* @__PURE__ */ o(
80
78
  C,
81
79
  {
82
- className: u(o.iconRight, {
83
- [o.iconFlip]: m,
84
- [o.iconUp]: _ === "UpChevron",
85
- [o.iconDown]: _ === "DownChevron"
80
+ className: h(n.iconRight, {
81
+ [n.iconFlip]: _,
82
+ [n.iconUp]: p === "UpChevron",
83
+ [n.iconDown]: p === "DownChevron"
86
84
  }),
87
- name: _
85
+ name: p
88
86
  }
89
87
  ) })
90
88
  ]
91
89
  }
92
90
  );
93
- }, Q = function({
91
+ }, G = function({
94
92
  children: t,
95
- id: n
93
+ id: e
96
94
  }) {
97
- const c = A(g);
95
+ const c = w(g);
98
96
  if (!c)
99
97
  throw new Error("AccordionContent must be used within an Accordion");
100
98
  const {
101
99
  openItems: s
102
100
  } = c;
103
- return /* @__PURE__ */ e(
101
+ return /* @__PURE__ */ o(
104
102
  "div",
105
103
  {
106
- className: u(o.content, { [o.open]: s.has(n) }),
107
- id: `${n}-content`,
104
+ className: h(n.content, { [n.open]: s.has(e) }),
105
+ id: `${e}-content`,
108
106
  role: "region",
109
- "aria-labelledby": `${n}-header`,
110
- children: /* @__PURE__ */ e(I, { color: "secondary", size: "xxsmall", children: t })
107
+ "aria-labelledby": `${e}-header`,
108
+ children: /* @__PURE__ */ o(y, { color: "secondary", size: "xxsmall", children: t })
111
109
  }
112
110
  );
113
111
  };
114
112
  export {
115
- q as Accordion,
116
- Q as AccordionContent,
117
- G as AccordionHeader,
118
- B as AccordionItem,
119
- J as AccordionTrigger
113
+ M as Accordion,
114
+ G as AccordionContent,
115
+ V as AccordionHeader,
116
+ P as AccordionItem,
117
+ B as AccordionTrigger
120
118
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
3
  "private": false,
4
- "version": "2.0.7",
4
+ "version": "2.0.8",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",