@shmidko61/lc-ui-kit 0.16.0 → 0.16.1
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.
- package/dist/accordion.cjs +1 -1
- package/dist/accordion.js +44 -44
- package/package.json +5 -3
package/dist/accordion.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),v=require("react-aria"),P=require("react-stately/useDisclosureState"),n=require("./box.cjs"),l=require("./flex.cjs"),ee=require("./icons.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),v=require("react-aria"),P=require("react-stately/useDisclosureState"),n=require("./box.cjs"),l=require("./flex.cjs"),ee=require("./icons.cjs"),x=require("./responsive-style.config-B2m9jVlX.cjs"),E=require("./typography.cjs"),te=require("react-stately/useDisclosureGroupState"),R=i.createContext(null);function ne(){const t=i.useContext(R);if(!t)throw new Error("Accordion.Item должен использоваться внутри Accordion.");return t}function se({children:t}){return e.jsx(l.Flex,{align:"center",gap:16,justify:"space-between",width:"100%",children:t})}function k({children:t,className:p,contentProps:a,duration:d=200,headingWrapper:g=se,hideIndicator:f=!1,id:y,indicator:m,indicatorProps:s,isDisabled:I=!1,isExpanded:_,itemProps:o,leading:w,onToggle:F,subtitle:S,surface:b="card",title:W,trailing:D,variant:N="primary",...u}){const G=i.useId(),h=y??G,j=ne(),K=String(h),T=j.expandedKeys.has(h),O=_??T,c=j.isDisabled||I,A=i.useRef(null),B=i.useRef(null),r=P.useDisclosureState({isExpanded:O,onExpandedChange:Z=>{c||(j.toggleKey(h),F?.(Z))}}),{buttonProps:Y,panelProps:q}=v.useDisclosure({isDisabled:c},r,A),{buttonProps:$}=v.useButton(Y,B),z=a?.className,H=a?.style,M=q.style,J=o?.bg??(b==="card"?"--color-background-default":void 0),L=b==="card"?{radius:"16px",style:"none",width:"0",...o?.border}:o?.border,Q=o?.className,U=o?.style,V=u.style,X={...M,height:"var(--disclosure-panel-height)",opacity:r.isExpanded?1:0,transitionDuration:`${d}ms`,...H};return e.jsxs(n.Box,{"data-disabled":c||void 0,"data-state":r.isExpanded?"open":"closed","data-value":K,...o,bg:J,border:L,className:x.cn("grid min-w-0",b==="card"?"gap-0 overflow-hidden":"gap-[24px]",c&&"opacity-50",Q),style:U,children:[e.jsx(n.Box,{...v.mergeProps($,u),as:"button",border:{radius:"16px",style:"none",width:"0",...u.border},className:x.cn("group/accordion-trigger w-full text-left outline-none transition-colors disabled:cursor-not-allowed","focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background-default)]",N==="primary"&&"bg-[var(--color-background-default)]",N==="secondary"&&"bg-transparent",p),cursor:c?"not-allowed":"pointer","data-state":r.isExpanded?"open":"closed",p:u.p??24,ref:B,style:V,type:"button",children:e.jsxs(g,{children:[e.jsxs(l.Flex,{align:"center",gap:16,minWidth:0,children:[w?e.jsx(n.Box,{as:"span",className:"flex shrink-0 items-center justify-center text-[var(--color-text-primary)] [&_svg]:size-[20px]",children:w}):null,e.jsxs(l.Flex,{flexDirection:"column",gap:8,minWidth:0,children:[e.jsx(E.Typography,{as:"span",className:"truncate",variant:"h4",children:W}),S?e.jsx(E.Typography,{as:"span",className:"truncate",color:"--color-text-secondary",variant:"b2",children:S}):null]})]}),e.jsxs(l.Flex,{align:"center",gap:12,shrink:0,children:[D?e.jsx(n.Box,{as:"span",children:D}):null,f?null:e.jsx(n.Box,{...s,as:"span",bg:s?.bg??"--color-background-default",border:s?.border??{radius:"8px"},style:s?.style,className:x.cn(s?"flex items-center justify-center":"flex min-h-[41px] min-w-[41px] items-center justify-center text-[var(--color-text-primary)] transition-colors group-hover/accordion-trigger:bg-[color-mix(in_srgb,var(--color-background-default)_90%,#000)]",s?.className),children:m??e.jsx(ee.DropDown,{"aria-hidden":"true",className:"h-[12px] w-[12px] transition-transform",style:{transform:r.isExpanded?"translateY(-2px) rotate(180deg)":"translateY(2px) rotate(0deg)",transitionDuration:`${d}ms`}})})]})]})}),e.jsx(n.Box,{...q,...a,className:x.cn("overflow-hidden text-[var(--color-text-secondary)] transition-[height,opacity]",z),"data-state":r.isExpanded?"open":"closed",ref:A,style:X,children:e.jsx(n.Box,{p:{px:24,pb:24},children:t})})]})}function C({allowsMultipleExpanded:t=!1,children:p,defaultExpandedKeys:a,expandedKeys:d,isDisabled:g=!1,onExpandedChange:f,...y}){const m=te.useDisclosureGroupState({allowsMultipleExpanded:t,defaultExpandedKeys:a,expandedKeys:d,isDisabled:g,onExpandedChange:f});return e.jsx(R.Provider,{value:m,children:e.jsx(l.Flex,{flexDirection:"column",gap:24,width:"100%",...y,children:p})})}const oe=Object.assign(C,{Item:k});exports.Accordion=oe;exports.AccordionItem=k;exports.AccordionRoot=C;
|
package/dist/accordion.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { createContext as X, useContext as Z, useId as P, useRef as k } from "react";
|
|
3
3
|
import { useDisclosure as ee, useButton as te, mergeProps as re } from "react-aria";
|
|
4
|
-
import { useDisclosureState as
|
|
4
|
+
import { useDisclosureState as ne } from "react-stately/useDisclosureState";
|
|
5
5
|
import { Box as r } from "./box.js";
|
|
6
6
|
import { Flex as l } from "./flex.js";
|
|
7
|
-
import { DropDown as
|
|
8
|
-
import { c as
|
|
7
|
+
import { DropDown as oe } from "./icons.js";
|
|
8
|
+
import { c as p } from "./responsive-style.config-DFuATrIM.js";
|
|
9
9
|
import { Typography as C } from "./typography.js";
|
|
10
10
|
import { useDisclosureGroupState as se } from "react-stately/useDisclosureGroupState";
|
|
11
11
|
const B = X(null);
|
|
@@ -20,27 +20,27 @@ function ie({ children: t }) {
|
|
|
20
20
|
}
|
|
21
21
|
function ce({
|
|
22
22
|
children: t,
|
|
23
|
-
className:
|
|
23
|
+
className: m,
|
|
24
24
|
contentProps: a,
|
|
25
25
|
duration: d = 200,
|
|
26
|
-
headingWrapper:
|
|
27
|
-
hideIndicator:
|
|
28
|
-
id:
|
|
29
|
-
indicator:
|
|
30
|
-
indicatorProps:
|
|
26
|
+
headingWrapper: f = ie,
|
|
27
|
+
hideIndicator: g = !1,
|
|
28
|
+
id: x,
|
|
29
|
+
indicator: y,
|
|
30
|
+
indicatorProps: n,
|
|
31
31
|
isDisabled: I = !1,
|
|
32
32
|
isExpanded: _,
|
|
33
|
-
itemProps:
|
|
33
|
+
itemProps: o,
|
|
34
34
|
leading: w,
|
|
35
35
|
onToggle: R,
|
|
36
36
|
subtitle: N,
|
|
37
|
-
surface:
|
|
37
|
+
surface: b = "card",
|
|
38
38
|
title: W,
|
|
39
39
|
trailing: D,
|
|
40
40
|
variant: S = "primary",
|
|
41
|
-
...
|
|
41
|
+
...u
|
|
42
42
|
}) {
|
|
43
|
-
const K = P(), h =
|
|
43
|
+
const K = P(), h = x ?? K, v = ae(), G = String(h), Y = v.expandedKeys.has(h), $ = _ ?? Y, i = v.isDisabled || I, A = k(null), E = k(null), s = ne({
|
|
44
44
|
isExpanded: $,
|
|
45
45
|
onExpandedChange: (V) => {
|
|
46
46
|
i || (v.toggleKey(h), R?.(V));
|
|
@@ -49,12 +49,12 @@ function ce({
|
|
|
49
49
|
{ isDisabled: i },
|
|
50
50
|
s,
|
|
51
51
|
A
|
|
52
|
-
), { buttonProps: F } = te(z, E), H = a?.className, O = a?.style, T = j.style, q =
|
|
52
|
+
), { buttonProps: F } = te(z, E), H = a?.className, O = a?.style, T = j.style, q = o?.bg ?? (b === "card" ? "--color-background-default" : void 0), J = b === "card" ? {
|
|
53
53
|
radius: "16px",
|
|
54
54
|
style: "none",
|
|
55
55
|
width: "0",
|
|
56
|
-
...
|
|
57
|
-
} :
|
|
56
|
+
...o?.border
|
|
57
|
+
} : o?.border, L = o?.className, M = o?.style, Q = u.style, U = {
|
|
58
58
|
...T,
|
|
59
59
|
height: "var(--disclosure-panel-height)",
|
|
60
60
|
opacity: s.isExpanded ? 1 : 0,
|
|
@@ -67,12 +67,12 @@ function ce({
|
|
|
67
67
|
"data-disabled": i || void 0,
|
|
68
68
|
"data-state": s.isExpanded ? "open" : "closed",
|
|
69
69
|
"data-value": G,
|
|
70
|
-
...
|
|
70
|
+
...o,
|
|
71
71
|
bg: q,
|
|
72
72
|
border: J,
|
|
73
|
-
className:
|
|
73
|
+
className: p(
|
|
74
74
|
"grid min-w-0",
|
|
75
|
-
|
|
75
|
+
b === "card" ? "gap-0 overflow-hidden" : "gap-[24px]",
|
|
76
76
|
i && "opacity-50",
|
|
77
77
|
L
|
|
78
78
|
),
|
|
@@ -81,28 +81,28 @@ function ce({
|
|
|
81
81
|
/* @__PURE__ */ e(
|
|
82
82
|
r,
|
|
83
83
|
{
|
|
84
|
-
...re(F,
|
|
84
|
+
...re(F, u),
|
|
85
85
|
as: "button",
|
|
86
86
|
border: {
|
|
87
87
|
radius: "16px",
|
|
88
88
|
style: "none",
|
|
89
89
|
width: "0",
|
|
90
|
-
...
|
|
90
|
+
...u.border
|
|
91
91
|
},
|
|
92
|
-
className:
|
|
92
|
+
className: p(
|
|
93
93
|
"group/accordion-trigger w-full text-left outline-none transition-colors disabled:cursor-not-allowed",
|
|
94
94
|
"focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background-default)]",
|
|
95
95
|
S === "primary" && "bg-[var(--color-background-default)]",
|
|
96
96
|
S === "secondary" && "bg-transparent",
|
|
97
|
-
|
|
97
|
+
m
|
|
98
98
|
),
|
|
99
99
|
cursor: i ? "not-allowed" : "pointer",
|
|
100
100
|
"data-state": s.isExpanded ? "open" : "closed",
|
|
101
|
-
p: 24,
|
|
101
|
+
p: u.p ?? 24,
|
|
102
102
|
ref: E,
|
|
103
103
|
style: Q,
|
|
104
104
|
type: "button",
|
|
105
|
-
children: /* @__PURE__ */ c(
|
|
105
|
+
children: /* @__PURE__ */ c(f, { children: [
|
|
106
106
|
/* @__PURE__ */ c(l, { align: "center", gap: 16, minWidth: 0, children: [
|
|
107
107
|
w ? /* @__PURE__ */ e(
|
|
108
108
|
r,
|
|
@@ -128,20 +128,20 @@ function ce({
|
|
|
128
128
|
] }),
|
|
129
129
|
/* @__PURE__ */ c(l, { align: "center", gap: 12, shrink: 0, children: [
|
|
130
130
|
D ? /* @__PURE__ */ e(r, { as: "span", children: D }) : null,
|
|
131
|
-
|
|
131
|
+
g ? null : /* @__PURE__ */ e(
|
|
132
132
|
r,
|
|
133
133
|
{
|
|
134
|
-
...
|
|
134
|
+
...n,
|
|
135
135
|
as: "span",
|
|
136
|
-
bg:
|
|
137
|
-
border:
|
|
138
|
-
style:
|
|
139
|
-
className:
|
|
140
|
-
|
|
141
|
-
|
|
136
|
+
bg: n?.bg ?? "--color-background-default",
|
|
137
|
+
border: n?.border ?? { radius: "8px" },
|
|
138
|
+
style: n?.style,
|
|
139
|
+
className: p(
|
|
140
|
+
n ? "flex items-center justify-center" : "flex min-h-[41px] min-w-[41px] items-center justify-center text-[var(--color-text-primary)] transition-colors group-hover/accordion-trigger:bg-[color-mix(in_srgb,var(--color-background-default)_90%,#000)]",
|
|
141
|
+
n?.className
|
|
142
142
|
),
|
|
143
|
-
children:
|
|
144
|
-
|
|
143
|
+
children: y ?? /* @__PURE__ */ e(
|
|
144
|
+
oe,
|
|
145
145
|
{
|
|
146
146
|
"aria-hidden": "true",
|
|
147
147
|
className: "h-[12px] w-[12px] transition-transform",
|
|
@@ -162,7 +162,7 @@ function ce({
|
|
|
162
162
|
{
|
|
163
163
|
...j,
|
|
164
164
|
...a,
|
|
165
|
-
className:
|
|
165
|
+
className: p(
|
|
166
166
|
"overflow-hidden text-[var(--color-text-secondary)] transition-[height,opacity]",
|
|
167
167
|
H
|
|
168
168
|
),
|
|
@@ -178,21 +178,21 @@ function ce({
|
|
|
178
178
|
}
|
|
179
179
|
function le({
|
|
180
180
|
allowsMultipleExpanded: t = !1,
|
|
181
|
-
children:
|
|
181
|
+
children: m,
|
|
182
182
|
defaultExpandedKeys: a,
|
|
183
183
|
expandedKeys: d,
|
|
184
|
-
isDisabled:
|
|
185
|
-
onExpandedChange:
|
|
186
|
-
...
|
|
184
|
+
isDisabled: f = !1,
|
|
185
|
+
onExpandedChange: g,
|
|
186
|
+
...x
|
|
187
187
|
}) {
|
|
188
|
-
const
|
|
188
|
+
const y = se({
|
|
189
189
|
allowsMultipleExpanded: t,
|
|
190
190
|
defaultExpandedKeys: a,
|
|
191
191
|
expandedKeys: d,
|
|
192
|
-
isDisabled:
|
|
193
|
-
onExpandedChange:
|
|
192
|
+
isDisabled: f,
|
|
193
|
+
onExpandedChange: g
|
|
194
194
|
});
|
|
195
|
-
return /* @__PURE__ */ e(B.Provider, { value:
|
|
195
|
+
return /* @__PURE__ */ e(B.Provider, { value: y, children: /* @__PURE__ */ e(l, { flexDirection: "column", gap: 24, width: "100%", ...x, children: m }) });
|
|
196
196
|
}
|
|
197
197
|
const ve = Object.assign(le, {
|
|
198
198
|
Item: ce
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shmidko61/lc-ui-kit",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
"vite-plugin-svgr": "^5.2.0"
|
|
264
264
|
},
|
|
265
265
|
"scripts": {
|
|
266
|
-
"verify:package": "pnpm typecheck && pnpm lint && pnpm format:check && pnpm build && pnpm typecheck:package && pnpm test:checks && pnpm test:package && pnpm test:hover && pnpm test:states && pnpm test:animation && pnpm test:progress-bar && pnpm test:tabs && pnpm test:scrollbar && pnpm pack:check && pnpm storybook:build",
|
|
266
|
+
"verify:package": "pnpm typecheck && pnpm lint && pnpm format:check && pnpm build && pnpm typecheck:package && pnpm test:checks && pnpm test:package && pnpm test:hover && pnpm test:states && pnpm test:animation && pnpm test:progress-bar && pnpm test:tabs && pnpm test:scrollbar && pnpm test:accordion && pnpm pack:check && pnpm storybook:build",
|
|
267
267
|
"build": "vite build && tailwindcss -i src/styles.css -o dist/styles.css --minify",
|
|
268
268
|
"lint": "eslint src .storybook vite.config.ts --max-warnings=0",
|
|
269
269
|
"lint:fix": "eslint src .storybook vite.config.ts --fix",
|
|
@@ -287,6 +287,8 @@
|
|
|
287
287
|
"test:tabs:browser": "node scripts/check-tabs-browser.mjs",
|
|
288
288
|
"test:tabs": "node scripts/check-tabs.mjs",
|
|
289
289
|
"test:scrollbar": "node scripts/check-scrollbar.mjs",
|
|
290
|
-
"test:scrollbar:browser": "node scripts/check-scrollbar-browser.mjs"
|
|
290
|
+
"test:scrollbar:browser": "node scripts/check-scrollbar-browser.mjs",
|
|
291
|
+
"test:accordion": "node scripts/check-accordion.mjs",
|
|
292
|
+
"test:accordion:browser": "node scripts/check-accordion-browser.mjs"
|
|
291
293
|
}
|
|
292
294
|
}
|