snice 1.14.2 → 2.1.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.
Files changed (311) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/alert/demo.html +445 -0
  4. package/components/avatar/demo.html +598 -0
  5. package/components/badge/demo.html +523 -0
  6. package/components/breadcrumbs/demo.html +404 -0
  7. package/components/button/demo.html +42 -0
  8. package/components/card/demo.html +525 -0
  9. package/components/checkbox/demo.html +253 -0
  10. package/components/chip/demo.html +383 -0
  11. package/components/date-picker/demo.html +191 -0
  12. package/components/divider/demo.html +233 -0
  13. package/components/drawer/demo.html +328 -0
  14. package/components/input/demo.html +303 -0
  15. package/components/input/test.html +77 -0
  16. package/components/layout/demo.html +538 -0
  17. package/components/login/demo-auth-controller.ts +185 -0
  18. package/components/login/demo.html +470 -0
  19. package/components/login/snice-login.ts +2 -2
  20. package/components/modal/demo.html +291 -0
  21. package/components/pagination/demo.html +395 -0
  22. package/components/progress/demo.html +510 -0
  23. package/components/radio/demo.html +287 -0
  24. package/components/select/demo.html +511 -0
  25. package/components/skeleton/demo.html +514 -0
  26. package/components/switch/demo.html +284 -0
  27. package/components/table/demo-table-controller.ts +100 -0
  28. package/components/table/demo.html +480 -0
  29. package/components/table/snice-table.ts +2 -2
  30. package/components/tabs/demo.html +487 -0
  31. package/components/toast/demo.html +329 -0
  32. package/components/tooltip/demo.html +350 -0
  33. package/dist/index.cjs +441 -329
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.cjs.min.map +1 -1
  36. package/dist/index.esm.js +441 -329
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.esm.min.js +3 -3
  39. package/dist/index.esm.min.js.map +1 -1
  40. package/dist/index.iife.js +441 -329
  41. package/dist/index.iife.js.map +1 -1
  42. package/dist/index.iife.min.js +3 -3
  43. package/dist/index.iife.min.js.map +1 -1
  44. package/dist/symbols.esm.js +1 -1
  45. package/dist/transitions.esm.js +1 -1
  46. package/dist/types/controller.d.ts +1 -1
  47. package/dist/types/element.d.ts +10 -10
  48. package/dist/types/events.d.ts +2 -2
  49. package/dist/types/index.d.ts +1 -1
  50. package/dist/types/observe.d.ts +1 -1
  51. package/dist/types/request-response.d.ts +2 -3
  52. package/dist/types/router.d.ts +1 -1
  53. package/package.json +9 -10
  54. package/dist/components/accordion/snice-accordion-item.d.ts +0 -25
  55. package/dist/components/accordion/snice-accordion-item.js +0 -260
  56. package/dist/components/accordion/snice-accordion-item.js.map +0 -1
  57. package/dist/components/accordion/snice-accordion.d.ts +0 -28
  58. package/dist/components/accordion/snice-accordion.js +0 -221
  59. package/dist/components/accordion/snice-accordion.js.map +0 -1
  60. package/dist/components/accordion/snice-accordion.types.d.ts +0 -29
  61. package/dist/components/accordion/snice-accordion.types.js +0 -2
  62. package/dist/components/accordion/snice-accordion.types.js.map +0 -1
  63. package/dist/components/alert/snice-alert.d.ts +0 -26
  64. package/dist/components/alert/snice-alert.js +0 -191
  65. package/dist/components/alert/snice-alert.js.map +0 -1
  66. package/dist/components/alert/snice-alert.types.d.ts +0 -11
  67. package/dist/components/alert/snice-alert.types.js +0 -2
  68. package/dist/components/alert/snice-alert.types.js.map +0 -1
  69. package/dist/components/avatar/snice-avatar.d.ts +0 -24
  70. package/dist/components/avatar/snice-avatar.js +0 -177
  71. package/dist/components/avatar/snice-avatar.js.map +0 -1
  72. package/dist/components/avatar/snice-avatar.types.d.ts +0 -12
  73. package/dist/components/avatar/snice-avatar.types.js +0 -2
  74. package/dist/components/avatar/snice-avatar.types.js.map +0 -1
  75. package/dist/components/badge/snice-badge.d.ts +0 -25
  76. package/dist/components/badge/snice-badge.js +0 -157
  77. package/dist/components/badge/snice-badge.js.map +0 -1
  78. package/dist/components/badge/snice-badge.types.d.ts +0 -15
  79. package/dist/components/badge/snice-badge.types.js +0 -2
  80. package/dist/components/badge/snice-badge.types.js.map +0 -1
  81. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +0 -27
  82. package/dist/components/breadcrumbs/snice-breadcrumbs.js +0 -212
  83. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +0 -1
  84. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +0 -23
  85. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js +0 -2
  86. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js.map +0 -1
  87. package/dist/components/breadcrumbs/snice-crumb.d.ts +0 -9
  88. package/dist/components/breadcrumbs/snice-crumb.js +0 -50
  89. package/dist/components/breadcrumbs/snice-crumb.js.map +0 -1
  90. package/dist/components/button/snice-button.d.ts +0 -32
  91. package/dist/components/button/snice-button.js +0 -212
  92. package/dist/components/button/snice-button.js.map +0 -1
  93. package/dist/components/button/snice-button.types.d.ts +0 -23
  94. package/dist/components/button/snice-button.types.js +0 -2
  95. package/dist/components/button/snice-button.types.js.map +0 -1
  96. package/dist/components/card/snice-card.d.ts +0 -19
  97. package/dist/components/card/snice-card.js +0 -132
  98. package/dist/components/card/snice-card.js.map +0 -1
  99. package/dist/components/card/snice-card.types.d.ts +0 -9
  100. package/dist/components/card/snice-card.types.js +0 -2
  101. package/dist/components/card/snice-card.types.js.map +0 -1
  102. package/dist/components/checkbox/snice-checkbox.d.ts +0 -34
  103. package/dist/components/checkbox/snice-checkbox.js +0 -289
  104. package/dist/components/checkbox/snice-checkbox.js.map +0 -1
  105. package/dist/components/checkbox/snice-checkbox.types.d.ts +0 -20
  106. package/dist/components/checkbox/snice-checkbox.types.js +0 -2
  107. package/dist/components/checkbox/snice-checkbox.types.js.map +0 -1
  108. package/dist/components/chip/snice-chip.d.ts +0 -28
  109. package/dist/components/chip/snice-chip.js +0 -203
  110. package/dist/components/chip/snice-chip.js.map +0 -1
  111. package/dist/components/chip/snice-chip.types.d.ts +0 -14
  112. package/dist/components/chip/snice-chip.types.js +0 -2
  113. package/dist/components/chip/snice-chip.types.js.map +0 -1
  114. package/dist/components/date-picker/snice-date-picker.d.ts +0 -82
  115. package/dist/components/date-picker/snice-date-picker.js +0 -880
  116. package/dist/components/date-picker/snice-date-picker.js.map +0 -1
  117. package/dist/components/date-picker/snice-date-picker.types.d.ts +0 -71
  118. package/dist/components/date-picker/snice-date-picker.types.js +0 -2
  119. package/dist/components/date-picker/snice-date-picker.types.js.map +0 -1
  120. package/dist/components/divider/snice-divider.d.ts +0 -17
  121. package/dist/components/divider/snice-divider.js +0 -111
  122. package/dist/components/divider/snice-divider.js.map +0 -1
  123. package/dist/components/divider/snice-divider.types.d.ts +0 -14
  124. package/dist/components/divider/snice-divider.types.js +0 -2
  125. package/dist/components/divider/snice-divider.types.js.map +0 -1
  126. package/dist/components/drawer/snice-drawer.d.ts +0 -37
  127. package/dist/components/drawer/snice-drawer.js +0 -335
  128. package/dist/components/drawer/snice-drawer.js.map +0 -1
  129. package/dist/components/drawer/snice-drawer.types.d.ts +0 -16
  130. package/dist/components/drawer/snice-drawer.types.js +0 -2
  131. package/dist/components/drawer/snice-drawer.types.js.map +0 -1
  132. package/dist/components/input/snice-input.d.ts +0 -65
  133. package/dist/components/input/snice-input.js +0 -603
  134. package/dist/components/input/snice-input.js.map +0 -1
  135. package/dist/components/input/snice-input.types.d.ts +0 -53
  136. package/dist/components/input/snice-input.types.js +0 -2
  137. package/dist/components/input/snice-input.types.js.map +0 -1
  138. package/dist/components/layout/snice-layout-blog.d.ts +0 -4
  139. package/dist/components/layout/snice-layout-blog.js +0 -56
  140. package/dist/components/layout/snice-layout-blog.js.map +0 -1
  141. package/dist/components/layout/snice-layout-card.d.ts +0 -6
  142. package/dist/components/layout/snice-layout-card.js +0 -53
  143. package/dist/components/layout/snice-layout-card.js.map +0 -1
  144. package/dist/components/layout/snice-layout-centered.d.ts +0 -5
  145. package/dist/components/layout/snice-layout-centered.js +0 -38
  146. package/dist/components/layout/snice-layout-centered.js.map +0 -1
  147. package/dist/components/layout/snice-layout-dashboard.d.ts +0 -4
  148. package/dist/components/layout/snice-layout-dashboard.js +0 -53
  149. package/dist/components/layout/snice-layout-dashboard.js.map +0 -1
  150. package/dist/components/layout/snice-layout-fullscreen.d.ts +0 -5
  151. package/dist/components/layout/snice-layout-fullscreen.js +0 -50
  152. package/dist/components/layout/snice-layout-fullscreen.js.map +0 -1
  153. package/dist/components/layout/snice-layout-landing.d.ts +0 -4
  154. package/dist/components/layout/snice-layout-landing.js +0 -55
  155. package/dist/components/layout/snice-layout-landing.js.map +0 -1
  156. package/dist/components/layout/snice-layout-minimal.d.ts +0 -4
  157. package/dist/components/layout/snice-layout-minimal.js +0 -27
  158. package/dist/components/layout/snice-layout-minimal.js.map +0 -1
  159. package/dist/components/layout/snice-layout-sidebar.d.ts +0 -5
  160. package/dist/components/layout/snice-layout-sidebar.js +0 -64
  161. package/dist/components/layout/snice-layout-sidebar.js.map +0 -1
  162. package/dist/components/layout/snice-layout-split.d.ts +0 -6
  163. package/dist/components/layout/snice-layout-split.js +0 -47
  164. package/dist/components/layout/snice-layout-split.js.map +0 -1
  165. package/dist/components/layout/snice-layout.d.ts +0 -4
  166. package/dist/components/layout/snice-layout.js +0 -43
  167. package/dist/components/layout/snice-layout.js.map +0 -1
  168. package/dist/components/layout/snice-layout.types.d.ts +0 -3
  169. package/dist/components/layout/snice-layout.types.js +0 -2
  170. package/dist/components/layout/snice-layout.types.js.map +0 -1
  171. package/dist/components/login/snice-login.d.ts +0 -45
  172. package/dist/components/login/snice-login.js +0 -385
  173. package/dist/components/login/snice-login.js.map +0 -1
  174. package/dist/components/login/snice-login.types.d.ts +0 -31
  175. package/dist/components/login/snice-login.types.js +0 -2
  176. package/dist/components/login/snice-login.types.js.map +0 -1
  177. package/dist/components/modal/snice-modal.d.ts +0 -32
  178. package/dist/components/modal/snice-modal.js +0 -288
  179. package/dist/components/modal/snice-modal.js.map +0 -1
  180. package/dist/components/modal/snice-modal.types.d.ts +0 -18
  181. package/dist/components/modal/snice-modal.types.js +0 -2
  182. package/dist/components/modal/snice-modal.types.js.map +0 -1
  183. package/dist/components/pagination/snice-pagination.d.ts +0 -26
  184. package/dist/components/pagination/snice-pagination.js +0 -373
  185. package/dist/components/pagination/snice-pagination.js.map +0 -1
  186. package/dist/components/pagination/snice-pagination.types.d.ts +0 -18
  187. package/dist/components/pagination/snice-pagination.types.js +0 -2
  188. package/dist/components/pagination/snice-pagination.types.js.map +0 -1
  189. package/dist/components/progress/snice-progress.d.ts +0 -35
  190. package/dist/components/progress/snice-progress.js +0 -295
  191. package/dist/components/progress/snice-progress.js.map +0 -1
  192. package/dist/components/progress/snice-progress.types.d.ts +0 -18
  193. package/dist/components/progress/snice-progress.types.js +0 -2
  194. package/dist/components/progress/snice-progress.types.js.map +0 -1
  195. package/dist/components/radio/snice-radio.d.ts +0 -33
  196. package/dist/components/radio/snice-radio.js +0 -286
  197. package/dist/components/radio/snice-radio.js.map +0 -1
  198. package/dist/components/radio/snice-radio.types.d.ts +0 -19
  199. package/dist/components/radio/snice-radio.types.js +0 -2
  200. package/dist/components/radio/snice-radio.types.js.map +0 -1
  201. package/dist/components/select/snice-option.d.ts +0 -17
  202. package/dist/components/select/snice-option.js +0 -77
  203. package/dist/components/select/snice-option.js.map +0 -1
  204. package/dist/components/select/snice-option.types.d.ts +0 -14
  205. package/dist/components/select/snice-option.types.js +0 -2
  206. package/dist/components/select/snice-option.types.js.map +0 -1
  207. package/dist/components/select/snice-select.d.ts +0 -89
  208. package/dist/components/select/snice-select.js +0 -900
  209. package/dist/components/select/snice-select.js.map +0 -1
  210. package/dist/components/select/snice-select.types.d.ts +0 -49
  211. package/dist/components/select/snice-select.types.js +0 -2
  212. package/dist/components/select/snice-select.types.js.map +0 -1
  213. package/dist/components/skeleton/snice-skeleton.d.ts +0 -16
  214. package/dist/components/skeleton/snice-skeleton.js +0 -159
  215. package/dist/components/skeleton/snice-skeleton.js.map +0 -1
  216. package/dist/components/skeleton/snice-skeleton.types.d.ts +0 -10
  217. package/dist/components/skeleton/snice-skeleton.types.js +0 -2
  218. package/dist/components/skeleton/snice-skeleton.types.js.map +0 -1
  219. package/dist/components/switch/snice-switch.d.ts +0 -38
  220. package/dist/components/switch/snice-switch.js +0 -309
  221. package/dist/components/switch/snice-switch.js.map +0 -1
  222. package/dist/components/switch/snice-switch.types.d.ts +0 -21
  223. package/dist/components/switch/snice-switch.types.js +0 -2
  224. package/dist/components/switch/snice-switch.types.js.map +0 -1
  225. package/dist/components/symbols.d.ts +0 -1
  226. package/dist/components/symbols.js +0 -20
  227. package/dist/components/symbols.js.map +0 -1
  228. package/dist/components/table/snice-cell-boolean.d.ts +0 -21
  229. package/dist/components/table/snice-cell-boolean.js +0 -152
  230. package/dist/components/table/snice-cell-boolean.js.map +0 -1
  231. package/dist/components/table/snice-cell-date.d.ts +0 -24
  232. package/dist/components/table/snice-cell-date.js +0 -240
  233. package/dist/components/table/snice-cell-date.js.map +0 -1
  234. package/dist/components/table/snice-cell-duration.d.ts +0 -16
  235. package/dist/components/table/snice-cell-duration.js +0 -123
  236. package/dist/components/table/snice-cell-duration.js.map +0 -1
  237. package/dist/components/table/snice-cell-filesize.d.ts +0 -16
  238. package/dist/components/table/snice-cell-filesize.js +0 -119
  239. package/dist/components/table/snice-cell-filesize.js.map +0 -1
  240. package/dist/components/table/snice-cell-number.d.ts +0 -23
  241. package/dist/components/table/snice-cell-number.js +0 -202
  242. package/dist/components/table/snice-cell-number.js.map +0 -1
  243. package/dist/components/table/snice-cell-progress.d.ts +0 -17
  244. package/dist/components/table/snice-cell-progress.js +0 -114
  245. package/dist/components/table/snice-cell-progress.js.map +0 -1
  246. package/dist/components/table/snice-cell-rating.d.ts +0 -17
  247. package/dist/components/table/snice-cell-rating.js +0 -113
  248. package/dist/components/table/snice-cell-rating.js.map +0 -1
  249. package/dist/components/table/snice-cell-sparkline.d.ts +0 -29
  250. package/dist/components/table/snice-cell-sparkline.js +0 -290
  251. package/dist/components/table/snice-cell-sparkline.js.map +0 -1
  252. package/dist/components/table/snice-cell-text.d.ts +0 -19
  253. package/dist/components/table/snice-cell-text.js +0 -153
  254. package/dist/components/table/snice-cell-text.js.map +0 -1
  255. package/dist/components/table/snice-cell.d.ts +0 -32
  256. package/dist/components/table/snice-cell.js +0 -451
  257. package/dist/components/table/snice-cell.js.map +0 -1
  258. package/dist/components/table/snice-column.d.ts +0 -62
  259. package/dist/components/table/snice-column.js +0 -440
  260. package/dist/components/table/snice-column.js.map +0 -1
  261. package/dist/components/table/snice-header.d.ts +0 -33
  262. package/dist/components/table/snice-header.js +0 -303
  263. package/dist/components/table/snice-header.js.map +0 -1
  264. package/dist/components/table/snice-progress.d.ts +0 -10
  265. package/dist/components/table/snice-progress.js +0 -91
  266. package/dist/components/table/snice-progress.js.map +0 -1
  267. package/dist/components/table/snice-rating.d.ts +0 -9
  268. package/dist/components/table/snice-rating.js +0 -68
  269. package/dist/components/table/snice-rating.js.map +0 -1
  270. package/dist/components/table/snice-row.d.ts +0 -43
  271. package/dist/components/table/snice-row.js +0 -365
  272. package/dist/components/table/snice-row.js.map +0 -1
  273. package/dist/components/table/snice-table.d.ts +0 -69
  274. package/dist/components/table/snice-table.js +0 -814
  275. package/dist/components/table/snice-table.js.map +0 -1
  276. package/dist/components/table/snice-table.types.d.ts +0 -137
  277. package/dist/components/table/snice-table.types.js +0 -2
  278. package/dist/components/table/snice-table.types.js.map +0 -1
  279. package/dist/components/tabs/snice-tab-panel.d.ts +0 -12
  280. package/dist/components/tabs/snice-tab-panel.js +0 -78
  281. package/dist/components/tabs/snice-tab-panel.js.map +0 -1
  282. package/dist/components/tabs/snice-tab.d.ts +0 -13
  283. package/dist/components/tabs/snice-tab.js +0 -90
  284. package/dist/components/tabs/snice-tab.js.map +0 -1
  285. package/dist/components/tabs/snice-tabs.d.ts +0 -34
  286. package/dist/components/tabs/snice-tabs.js +0 -367
  287. package/dist/components/tabs/snice-tabs.js.map +0 -1
  288. package/dist/components/tabs/snice-tabs.types.d.ts +0 -23
  289. package/dist/components/tabs/snice-tabs.types.js +0 -2
  290. package/dist/components/tabs/snice-tabs.types.js.map +0 -1
  291. package/dist/components/toast/snice-toast-container.d.ts +0 -25
  292. package/dist/components/toast/snice-toast-container.js +0 -251
  293. package/dist/components/toast/snice-toast-container.js.map +0 -1
  294. package/dist/components/toast/snice-toast.d.ts +0 -23
  295. package/dist/components/toast/snice-toast.js +0 -316
  296. package/dist/components/toast/snice-toast.js.map +0 -1
  297. package/dist/components/toast/snice-toast.types.d.ts +0 -30
  298. package/dist/components/toast/snice-toast.types.js +0 -2
  299. package/dist/components/toast/snice-toast.types.js.map +0 -1
  300. package/dist/components/tooltip/snice-tooltip.d.ts +0 -50
  301. package/dist/components/tooltip/snice-tooltip.js +0 -656
  302. package/dist/components/tooltip/snice-tooltip.js.map +0 -1
  303. package/dist/components/tooltip/snice-tooltip.types.d.ts +0 -18
  304. package/dist/components/tooltip/snice-tooltip.types.js +0 -2
  305. package/dist/components/tooltip/snice-tooltip.types.js.map +0 -1
  306. package/dist/components/transitions.d.ts +0 -11
  307. package/dist/components/transitions.js +0 -69
  308. package/dist/components/transitions.js.map +0 -1
  309. package/dist/index.cjs.min +0 -15
  310. package/dist/symbols.cjs +0 -103
  311. package/dist/transitions.cjs +0 -219
package/components/date-picker/demo.html ADDED
@@ -0,0 +1,191 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Date Picker Test</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
11
+ padding: var(--snice-spacing-xl, 2rem);
12
+ background: var(--snice-color-background, #f9fafb);
13
+ color: var(--snice-color-text, #374151);
14
+ }
15
+
16
+ .container {
17
+ max-width: 600px;
18
+ margin: 0 auto;
19
+ background: var(--snice-color-background-element, white);
20
+ padding: var(--snice-spacing-xl, 2rem);
21
+ border-radius: var(--snice-border-radius-lg, 8px);
22
+ box-shadow: var(--snice-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
23
+ }
24
+
25
+ .test-section {
26
+ margin-bottom: var(--snice-spacing-xl, 2rem);
27
+ padding: var(--snice-spacing-lg, 1.5rem);
28
+ border: 1px solid var(--snice-color-border, #e5e7eb);
29
+ border-radius: var(--snice-border-radius-lg, 6px);
30
+ background: var(--snice-color-background-secondary, #f9fafb);
31
+ }
32
+
33
+ .test-section h3 {
34
+ margin: 0 0 var(--snice-spacing-md, 1rem) 0;
35
+ color: var(--snice-color-text, #374151);
36
+ font-weight: var(--snice-font-weight-semibold, 600);
37
+ }
38
+
39
+ .form-grid {
40
+ display: grid;
41
+ gap: var(--snice-spacing-md, 1rem);
42
+ }
43
+
44
+ .form-row {
45
+ display: grid;
46
+ grid-template-columns: 1fr 1fr;
47
+ gap: var(--snice-spacing-md, 1rem);
48
+ }
49
+
50
+ @media (max-width: 640px) {
51
+ .form-row {
52
+ grid-template-columns: 1fr;
53
+ }
54
+ }
55
+ </style>
56
+ </head>
57
+ <body>
58
+ <div class="container">
59
+ <h1>Snice Date Picker Component Test</h1>
60
+
61
+ <div class="test-section">
62
+ <h3>Basic Date Picker</h3>
63
+ <div class="form-grid">
64
+ <snice-date-picker
65
+ label="Select Date"
66
+ placeholder="Choose a date"
67
+ clearable>
68
+ </snice-date-picker>
69
+ </div>
70
+ </div>
71
+
72
+ <div class="test-section">
73
+ <h3>Different Formats</h3>
74
+ <div class="form-grid">
75
+ <snice-date-picker
76
+ label="US Format (MM/DD/YYYY)"
77
+ format="mm/dd/yyyy">
78
+ </snice-date-picker>
79
+
80
+ <snice-date-picker
81
+ label="European Format (DD/MM/YYYY)"
82
+ format="dd/mm/yyyy">
83
+ </snice-date-picker>
84
+
85
+ <snice-date-picker
86
+ label="ISO Format (YYYY-MM-DD)"
87
+ format="yyyy-mm-dd">
88
+ </snice-date-picker>
89
+
90
+ <snice-date-picker
91
+ label="Long Format (Month DD, YYYY)"
92
+ format="mmmm dd, yyyy">
93
+ </snice-date-picker>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="test-section">
98
+ <h3>Sizes and Variants</h3>
99
+ <div class="form-grid">
100
+ <div class="form-row">
101
+ <snice-date-picker
102
+ label="Small Outlined"
103
+ size="small"
104
+ variant="outlined">
105
+ </snice-date-picker>
106
+
107
+ <snice-date-picker
108
+ label="Medium Filled"
109
+ size="medium"
110
+ variant="filled">
111
+ </snice-date-picker>
112
+ </div>
113
+
114
+ <div class="form-row">
115
+ <snice-date-picker
116
+ label="Large Underlined"
117
+ size="large"
118
+ variant="underlined">
119
+ </snice-date-picker>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="test-section">
125
+ <h3>With Constraints</h3>
126
+ <div class="form-grid">
127
+ <snice-date-picker
128
+ label="Date Range (This Month Only)"
129
+ min="2024-12-01"
130
+ max="2024-12-31"
131
+ helper-text="Only dates in December 2024 are allowed">
132
+ </snice-date-picker>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="test-section">
137
+ <h3>States</h3>
138
+ <div class="form-grid">
139
+ <div class="form-row">
140
+ <snice-date-picker
141
+ label="Required Field"
142
+ required
143
+ helper-text="This field is required">
144
+ </snice-date-picker>
145
+
146
+ <snice-date-picker
147
+ label="With Error"
148
+ invalid
149
+ error-text="Please select a valid date">
150
+ </snice-date-picker>
151
+ </div>
152
+
153
+ <div class="form-row">
154
+ <snice-date-picker
155
+ label="Disabled"
156
+ disabled
157
+ value="2024-12-25">
158
+ </snice-date-picker>
159
+
160
+ <snice-date-picker
161
+ label="Read Only"
162
+ readonly
163
+ value="2024-12-25">
164
+ </snice-date-picker>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <script type="module">
171
+ import './snice-date-picker.ts';
172
+
173
+ // Event listeners for component interaction
174
+ document.addEventListener('@snice/datepicker-change', (e) => {
175
+ // Handle date changes
176
+ });
177
+
178
+ document.addEventListener('@snice/datepicker-select', (e) => {
179
+ // Handle date selection
180
+ });
181
+
182
+ document.addEventListener('@snice/datepicker-open', (e) => {
183
+ // Handle calendar open
184
+ });
185
+
186
+ document.addEventListener('@snice/datepicker-close', (e) => {
187
+ // Handle calendar close
188
+ });
189
+ </script>
190
+ </body>
191
+ </html>
package/components/divider/demo.html ADDED
@@ -0,0 +1,233 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Snice Divider Demo</title>
7
+ <style>
8
+ body {
9
+ font-family: system-ui, -apple-system, sans-serif;
10
+ padding: 40px;
11
+ line-height: 1.6;
12
+ background: #f5f5f5;
13
+ }
14
+
15
+ .container {
16
+ max-width: 900px;
17
+ margin: 0 auto;
18
+ background: white;
19
+ padding: 40px;
20
+ border-radius: 8px;
21
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
22
+ }
23
+
24
+ h1 {
25
+ color: #333;
26
+ border-bottom: 2px solid #e0e0e0;
27
+ padding-bottom: 10px;
28
+ }
29
+
30
+ h2 {
31
+ color: #555;
32
+ margin-top: 30px;
33
+ }
34
+
35
+ .demo-section {
36
+ margin: 30px 0;
37
+ padding: 20px;
38
+ background: #fafafa;
39
+ border-radius: 4px;
40
+ }
41
+
42
+ .demo-label {
43
+ display: block;
44
+ margin-bottom: 8px;
45
+ font-weight: 500;
46
+ color: #666;
47
+ font-size: 14px;
48
+ }
49
+
50
+ .vertical-demo {
51
+ display: flex;
52
+ align-items: center;
53
+ height: 100px;
54
+ gap: 20px;
55
+ }
56
+
57
+ .content-block {
58
+ padding: 20px;
59
+ background: #f0f0f0;
60
+ border-radius: 4px;
61
+ margin: 10px 0;
62
+ }
63
+
64
+ .flex-container {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 20px;
68
+ }
69
+
70
+ .box {
71
+ width: 100px;
72
+ height: 100px;
73
+ background: #3b82f6;
74
+ color: white;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ border-radius: 4px;
79
+ }
80
+
81
+ code {
82
+ background: #f0f0f0;
83
+ padding: 2px 6px;
84
+ border-radius: 3px;
85
+ font-size: 0.9em;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body>
90
+ <div class="container">
91
+ <h1>Snice Divider Component Demo</h1>
92
+
93
+ <div class="demo-section">
94
+ <h2>Basic Dividers</h2>
95
+
96
+ <div>
97
+ <span class="demo-label">Default Horizontal Divider</span>
98
+ <snice-divider></snice-divider>
99
+ </div>
100
+
101
+ <div>
102
+ <span class="demo-label">Horizontal with No Spacing</span>
103
+ <snice-divider spacing="none"></snice-divider>
104
+ </div>
105
+
106
+ <div>
107
+ <span class="demo-label">Horizontal with Large Spacing</span>
108
+ <snice-divider spacing="large"></snice-divider>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="demo-section">
113
+ <h2>Variants</h2>
114
+
115
+ <div>
116
+ <span class="demo-label">Solid (Default)</span>
117
+ <snice-divider variant="solid"></snice-divider>
118
+ </div>
119
+
120
+ <div>
121
+ <span class="demo-label">Dashed</span>
122
+ <snice-divider variant="dashed"></snice-divider>
123
+ </div>
124
+
125
+ <div>
126
+ <span class="demo-label">Dotted</span>
127
+ <snice-divider variant="dotted"></snice-divider>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="demo-section">
132
+ <h2>Text Dividers</h2>
133
+
134
+ <div>
135
+ <span class="demo-label">Center Aligned Text</span>
136
+ <snice-divider text="OR" align="center"></snice-divider>
137
+ </div>
138
+
139
+ <div>
140
+ <span class="demo-label">Start Aligned Text</span>
141
+ <snice-divider text="Section Title" align="start"></snice-divider>
142
+ </div>
143
+
144
+ <div>
145
+ <span class="demo-label">End Aligned Text</span>
146
+ <snice-divider text="End of Section" align="end"></snice-divider>
147
+ </div>
148
+
149
+ <div>
150
+ <span class="demo-label">Dashed with Text</span>
151
+ <snice-divider text="Choose One" variant="dashed"></snice-divider>
152
+ </div>
153
+
154
+ <div>
155
+ <span class="demo-label">Dotted with Text</span>
156
+ <snice-divider text="Continue" variant="dotted"></snice-divider>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="demo-section">
161
+ <h2>Vertical Dividers</h2>
162
+
163
+ <div class="vertical-demo">
164
+ <div class="box">Item 1</div>
165
+ <snice-divider orientation="vertical"></snice-divider>
166
+ <div class="box">Item 2</div>
167
+ <snice-divider orientation="vertical" variant="dashed"></snice-divider>
168
+ <div class="box">Item 3</div>
169
+ <snice-divider orientation="vertical" variant="dotted"></snice-divider>
170
+ <div class="box">Item 4</div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="demo-section">
175
+ <h2>In Context</h2>
176
+
177
+ <div class="content-block">
178
+ <h3>Article Title</h3>
179
+ <p>This is the first paragraph of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
180
+ <snice-divider spacing="large"></snice-divider>
181
+ <p>This is the second paragraph after a divider. Sed do eiusmod tempor incididunt ut labore.</p>
182
+ </div>
183
+
184
+ <div class="content-block">
185
+ <h3>Login Form</h3>
186
+ <p>Username: user@example.com</p>
187
+ <p>Password: ********</p>
188
+ <snice-divider text="OR" spacing="large"></snice-divider>
189
+ <p>Sign in with Google</p>
190
+ <p>Sign in with GitHub</p>
191
+ </div>
192
+
193
+ <div class="content-block">
194
+ <h3>Navigation Menu</h3>
195
+ <div class="flex-container">
196
+ <span>Home</span>
197
+ <snice-divider orientation="vertical" spacing="small"></snice-divider>
198
+ <span>About</span>
199
+ <snice-divider orientation="vertical" spacing="small"></snice-divider>
200
+ <span>Services</span>
201
+ <snice-divider orientation="vertical" spacing="small"></snice-divider>
202
+ <span>Contact</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="demo-section">
208
+ <h2>Custom Styling</h2>
209
+
210
+ <div>
211
+ <span class="demo-label">Custom Color (via CSS variable)</span>
212
+ <snice-divider style="--divider-color: #ef4444;"></snice-divider>
213
+ </div>
214
+
215
+ <div>
216
+ <span class="demo-label">Thick Divider</span>
217
+ <snice-divider style="--divider-thickness: 3px;"></snice-divider>
218
+ </div>
219
+
220
+ <div>
221
+ <span class="demo-label">Custom Text Background</span>
222
+ <div style="background: linear-gradient(to right, #fce7f3, #ddd6fe); padding: 20px;">
223
+ <snice-divider text="Gradient Background" text-background="transparent"></snice-divider>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <script type="module">
230
+ import './snice-divider.ts';
231
+ </script>
232
+ </body>
233
+ </html>