@tomny-dev/uzi 0.5.0 → 0.6.0-pr.60.173.1.802e4f7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (279) hide show
  1. package/README.md +5 -2
  2. package/dist/components/card/Card.d.ts +7 -5
  3. package/dist/components/card/Card.d.ts.map +1 -1
  4. package/dist/components/page-container/PageContainer.d.ts +2 -1
  5. package/dist/components/page-container/PageContainer.d.ts.map +1 -1
  6. package/dist/components/surface/Surface.d.ts +16 -0
  7. package/dist/components/surface/Surface.d.ts.map +1 -0
  8. package/dist/components/toolbar/Toolbar.d.ts +13 -0
  9. package/dist/components/toolbar/Toolbar.d.ts.map +1 -0
  10. package/dist/index.cjs +36 -31
  11. package/dist/index.d.ts +4 -0
  12. package/dist/index.d.ts.map +1 -1
  13. package/dist/index.js +34 -32
  14. package/dist/index10.cjs.map +1 -1
  15. package/dist/index10.js +19 -15
  16. package/dist/index10.js.map +1 -1
  17. package/dist/index11.cjs +21 -18
  18. package/dist/index11.cjs.map +1 -1
  19. package/dist/index11.js +8 -15
  20. package/dist/index11.js.map +1 -1
  21. package/dist/index12.cjs +7 -14
  22. package/dist/index12.cjs.map +1 -1
  23. package/dist/index12.js +15 -37
  24. package/dist/index12.js.map +1 -1
  25. package/dist/index13.cjs +18 -52
  26. package/dist/index13.cjs.map +1 -1
  27. package/dist/index13.js +15 -77
  28. package/dist/index13.js.map +1 -1
  29. package/dist/index14.cjs +15 -80
  30. package/dist/index14.cjs.map +1 -1
  31. package/dist/index14.js +37 -13
  32. package/dist/index14.js.map +1 -1
  33. package/dist/index15.cjs +52 -18
  34. package/dist/index15.cjs.map +1 -1
  35. package/dist/index15.js +77 -9
  36. package/dist/index15.js.map +1 -1
  37. package/dist/index16.cjs +79 -8
  38. package/dist/index16.cjs.map +1 -1
  39. package/dist/index16.js +13 -41
  40. package/dist/index16.js.map +1 -1
  41. package/dist/index17.cjs +18 -60
  42. package/dist/index17.cjs.map +1 -1
  43. package/dist/index17.js +9 -428
  44. package/dist/index17.js.map +1 -1
  45. package/dist/index18.cjs +8 -430
  46. package/dist/index18.cjs.map +1 -1
  47. package/dist/index18.js +42 -4
  48. package/dist/index18.js.map +1 -1
  49. package/dist/index19.cjs +61 -5
  50. package/dist/index19.cjs.map +1 -1
  51. package/dist/index19.js +430 -13
  52. package/dist/index19.js.map +1 -1
  53. package/dist/index20.cjs +430 -12
  54. package/dist/index20.cjs.map +1 -1
  55. package/dist/index20.js +4 -4
  56. package/dist/index20.js.map +1 -1
  57. package/dist/index21.cjs +5 -5
  58. package/dist/index21.cjs.map +1 -1
  59. package/dist/index21.js +12 -9
  60. package/dist/index21.js.map +1 -1
  61. package/dist/index22.cjs +12 -9
  62. package/dist/index22.cjs.map +1 -1
  63. package/dist/index22.js +4 -4
  64. package/dist/index22.js.map +1 -1
  65. package/dist/index23.cjs +5 -5
  66. package/dist/index23.cjs.map +1 -1
  67. package/dist/index23.js +9 -12
  68. package/dist/index23.js.map +1 -1
  69. package/dist/index24.cjs +9 -12
  70. package/dist/index24.cjs.map +1 -1
  71. package/dist/index24.js +4 -38
  72. package/dist/index24.js.map +1 -1
  73. package/dist/index25.cjs +5 -55
  74. package/dist/index25.cjs.map +1 -1
  75. package/dist/index25.js +11 -116
  76. package/dist/index25.js.map +1 -1
  77. package/dist/index26.cjs +10 -116
  78. package/dist/index26.cjs.map +1 -1
  79. package/dist/index26.js +31 -19
  80. package/dist/index26.js.map +1 -1
  81. package/dist/index27.cjs +42 -24
  82. package/dist/index27.cjs.map +1 -1
  83. package/dist/index27.js +106 -93
  84. package/dist/index27.js.map +1 -1
  85. package/dist/index28.cjs +106 -93
  86. package/dist/index28.cjs.map +1 -1
  87. package/dist/index28.js +26 -23
  88. package/dist/index28.js.map +1 -1
  89. package/dist/index29.cjs +37 -25
  90. package/dist/index29.cjs.map +1 -1
  91. package/dist/index29.js +107 -26
  92. package/dist/index29.js.map +1 -1
  93. package/dist/index30.cjs +110 -37
  94. package/dist/index30.cjs.map +1 -1
  95. package/dist/index30.js +21 -113
  96. package/dist/index30.js.map +1 -1
  97. package/dist/index31.cjs +19 -125
  98. package/dist/index31.cjs.map +1 -1
  99. package/dist/index31.js +26 -17
  100. package/dist/index31.js.map +1 -1
  101. package/dist/index32.cjs +37 -20
  102. package/dist/index32.cjs.map +1 -1
  103. package/dist/index32.js +108 -104
  104. package/dist/index32.js.map +1 -1
  105. package/dist/index33.cjs +122 -103
  106. package/dist/index33.cjs.map +1 -1
  107. package/dist/index33.js +17 -4
  108. package/dist/index33.js.map +1 -1
  109. package/dist/index34.cjs +20 -5
  110. package/dist/index34.cjs.map +1 -1
  111. package/dist/index34.js +106 -58
  112. package/dist/index34.js.map +1 -1
  113. package/dist/index35.cjs +106 -57
  114. package/dist/index35.cjs.map +1 -1
  115. package/dist/index35.js +4 -22
  116. package/dist/index35.js.map +1 -1
  117. package/dist/index36.cjs +5 -31
  118. package/dist/index36.cjs.map +1 -1
  119. package/dist/index36.js +55 -44
  120. package/dist/index36.js.map +1 -1
  121. package/dist/index37.cjs +55 -44
  122. package/dist/index37.cjs.map +1 -1
  123. package/dist/index37.js +21 -31
  124. package/dist/index37.js.map +1 -1
  125. package/dist/index38.cjs +30 -45
  126. package/dist/index38.cjs.map +1 -1
  127. package/dist/index38.js +46 -141
  128. package/dist/index38.js.map +1 -1
  129. package/dist/index39.cjs +46 -141
  130. package/dist/index39.cjs.map +1 -1
  131. package/dist/index39.js +31 -41
  132. package/dist/index39.js.map +1 -1
  133. package/dist/index40.cjs +45 -60
  134. package/dist/index40.cjs.map +1 -1
  135. package/dist/index40.js +139 -163
  136. package/dist/index40.js.map +1 -1
  137. package/dist/index41.cjs +137 -161
  138. package/dist/index41.cjs.map +1 -1
  139. package/dist/index41.js +41 -12
  140. package/dist/index41.js.map +1 -1
  141. package/dist/index42.cjs +60 -14
  142. package/dist/index42.cjs.map +1 -1
  143. package/dist/index42.js +167 -15
  144. package/dist/index42.js.map +1 -1
  145. package/dist/index43.cjs +166 -14
  146. package/dist/index43.cjs.map +1 -1
  147. package/dist/index43.js +12 -15
  148. package/dist/index43.js.map +1 -1
  149. package/dist/index44.cjs +14 -21
  150. package/dist/index44.cjs.map +1 -1
  151. package/dist/index44.js +15 -28
  152. package/dist/index44.js.map +1 -1
  153. package/dist/index45.cjs +14 -27
  154. package/dist/index45.cjs.map +1 -1
  155. package/dist/index45.js +10 -8
  156. package/dist/index45.js.map +1 -1
  157. package/dist/index46.cjs +11 -8
  158. package/dist/index46.cjs.map +1 -1
  159. package/dist/index46.js +22 -15
  160. package/dist/index46.js.map +1 -1
  161. package/dist/index47.cjs +22 -15
  162. package/dist/index47.cjs.map +1 -1
  163. package/dist/index47.js +9 -13
  164. package/dist/index47.js.map +1 -1
  165. package/dist/index48.cjs +10 -16
  166. package/dist/index48.cjs.map +1 -1
  167. package/dist/index48.js +18 -25
  168. package/dist/index48.js.map +1 -1
  169. package/dist/index49.cjs +18 -25
  170. package/dist/index49.cjs.map +1 -1
  171. package/dist/index49.js +17 -14
  172. package/dist/index49.js.map +1 -1
  173. package/dist/index50.cjs +24 -17
  174. package/dist/index50.cjs.map +1 -1
  175. package/dist/index50.js +28 -28
  176. package/dist/index50.js.map +1 -1
  177. package/dist/index51.cjs +27 -28
  178. package/dist/index51.cjs.map +1 -1
  179. package/dist/index51.js +14 -17
  180. package/dist/index51.js.map +1 -1
  181. package/dist/index52.cjs +17 -22
  182. package/dist/index52.cjs.map +1 -1
  183. package/dist/index52.js +23 -23
  184. package/dist/index52.js.map +1 -1
  185. package/dist/index53.cjs +23 -23
  186. package/dist/index53.cjs.map +1 -1
  187. package/dist/index53.js +17 -10
  188. package/dist/index53.js.map +1 -1
  189. package/dist/index54.cjs +22 -11
  190. package/dist/index54.cjs.map +1 -1
  191. package/dist/index54.js +28 -14
  192. package/dist/index54.js.map +1 -1
  193. package/dist/index55.cjs +28 -13
  194. package/dist/index55.cjs.map +1 -1
  195. package/dist/index55.js +17 -11
  196. package/dist/index55.js.map +1 -1
  197. package/dist/index56.cjs +23 -13
  198. package/dist/index56.cjs.map +1 -1
  199. package/dist/index56.js +24 -16
  200. package/dist/index56.js.map +1 -1
  201. package/dist/index57.cjs +24 -15
  202. package/dist/index57.cjs.map +1 -1
  203. package/dist/index57.js +10 -9
  204. package/dist/index57.js.map +1 -1
  205. package/dist/index58.cjs +11 -12
  206. package/dist/index58.cjs.map +1 -1
  207. package/dist/index58.js +12 -87
  208. package/dist/index58.js.map +1 -1
  209. package/dist/index59.cjs +12 -89
  210. package/dist/index59.cjs.map +1 -1
  211. package/dist/index59.js +11 -21
  212. package/dist/index59.js.map +1 -1
  213. package/dist/index60.cjs +13 -30
  214. package/dist/index60.cjs.map +1 -1
  215. package/dist/index60.js +17 -43
  216. package/dist/index60.js.map +1 -1
  217. package/dist/index61.cjs +16 -44
  218. package/dist/index61.cjs.map +1 -1
  219. package/dist/index61.js +9 -57
  220. package/dist/index61.js.map +1 -1
  221. package/dist/index62.cjs +11 -83
  222. package/dist/index62.cjs.map +1 -1
  223. package/dist/index62.js +83 -426
  224. package/dist/index62.js.map +1 -1
  225. package/dist/index63.cjs +82 -427
  226. package/dist/index63.cjs.map +1 -1
  227. package/dist/index63.js +21 -59
  228. package/dist/index63.js.map +1 -1
  229. package/dist/index64.cjs +30 -87
  230. package/dist/index64.cjs.map +1 -1
  231. package/dist/index64.js +44 -240
  232. package/dist/index64.js.map +1 -1
  233. package/dist/index65.cjs +43 -239
  234. package/dist/index65.cjs.map +1 -1
  235. package/dist/index65.js +57 -43
  236. package/dist/index65.js.map +1 -1
  237. package/dist/index66.cjs +84 -63
  238. package/dist/index66.cjs.map +1 -1
  239. package/dist/index66.js +426 -73
  240. package/dist/index66.js.map +1 -1
  241. package/dist/index67.cjs +426 -71
  242. package/dist/index67.cjs.map +1 -1
  243. package/dist/index67.js +59 -21
  244. package/dist/index67.js.map +1 -1
  245. package/dist/index68.cjs +87 -30
  246. package/dist/index68.cjs.map +1 -1
  247. package/dist/index68.js +233 -88
  248. package/dist/index68.js.map +1 -1
  249. package/dist/index69.cjs +232 -89
  250. package/dist/index69.cjs.map +1 -1
  251. package/dist/index69.js +40 -16
  252. package/dist/index69.js.map +1 -1
  253. package/dist/index70.cjs +56 -20
  254. package/dist/index70.cjs.map +1 -1
  255. package/dist/index70.js +72 -145
  256. package/dist/index70.js.map +1 -1
  257. package/dist/index71.cjs +72 -145
  258. package/dist/index71.cjs.map +1 -1
  259. package/dist/index71.js +25 -0
  260. package/dist/index71.js.map +1 -0
  261. package/dist/index72.cjs +34 -0
  262. package/dist/index72.cjs.map +1 -0
  263. package/dist/index72.js +101 -0
  264. package/dist/index72.js.map +1 -0
  265. package/dist/index73.cjs +105 -0
  266. package/dist/index73.cjs.map +1 -0
  267. package/dist/index73.js +23 -0
  268. package/dist/index73.js.map +1 -0
  269. package/dist/index74.cjs +31 -0
  270. package/dist/index74.cjs.map +1 -0
  271. package/dist/index74.js +159 -0
  272. package/dist/index74.js.map +1 -0
  273. package/dist/index75.cjs +161 -0
  274. package/dist/index75.cjs.map +1 -0
  275. package/dist/index8.js.map +1 -1
  276. package/dist/index9.cjs.map +1 -1
  277. package/dist/index9.js.map +1 -1
  278. package/dist/style.css +216 -45
  279. package/package.json +2 -2
package/dist/index70.js CHANGED
@@ -1,159 +1,86 @@
1
1
  import { cx } from "./index3.js";
2
- import empty_state_page_module_default from "./index69.js";
2
+ import settings_page_module_default from "./index69.js";
3
3
  import "react";
4
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
- };
5
+ //#region src/components/settings-page/SettingsPage.tsx
121
6
  /**
122
- * EmptyStatePage — a Card-based page template with variant icons, title, description, and actions.
7
+ * SettingsPage — a settings layout with sections, a danger zone, and a sticky save footer.
123
8
  *
124
9
  * Layout:
125
- * Card → Icon → Title → Description → Actions
10
+ * Header (title + description)
11
+ * Scrollable content:
12
+ * Section group with headings and descriptions
13
+ * Danger zone with red visual distinction
14
+ * Sticky footer: save/cancel buttons
126
15
  */
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
16
+ function SettingsPage({ title, description, sections, dangerZone, dangerZoneTitle, dangerZoneDescription, footer, saving = false, className }) {
17
+ return /* @__PURE__ */ jsxs("div", {
18
+ className: cx(settings_page_module_default.wrapper, className),
19
+ children: [
20
+ /* @__PURE__ */ jsx("header", {
21
+ className: settings_page_module_default.header,
22
+ children: /* @__PURE__ */ jsxs("div", {
23
+ className: settings_page_module_default.headerContent,
24
+ children: [/* @__PURE__ */ jsx("h1", {
25
+ className: settings_page_module_default.title,
26
+ children: title
27
+ }), description && /* @__PURE__ */ jsx("p", {
28
+ className: settings_page_module_default.description,
29
+ children: description
30
+ })]
31
+ })
32
+ }),
33
+ /* @__PURE__ */ jsxs("div", {
34
+ className: settings_page_module_default.content,
35
+ children: [/* @__PURE__ */ jsx("div", {
36
+ className: settings_page_module_default.sections,
37
+ children: sections.map((section, index) => /* @__PURE__ */ jsxs("section", {
38
+ className: settings_page_module_default.section,
39
+ children: [/* @__PURE__ */ jsxs("div", {
40
+ className: settings_page_module_default.sectionHeader,
41
+ children: [/* @__PURE__ */ jsx("h2", {
42
+ className: settings_page_module_default.sectionTitle,
43
+ children: section.title
44
+ }), section.description && /* @__PURE__ */ jsx("p", {
45
+ className: settings_page_module_default.sectionDescription,
46
+ children: section.description
47
+ })]
48
+ }), /* @__PURE__ */ jsx("div", {
49
+ className: settings_page_module_default.sectionBody,
50
+ children: section.children
51
+ })]
52
+ }, index))
53
+ }), dangerZone && /* @__PURE__ */ jsxs("div", {
54
+ className: settings_page_module_default.dangerZone,
55
+ children: [(dangerZoneTitle || dangerZoneDescription) && /* @__PURE__ */ jsxs("div", {
56
+ className: settings_page_module_default.dangerZoneHeader,
57
+ children: [dangerZoneTitle && /* @__PURE__ */ jsx("h2", {
58
+ className: settings_page_module_default.dangerZoneTitle,
59
+ children: dangerZoneTitle
60
+ }), dangerZoneDescription && /* @__PURE__ */ jsx("p", {
61
+ className: settings_page_module_default.dangerZoneDescription,
62
+ children: dangerZoneDescription
63
+ })]
64
+ }), /* @__PURE__ */ jsx("div", {
65
+ className: settings_page_module_default.dangerZoneBody,
66
+ children: dangerZone
67
+ })]
68
+ })]
69
+ }),
70
+ /* @__PURE__ */ jsx("footer", {
71
+ className: settings_page_module_default.footer,
72
+ children: /* @__PURE__ */ jsxs("div", {
73
+ className: settings_page_module_default.footerContent,
74
+ children: [footer, saving && /* @__PURE__ */ jsx("span", {
75
+ className: settings_page_module_default.savingIndicator,
76
+ children: "Saving..."
146
77
  })]
147
- }),
148
- (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", {
149
- className: empty_state_page_module_default.actions,
150
- children: [primaryAction, secondaryAction]
151
78
  })
152
- ]
153
- })
79
+ })
80
+ ]
154
81
  });
155
82
  }
156
83
  //#endregion
157
- export { EmptyStatePage };
84
+ export { SettingsPage };
158
85
 
159
86
  //# sourceMappingURL=index70.js.map
@@ -1 +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"}
1
+ {"version":3,"file":"index70.js","names":[],"sources":["../src/components/settings-page/SettingsPage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./settings-page.module.css\";\n\nexport interface SettingsSection {\n title: React.ReactNode;\n description?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport interface SettingsPageProps {\n /** Page title */\n title: React.ReactNode;\n /** Page subtitle / description */\n description?: React.ReactNode;\n /** Form sections rendered in the main content area */\n sections: SettingsSection[];\n /** Content rendered in the danger zone (red visual distinction) */\n dangerZone?: React.ReactNode;\n /** Danger zone title */\n dangerZoneTitle?: React.ReactNode;\n /** Danger zone description */\n dangerZoneDescription?: React.ReactNode;\n /** Sticky footer content (e.g., Save / Cancel buttons) */\n footer: React.ReactNode;\n /** Whether the page is saving */\n saving?: boolean;\n /** Additional class name for the outer wrapper */\n className?: string;\n}\n\n/**\n * SettingsPage — a settings layout with sections, a danger zone, and a sticky save footer.\n *\n * Layout:\n * Header (title + description)\n * Scrollable content:\n * Section group with headings and descriptions\n * Danger zone with red visual distinction\n * Sticky footer: save/cancel buttons\n */\nexport function SettingsPage({\n title,\n description,\n sections,\n dangerZone,\n dangerZoneTitle,\n dangerZoneDescription,\n footer,\n saving = false,\n className,\n}: SettingsPageProps) {\n return (\n <div className={cx(styles.wrapper, className)}>\n <header className={styles.header}>\n <div className={styles.headerContent}>\n <h1 className={styles.title}>{title}</h1>\n {description && <p className={styles.description}>{description}</p>}\n </div>\n </header>\n\n <div className={styles.content}>\n <div className={styles.sections}>\n {sections.map((section, index) => (\n <section key={index} className={styles.section}>\n <div className={styles.sectionHeader}>\n <h2 className={styles.sectionTitle}>{section.title}</h2>\n {section.description && (\n <p className={styles.sectionDescription}>{section.description}</p>\n )}\n </div>\n <div className={styles.sectionBody}>{section.children}</div>\n </section>\n ))}\n </div>\n\n {dangerZone && (\n <div className={styles.dangerZone}>\n {(dangerZoneTitle || dangerZoneDescription) && (\n <div className={styles.dangerZoneHeader}>\n {dangerZoneTitle && <h2 className={styles.dangerZoneTitle}>{dangerZoneTitle}</h2>}\n {dangerZoneDescription && (\n <p className={styles.dangerZoneDescription}>{dangerZoneDescription}</p>\n )}\n </div>\n )}\n <div className={styles.dangerZoneBody}>{dangerZone}</div>\n </div>\n )}\n </div>\n\n <footer className={styles.footer}>\n <div className={styles.footerContent}>\n {footer}\n {saving && <span className={styles.savingIndicator}>Saving...</span>}\n </div>\n </footer>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyCA,SAAgB,aAAa,EAC3B,OACA,aACA,UACA,YACA,iBACA,uBACA,QACA,SAAS,OACT,aACoB;CACpB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,6BAAO,SAAS,SAAS;YAA5C;GACE,oBAAC,UAAD;IAAQ,WAAW,6BAAO;cACxB,qBAAC,OAAD;KAAK,WAAW,6BAAO;eAAvB,CACE,oBAAC,MAAD;MAAI,WAAW,6BAAO;gBAAQ;KAAU,CAAA,GACvC,eAAe,oBAAC,KAAD;MAAG,WAAW,6BAAO;gBAAc;KAAe,CAAA,CAC/D;;GACC,CAAA;GAER,qBAAC,OAAD;IAAK,WAAW,6BAAO;cAAvB,CACE,oBAAC,OAAD;KAAK,WAAW,6BAAO;eACpB,SAAS,KAAK,SAAS,UACtB,qBAAC,WAAD;MAAqB,WAAW,6BAAO;gBAAvC,CACE,qBAAC,OAAD;OAAK,WAAW,6BAAO;iBAAvB,CACE,oBAAC,MAAD;QAAI,WAAW,6BAAO;kBAAe,QAAQ;OAAU,CAAA,GACtD,QAAQ,eACP,oBAAC,KAAD;QAAG,WAAW,6BAAO;kBAAqB,QAAQ;OAAe,CAAA,CAEhE;UACL,oBAAC,OAAD;OAAK,WAAW,6BAAO;iBAAc,QAAQ;MAAc,CAAA,CACpD;QARK,KAQL,CACV;IACE,CAAA,GAEJ,cACC,qBAAC,OAAD;KAAK,WAAW,6BAAO;eAAvB,EACI,mBAAmB,0BACnB,qBAAC,OAAD;MAAK,WAAW,6BAAO;gBAAvB,CACG,mBAAmB,oBAAC,MAAD;OAAI,WAAW,6BAAO;iBAAkB;MAAoB,CAAA,GAC/E,yBACC,oBAAC,KAAD;OAAG,WAAW,6BAAO;iBAAwB;MAAyB,CAAA,CAErE;SAEP,oBAAC,OAAD;MAAK,WAAW,6BAAO;gBAAiB;KAAgB,CAAA,CACrD;MAEJ;;GAEL,oBAAC,UAAD;IAAQ,WAAW,6BAAO;cACxB,qBAAC,OAAD;KAAK,WAAW,6BAAO;eAAvB,CACG,QACA,UAAU,oBAAC,QAAD;MAAM,WAAW,6BAAO;gBAAiB;KAAe,CAAA,CAChE;;GACC,CAAA;EACL;;AAET"}
package/dist/index71.cjs CHANGED
@@ -1,161 +1,88 @@
1
1
  const require_runtime = require("./index2.cjs");
2
2
  const require_cx = require("./index4.cjs");
3
- const require_empty_state_page_module = require("./index70.cjs");
3
+ const require_settings_page_module = require("./index70.cjs");
4
4
  let react = require("react");
5
5
  react = require_runtime.__toESM(react, 1);
6
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
- };
7
+ //#region src/components/settings-page/SettingsPage.tsx
123
8
  /**
124
- * EmptyStatePage — a Card-based page template with variant icons, title, description, and actions.
9
+ * SettingsPage — a settings layout with sections, a danger zone, and a sticky save footer.
125
10
  *
126
11
  * Layout:
127
- * Card → Icon → Title → Description → Actions
12
+ * Header (title + description)
13
+ * Scrollable content:
14
+ * Section group with headings and descriptions
15
+ * Danger zone with red visual distinction
16
+ * Sticky footer: save/cancel buttons
128
17
  */
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
18
+ function SettingsPage({ title, description, sections, dangerZone, dangerZoneTitle, dangerZoneDescription, footer, saving = false, className }) {
19
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
20
+ className: require_cx.cx(require_settings_page_module.default.wrapper, className),
21
+ children: [
22
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
23
+ className: require_settings_page_module.default.header,
24
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
25
+ className: require_settings_page_module.default.headerContent,
26
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
27
+ className: require_settings_page_module.default.title,
28
+ children: title
29
+ }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
30
+ className: require_settings_page_module.default.description,
31
+ children: description
32
+ })]
33
+ })
34
+ }),
35
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
36
+ className: require_settings_page_module.default.content,
37
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
38
+ className: require_settings_page_module.default.sections,
39
+ children: sections.map((section, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
40
+ className: require_settings_page_module.default.section,
41
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
42
+ className: require_settings_page_module.default.sectionHeader,
43
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
44
+ className: require_settings_page_module.default.sectionTitle,
45
+ children: section.title
46
+ }), section.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
47
+ className: require_settings_page_module.default.sectionDescription,
48
+ children: section.description
49
+ })]
50
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
51
+ className: require_settings_page_module.default.sectionBody,
52
+ children: section.children
53
+ })]
54
+ }, index))
55
+ }), dangerZone && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
56
+ className: require_settings_page_module.default.dangerZone,
57
+ children: [(dangerZoneTitle || dangerZoneDescription) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
58
+ className: require_settings_page_module.default.dangerZoneHeader,
59
+ children: [dangerZoneTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
60
+ className: require_settings_page_module.default.dangerZoneTitle,
61
+ children: dangerZoneTitle
62
+ }), dangerZoneDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
63
+ className: require_settings_page_module.default.dangerZoneDescription,
64
+ children: dangerZoneDescription
65
+ })]
66
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
67
+ className: require_settings_page_module.default.dangerZoneBody,
68
+ children: dangerZone
69
+ })]
70
+ })]
71
+ }),
72
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
73
+ className: require_settings_page_module.default.footer,
74
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
75
+ className: require_settings_page_module.default.footerContent,
76
+ children: [footer, saving && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
77
+ className: require_settings_page_module.default.savingIndicator,
78
+ children: "Saving..."
148
79
  })]
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
80
  })
154
- ]
155
- })
81
+ })
82
+ ]
156
83
  });
157
84
  }
158
85
  //#endregion
159
- exports.EmptyStatePage = EmptyStatePage;
86
+ exports.SettingsPage = SettingsPage;
160
87
 
161
88
  //# sourceMappingURL=index71.cjs.map
@@ -1 +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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"}
1
+ {"version":3,"file":"index71.cjs","names":[],"sources":["../src/components/settings-page/SettingsPage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./settings-page.module.css\";\n\nexport interface SettingsSection {\n title: React.ReactNode;\n description?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport interface SettingsPageProps {\n /** Page title */\n title: React.ReactNode;\n /** Page subtitle / description */\n description?: React.ReactNode;\n /** Form sections rendered in the main content area */\n sections: SettingsSection[];\n /** Content rendered in the danger zone (red visual distinction) */\n dangerZone?: React.ReactNode;\n /** Danger zone title */\n dangerZoneTitle?: React.ReactNode;\n /** Danger zone description */\n dangerZoneDescription?: React.ReactNode;\n /** Sticky footer content (e.g., Save / Cancel buttons) */\n footer: React.ReactNode;\n /** Whether the page is saving */\n saving?: boolean;\n /** Additional class name for the outer wrapper */\n className?: string;\n}\n\n/**\n * SettingsPage — a settings layout with sections, a danger zone, and a sticky save footer.\n *\n * Layout:\n * Header (title + description)\n * Scrollable content:\n * Section group with headings and descriptions\n * Danger zone with red visual distinction\n * Sticky footer: save/cancel buttons\n */\nexport function SettingsPage({\n title,\n description,\n sections,\n dangerZone,\n dangerZoneTitle,\n dangerZoneDescription,\n footer,\n saving = false,\n className,\n}: SettingsPageProps) {\n return (\n <div className={cx(styles.wrapper, className)}>\n <header className={styles.header}>\n <div className={styles.headerContent}>\n <h1 className={styles.title}>{title}</h1>\n {description && <p className={styles.description}>{description}</p>}\n </div>\n </header>\n\n <div className={styles.content}>\n <div className={styles.sections}>\n {sections.map((section, index) => (\n <section key={index} className={styles.section}>\n <div className={styles.sectionHeader}>\n <h2 className={styles.sectionTitle}>{section.title}</h2>\n {section.description && (\n <p className={styles.sectionDescription}>{section.description}</p>\n )}\n </div>\n <div className={styles.sectionBody}>{section.children}</div>\n </section>\n ))}\n </div>\n\n {dangerZone && (\n <div className={styles.dangerZone}>\n {(dangerZoneTitle || dangerZoneDescription) && (\n <div className={styles.dangerZoneHeader}>\n {dangerZoneTitle && <h2 className={styles.dangerZoneTitle}>{dangerZoneTitle}</h2>}\n {dangerZoneDescription && (\n <p className={styles.dangerZoneDescription}>{dangerZoneDescription}</p>\n )}\n </div>\n )}\n <div className={styles.dangerZoneBody}>{dangerZone}</div>\n </div>\n )}\n </div>\n\n <footer className={styles.footer}>\n <div className={styles.footerContent}>\n {footer}\n {saving && <span className={styles.savingIndicator}>Saving...</span>}\n </div>\n </footer>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,SAAgB,aAAa,EAC3B,OACA,aACA,UACA,YACA,iBACA,uBACA,QACA,SAAS,OACT,aACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,WAAA,GAAG,6BAAA,QAAO,SAAS,SAAS;YAA5C;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,WAAW,6BAAA,QAAO;cACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;MAAI,WAAW,6BAAA,QAAO;gBAAQ;KAAU,CAAA,GACvC,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;MAAG,WAAW,6BAAA,QAAO;gBAAc;KAAe,CAAA,CAC/D;;GACC,CAAA;GAER,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAW,6BAAA,QAAO;cAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eACpB,SAAS,KAAK,SAAS,UACtB,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;MAAqB,WAAW,6BAAA,QAAO;gBAAvC,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,WAAW,6BAAA,QAAO;iBAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;QAAI,WAAW,6BAAA,QAAO;kBAAe,QAAQ;OAAU,CAAA,GACtD,QAAQ,eACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;QAAG,WAAW,6BAAA,QAAO;kBAAqB,QAAQ;OAAe,CAAA,CAEhE;UACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;OAAK,WAAW,6BAAA,QAAO;iBAAc,QAAQ;MAAc,CAAA,CACpD;QARK,KAQL,CACV;IACE,CAAA,GAEJ,cACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eAAvB,EACI,mBAAmB,0BACnB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAW,6BAAA,QAAO;gBAAvB,CACG,mBAAmB,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;OAAI,WAAW,6BAAA,QAAO;iBAAkB;MAAoB,CAAA,GAC/E,yBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,WAAW,6BAAA,QAAO;iBAAwB;MAAyB,CAAA,CAErE;SAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAW,6BAAA,QAAO;gBAAiB;KAAgB,CAAA,CACrD;MAEJ;;GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,WAAW,6BAAA,QAAO;cACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,6BAAA,QAAO;eAAvB,CACG,QACA,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAW,6BAAA,QAAO;gBAAiB;KAAe,CAAA,CAChE;;GACC,CAAA;EACL;;AAET"}
@@ -0,0 +1,25 @@
1
+ //#region src/components/error-page/error-page.module.css
2
+ var layout = "uzi-error-page-module__layout__OVDE8";
3
+ var card = "uzi-error-page-module__card__2veSo";
4
+ var icon = "uzi-error-page-module__icon__vJy8E";
5
+ var iconSvg = "uzi-error-page-module__iconSvg__h4u4V";
6
+ var statusCode = "uzi-error-page-module__statusCode__Ub40l";
7
+ var content = "uzi-error-page-module__content__b2dAY";
8
+ var title = "uzi-error-page-module__title__8iioy";
9
+ var subtitle = "uzi-error-page-module__subtitle__NVk-v";
10
+ var action = "uzi-error-page-module__action__iX5fQ";
11
+ var error_page_module_default = {
12
+ layout,
13
+ card,
14
+ icon,
15
+ iconSvg,
16
+ statusCode,
17
+ content,
18
+ title,
19
+ subtitle,
20
+ action
21
+ };
22
+ //#endregion
23
+ export { action, card, content, error_page_module_default as default, icon, iconSvg, layout, statusCode, subtitle, title };
24
+
25
+ //# sourceMappingURL=index71.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index71.js","names":[],"sources":["../src/components/error-page/error-page.module.css"],"sourcesContent":[".layout {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n min-height: 100dvh;\n padding: 24px;\n background: var(--background);\n}\n\n.card {\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1.5rem;\n max-width: 40rem;\n padding: 3rem 2rem;\n}\n\n.icon {\n color: var(--muted-foreground);\n}\n\n.iconSvg {\n width: 4rem;\n height: 4rem;\n stroke-width: 1.5;\n}\n\n.statusCode {\n font-size: 6rem;\n font-weight: 700;\n line-height: 1;\n color: var(--muted-foreground);\n letter-spacing: -0.04em;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.title {\n margin: 0;\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--foreground);\n line-height: 1.3;\n}\n\n.subtitle {\n margin: 0;\n font-size: 1rem;\n color: var(--muted-foreground);\n line-height: 1.6;\n max-width: 32rem;\n}\n\n.action {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 0.75rem;\n margin-top: 0.5rem;\n}\n\n@media (max-width: 48rem) {\n .statusCode {\n font-size: 4rem;\n }\n\n .title {\n font-size: 1.25rem;\n }\n\n .card {\n padding: 2rem 1.5rem;\n }\n}\n"],"mappings":""}
@@ -0,0 +1,34 @@
1
+ //#region src/components/error-page/error-page.module.css
2
+ var layout = "uzi-error-page-module__layout__OVDE8";
3
+ var card = "uzi-error-page-module__card__2veSo";
4
+ var icon = "uzi-error-page-module__icon__vJy8E";
5
+ var iconSvg = "uzi-error-page-module__iconSvg__h4u4V";
6
+ var statusCode = "uzi-error-page-module__statusCode__Ub40l";
7
+ var content = "uzi-error-page-module__content__b2dAY";
8
+ var title = "uzi-error-page-module__title__8iioy";
9
+ var subtitle = "uzi-error-page-module__subtitle__NVk-v";
10
+ var action = "uzi-error-page-module__action__iX5fQ";
11
+ var error_page_module_default = {
12
+ layout,
13
+ card,
14
+ icon,
15
+ iconSvg,
16
+ statusCode,
17
+ content,
18
+ title,
19
+ subtitle,
20
+ action
21
+ };
22
+ //#endregion
23
+ exports.action = action;
24
+ exports.card = card;
25
+ exports.content = content;
26
+ exports.default = error_page_module_default;
27
+ exports.icon = icon;
28
+ exports.iconSvg = iconSvg;
29
+ exports.layout = layout;
30
+ exports.statusCode = statusCode;
31
+ exports.subtitle = subtitle;
32
+ exports.title = title;
33
+
34
+ //# sourceMappingURL=index72.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index72.cjs","names":[],"sources":["../src/components/error-page/error-page.module.css"],"sourcesContent":[".layout {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n min-height: 100dvh;\n padding: 24px;\n background: var(--background);\n}\n\n.card {\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1.5rem;\n max-width: 40rem;\n padding: 3rem 2rem;\n}\n\n.icon {\n color: var(--muted-foreground);\n}\n\n.iconSvg {\n width: 4rem;\n height: 4rem;\n stroke-width: 1.5;\n}\n\n.statusCode {\n font-size: 6rem;\n font-weight: 700;\n line-height: 1;\n color: var(--muted-foreground);\n letter-spacing: -0.04em;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.title {\n margin: 0;\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--foreground);\n line-height: 1.3;\n}\n\n.subtitle {\n margin: 0;\n font-size: 1rem;\n color: var(--muted-foreground);\n line-height: 1.6;\n max-width: 32rem;\n}\n\n.action {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 0.75rem;\n margin-top: 0.5rem;\n}\n\n@media (max-width: 48rem) {\n .statusCode {\n font-size: 4rem;\n }\n\n .title {\n font-size: 1.25rem;\n }\n\n .card {\n padding: 2rem 1.5rem;\n }\n}\n"],"mappings":""}