@stokelp/ui 2.105.0 → 2.106.0
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/components/chat/ChatScoreBreakdown.cjs +2 -0
- package/dist/components/chat/ChatScoreBreakdown.cjs.map +1 -0
- package/dist/components/chat/ChatScoreBreakdown.d.ts +16 -0
- package/dist/components/chat/ChatScoreBreakdown.js +142 -0
- package/dist/components/chat/ChatScoreBreakdown.js.map +1 -0
- package/dist/components/chat/index.d.ts +1 -0
- package/dist/components/drawer/Drawer.cjs +1 -1
- package/dist/components/drawer/Drawer.cjs.map +1 -1
- package/dist/components/drawer/Drawer.js +6 -2
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +16 -15
- package/dist/ui.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function i(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function a(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}var o=({percent:o,detail:s,labels:c})=>{let l=r.filter(e=>s[e]?.sim!=null),u=r.filter(e=>s[e]?.sim==null);return(0,n.jsxs)(t.Box,{bg:`white`,borderRadius:`radius-8`,p:`space-12`,minW:`220px`,maxW:`240px`,children:[(0,n.jsxs)(t.HStack,{justify:`space-between`,alignItems:`baseline`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`12px`,fontWeight:`500`,children:c.title}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`18px`,fontWeight:`500`,style:{color:i(o)},children:[Math.round(o),` %`]})]}),(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),l.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`10px`,fontWeight:`500`,color:`grey.400`,textTransform:`uppercase`,letterSpacing:`0.06em`,children:c.compared}),l.map(r=>{let i=s[r].sim;return(0,n.jsxs)(t.HStack,{alignItems:`center`,gap:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`11px`,color:`grey.500`,minW:`80px`,children:c.attributes[r]}),(0,n.jsx)(t.Box,{flex:`1`,h:`3px`,bg:`grey.100`,borderRadius:`full`,overflow:`hidden`,children:(0,n.jsx)(t.Box,{h:`100%`,borderRadius:`full`,style:{width:`${i}%`,background:a(i)}})}),(0,n.jsx)(e.Text,{as:`span`,fontSize:`11px`,fontWeight:`500`,minW:`24px`,textAlign:`right`,style:{color:a(i)},children:i})]},r)})]}),l.length>0&&u.length>0&&(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),u.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`10px`,fontWeight:`500`,color:`grey.400`,textTransform:`uppercase`,letterSpacing:`0.06em`,children:c.notSpecified}),(0,n.jsx)(t.HStack,{flexWrap:`wrap`,gap:`space-4`,children:u.map(t=>(0,n.jsx)(e.Text,{as:`span`,fontSize:`11px`,color:`grey.400`,bg:`grey.50`,px:`space-8`,py:`2px`,borderRadius:`full`,children:c.attributes[t]},t))})]})]})};exports.ChatScoreBreakdown=o;
|
|
2
|
+
//# sourceMappingURL=ChatScoreBreakdown.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.cjs","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n sim: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(sim: number): string {\n if (sim >= 70) return '#639922'\n if (sim >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim != null)\n const notSpecified = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim == null)\n\n return (\n <Box bg=\"white\" borderRadius=\"radius-8\" p=\"space-12\" minW=\"220px\" maxW=\"240px\">\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"12px\" fontWeight=\"500\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"18px\" fontWeight=\"500\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text\n as=\"span\"\n fontSize=\"10px\"\n fontWeight=\"500\"\n color=\"grey.400\"\n textTransform=\"uppercase\"\n letterSpacing=\"0.06em\"\n >\n {labels.compared}\n </Text>\n {compared.map(key => {\n const sim = detail[key].sim as number\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"11px\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box h=\"100%\" borderRadius=\"full\" style={{ width: `${sim}%`, background: getBarColor(sim) }} />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"11px\"\n fontWeight=\"500\"\n minW=\"24px\"\n textAlign=\"right\"\n style={{ color: getBarColor(sim) }}\n >\n {sim}\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text\n as=\"span\"\n fontSize=\"10px\"\n fontWeight=\"500\"\n color=\"grey.400\"\n textTransform=\"uppercase\"\n letterSpacing=\"0.06em\"\n >\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"11px\"\n color=\"grey.400\"\n bg=\"grey.50\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging';
|
|
2
|
+
export type ScoreAttributeDetail = {
|
|
3
|
+
sim: number | null;
|
|
4
|
+
};
|
|
5
|
+
export type ChatScoreBreakdownLabels = {
|
|
6
|
+
title: string;
|
|
7
|
+
compared: string;
|
|
8
|
+
notSpecified: string;
|
|
9
|
+
attributes: Record<ScoreAttributeKey, string>;
|
|
10
|
+
};
|
|
11
|
+
export type ChatScoreBreakdownProps = {
|
|
12
|
+
percent: number;
|
|
13
|
+
detail: Record<ScoreAttributeKey, ScoreAttributeDetail>;
|
|
14
|
+
labels: ChatScoreBreakdownLabels;
|
|
15
|
+
};
|
|
16
|
+
export declare const ChatScoreBreakdown: ({ percent, detail, labels }: ChatScoreBreakdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Text as e } from "../text/Text.js";
|
|
3
|
+
import { Box as t, HStack as n, VStack as r } from "@stokelp/styled-system/jsx";
|
|
4
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
5
|
+
//#region src/components/chat/ChatScoreBreakdown.tsx
|
|
6
|
+
var o = [
|
|
7
|
+
"origin",
|
|
8
|
+
"temperature",
|
|
9
|
+
"cutting",
|
|
10
|
+
"cooking",
|
|
11
|
+
"treatment",
|
|
12
|
+
"label",
|
|
13
|
+
"packaging"
|
|
14
|
+
];
|
|
15
|
+
function s(e) {
|
|
16
|
+
return e >= 70 ? "#3B6D11" : e >= 40 ? "#854F0B" : "#A32D2D";
|
|
17
|
+
}
|
|
18
|
+
function c(e) {
|
|
19
|
+
return e >= 70 ? "#639922" : e >= 40 ? "#BA7517" : "#E24B4A";
|
|
20
|
+
}
|
|
21
|
+
var l = ({ percent: l, detail: u, labels: d }) => {
|
|
22
|
+
let f = o.filter((e) => u[e]?.sim != null), p = o.filter((e) => u[e]?.sim == null);
|
|
23
|
+
return /* @__PURE__ */ a(t, {
|
|
24
|
+
bg: "white",
|
|
25
|
+
borderRadius: "radius-8",
|
|
26
|
+
p: "space-12",
|
|
27
|
+
minW: "220px",
|
|
28
|
+
maxW: "240px",
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ a(n, {
|
|
31
|
+
justify: "space-between",
|
|
32
|
+
alignItems: "baseline",
|
|
33
|
+
mb: "space-8",
|
|
34
|
+
children: [/* @__PURE__ */ i(e, {
|
|
35
|
+
as: "span",
|
|
36
|
+
fontSize: "12px",
|
|
37
|
+
fontWeight: "500",
|
|
38
|
+
children: d.title
|
|
39
|
+
}), /* @__PURE__ */ a(e, {
|
|
40
|
+
as: "span",
|
|
41
|
+
fontSize: "18px",
|
|
42
|
+
fontWeight: "500",
|
|
43
|
+
style: { color: s(l) },
|
|
44
|
+
children: [Math.round(l), " %"]
|
|
45
|
+
})]
|
|
46
|
+
}),
|
|
47
|
+
/* @__PURE__ */ i(t, {
|
|
48
|
+
h: "1px",
|
|
49
|
+
bg: "grey.100",
|
|
50
|
+
mb: "space-8"
|
|
51
|
+
}),
|
|
52
|
+
f.length > 0 && /* @__PURE__ */ a(r, {
|
|
53
|
+
alignItems: "stretch",
|
|
54
|
+
gap: "space-4",
|
|
55
|
+
mb: "space-8",
|
|
56
|
+
children: [/* @__PURE__ */ i(e, {
|
|
57
|
+
as: "span",
|
|
58
|
+
fontSize: "10px",
|
|
59
|
+
fontWeight: "500",
|
|
60
|
+
color: "grey.400",
|
|
61
|
+
textTransform: "uppercase",
|
|
62
|
+
letterSpacing: "0.06em",
|
|
63
|
+
children: d.compared
|
|
64
|
+
}), f.map((r) => {
|
|
65
|
+
let o = u[r].sim;
|
|
66
|
+
return /* @__PURE__ */ a(n, {
|
|
67
|
+
alignItems: "center",
|
|
68
|
+
gap: "space-8",
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ i(e, {
|
|
71
|
+
as: "span",
|
|
72
|
+
fontSize: "11px",
|
|
73
|
+
color: "grey.500",
|
|
74
|
+
minW: "80px",
|
|
75
|
+
children: d.attributes[r]
|
|
76
|
+
}),
|
|
77
|
+
/* @__PURE__ */ i(t, {
|
|
78
|
+
flex: "1",
|
|
79
|
+
h: "3px",
|
|
80
|
+
bg: "grey.100",
|
|
81
|
+
borderRadius: "full",
|
|
82
|
+
overflow: "hidden",
|
|
83
|
+
children: /* @__PURE__ */ i(t, {
|
|
84
|
+
h: "100%",
|
|
85
|
+
borderRadius: "full",
|
|
86
|
+
style: {
|
|
87
|
+
width: `${o}%`,
|
|
88
|
+
background: c(o)
|
|
89
|
+
}
|
|
90
|
+
})
|
|
91
|
+
}),
|
|
92
|
+
/* @__PURE__ */ i(e, {
|
|
93
|
+
as: "span",
|
|
94
|
+
fontSize: "11px",
|
|
95
|
+
fontWeight: "500",
|
|
96
|
+
minW: "24px",
|
|
97
|
+
textAlign: "right",
|
|
98
|
+
style: { color: c(o) },
|
|
99
|
+
children: o
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
}, r);
|
|
103
|
+
})]
|
|
104
|
+
}),
|
|
105
|
+
f.length > 0 && p.length > 0 && /* @__PURE__ */ i(t, {
|
|
106
|
+
h: "1px",
|
|
107
|
+
bg: "grey.100",
|
|
108
|
+
mb: "space-8"
|
|
109
|
+
}),
|
|
110
|
+
p.length > 0 && /* @__PURE__ */ a(r, {
|
|
111
|
+
alignItems: "stretch",
|
|
112
|
+
gap: "space-4",
|
|
113
|
+
children: [/* @__PURE__ */ i(e, {
|
|
114
|
+
as: "span",
|
|
115
|
+
fontSize: "10px",
|
|
116
|
+
fontWeight: "500",
|
|
117
|
+
color: "grey.400",
|
|
118
|
+
textTransform: "uppercase",
|
|
119
|
+
letterSpacing: "0.06em",
|
|
120
|
+
children: d.notSpecified
|
|
121
|
+
}), /* @__PURE__ */ i(n, {
|
|
122
|
+
flexWrap: "wrap",
|
|
123
|
+
gap: "space-4",
|
|
124
|
+
children: p.map((t) => /* @__PURE__ */ i(e, {
|
|
125
|
+
as: "span",
|
|
126
|
+
fontSize: "11px",
|
|
127
|
+
color: "grey.400",
|
|
128
|
+
bg: "grey.50",
|
|
129
|
+
px: "space-8",
|
|
130
|
+
py: "2px",
|
|
131
|
+
borderRadius: "full",
|
|
132
|
+
children: d.attributes[t]
|
|
133
|
+
}, t))
|
|
134
|
+
})]
|
|
135
|
+
})
|
|
136
|
+
]
|
|
137
|
+
});
|
|
138
|
+
};
|
|
139
|
+
//#endregion
|
|
140
|
+
export { l as ChatScoreBreakdown };
|
|
141
|
+
|
|
142
|
+
//# sourceMappingURL=ChatScoreBreakdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.js","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n sim: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(sim: number): string {\n if (sim >= 70) return '#639922'\n if (sim >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim != null)\n const notSpecified = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim == null)\n\n return (\n <Box bg=\"white\" borderRadius=\"radius-8\" p=\"space-12\" minW=\"220px\" maxW=\"240px\">\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"12px\" fontWeight=\"500\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"18px\" fontWeight=\"500\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text\n as=\"span\"\n fontSize=\"10px\"\n fontWeight=\"500\"\n color=\"grey.400\"\n textTransform=\"uppercase\"\n letterSpacing=\"0.06em\"\n >\n {labels.compared}\n </Text>\n {compared.map(key => {\n const sim = detail[key].sim as number\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"11px\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box h=\"100%\" borderRadius=\"full\" style={{ width: `${sim}%`, background: getBarColor(sim) }} />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"11px\"\n fontWeight=\"500\"\n minW=\"24px\"\n textAlign=\"right\"\n style={{ color: getBarColor(sim) }}\n >\n {sim}\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text\n as=\"span\"\n fontSize=\"10px\"\n fontWeight=\"500\"\n color=\"grey.400\"\n textTransform=\"uppercase\"\n letterSpacing=\"0.06em\"\n >\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"11px\"\n color=\"grey.400\"\n bg=\"grey.50\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n </Box>\n )\n}\n"],"mappings":";;;;;AAsBA,IAAM,IAAuC;CAC3C;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAS,EAAiB,GAAyB;CAGjD,OAFI,KAAW,KAAW,YACtB,KAAW,KAAW,YACnB;AACT;AAEA,SAAS,EAAY,GAAqB;CAGxC,OAFI,KAAO,KAAW,YAClB,KAAO,KAAW,YACf;AACT;AAEA,IAAa,KAAsB,EAAE,YAAS,WAAQ,gBAAsC;CAC1F,IAAM,IAAW,EAAgB,QAAO,MAAO,EAAO,IAAM,OAAO,IAAI,GACjE,IAAe,EAAgB,QAAO,MAAO,EAAO,IAAM,OAAO,IAAI;CAE3E,OACE,kBAAC,GAAD;EAAK,IAAG;EAAQ,cAAa;EAAW,GAAE;EAAW,MAAK;EAAQ,MAAK;YAAvE;GACE,kBAAC,GAAD;IAAQ,SAAQ;IAAgB,YAAW;IAAW,IAAG;cAAzD,CACE,kBAAC,GAAD;KAAM,IAAG;KAAO,UAAS;KAAO,YAAW;eACxC,EAAO;IACJ,CAAA,GACN,kBAAC,GAAD;KAAM,IAAG;KAAO,UAAS;KAAO,YAAW;KAAM,OAAO,EAAE,OAAO,EAAiB,CAAO,EAAE;eAA3F,CACG,KAAK,MAAM,CAAO,GAAE,IACjB;MACA;;GAER,kBAAC,GAAD;IAAK,GAAE;IAAM,IAAG;IAAW,IAAG;GAAW,CAAA;GAExC,EAAS,SAAS,KACjB,kBAAC,GAAD;IAAQ,YAAW;IAAU,KAAI;IAAU,IAAG;cAA9C,CACE,kBAAC,GAAD;KACE,IAAG;KACH,UAAS;KACT,YAAW;KACX,OAAM;KACN,eAAc;KACd,eAAc;eAEb,EAAO;IACJ,CAAA,GACL,EAAS,KAAI,MAAO;KACnB,IAAM,IAAM,EAAO,GAAK;KACxB,OACE,kBAAC,GAAD;MAAkB,YAAW;MAAS,KAAI;gBAA1C;OACE,kBAAC,GAAD;QAAM,IAAG;QAAO,UAAS;QAAO,OAAM;QAAW,MAAK;kBACnD,EAAO,WAAW;OACf,CAAA;OACN,kBAAC,GAAD;QAAK,MAAK;QAAI,GAAE;QAAM,IAAG;QAAW,cAAa;QAAO,UAAS;kBAC/D,kBAAC,GAAD;SAAK,GAAE;SAAO,cAAa;SAAO,OAAO;UAAE,OAAO,GAAG,EAAI;UAAI,YAAY,EAAY,CAAG;SAAE;QAAI,CAAA;OAC3F,CAAA;OACL,kBAAC,GAAD;QACE,IAAG;QACH,UAAS;QACT,YAAW;QACX,MAAK;QACL,WAAU;QACV,OAAO,EAAE,OAAO,EAAY,CAAG,EAAE;kBAEhC;OACG,CAAA;MACA;QAjBK,CAiBL;IAEZ,CAAC,CACK;;GAGT,EAAS,SAAS,KAAK,EAAa,SAAS,KAAK,kBAAC,GAAD;IAAK,GAAE;IAAM,IAAG;IAAW,IAAG;GAAW,CAAA;GAE3F,EAAa,SAAS,KACrB,kBAAC,GAAD;IAAQ,YAAW;IAAU,KAAI;cAAjC,CACE,kBAAC,GAAD;KACE,IAAG;KACH,UAAS;KACT,YAAW;KACX,OAAM;KACN,eAAc;KACd,eAAc;eAEb,EAAO;IACJ,CAAA,GACN,kBAAC,GAAD;KAAQ,UAAS;KAAO,KAAI;eACzB,EAAa,KAAI,MAChB,kBAAC,GAAD;MAEE,IAAG;MACH,UAAS;MACT,OAAM;MACN,IAAG;MACH,IAAG;MACH,IAAG;MACH,cAAa;gBAEZ,EAAO,WAAW;KACf,GAVC,CAUD,CACP;IACK,CAAA,CACF;;EAEP;;AAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";const e=require("../../utils/slots.cjs"),t=require("../icon-button/IconButton.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("usehooks-ts"),c=require("@stokelp/styled-system/tokens");var{withProvider:l,withContext:u}=e.createStyleContext(i.drawer),d=l(n.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),f=u((0,r.styled)(n.ark.main),`body`),p=u((0,r.styled)(n.Dialog.CloseTrigger),`closeTrigger`),m=u((0,r.styled)(n.ark.footer),`footer`),h=(0,a.forwardRef)(({children:e,showCloseTrigger:r=!0,...i},a)=>(0,o.jsxs)(n.ark.header,{...i,ref:a,children:[e,r&&(0,o.jsx)(p,{asChild:!0,children:(0,o.jsx)(t.IconButton,{ml:`auto`,"aria-label":`close`,variant:`tertiary`,children:(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z`,fill:`currentColor`})})})})]}));h.displayName=`DrawerHeader`;var g=u(h,`header`),_=u((0,r.styled)(n.Dialog.Title),`title`),v=u((0,r.styled)(n.Dialog.Trigger),`trigger`),y=u((0,r.styled)(n.Dialog.Positioner),`positioner`),b=u((0,r.styled)(n.Dialog.Backdrop),`backdrop`),x=(0,a.forwardRef)(({children:e,...t},r)=>{let i=(0,s.useMediaQuery)(`(max-width: ${(0,c.token)(`breakpoints.md`)})`,{defaultValue:!1}),{open:l,getContentProps:u}=(0,n.useDialogContext)();return(0,a.useLayoutEffect)(()=>{if(!l)return;let{id:e}=u();if(!e)return;let t=document.getElementById(e);if(t){let e=t.querySelector(`footer`);e&&(i?t.style.setProperty(`--footer-height`,`${Math.ceil(e.clientHeight)}px`):t.style.setProperty(`--footer-height`,`70px`))}},[l,i]),(0,a.useEffect)(()=>{process.env.NODE_ENV
|
|
1
|
+
"use client";const e=require("../../utils/slots.cjs"),t=require("../icon-button/IconButton.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("usehooks-ts"),c=require("@stokelp/styled-system/tokens");var{withProvider:l,withContext:u}=e.createStyleContext(i.drawer),d=l(n.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),f=u((0,r.styled)(n.ark.main),`body`),p=u((0,r.styled)(n.Dialog.CloseTrigger),`closeTrigger`),m=u((0,r.styled)(n.ark.footer),`footer`),h=(0,a.forwardRef)(({children:e,showCloseTrigger:r=!0,...i},a)=>(0,o.jsxs)(n.ark.header,{...i,ref:a,children:[e,r&&(0,o.jsx)(p,{asChild:!0,children:(0,o.jsx)(t.IconButton,{ml:`auto`,"aria-label":`close`,variant:`tertiary`,children:(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z`,fill:`currentColor`})})})})]}));h.displayName=`DrawerHeader`;var g=u(h,`header`),_=u((0,r.styled)(n.Dialog.Title),`title`),v=u((0,r.styled)(n.Dialog.Trigger),`trigger`),y=u((0,r.styled)(n.Dialog.Positioner),`positioner`),b=u((0,r.styled)(n.Dialog.Backdrop),`backdrop`),x=(0,a.forwardRef)(({children:e,...t},r)=>{let i=(0,s.useMediaQuery)(`(max-width: ${(0,c.token)(`breakpoints.md`)})`,{defaultValue:!1}),{open:l,getContentProps:u}=(0,n.useDialogContext)();return(0,a.useLayoutEffect)(()=>{if(!l)return;let{id:e}=u();if(!e)return;let t=document.getElementById(e);if(t){let e=t.querySelector(`footer`);e&&(i?t.style.setProperty(`--footer-height`,`${Math.ceil(e.clientHeight)}px`):t.style.setProperty(`--footer-height`,`70px`))}},[l,i]),(0,a.useEffect)(()=>{if(process.env.NODE_ENV===`production`)return;let e=()=>window.setTimeout(()=>{let e=document.body;document.querySelector(`[data-scope="dialog"][data-state="open"]`)||(e.style.pointerEvents===`none`&&(e.style.pointerEvents=``),e.hasAttribute(`data-inert`)&&e.removeAttribute(`data-inert`),e.getAttribute(`style`)===``&&e.removeAttribute(`style`))},350);return l||e(),()=>{e()}},[l]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b,{}),(0,o.jsx)(y,{children:(0,o.jsx)(n.Dialog.Content,{ref:r,...t,children:e})})]})});x.displayName=n.Dialog.Content.displayName;var S=u((0,r.styled)(x),`content`),C=n.Dialog.Context;exports.Drawer=d,exports.DrawerBody=f,exports.DrawerCloseTrigger=p,exports.DrawerContent=S,exports.DrawerContext=C,exports.DrawerFooter=m,exports.DrawerHeader=g,exports.DrawerTitle=_,exports.DrawerTrigger=v;
|
|
2
2
|
//# sourceMappingURL=Drawer.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n defaultProps: {\n unmountOnExit: true,\n lazyMount: true,\n },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n ({ children, showCloseTrigger = true, ...props }, ref) => (\n <ark.header {...props} ref={ref}>\n {children}\n {showCloseTrigger && (\n <DrawerCloseTrigger asChild>\n <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IconButton>\n </DrawerCloseTrigger>\n )}\n </ark.header>\n ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n ({ children, ...props }, ref) => {\n const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n defaultValue: false,\n })\n const { open, getContentProps } = useDialogContext()\n\n useLayoutEffect(() => {\n if (!open) return\n const { id } = getContentProps()\n if (!id) return\n const $content = document.getElementById(id)\n if ($content) {\n const $footer = $content.querySelector('footer')\n if ($footer) {\n if (isMobile) {\n $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n } else {\n $content.style.setProperty('--footer-height', `70px`)\n }\n }\n }\n }, [open, isMobile])\n\n // Workaround:
|
|
1
|
+
{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n defaultProps: {\n unmountOnExit: true,\n lazyMount: true,\n },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n ({ children, showCloseTrigger = true, ...props }, ref) => (\n <ark.header {...props} ref={ref}>\n {children}\n {showCloseTrigger && (\n <DrawerCloseTrigger asChild>\n <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IconButton>\n </DrawerCloseTrigger>\n )}\n </ark.header>\n ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n ({ children, ...props }, ref) => {\n const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n defaultValue: false,\n })\n const { open, getContentProps } = useDialogContext()\n\n useLayoutEffect(() => {\n if (!open) return\n const { id } = getContentProps()\n if (!id) return\n const $content = document.getElementById(id)\n if ($content) {\n const $footer = $content.querySelector('footer')\n if ($footer) {\n if (isMobile) {\n $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n } else {\n $content.style.setProperty('--footer-height', `70px`)\n }\n }\n }\n }, [open, isMobile])\n\n // Workaround: @zag-js/dismissable's disablePointerEventsOutside can leave\n // `<body>` with `pointer-events: none` / `data-inert`, freezing the page\n // after close. Two triggers we've hit:\n // 1. React StrictMode (Next.js dev) double-invokes the dismissable\n // effect, and its module-level `originalBodyPointerEvents` singleton\n // can be poisoned to `'none'` (worsened by nested dialogs).\n // 2. A consumer conditionally renders the Drawer Root and unmounts it on\n // close, so `open` never transitions to false within a mounted Content\n // — the close-path branch below never runs.\n // Gated inside the effect body so consumer bundlers DCE it in production.\n // The timer is fire-and-forget: React does NOT cancel a setTimeout queued\n // from an effect or its cleanup, so the restore still runs after Content\n // unmounts. The restore is idempotent and the stillOpen guard prevents it\n // from clobbering a dialog that is genuinely open.\n useEffect(() => {\n if (process.env.NODE_ENV === 'production') return\n const restorePointerEvents = () =>\n window.setTimeout(() => {\n const body = document.body\n const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n if (stillOpen) return\n if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n if (body.getAttribute('style') === '') body.removeAttribute('style')\n }, 350)\n // Normal close path: the Drawer stays mounted and `open` flips to false.\n if (!open) restorePointerEvents()\n // Unmount path: consumer yanked the Drawer Root while it was still open.\n return () => {\n restorePointerEvents()\n }\n }, [open])\n\n return (\n <>\n <DrawerBackdrop />\n <DrawerPositioner>\n <ArkDrawer.Content ref={ref} {...props}>\n {children}\n </ArkDrawer.Content>\n </DrawerPositioner>\n </>\n )\n },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":"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"}
|
|
@@ -50,10 +50,14 @@ var S = g(x, "header"), C = g(a(n.Title), "title"), w = g(a(n.Trigger), "trigger
|
|
|
50
50
|
e && (a ? t.style.setProperty("--footer-height", `${Math.ceil(e.clientHeight)}px`) : t.style.setProperty("--footer-height", "70px"));
|
|
51
51
|
}
|
|
52
52
|
}, [o, a]), c(() => {
|
|
53
|
-
process.env.NODE_ENV
|
|
53
|
+
if (process.env.NODE_ENV === "production") return;
|
|
54
|
+
let e = () => window.setTimeout(() => {
|
|
54
55
|
let e = document.body;
|
|
55
56
|
document.querySelector("[data-scope=\"dialog\"][data-state=\"open\"]") || (e.style.pointerEvents === "none" && (e.style.pointerEvents = ""), e.hasAttribute("data-inert") && e.removeAttribute("data-inert"), e.getAttribute("style") === "" && e.removeAttribute("style"));
|
|
56
|
-
}, 350)
|
|
57
|
+
}, 350);
|
|
58
|
+
return o || e(), () => {
|
|
59
|
+
e();
|
|
60
|
+
};
|
|
57
61
|
}, [o]), /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(E, {}), /* @__PURE__ */ d(T, { children: /* @__PURE__ */ d(n.Content, {
|
|
58
62
|
ref: r,
|
|
59
63
|
...t,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n defaultProps: {\n unmountOnExit: true,\n lazyMount: true,\n },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n ({ children, showCloseTrigger = true, ...props }, ref) => (\n <ark.header {...props} ref={ref}>\n {children}\n {showCloseTrigger && (\n <DrawerCloseTrigger asChild>\n <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IconButton>\n </DrawerCloseTrigger>\n )}\n </ark.header>\n ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n ({ children, ...props }, ref) => {\n const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n defaultValue: false,\n })\n const { open, getContentProps } = useDialogContext()\n\n useLayoutEffect(() => {\n if (!open) return\n const { id } = getContentProps()\n if (!id) return\n const $content = document.getElementById(id)\n if ($content) {\n const $footer = $content.querySelector('footer')\n if ($footer) {\n if (isMobile) {\n $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n } else {\n $content.style.setProperty('--footer-height', `70px`)\n }\n }\n }\n }, [open, isMobile])\n\n // Workaround:
|
|
1
|
+
{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n defaultProps: {\n unmountOnExit: true,\n lazyMount: true,\n },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n ({ children, showCloseTrigger = true, ...props }, ref) => (\n <ark.header {...props} ref={ref}>\n {children}\n {showCloseTrigger && (\n <DrawerCloseTrigger asChild>\n <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IconButton>\n </DrawerCloseTrigger>\n )}\n </ark.header>\n ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n ({ children, ...props }, ref) => {\n const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n defaultValue: false,\n })\n const { open, getContentProps } = useDialogContext()\n\n useLayoutEffect(() => {\n if (!open) return\n const { id } = getContentProps()\n if (!id) return\n const $content = document.getElementById(id)\n if ($content) {\n const $footer = $content.querySelector('footer')\n if ($footer) {\n if (isMobile) {\n $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n } else {\n $content.style.setProperty('--footer-height', `70px`)\n }\n }\n }\n }, [open, isMobile])\n\n // Workaround: @zag-js/dismissable's disablePointerEventsOutside can leave\n // `<body>` with `pointer-events: none` / `data-inert`, freezing the page\n // after close. Two triggers we've hit:\n // 1. React StrictMode (Next.js dev) double-invokes the dismissable\n // effect, and its module-level `originalBodyPointerEvents` singleton\n // can be poisoned to `'none'` (worsened by nested dialogs).\n // 2. A consumer conditionally renders the Drawer Root and unmounts it on\n // close, so `open` never transitions to false within a mounted Content\n // — the close-path branch below never runs.\n // Gated inside the effect body so consumer bundlers DCE it in production.\n // The timer is fire-and-forget: React does NOT cancel a setTimeout queued\n // from an effect or its cleanup, so the restore still runs after Content\n // unmounts. The restore is idempotent and the stillOpen guard prevents it\n // from clobbering a dialog that is genuinely open.\n useEffect(() => {\n if (process.env.NODE_ENV === 'production') return\n const restorePointerEvents = () =>\n window.setTimeout(() => {\n const body = document.body\n const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n if (stillOpen) return\n if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n if (body.getAttribute('style') === '') body.removeAttribute('style')\n }, 350)\n // Normal close path: the Drawer stays mounted and `open` flips to false.\n if (!open) restorePointerEvents()\n // Unmount path: consumer yanked the Drawer Root while it was still open.\n return () => {\n restorePointerEvents()\n }\n }, [open])\n\n return (\n <>\n <DrawerBackdrop />\n <DrawerPositioner>\n <ArkDrawer.Content ref={ref} {...props}>\n {children}\n </ArkDrawer.Content>\n </DrawerPositioner>\n </>\n )\n },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAM,GAElD,IAAS,EAAa,EAAU,MAAM,KAAA,GAAW,EAC5D,cAAc;CACZ,eAAe;CACf,WAAW;AACb,EACF,CAAC,GACY,IAAa,EAAY,EAAO,EAAI,IAAI,GAAG,MAAM,GACjD,IAAqB,EAAY,EAAO,EAAU,YAAY,GAAG,cAAc,GAC/E,IAAe,EAAY,EAAO,EAAI,MAAM,GAAG,QAAQ,GAM9D,IAAS,GACZ,EAAE,aAAU,sBAAmB,IAAM,GAAG,KAAS,MAChD,kBAAC,EAAI,QAAL;CAAY,GAAI;CAAY;WAA5B,CACG,GACA,KACC,kBAAC,GAAD;EAAoB,SAAA;YAClB,kBAAC,GAAD;GAAY,IAAG;GAAO,cAAW;GAAQ,SAAQ;aAC/C,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,UAAS;KACT,UAAS;KACT,GAAE;KACF,MAAK;IACN,CAAA;GACE,CAAA;EACK,CAAA;CACM,CAAA,CAEZ;EAEhB;AACA,EAAO,cAAc;AAErB,IAAa,IAAe,EAAY,GAAQ,QAAQ,GAC3C,IAAc,EAAY,EAAO,EAAU,KAAK,GAAG,OAAO,GAC1D,IAAgB,EAAY,EAAO,EAAU,OAAO,GAAG,SAAS,GAEvE,IAAmB,EAAY,EAAO,EAAU,UAAU,GAAG,YAAY,GACzE,IAAiB,EAAY,EAAO,EAAU,QAAQ,GAAG,UAAU,GAEnE,IAAU,GACb,EAAE,aAAU,GAAG,KAAS,MAAQ;CAC/B,IAAM,IAAW,EAAc,eAAe,EAAM,gBAAgB,EAAE,IAAI,EACxE,cAAc,GAChB,CAAC,GACK,EAAE,SAAM,uBAAoB,EAAiB;CAoDnD,OAlDA,QAAsB;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,EAAE,UAAO,EAAgB;EAC/B,IAAI,CAAC,GAAI;EACT,IAAM,IAAW,SAAS,eAAe,CAAE;EAC3C,IAAI,GAAU;GACZ,IAAM,IAAU,EAAS,cAAc,QAAQ;GAC/C,AAAI,MACE,IACF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,IAEpF,EAAS,MAAM,YAAY,mBAAmB,MAAM;EAG1D;CACF,GAAG,CAAC,GAAM,CAAQ,CAAC,GAgBnB,QAAgB;EACd,IAAA,QAAA,IAAA,aAA6B,cAAc;EAC3C,IAAM,UACJ,OAAO,iBAAiB;GACtB,IAAM,IAAO,SAAS;GACJ,SAAS,cAAc,8CACrC,MACA,EAAK,MAAM,kBAAkB,WAAQ,EAAK,MAAM,gBAAgB,KAChE,EAAK,aAAa,YAAY,KAAG,EAAK,gBAAgB,YAAY,GAClE,EAAK,aAAa,OAAO,MAAM,MAAI,EAAK,gBAAgB,OAAO;EACrE,GAAG,GAAG;EAIR,OAFK,KAAM,EAAqB,SAEnB;GACX,EAAqB;EACvB;CACF,GAAG,CAAC,CAAI,CAAC,GAGP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,CAAiB,CAAA,GACjB,kBAAC,GAAD,EAAA,UACE,kBAAC,EAAU,SAAX;EAAwB;EAAK,GAAI;EAC9B;CACgB,CAAA,EACH,CAAA,CAClB,EAAA,CAAA;AAEN,CACF;AACA,EAAQ,cAAc,EAAU,QAAQ;AAExC,IAAa,IAAgB,EAAY,EAAO,CAAO,GAAG,SAAS,GACtD,IAAgB,EAAU"}
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css */const e=require("./components/accordion/Accordion.cjs"),t=require("./components/button/Button.cjs"),n=require("./components/checkbox/Checkbox.cjs"),r=require("./components/icon-button/IconButton.cjs"),i=require("./components/drawer/Drawer.cjs"),
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css */const e=require("./components/accordion/Accordion.cjs"),t=require("./components/button/Button.cjs"),n=require("./components/checkbox/Checkbox.cjs"),r=require("./components/icon-button/IconButton.cjs"),i=require("./components/drawer/Drawer.cjs"),ee=require("./components/form/FormControl.cjs"),a=require("./components/tooltip/Tooltip.cjs"),o=require("./components/form/FormLabel.cjs"),s=require("./components/form/FormHelperText.cjs"),c=require("./components/heading/Heading.cjs"),l=require("./components/switch/Switch.cjs"),u=require("./components/text/Text.cjs"),d=require("./components/textarea/Textarea.cjs"),f=require("./components/tabs/Tabs.cjs"),te=require("./components/select/Select.cjs"),ne=require("./components/select-language/SelectLanguage.cjs"),re=require("./components/input/Input.cjs"),p=require("./components/input/HighlightedInput.cjs"),m=require("./components/input/InputAddon.cjs"),h=require("./components/input/InputGroup.cjs"),g=require("./components/input/PhoneNumberInput.cjs"),_=require("./components/box/Box.cjs"),v=require("./components/date-picker/DatePicker.cjs"),y=require("./components/tag/Tag.cjs"),b=require("./components/radio-button-group/RadioButtonGroup.cjs"),x=require("./components/radio-group/RadioGroup.cjs"),S=require("./components/chip/Chip.cjs"),C=require("./components/action-card/ActionCard.cjs"),w=require("./components/alert/Alert.cjs"),T=require("./components/table/Table.cjs"),E=require("./components/breadcrumb/Breadcrumb.cjs"),D=require("./components/popover/Popover.cjs"),O=require("./components/pagination/Pagination.cjs"),k=require("./components/illustration/Illustration.cjs"),A=require("./components/button-filter/ButtonFilter.cjs"),j=require("./components/status-tag-select/StatusTagSelect.cjs"),M=require("./components/switch-card/namespace.cjs"),N=require("./components/radio-card-group/namespace.cjs"),P=require("./components/checkbox-card/namespace.cjs"),F=require("./components/combobox/Combobox.cjs"),I=require("./components/icon/Icon.cjs"),ie=require("./components/collapsible/styled.cjs"),L=require("./components/dialog/styled.cjs"),R=require("./components/avatar/styled.cjs"),z=require("./components/menu/Menu.cjs"),B=require("./components/flag/styled.cjs"),V=require("./components/chat/ChatMessage.cjs"),H=require("./components/chat/ChatDocumentMessage.cjs"),U=require("./components/chat/ChatProfileAvatar.cjs"),W=require("./components/chat/Chat.cjs"),G=require("./components/chat/ChatScoreBreakdown.cjs"),K=require("./components/chat/ChatTextInput.cjs"),q=require("./components/app/price-tag/PriceTag.cjs"),J=require("./components/app/product-card-catalog/styled.cjs"),Y=require("./components/app/navigation/AppNavigation.cjs"),ae=require("./components/app/navigation/language-select/AppNavigationLanguageSelect.cjs"),oe=require("./components/app/mobile-navigation/MobileNavigation.cjs"),se=require("./components/app/mobile-card/MobileCardShell.cjs"),ce=require("./components/app/mobile-card/MobileCardHeader.cjs"),le=require("./components/app/mobile-card/MobileCardNotificationBadge.cjs"),X=require("./components/app/mobile-card/MobileCardEntityRow.cjs"),Z=require("./components/app/mobile-card/MobileCardSkeleton.cjs"),ue=require("./preset.cjs");let Q=require("@ark-ui/react"),$=require("react-phone-number-input");exports.Accordion=e.Accordion,exports.AccordionItem=e.AccordionItem,exports.AccordionItemContent=e.AccordionItemContent,exports.AccordionItemIndicator=e.AccordionItemIndicator,exports.AccordionItemTrigger=e.AccordionItemTrigger,exports.ActionCard=C.ActionCard,exports.ActionCardDescription=C.ActionCardDescription,exports.ActionCardTitle=C.ActionCardTitle,exports.Alert=w.Alert,Object.defineProperty(exports,"AppNavigation",{enumerable:!0,get:function(){return Y.AppNavigation_exports}}),exports.AppNavigationLanguageSelect=ae.AppNavigationLanguageSelect,Object.defineProperty(exports,"Avatar",{enumerable:!0,get:function(){return R.styled_exports}}),exports.Box=_.Box,exports.Breadcrumb=E.Breadcrumb,exports.BreadcrumbItem=E.BreadcrumbItem,exports.BreadcrumbLink=E.BreadcrumbLink,exports.Button=t.Button,exports.ButtonFilter=A.ButtonFilter,Object.defineProperty(exports,"Chat",{enumerable:!0,get:function(){return W.Chat_exports}}),exports.ChatDocumentMessage=H.ChatDocumentMessage,exports.ChatMessage=V.ChatMessage,exports.ChatProfileAvatar=U.ChatProfileAvatar,exports.ChatScoreBreakdown=G.ChatScoreBreakdown,exports.ChatTextInput=K.ChatTextInput,exports.Checkbox=n.Checkbox,Object.defineProperty(exports,"CheckboxCard",{enumerable:!0,get:function(){return P.namespace_exports}}),exports.CheckboxGroup=n.CheckboxGroup,exports.Chip=S.Chip,exports.ChipAvatar=S.ChipAvatar,exports.ChipClearTrigger=S.ChipClearTrigger,exports.ChipLabel=S.ChipLabel,Object.defineProperty(exports,"Collapsible",{enumerable:!0,get:function(){return ie.styled_exports}}),exports.Combobox=F.Combobox,exports.DatePicker=v.DatePicker,Object.defineProperty(exports,"Dialog",{enumerable:!0,get:function(){return L.styled_exports}}),exports.Drawer=i.Drawer,exports.DrawerBody=i.DrawerBody,exports.DrawerCloseTrigger=i.DrawerCloseTrigger,exports.DrawerContent=i.DrawerContent,exports.DrawerContext=i.DrawerContext,exports.DrawerFooter=i.DrawerFooter,exports.DrawerHeader=i.DrawerHeader,exports.DrawerTitle=i.DrawerTitle,exports.DrawerTrigger=i.DrawerTrigger,exports.Flag=B.Flag,exports.FlagCountryCodes=B.FlagCountryCodes,exports.FormControl=ee.FormControl,exports.FormHelperText=s.FormHelperText,exports.FormLabel=o.FormLabel,exports.Heading=c.Heading,exports.Highlight=p.Highlight,exports.HighlightedInput=p.HighlightedInput,exports.Icon=I.Icon,exports.IconButton=r.IconButton,exports.Illustration=k.Illustration,exports.Input=re.Input,exports.InputAddon=m.InputAddon,exports.InputGroup=h.InputGroup,exports.InputSlot=p.InputSlot,Object.defineProperty(exports,"Menu",{enumerable:!0,get:function(){return z.Menu_exports}}),exports.MobileCardEntityRow=X.MobileCardEntityRow,exports.MobileCardHeader=ce.MobileCardHeader,exports.MobileCardNotificationBadge=le.MobileCardNotificationBadge,exports.MobileCardShell=se.MobileCardShell,exports.MobileCardSkeleton=Z.MobileCardSkeleton,exports.MobileCardSkeletonList=Z.MobileCardSkeletonList,Object.defineProperty(exports,"MobileNavigation",{enumerable:!0,get:function(){return oe.MobileNavigation_exports}}),exports.Pagination=O.Pagination,exports.PhoneNumberInput=g.PhoneNumberInput,exports.Popover=D.Popover,exports.PopoverAnchor=D.PopoverAnchor,exports.PopoverCloseTrigger=D.PopoverCloseTrigger,exports.PopoverContent=D.PopoverContent,exports.PopoverContext=D.PopoverContext,exports.PopoverTrigger=D.PopoverTrigger,exports.PriceTag=q.PriceTag,Object.defineProperty(exports,"ProductCardCatalog",{enumerable:!0,get:function(){return J.styled_exports}}),exports.RadioButtonGroup=b.RadioButtonGroup,exports.RadioButtonGroupItem=b.RadioButtonGroupItem,exports.RadioButtonGroupLabel=b.RadioButtonGroupLabel,Object.defineProperty(exports,"RadioCardGroup",{enumerable:!0,get:function(){return N.namespace_exports}}),exports.RadioGroup=x.RadioGroup,exports.RadioGroupItem=x.RadioGroupItem,exports.RadioGroupLabel=x.RadioGroupLabel,exports.Renderer=p.Renderer,exports.Root=p.Root,exports.Select=te.Select,exports.SelectLanguage=ne.SelectLanguage,exports.SkeletonBlock=Z.SkeletonBlock,exports.StatusTagSelect=j.StatusTagSelect,exports.Switch=l.Switch,Object.defineProperty(exports,"SwitchCard",{enumerable:!0,get:function(){return M.namespace_exports}}),exports.Table=T.Table,exports.TableContainer=T.TableContainer,exports.TableEmptyRow=T.TableEmptyRow,exports.TableGroupTitle=T.TableGroupTitle,exports.Tabs=f.Tabs,exports.TabsChip=f.TabsChip,exports.TabsContent=f.TabsContent,exports.TabsList=f.TabsList,exports.TabsTrigger=f.TabsTrigger,exports.Tag=y.Tag,exports.Tbody=T.Tbody,exports.Td=T.Td,exports.Text=u.Text,exports.Textarea=d.Textarea,exports.Th=T.Th,exports.Thead=T.Thead,exports.Tooltip=a.Tooltip,exports.Tr=T.Tr,Object.defineProperty(exports,"createListCollection",{enumerable:!0,get:function(){return Q.createListCollection}}),Object.defineProperty(exports,"createToaster",{enumerable:!0,get:function(){return Q.createToaster}}),Object.defineProperty(exports,"formatPhoneNumber",{enumerable:!0,get:function(){return $.formatPhoneNumber}}),Object.defineProperty(exports,"formatPhoneNumberIntl",{enumerable:!0,get:function(){return $.formatPhoneNumberIntl}}),Object.defineProperty(exports,"getCountries",{enumerable:!0,get:function(){return $.getCountries}}),Object.defineProperty(exports,"getCountryCallingCode",{enumerable:!0,get:function(){return $.getCountryCallingCode}}),Object.defineProperty(exports,"isPossiblePhoneNumber",{enumerable:!0,get:function(){return $.isPossiblePhoneNumber}}),Object.defineProperty(exports,"isSupportedCountry",{enumerable:!0,get:function(){return $.isSupportedCountry}}),Object.defineProperty(exports,"isValidPhoneNumber",{enumerable:!0,get:function(){return $.isValidPhoneNumber}}),Object.defineProperty(exports,"parseColor",{enumerable:!0,get:function(){return Q.parseColor}}),Object.defineProperty(exports,"parseDate",{enumerable:!0,get:function(){return Q.parseDate}}),Object.defineProperty(exports,"parsePhoneNumber",{enumerable:!0,get:function(){return $.parsePhoneNumber}}),exports.preset=ue.preset,Object.defineProperty(exports,"useAccordion",{enumerable:!0,get:function(){return Q.useAccordion}});
|
package/dist/index.js
CHANGED
|
@@ -50,18 +50,19 @@ import { ChatMessage as ze } from "./components/chat/ChatMessage.js";
|
|
|
50
50
|
import { ChatDocumentMessage as Be } from "./components/chat/ChatDocumentMessage.js";
|
|
51
51
|
import { ChatProfileAvatar as Ve } from "./components/chat/ChatProfileAvatar.js";
|
|
52
52
|
import { Chat_exports as He } from "./components/chat/Chat.js";
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
|
|
53
|
+
import { ChatScoreBreakdown as Ue } from "./components/chat/ChatScoreBreakdown.js";
|
|
54
|
+
import { ChatTextInput as We } from "./components/chat/ChatTextInput.js";
|
|
55
|
+
import { PriceTag as Ge } from "./components/app/price-tag/PriceTag.js";
|
|
56
|
+
import { styled_exports as Ke } from "./components/app/product-card-catalog/styled.js";
|
|
57
|
+
import { AppNavigation_exports as qe } from "./components/app/navigation/AppNavigation.js";
|
|
58
|
+
import { AppNavigationLanguageSelect as Je } from "./components/app/navigation/language-select/AppNavigationLanguageSelect.js";
|
|
59
|
+
import { MobileNavigation_exports as Ye } from "./components/app/mobile-navigation/MobileNavigation.js";
|
|
60
|
+
import { MobileCardShell as Xe } from "./components/app/mobile-card/MobileCardShell.js";
|
|
61
|
+
import { MobileCardHeader as Ze } from "./components/app/mobile-card/MobileCardHeader.js";
|
|
62
|
+
import { MobileCardNotificationBadge as Qe } from "./components/app/mobile-card/MobileCardNotificationBadge.js";
|
|
63
|
+
import { MobileCardEntityRow as $e } from "./components/app/mobile-card/MobileCardEntityRow.js";
|
|
64
|
+
import { MobileCardSkeleton as et, MobileCardSkeletonList as tt, SkeletonBlock as nt } from "./components/app/mobile-card/MobileCardSkeleton.js";
|
|
65
|
+
import { preset as rt } from "./preset.js";
|
|
66
|
+
import { createListCollection as it, createToaster as at, parseColor as ot, parseDate as st } from "@ark-ui/react";
|
|
67
|
+
import { formatPhoneNumber as ct, formatPhoneNumberIntl as lt, getCountries as ut, getCountryCallingCode as dt, isPossiblePhoneNumber as ft, isSupportedCountry as pt, isValidPhoneNumber as mt, parsePhoneNumber as ht } from "react-phone-number-input";
|
|
68
|
+
export { e as Accordion, t as AccordionItem, n as AccordionItemContent, r as AccordionItemIndicator, i as AccordionItemTrigger, ne as ActionCard, re as ActionCardDescription, ie as ActionCardTitle, ae as Alert, qe as AppNavigation, Je as AppNavigationLanguageSelect, Fe as Avatar, U as Box, he as Breadcrumb, ge as BreadcrumbItem, _e as BreadcrumbLink, o as Button, Ee as ButtonFilter, He as Chat, Be as ChatDocumentMessage, ze as ChatMessage, Ve as ChatProfileAvatar, Ue as ChatScoreBreakdown, We as ChatTextInput, s as Checkbox, Ae as CheckboxCard, c as CheckboxGroup, Q as Chip, $ as ChipAvatar, ee as ChipClearTrigger, te as ChipLabel, Ne as Collapsible, je as Combobox, W as DatePicker, Pe as Dialog, u as Drawer, d as DrawerBody, f as DrawerCloseTrigger, p as DrawerContent, m as DrawerContext, h as DrawerFooter, g as DrawerHeader, _ as DrawerTitle, v as DrawerTrigger, Le as Flag, Re as FlagCountryCodes, y as FormControl, S as FormHelperText, x as FormLabel, C as Heading, F as Highlight, I as HighlightedInput, Me as Icon, l as IconButton, Te as Illustration, P as Input, B as InputAddon, V as InputGroup, L as InputSlot, Ie as Menu, $e as MobileCardEntityRow, Ze as MobileCardHeader, Qe as MobileCardNotificationBadge, Xe as MobileCardShell, et as MobileCardSkeleton, tt as MobileCardSkeletonList, Ye as MobileNavigation, we as Pagination, H as PhoneNumberInput, ve as Popover, ye as PopoverAnchor, be as PopoverCloseTrigger, xe as PopoverContent, Se as PopoverContext, Ce as PopoverTrigger, Ge as PriceTag, Ke as ProductCardCatalog, K as RadioButtonGroup, q as RadioButtonGroupItem, J as RadioButtonGroupLabel, ke as RadioCardGroup, Y as RadioGroup, X as RadioGroupItem, Z as RadioGroupLabel, R as Renderer, z as Root, M as Select, N as SelectLanguage, nt as SkeletonBlock, De as StatusTagSelect, w as Switch, Oe as SwitchCard, oe as Table, se as TableContainer, ce as TableEmptyRow, le as TableGroupTitle, D as Tabs, O as TabsChip, k as TabsContent, A as TabsList, j as TabsTrigger, G as Tag, ue as Tbody, de as Td, T as Text, E as Textarea, fe as Th, pe as Thead, b as Tooltip, me as Tr, it as createListCollection, at as createToaster, ct as formatPhoneNumber, lt as formatPhoneNumberIntl, ut as getCountries, dt as getCountryCallingCode, ft as isPossiblePhoneNumber, pt as isSupportedCountry, mt as isValidPhoneNumber, ot as parseColor, st as parseDate, ht as parsePhoneNumber, rt as preset, a as useAccordion };
|