@selectwin/kit 0.1.204 → 0.1.205

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 (5) hide show
  1. package/dist/SelectCollapsible.d.ts +4 -0
  2. package/dist/SelectCollapsible.js +26 -21
  3. package/dist/SelectSection.d.ts +4 -0
  4. package/dist/SelectSection.js +49 -44
  5. package/package.json +1 -1
package/dist/SelectCollapsible.d.ts CHANGED
@@ -3,6 +3,10 @@ type SelectCollapsibleOwnProps = {
3
3
  title: ReactNode;
4
4
  children: ReactNode;
5
5
  defaultOpen?: boolean;
6
+ /** 0.1.205: o aberto controlado pela tela (com `onOpenChange`). */
7
+ open?: boolean;
8
+ /** 0.1.205: o cabeçalho pediu para abrir (`true`) ou fechar (`false`). */
9
+ onOpenChange?: (open: boolean) => void;
6
10
  plain?: boolean;
7
11
  };
8
12
  export type SelectCollapsibleProps = SelectCollapsibleOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectCollapsibleOwnProps>;
package/dist/SelectCollapsible.js CHANGED
@@ -1,40 +1,45 @@
1
1
  import { ChevronDownIcon as e } from "./icons.js";
2
- import { forwardRef as t, useState as n } from "react";
3
- import { jsx as r, jsxs as i } from "react/jsx-runtime";
2
+ import { inertProps as t } from "./internal/inert.js";
3
+ import { forwardRef as n, useId as r, useState as i } from "react";
4
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
4
5
  //#region src/SelectCollapsible.tsx
5
- var a = t(function({ title: t, children: a, defaultOpen: o = !1, plain: s = !1, className: c, ...l }, u) {
6
- let [d, f] = n(o);
7
- return /* @__PURE__ */ i("div", {
8
- ref: u,
9
- ...l,
10
- className: `select-collapsible${s ? " select-collapsible--plain" : ""}${d ? " is-open" : ""}${c ? " " + c : ""}`,
11
- children: [/* @__PURE__ */ i("button", {
6
+ var s = n(function({ title: n, children: s, defaultOpen: c = !1, open: l, onOpenChange: u, plain: d = !1, className: f, ...p }, m) {
7
+ let [h, g] = i(c), _ = l ?? h, v = r(), y = () => {
8
+ l === void 0 && g(!_), u == null || u(!_);
9
+ };
10
+ return /* @__PURE__ */ o("div", {
11
+ ref: m,
12
+ ...p,
13
+ className: `select-collapsible${d ? " select-collapsible--plain" : ""}${_ ? " is-open" : ""}${f ? " " + f : ""}`,
14
+ children: [/* @__PURE__ */ o("button", {
12
15
  type: "button",
13
16
  className: "select-collapsible__header",
14
- onClick: () => f((e) => !e),
15
- "aria-expanded": d,
16
- children: [/* @__PURE__ */ r("span", {
17
+ onClick: y,
18
+ "aria-expanded": _,
19
+ "aria-controls": v,
20
+ children: [/* @__PURE__ */ a("span", {
17
21
  className: "select-collapsible__title",
18
- children: t
19
- }), /* @__PURE__ */ r("span", {
22
+ children: n
23
+ }), /* @__PURE__ */ a("span", {
20
24
  className: "select-collapsible__chevron",
21
25
  "aria-hidden": "true",
22
- children: /* @__PURE__ */ r(e, {})
26
+ children: /* @__PURE__ */ a(e, {})
23
27
  })]
24
- }), /* @__PURE__ */ r("div", {
28
+ }), /* @__PURE__ */ a("div", {
25
29
  className: "select-collapsible__bodywrap",
26
- children: /* @__PURE__ */ r("div", {
30
+ children: /* @__PURE__ */ a("div", {
31
+ id: v,
27
32
  className: "select-collapsible__bodyclip",
28
- "aria-hidden": !d,
29
- children: /* @__PURE__ */ r("div", {
33
+ ...t(!_),
34
+ children: /* @__PURE__ */ a("div", {
30
35
  className: "select-collapsible__body",
31
- children: a
36
+ children: s
32
37
  })
33
38
  })
34
39
  })]
35
40
  });
36
41
  });
37
42
  //#endregion
38
- export { a as SelectCollapsible };
43
+ export { s as SelectCollapsible };
39
44
 
40
45
  //# sourceMappingURL=SelectCollapsible.js.map
package/dist/SelectSection.d.ts CHANGED
@@ -15,6 +15,10 @@ type SelectSectionOwnProps = {
15
15
  collapsible?: boolean;
16
16
  /** Initial open state when collapsible. Default open. */
17
17
  defaultOpen?: boolean;
18
+ /** 0.1.205: o aberto controlado pela tela (com `onOpenChange`); sem ele, a seção guarda o estado (`defaultOpen`). */
19
+ open?: boolean;
20
+ /** 0.1.205: o cabeçalho pediu para abrir (`true`) ou fechar (`false`). */
21
+ onOpenChange?: (open: boolean) => void;
18
22
  /**
19
23
  * Linha de rodapé na moldura cinza, sob o corpo (0.1.135) — a nota que vale para o card inteiro
20
24
  * ("A mesma compra não conta duas vezes…"). Fica FORA do corpo para não virar um segundo filho
package/dist/SelectSection.js CHANGED
@@ -2,82 +2,87 @@
2
2
  import { ChevronDownIcon as e } from "./icons.js";
3
3
  import { SelectInfoTip as t } from "./SelectInfoTip.js";
4
4
  import { FrameBody as n, useInsideFrame as r } from "./internal/frame.js";
5
- import { forwardRef as i, useState as a } from "react";
6
- import { jsx as o, jsxs as s } from "react/jsx-runtime";
5
+ import { inertProps as i } from "./internal/inert.js";
6
+ import { forwardRef as a, useId as o, useState as s } from "react";
7
+ import { jsx as c, jsxs as l } from "react/jsx-runtime";
7
8
  //#region src/SelectSection.tsx
8
- var c = i(function({ title: i, help: c, description: l, action: u, collapsible: d = !1, defaultOpen: f = !0, footer: p, flush: m = !1, children: h, className: g, ..._ }, v) {
9
- let [y, b] = a(f), x = (r() ? " select-section--nested" : "") + (m ? " select-section--flush" : "");
10
- return d ? /* @__PURE__ */ s("div", {
11
- ref: v,
12
- ..._,
13
- className: `select-section select-section--collapsible${x}${y ? " is-open" : ""}${g ? " " + g : ""}`,
14
- children: [/* @__PURE__ */ s("button", {
9
+ var u = a(function({ title: a, help: u, description: d, action: f, collapsible: p = !1, defaultOpen: m = !0, open: h, onOpenChange: g, footer: _, flush: v = !1, children: y, className: b, ...x }, S) {
10
+ let [C, w] = s(m), T = h ?? C, E = o(), D = () => {
11
+ h === void 0 && w(!T), g == null || g(!T);
12
+ }, O = (r() ? " select-section--nested" : "") + (v ? " select-section--flush" : "");
13
+ return p ? /* @__PURE__ */ l("div", {
14
+ ref: S,
15
+ ...x,
16
+ className: `select-section select-section--collapsible${O}${T ? " is-open" : ""}${b ? " " + b : ""}`,
17
+ children: [/* @__PURE__ */ l("button", {
15
18
  type: "button",
16
19
  className: "select-section__head select-section__head--toggle",
17
- "aria-expanded": y,
18
- onClick: () => b((e) => !e),
19
- children: [/* @__PURE__ */ s("span", {
20
+ "aria-expanded": T,
21
+ "aria-controls": E,
22
+ onClick: D,
23
+ children: [/* @__PURE__ */ l("span", {
20
24
  className: "select-section__heading",
21
- children: [i && /* @__PURE__ */ o("span", {
25
+ children: [a && /* @__PURE__ */ c("span", {
22
26
  className: "select-section__title",
23
- children: i
24
- }), l && /* @__PURE__ */ o("span", {
27
+ children: a
28
+ }), d && /* @__PURE__ */ c("span", {
25
29
  className: "select-section__desc",
26
- children: l
30
+ children: d
27
31
  })]
28
- }), /* @__PURE__ */ o("span", {
32
+ }), /* @__PURE__ */ c("span", {
29
33
  className: "select-section__chevron",
30
34
  "aria-hidden": "true",
31
- children: /* @__PURE__ */ o(e, {})
35
+ children: /* @__PURE__ */ c(e, {})
32
36
  })]
33
- }), /* @__PURE__ */ o("div", {
37
+ }), /* @__PURE__ */ c("div", {
38
+ id: E,
34
39
  className: "select-section__collapse",
35
- "data-open": y,
36
- "aria-hidden": !y,
37
- children: /* @__PURE__ */ s("div", {
40
+ "data-open": T,
41
+ ...i(!T),
42
+ children: /* @__PURE__ */ l("div", {
38
43
  className: "select-section__collapsewrap",
39
- children: [/* @__PURE__ */ o("div", {
44
+ children: [/* @__PURE__ */ c("div", {
40
45
  className: "select-section__body",
41
- children: /* @__PURE__ */ o(n, { children: h })
42
- }), p != null && p !== "" && /* @__PURE__ */ o("div", {
46
+ children: /* @__PURE__ */ c(n, { children: y })
47
+ }), _ != null && _ !== "" && /* @__PURE__ */ c("div", {
43
48
  className: "select-section__foot",
44
- children: p
49
+ children: _
45
50
  })]
46
51
  })
47
52
  })]
48
- }) : /* @__PURE__ */ s("div", {
49
- ref: v,
50
- ..._,
51
- className: `select-section${x}${g ? " " + g : ""}`,
53
+ }) : /* @__PURE__ */ l("div", {
54
+ ref: S,
55
+ ...x,
56
+ className: `select-section${O}${b ? " " + b : ""}`,
52
57
  children: [
53
- (i || l || u) && /* @__PURE__ */ s("div", {
58
+ (a || d || f) && /* @__PURE__ */ l("div", {
54
59
  className: "select-section__head",
55
- children: [/* @__PURE__ */ s("div", {
60
+ children: [/* @__PURE__ */ l("div", {
56
61
  className: "select-section__heading",
57
- children: [i && /* @__PURE__ */ s("h2", {
58
- className: `select-section__title${c == null ? "" : " select-section__title--help"}`,
59
- children: [i, c != null && /* @__PURE__ */ o(t, { content: c })]
60
- }), l && /* @__PURE__ */ o("p", {
62
+ children: [a && /* @__PURE__ */ l("h2", {
63
+ className: `select-section__title${u == null ? "" : " select-section__title--help"}`,
64
+ children: [a, u != null && /* @__PURE__ */ c(t, { content: u })]
65
+ }), d && /* @__PURE__ */ c("p", {
61
66
  className: "select-section__desc",
62
- children: l
67
+ children: d
63
68
  })]
64
- }), u ? /* @__PURE__ */ o("div", {
69
+ }), f ? /* @__PURE__ */ c("div", {
65
70
  className: "select-section__action",
66
- children: u
71
+ children: f
67
72
  }) : null]
68
73
  }),
69
- /* @__PURE__ */ o("div", {
74
+ /* @__PURE__ */ c("div", {
70
75
  className: "select-section__body",
71
- children: /* @__PURE__ */ o(n, { children: h })
76
+ children: /* @__PURE__ */ c(n, { children: y })
72
77
  }),
73
- p != null && p !== "" && /* @__PURE__ */ o("div", {
78
+ _ != null && _ !== "" && /* @__PURE__ */ c("div", {
74
79
  className: "select-section__foot",
75
- children: p
80
+ children: _
76
81
  })
77
82
  ]
78
83
  });
79
84
  });
80
85
  //#endregion
81
- export { c as SelectSection };
86
+ export { u as SelectSection };
82
87
 
83
88
  //# sourceMappingURL=SelectSection.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@selectwin/kit",
3
- "version": "0.1.204",
3
+ "version": "0.1.205",
4
4
  "description": "Selectwin design-system kit — primitivos React, charts SVG e tokens (theme-aware, sem dependência de biblioteca de chart).",
5
5
  "type": "module",
6
6
  "repository": {