@tomny-dev/uzi 0.3.0 → 0.4.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/README.md +28 -0
- package/dist/components/data-table/DataTable.d.ts +36 -0
- package/dist/components/data-table/DataTable.d.ts.map +1 -0
- package/dist/components/data-table/DataTable.test.d.ts +2 -0
- package/dist/components/data-table/DataTable.test.d.ts.map +1 -0
- package/dist/components/empty-state-page/EmptyStatePage.d.ts +26 -0
- package/dist/components/empty-state-page/EmptyStatePage.d.ts.map +1 -0
- package/dist/components/empty-state-page/EmptyStatePage.test.d.ts +2 -0
- package/dist/components/empty-state-page/EmptyStatePage.test.d.ts.map +1 -0
- package/dist/components/error-page/ErrorPage.d.ts +32 -0
- package/dist/components/error-page/ErrorPage.d.ts.map +1 -0
- package/dist/components/error-page/ErrorPage.test.d.ts +2 -0
- package/dist/components/error-page/ErrorPage.test.d.ts.map +1 -0
- package/dist/components/settings-page/SettingsPage.d.ts +38 -0
- package/dist/components/settings-page/SettingsPage.d.ts.map +1 -0
- package/dist/components/settings-page/SettingsPage.test.d.ts +2 -0
- package/dist/components/settings-page/SettingsPage.test.d.ts.map +1 -0
- package/dist/index.cjs +10 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -1
- package/dist/index63.js +63 -0
- package/dist/index63.js.map +1 -0
- package/dist/index64.cjs +91 -0
- package/dist/index64.cjs.map +1 -0
- package/dist/index64.js +246 -0
- package/dist/index64.js.map +1 -0
- package/dist/index65.cjs +248 -0
- package/dist/index65.cjs.map +1 -0
- package/dist/index65.js +47 -0
- package/dist/index65.js.map +1 -0
- package/dist/index66.cjs +67 -0
- package/dist/index66.cjs.map +1 -0
- package/dist/index66.js +86 -0
- package/dist/index66.js.map +1 -0
- package/dist/index67.cjs +88 -0
- package/dist/index67.cjs.map +1 -0
- package/dist/index67.js +25 -0
- package/dist/index67.js.map +1 -0
- package/dist/index68.cjs +34 -0
- package/dist/index68.cjs.map +1 -0
- package/dist/index68.js +101 -0
- package/dist/index68.js.map +1 -0
- package/dist/index69.cjs +105 -0
- package/dist/index69.cjs.map +1 -0
- package/dist/index69.js +23 -0
- package/dist/index69.js.map +1 -0
- package/dist/index70.cjs +31 -0
- package/dist/index70.cjs.map +1 -0
- package/dist/index70.js +159 -0
- package/dist/index70.js.map +1 -0
- package/dist/index71.cjs +161 -0
- package/dist/index71.cjs.map +1 -0
- package/dist/style.css +532 -0
- package/package.json +9 -1
package/dist/index70.js
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { cx } from "./index3.js";
|
|
2
|
+
import empty_state_page_module_default from "./index69.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/components/empty-state-page/EmptyStatePage.tsx
|
|
6
|
+
/** Inline SVG icon for the "no data" variant */
|
|
7
|
+
function NoDataIcon() {
|
|
8
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
9
|
+
viewBox: "0 0 48 48",
|
|
10
|
+
fill: "none",
|
|
11
|
+
className: empty_state_page_module_default.iconSvg,
|
|
12
|
+
"aria-hidden": "true",
|
|
13
|
+
children: [
|
|
14
|
+
/* @__PURE__ */ jsx("rect", {
|
|
15
|
+
x: "8",
|
|
16
|
+
y: "10",
|
|
17
|
+
width: "32",
|
|
18
|
+
height: "28",
|
|
19
|
+
rx: "4",
|
|
20
|
+
stroke: "currentColor",
|
|
21
|
+
strokeWidth: "2"
|
|
22
|
+
}),
|
|
23
|
+
/* @__PURE__ */ jsx("line", {
|
|
24
|
+
x1: "8",
|
|
25
|
+
y1: "18",
|
|
26
|
+
x2: "40",
|
|
27
|
+
y2: "18",
|
|
28
|
+
stroke: "currentColor",
|
|
29
|
+
strokeWidth: "2"
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ jsx("line", {
|
|
32
|
+
x1: "16",
|
|
33
|
+
y1: "24",
|
|
34
|
+
x2: "28",
|
|
35
|
+
y2: "24",
|
|
36
|
+
stroke: "currentColor",
|
|
37
|
+
strokeWidth: "2",
|
|
38
|
+
strokeLinecap: "round"
|
|
39
|
+
}),
|
|
40
|
+
/* @__PURE__ */ jsx("line", {
|
|
41
|
+
x1: "16",
|
|
42
|
+
y1: "30",
|
|
43
|
+
x2: "32",
|
|
44
|
+
y2: "30",
|
|
45
|
+
stroke: "currentColor",
|
|
46
|
+
strokeWidth: "2",
|
|
47
|
+
strokeLinecap: "round"
|
|
48
|
+
})
|
|
49
|
+
]
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
/** Inline SVG icon for the "no connection" variant */
|
|
53
|
+
function NoConnectionIcon() {
|
|
54
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
55
|
+
viewBox: "0 0 48 48",
|
|
56
|
+
fill: "none",
|
|
57
|
+
className: empty_state_page_module_default.iconSvg,
|
|
58
|
+
"aria-hidden": "true",
|
|
59
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
60
|
+
cx: "24",
|
|
61
|
+
cy: "24",
|
|
62
|
+
r: "14",
|
|
63
|
+
stroke: "currentColor",
|
|
64
|
+
strokeWidth: "2"
|
|
65
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
66
|
+
d: "M18 18l12 12M30 18L18 30",
|
|
67
|
+
stroke: "currentColor",
|
|
68
|
+
strokeWidth: "2",
|
|
69
|
+
strokeLinecap: "round"
|
|
70
|
+
})]
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
/** Inline SVG icon for the "no permissions" variant */
|
|
74
|
+
function NoPermissionsIcon() {
|
|
75
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
76
|
+
viewBox: "0 0 48 48",
|
|
77
|
+
fill: "none",
|
|
78
|
+
className: empty_state_page_module_default.iconSvg,
|
|
79
|
+
"aria-hidden": "true",
|
|
80
|
+
children: [
|
|
81
|
+
/* @__PURE__ */ jsx("rect", {
|
|
82
|
+
x: "12",
|
|
83
|
+
y: "20",
|
|
84
|
+
width: "24",
|
|
85
|
+
height: "18",
|
|
86
|
+
rx: "3",
|
|
87
|
+
stroke: "currentColor",
|
|
88
|
+
strokeWidth: "2"
|
|
89
|
+
}),
|
|
90
|
+
/* @__PURE__ */ jsx("path", {
|
|
91
|
+
d: "M20 20v-6a4 4 0 018 0v6",
|
|
92
|
+
stroke: "currentColor",
|
|
93
|
+
strokeWidth: "2"
|
|
94
|
+
}),
|
|
95
|
+
/* @__PURE__ */ jsx("circle", {
|
|
96
|
+
cx: "24",
|
|
97
|
+
cy: "30",
|
|
98
|
+
r: "2",
|
|
99
|
+
fill: "currentColor"
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
var variantMap = {
|
|
105
|
+
noData: {
|
|
106
|
+
icon: NoDataIcon,
|
|
107
|
+
title: "No data yet",
|
|
108
|
+
description: "When you add data, it will appear here."
|
|
109
|
+
},
|
|
110
|
+
noConnection: {
|
|
111
|
+
icon: NoConnectionIcon,
|
|
112
|
+
title: "No connection",
|
|
113
|
+
description: "Check your network settings and try again."
|
|
114
|
+
},
|
|
115
|
+
noPermissions: {
|
|
116
|
+
icon: NoPermissionsIcon,
|
|
117
|
+
title: "Access denied",
|
|
118
|
+
description: "You don't have permission to view this content."
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
/**
|
|
122
|
+
* EmptyStatePage — a Card-based page template with variant icons, title, description, and actions.
|
|
123
|
+
*
|
|
124
|
+
* Layout:
|
|
125
|
+
* Card → Icon → Title → Description → Actions
|
|
126
|
+
*/
|
|
127
|
+
function EmptyStatePage({ variant = "noData", title, description, primaryAction, secondaryAction, icon, className }) {
|
|
128
|
+
const { icon: VariantIcon, title: defaultTitle, description: defaultDescription } = variantMap[variant];
|
|
129
|
+
return /* @__PURE__ */ jsx("div", {
|
|
130
|
+
className: cx(empty_state_page_module_default.wrapper, className),
|
|
131
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
132
|
+
className: empty_state_page_module_default.card,
|
|
133
|
+
children: [
|
|
134
|
+
/* @__PURE__ */ jsx("div", {
|
|
135
|
+
className: empty_state_page_module_default.iconArea,
|
|
136
|
+
children: icon ?? /* @__PURE__ */ jsx(VariantIcon, {})
|
|
137
|
+
}),
|
|
138
|
+
/* @__PURE__ */ jsxs("div", {
|
|
139
|
+
className: empty_state_page_module_default.content,
|
|
140
|
+
children: [/* @__PURE__ */ jsx("h2", {
|
|
141
|
+
className: empty_state_page_module_default.title,
|
|
142
|
+
children: title ?? defaultTitle
|
|
143
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
144
|
+
className: empty_state_page_module_default.description,
|
|
145
|
+
children: description ?? defaultDescription
|
|
146
|
+
})]
|
|
147
|
+
}),
|
|
148
|
+
(primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", {
|
|
149
|
+
className: empty_state_page_module_default.actions,
|
|
150
|
+
children: [primaryAction, secondaryAction]
|
|
151
|
+
})
|
|
152
|
+
]
|
|
153
|
+
})
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
//#endregion
|
|
157
|
+
export { EmptyStatePage };
|
|
158
|
+
|
|
159
|
+
//# sourceMappingURL=index70.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index70.js","names":[],"sources":["../src/components/empty-state-page/EmptyStatePage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./empty-state-page.module.css\";\n\nexport type EmptyStatePageVariant = \"noData\" | \"noConnection\" | \"noPermissions\";\n\nexport interface EmptyStatePageProps {\n /** Page variant driving icon, title, description defaults */\n variant?: EmptyStatePageVariant;\n /** Optional title override */\n title?: string;\n /** Optional description override */\n description?: string;\n /** Primary action button */\n primaryAction?: React.ReactNode;\n /** Secondary action button */\n secondaryAction?: React.ReactNode;\n /** Optional custom SVG icon (overrides variant icon) */\n icon?: React.ReactNode;\n /** Additional class name */\n className?: string;\n}\n\n/** Inline SVG icon for the \"no data\" variant */\nfunction NoDataIcon() {\n return (\n <svg viewBox=\"0 0 48 48\" fill=\"none\" className={styles.iconSvg} aria-hidden=\"true\">\n <rect x=\"8\" y=\"10\" width=\"32\" height=\"28\" rx=\"4\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <line x1=\"8\" y1=\"18\" x2=\"40\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <line x1=\"16\" y1=\"24\" x2=\"28\" y2=\"24\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n <line x1=\"16\" y1=\"30\" x2=\"32\" y2=\"30\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n </svg>\n );\n}\n\n/** Inline SVG icon for the \"no connection\" variant */\nfunction NoConnectionIcon() {\n return (\n <svg viewBox=\"0 0 48 48\" fill=\"none\" className={styles.iconSvg} aria-hidden=\"true\">\n <circle cx=\"24\" cy=\"24\" r=\"14\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path d=\"M18 18l12 12M30 18L18 30\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n </svg>\n );\n}\n\n/** Inline SVG icon for the \"no permissions\" variant */\nfunction NoPermissionsIcon() {\n return (\n <svg viewBox=\"0 0 48 48\" fill=\"none\" className={styles.iconSvg} aria-hidden=\"true\">\n <rect x=\"12\" y=\"20\" width=\"24\" height=\"18\" rx=\"3\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path d=\"M20 20v-6a4 4 0 018 0v6\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <circle cx=\"24\" cy=\"30\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n}\n\nconst variantMap: Record<\n EmptyStatePageVariant,\n { icon: React.FC; title: string; description: string }\n> = {\n noData: {\n icon: NoDataIcon,\n title: \"No data yet\",\n description: \"When you add data, it will appear here.\",\n },\n noConnection: {\n icon: NoConnectionIcon,\n title: \"No connection\",\n description: \"Check your network settings and try again.\",\n },\n noPermissions: {\n icon: NoPermissionsIcon,\n title: \"Access denied\",\n description: \"You don't have permission to view this content.\",\n },\n};\n\n/**\n * EmptyStatePage — a Card-based page template with variant icons, title, description, and actions.\n *\n * Layout:\n * Card → Icon → Title → Description → Actions\n */\nexport function EmptyStatePage({\n variant = \"noData\",\n title,\n description,\n primaryAction,\n secondaryAction,\n icon,\n className,\n}: EmptyStatePageProps) {\n const { icon: VariantIcon, title: defaultTitle, description: defaultDescription } = variantMap[variant];\n\n return (\n <div className={cx(styles.wrapper, className)}>\n <div className={styles.card}>\n <div className={styles.iconArea}>\n {icon ?? <VariantIcon />}\n </div>\n <div className={styles.content}>\n <h2 className={styles.title}>{title ?? defaultTitle}</h2>\n <p className={styles.description}>{description ?? defaultDescription}</p>\n </div>\n {(primaryAction || secondaryAction) && (\n <div className={styles.actions}>\n {primaryAction}\n {secondaryAction}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;AAwBA,SAAS,aAAa;CACpB,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,WAAW,gCAAO;EAAS,eAAY;YAA5E;GACE,oBAAC,QAAD;IAAM,GAAE;IAAI,GAAE;IAAK,OAAM;IAAK,QAAO;IAAK,IAAG;IAAI,QAAO;IAAe,aAAY;GAAK,CAAA;GACxF,oBAAC,QAAD;IAAM,IAAG;IAAI,IAAG;IAAK,IAAG;IAAK,IAAG;IAAK,QAAO;IAAe,aAAY;GAAK,CAAA;GAC5E,oBAAC,QAAD;IAAM,IAAG;IAAK,IAAG;IAAK,IAAG;IAAK,IAAG;IAAK,QAAO;IAAe,aAAY;IAAI,eAAc;GAAS,CAAA;GACnG,oBAAC,QAAD;IAAM,IAAG;IAAK,IAAG;IAAK,IAAG;IAAK,IAAG;IAAK,QAAO;IAAe,aAAY;IAAI,eAAc;GAAS,CAAA;EAChG;;AAET;;AAGA,SAAS,mBAAmB;CAC1B,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,WAAW,gCAAO;EAAS,eAAY;YAA5E,CACE,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAK,QAAO;GAAe,aAAY;EAAK,CAAA,GACtE,oBAAC,QAAD;GAAM,GAAE;GAA2B,QAAO;GAAe,aAAY;GAAI,eAAc;EAAS,CAAA,CAC7F;;AAET;;AAGA,SAAS,oBAAoB;CAC3B,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAO,WAAW,gCAAO;EAAS,eAAY;YAA5E;GACE,oBAAC,QAAD;IAAM,GAAE;IAAK,GAAE;IAAK,OAAM;IAAK,QAAO;IAAK,IAAG;IAAI,QAAO;IAAe,aAAY;GAAK,CAAA;GACzF,oBAAC,QAAD;IAAM,GAAE;IAA0B,QAAO;IAAe,aAAY;GAAK,CAAA;GACzE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,MAAK;GAAgB,CAAA;EAChD;;AAET;AAEA,IAAM,aAGF;CACF,QAAQ;EACN,MAAM;EACN,OAAO;EACP,aAAa;CACf;CACA,cAAc;EACZ,MAAM;EACN,OAAO;EACP,aAAa;CACf;CACA,eAAe;EACb,MAAM;EACN,OAAO;EACP,aAAa;CACf;AACF;;;;;;;AAQA,SAAgB,eAAe,EAC7B,UAAU,UACV,OACA,aACA,eACA,iBACA,MACA,aACsB;CACtB,MAAM,EAAE,MAAM,aAAa,OAAO,cAAc,aAAa,uBAAuB,WAAW;CAE/F,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,gCAAO,SAAS,SAAS;YAC1C,qBAAC,OAAD;GAAK,WAAW,gCAAO;aAAvB;IACE,oBAAC,OAAD;KAAK,WAAW,gCAAO;eACpB,QAAQ,oBAAC,aAAD,CAAc,CAAA;IACpB,CAAA;IACL,qBAAC,OAAD;KAAK,WAAW,gCAAO;eAAvB,CACE,oBAAC,MAAD;MAAI,WAAW,gCAAO;gBAAQ,SAAS;KAAiB,CAAA,GACxD,oBAAC,KAAD;MAAG,WAAW,gCAAO;gBAAc,eAAe;KAAsB,CAAA,CACrE;;KACH,iBAAiB,oBACjB,qBAAC,OAAD;KAAK,WAAW,gCAAO;eAAvB,CACG,eACA,eACE;;GAEJ;;CACF,CAAA;AAET"}
|
package/dist/index71.cjs
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
const require_runtime = require("./index2.cjs");
|
|
2
|
+
const require_cx = require("./index4.cjs");
|
|
3
|
+
const require_empty_state_page_module = require("./index70.cjs");
|
|
4
|
+
let react = require("react");
|
|
5
|
+
react = require_runtime.__toESM(react, 1);
|
|
6
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
+
//#region src/components/empty-state-page/EmptyStatePage.tsx
|
|
8
|
+
/** Inline SVG icon for the "no data" variant */
|
|
9
|
+
function NoDataIcon() {
|
|
10
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
11
|
+
viewBox: "0 0 48 48",
|
|
12
|
+
fill: "none",
|
|
13
|
+
className: require_empty_state_page_module.default.iconSvg,
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
17
|
+
x: "8",
|
|
18
|
+
y: "10",
|
|
19
|
+
width: "32",
|
|
20
|
+
height: "28",
|
|
21
|
+
rx: "4",
|
|
22
|
+
stroke: "currentColor",
|
|
23
|
+
strokeWidth: "2"
|
|
24
|
+
}),
|
|
25
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
26
|
+
x1: "8",
|
|
27
|
+
y1: "18",
|
|
28
|
+
x2: "40",
|
|
29
|
+
y2: "18",
|
|
30
|
+
stroke: "currentColor",
|
|
31
|
+
strokeWidth: "2"
|
|
32
|
+
}),
|
|
33
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
34
|
+
x1: "16",
|
|
35
|
+
y1: "24",
|
|
36
|
+
x2: "28",
|
|
37
|
+
y2: "24",
|
|
38
|
+
stroke: "currentColor",
|
|
39
|
+
strokeWidth: "2",
|
|
40
|
+
strokeLinecap: "round"
|
|
41
|
+
}),
|
|
42
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
43
|
+
x1: "16",
|
|
44
|
+
y1: "30",
|
|
45
|
+
x2: "32",
|
|
46
|
+
y2: "30",
|
|
47
|
+
stroke: "currentColor",
|
|
48
|
+
strokeWidth: "2",
|
|
49
|
+
strokeLinecap: "round"
|
|
50
|
+
})
|
|
51
|
+
]
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
/** Inline SVG icon for the "no connection" variant */
|
|
55
|
+
function NoConnectionIcon() {
|
|
56
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
57
|
+
viewBox: "0 0 48 48",
|
|
58
|
+
fill: "none",
|
|
59
|
+
className: require_empty_state_page_module.default.iconSvg,
|
|
60
|
+
"aria-hidden": "true",
|
|
61
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
62
|
+
cx: "24",
|
|
63
|
+
cy: "24",
|
|
64
|
+
r: "14",
|
|
65
|
+
stroke: "currentColor",
|
|
66
|
+
strokeWidth: "2"
|
|
67
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
68
|
+
d: "M18 18l12 12M30 18L18 30",
|
|
69
|
+
stroke: "currentColor",
|
|
70
|
+
strokeWidth: "2",
|
|
71
|
+
strokeLinecap: "round"
|
|
72
|
+
})]
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
/** Inline SVG icon for the "no permissions" variant */
|
|
76
|
+
function NoPermissionsIcon() {
|
|
77
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
78
|
+
viewBox: "0 0 48 48",
|
|
79
|
+
fill: "none",
|
|
80
|
+
className: require_empty_state_page_module.default.iconSvg,
|
|
81
|
+
"aria-hidden": "true",
|
|
82
|
+
children: [
|
|
83
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
84
|
+
x: "12",
|
|
85
|
+
y: "20",
|
|
86
|
+
width: "24",
|
|
87
|
+
height: "18",
|
|
88
|
+
rx: "3",
|
|
89
|
+
stroke: "currentColor",
|
|
90
|
+
strokeWidth: "2"
|
|
91
|
+
}),
|
|
92
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
93
|
+
d: "M20 20v-6a4 4 0 018 0v6",
|
|
94
|
+
stroke: "currentColor",
|
|
95
|
+
strokeWidth: "2"
|
|
96
|
+
}),
|
|
97
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
98
|
+
cx: "24",
|
|
99
|
+
cy: "30",
|
|
100
|
+
r: "2",
|
|
101
|
+
fill: "currentColor"
|
|
102
|
+
})
|
|
103
|
+
]
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
var variantMap = {
|
|
107
|
+
noData: {
|
|
108
|
+
icon: NoDataIcon,
|
|
109
|
+
title: "No data yet",
|
|
110
|
+
description: "When you add data, it will appear here."
|
|
111
|
+
},
|
|
112
|
+
noConnection: {
|
|
113
|
+
icon: NoConnectionIcon,
|
|
114
|
+
title: "No connection",
|
|
115
|
+
description: "Check your network settings and try again."
|
|
116
|
+
},
|
|
117
|
+
noPermissions: {
|
|
118
|
+
icon: NoPermissionsIcon,
|
|
119
|
+
title: "Access denied",
|
|
120
|
+
description: "You don't have permission to view this content."
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* EmptyStatePage — a Card-based page template with variant icons, title, description, and actions.
|
|
125
|
+
*
|
|
126
|
+
* Layout:
|
|
127
|
+
* Card → Icon → Title → Description → Actions
|
|
128
|
+
*/
|
|
129
|
+
function EmptyStatePage({ variant = "noData", title, description, primaryAction, secondaryAction, icon, className }) {
|
|
130
|
+
const { icon: VariantIcon, title: defaultTitle, description: defaultDescription } = variantMap[variant];
|
|
131
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
132
|
+
className: require_cx.cx(require_empty_state_page_module.default.wrapper, className),
|
|
133
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
134
|
+
className: require_empty_state_page_module.default.card,
|
|
135
|
+
children: [
|
|
136
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
137
|
+
className: require_empty_state_page_module.default.iconArea,
|
|
138
|
+
children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VariantIcon, {})
|
|
139
|
+
}),
|
|
140
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
141
|
+
className: require_empty_state_page_module.default.content,
|
|
142
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
143
|
+
className: require_empty_state_page_module.default.title,
|
|
144
|
+
children: title ?? defaultTitle
|
|
145
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
146
|
+
className: require_empty_state_page_module.default.description,
|
|
147
|
+
children: description ?? defaultDescription
|
|
148
|
+
})]
|
|
149
|
+
}),
|
|
150
|
+
(primaryAction || secondaryAction) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
151
|
+
className: require_empty_state_page_module.default.actions,
|
|
152
|
+
children: [primaryAction, secondaryAction]
|
|
153
|
+
})
|
|
154
|
+
]
|
|
155
|
+
})
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
//#endregion
|
|
159
|
+
exports.EmptyStatePage = EmptyStatePage;
|
|
160
|
+
|
|
161
|
+
//# sourceMappingURL=index71.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index71.cjs","names":[],"sources":["../src/components/empty-state-page/EmptyStatePage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./empty-state-page.module.css\";\n\nexport type EmptyStatePageVariant = \"noData\" | \"noConnection\" | \"noPermissions\";\n\nexport interface EmptyStatePageProps {\n /** Page variant driving icon, title, description defaults */\n variant?: EmptyStatePageVariant;\n /** Optional title override */\n title?: string;\n /** Optional description override */\n description?: string;\n /** Primary action button */\n primaryAction?: React.ReactNode;\n /** Secondary action button */\n secondaryAction?: React.ReactNode;\n /** Optional custom SVG icon (overrides variant icon) */\n icon?: React.ReactNode;\n /** Additional class name */\n className?: string;\n}\n\n/** Inline SVG icon for the \"no data\" variant */\nfunction NoDataIcon() {\n return (\n <svg viewBox=\"0 0 48 48\" fill=\"none\" className={styles.iconSvg} aria-hidden=\"true\">\n <rect x=\"8\" y=\"10\" width=\"32\" height=\"28\" rx=\"4\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <line x1=\"8\" y1=\"18\" x2=\"40\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <line x1=\"16\" y1=\"24\" x2=\"28\" y2=\"24\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n <line x1=\"16\" y1=\"30\" x2=\"32\" y2=\"30\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n </svg>\n );\n}\n\n/** Inline SVG icon for the \"no connection\" variant */\nfunction NoConnectionIcon() {\n return (\n <svg viewBox=\"0 0 48 48\" fill=\"none\" className={styles.iconSvg} aria-hidden=\"true\">\n <circle cx=\"24\" cy=\"24\" r=\"14\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path d=\"M18 18l12 12M30 18L18 30\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n </svg>\n );\n}\n\n/** Inline SVG icon for the \"no permissions\" variant */\nfunction NoPermissionsIcon() {\n return (\n <svg viewBox=\"0 0 48 48\" fill=\"none\" className={styles.iconSvg} aria-hidden=\"true\">\n <rect x=\"12\" y=\"20\" width=\"24\" height=\"18\" rx=\"3\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path d=\"M20 20v-6a4 4 0 018 0v6\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <circle cx=\"24\" cy=\"30\" r=\"2\" fill=\"currentColor\" />\n </svg>\n );\n}\n\nconst variantMap: Record<\n EmptyStatePageVariant,\n { icon: React.FC; title: string; description: string }\n> = {\n noData: {\n icon: NoDataIcon,\n title: \"No data yet\",\n description: \"When you add data, it will appear here.\",\n },\n noConnection: {\n icon: NoConnectionIcon,\n title: \"No connection\",\n description: \"Check your network settings and try again.\",\n },\n noPermissions: {\n icon: NoPermissionsIcon,\n title: \"Access denied\",\n description: \"You don't have permission to view this content.\",\n },\n};\n\n/**\n * EmptyStatePage — a Card-based page template with variant icons, title, description, and actions.\n *\n * Layout:\n * Card → Icon → Title → Description → Actions\n */\nexport function EmptyStatePage({\n variant = \"noData\",\n title,\n description,\n primaryAction,\n secondaryAction,\n icon,\n className,\n}: EmptyStatePageProps) {\n const { icon: VariantIcon, title: defaultTitle, description: defaultDescription } = variantMap[variant];\n\n return (\n <div className={cx(styles.wrapper, className)}>\n <div className={styles.card}>\n <div className={styles.iconArea}>\n {icon ?? <VariantIcon />}\n </div>\n <div className={styles.content}>\n <h2 className={styles.title}>{title ?? defaultTitle}</h2>\n <p className={styles.description}>{description ?? defaultDescription}</p>\n </div>\n {(primaryAction || secondaryAction) && (\n <div className={styles.actions}>\n {primaryAction}\n {secondaryAction}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
|