@getmicdrop/svelte-components 5.10.3 → 5.12.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 (245) hide show
  1. package/dist/calendar/AboutShow/AboutShow.svelte +172 -172
  2. package/dist/calendar/Calendar/MiniMonthCalendar.svelte +782 -782
  3. package/dist/calendar/FAQs/FAQs.svelte +75 -75
  4. package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte +126 -126
  5. package/dist/calendar/OrderSummary/OrderSummary.svelte +367 -367
  6. package/dist/calendar/PublicCard/PublicCard.svelte +146 -146
  7. package/dist/calendar/ShowCard/ShowCard.svelte +157 -157
  8. package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte +61 -61
  9. package/dist/components/Heading.svelte +60 -60
  10. package/dist/components/Layout/AppShell.svelte +104 -104
  11. package/dist/components/Layout/ContentSection.svelte +80 -80
  12. package/dist/components/Layout/Grid.svelte +4 -4
  13. package/dist/components/Layout/Heading.svelte +81 -81
  14. package/dist/components/Layout/PageContainer.svelte +69 -69
  15. package/dist/components/Layout/Responsive.svelte +75 -75
  16. package/dist/components/Layout/Section.svelte +80 -80
  17. package/dist/components/Layout/ShowOnDesktop.svelte +37 -37
  18. package/dist/components/Layout/ShowOnMobile.svelte +37 -37
  19. package/dist/components/Layout/Sidebar.svelte +108 -108
  20. package/dist/components/Layout/Stack.spec.js +1 -1
  21. package/dist/components/Layout/Stack.svelte +6 -6
  22. package/dist/components/Layout/Text.svelte +87 -87
  23. package/dist/components/Layout/TwoColumn.svelte +108 -108
  24. package/dist/components/Text.svelte +53 -53
  25. package/dist/constants/validation.js +91 -91
  26. package/dist/constants/validation.spec.js +64 -64
  27. package/dist/datetime/__tests__/format.test.js +1 -1
  28. package/dist/datetime/__tests__/parse.test.js +1 -1
  29. package/dist/datetime/__tests__/timezone.test.js +1 -1
  30. package/dist/datetime/parse.js +1 -1
  31. package/dist/forms/createFormStore.svelte.js +0 -1
  32. package/dist/index.d.ts +2 -0
  33. package/dist/index.d.ts.map +1 -1
  34. package/dist/index.js +57 -51
  35. package/dist/patterns/data/DataGrid.svelte +45 -45
  36. package/dist/patterns/data/DataList.svelte +24 -24
  37. package/dist/patterns/data/DataTable.svelte +36 -36
  38. package/dist/patterns/forms/FormActions.spec.js +95 -95
  39. package/dist/patterns/forms/FormActions.stories.svelte +97 -97
  40. package/dist/patterns/forms/FormActions.svelte +46 -46
  41. package/dist/patterns/forms/FormGrid.svelte +33 -33
  42. package/dist/patterns/forms/FormSection.svelte +32 -32
  43. package/dist/patterns/forms/FormValidationSummary.stories.svelte +83 -83
  44. package/dist/patterns/forms/FormValidationSummary.svelte +74 -74
  45. package/dist/patterns/layout/Sidebar.svelte +39 -39
  46. package/dist/patterns/layout/index.js +29 -29
  47. package/dist/patterns/navigation/BottomNav.stories.svelte +117 -117
  48. package/dist/patterns/navigation/BottomNav.svelte +74 -74
  49. package/dist/patterns/navigation/Header.stories.svelte +77 -77
  50. package/dist/patterns/navigation/Header.svelte +255 -255
  51. package/dist/patterns/page/PageHeader.svelte +18 -18
  52. package/dist/patterns/page/PageLayout.svelte +40 -40
  53. package/dist/patterns/page/PageLoader.spec.js +57 -57
  54. package/dist/patterns/page/PageLoader.stories.svelte +137 -137
  55. package/dist/patterns/page/PageLoader.svelte +24 -24
  56. package/dist/patterns/page/SectionHeader.svelte +29 -29
  57. package/dist/presets/badges.js +112 -112
  58. package/dist/presets/buttons.js +76 -76
  59. package/dist/presets/index.js +9 -9
  60. package/dist/primitives/Accordion/Accordion.stories.svelte +75 -75
  61. package/dist/primitives/Accordion/Accordion.svelte +42 -42
  62. package/dist/primitives/Accordion/AccordionItem.svelte +95 -95
  63. package/dist/primitives/Alert/Alert.spec.js +173 -173
  64. package/dist/primitives/Alert/Alert.stories.svelte +88 -88
  65. package/dist/primitives/Alert/Alert.svelte +27 -27
  66. package/dist/primitives/Avatar/Avatar.stories.svelte +94 -94
  67. package/dist/primitives/Avatar/Avatar.svelte +66 -66
  68. package/dist/primitives/Badges/Badge.spec.js +144 -144
  69. package/dist/primitives/Badges/Badge.stories.svelte +86 -86
  70. package/dist/primitives/Badges/Badge.svelte +99 -99
  71. package/dist/primitives/BottomSheet/BottomSheet.spec.js +136 -136
  72. package/dist/primitives/BottomSheet/BottomSheet.stories.svelte +83 -83
  73. package/dist/primitives/BottomSheet/BottomSheet.svelte +100 -100
  74. package/dist/primitives/Breadcrumb/Breadcrumb.spec.js +123 -122
  75. package/dist/primitives/Breadcrumb/Breadcrumb.stories.svelte +23 -23
  76. package/dist/primitives/Breadcrumb/Breadcrumb.svelte +99 -98
  77. package/dist/primitives/Button/Button.spec.js +223 -223
  78. package/dist/primitives/Button/Button.stories.svelte +76 -76
  79. package/dist/primitives/Button/Button.svelte +314 -283
  80. package/dist/primitives/Button/Button.svelte.d.ts +2 -0
  81. package/dist/primitives/Button/Button.svelte.d.ts.map +1 -1
  82. package/dist/primitives/Button/ButtonGroup.svelte +50 -50
  83. package/dist/primitives/Button/ButtonSaveDemo.spec.js +146 -146
  84. package/dist/primitives/Button/ButtonSaveDemo.svelte +25 -25
  85. package/dist/primitives/Button/ButtonVariantShowcase.svelte +129 -129
  86. package/dist/primitives/Card.spec.js +49 -49
  87. package/dist/primitives/Card.stories.svelte +22 -22
  88. package/dist/primitives/Card.svelte +28 -28
  89. package/dist/primitives/Checkbox/Checkbox.stories.svelte +84 -84
  90. package/dist/primitives/Checkbox/Checkbox.svelte +88 -88
  91. package/dist/primitives/DarkModeToggle.spec.js +390 -390
  92. package/dist/primitives/DarkModeToggle.stories.svelte +57 -57
  93. package/dist/primitives/DarkModeToggle.svelte +136 -136
  94. package/dist/primitives/Drawer/Drawer.stories.svelte +80 -80
  95. package/dist/primitives/Drawer/Drawer.svelte +120 -120
  96. package/dist/primitives/Dropdown/Dropdown.stories.svelte +137 -137
  97. package/dist/primitives/Dropdown/Dropdown.svelte +170 -170
  98. package/dist/primitives/Dropdown/DropdownDivider.svelte +9 -9
  99. package/dist/primitives/Dropdown/DropdownItem.svelte +80 -80
  100. package/dist/primitives/Helper/Helper.svelte +33 -33
  101. package/dist/primitives/Icons/ArrowLeft.svelte +8 -8
  102. package/dist/primitives/Icons/ArrowRight.svelte +8 -8
  103. package/dist/primitives/Icons/Availability.svelte +14 -14
  104. package/dist/primitives/Icons/Back.svelte +14 -14
  105. package/dist/primitives/Icons/CheckCircle.svelte +6 -6
  106. package/dist/primitives/Icons/CheckCircleOutline.svelte +15 -15
  107. package/dist/primitives/Icons/ChevronLeft.svelte +4 -4
  108. package/dist/primitives/Icons/ChevronRight.svelte +4 -4
  109. package/dist/primitives/Icons/Copy.svelte +15 -15
  110. package/dist/primitives/Icons/Cross.svelte +5 -5
  111. package/dist/primitives/Icons/DownArrow.svelte +8 -8
  112. package/dist/primitives/Icons/ErrorCircle.svelte +6 -6
  113. package/dist/primitives/Icons/FacebookIcon.svelte +2 -2
  114. package/dist/primitives/Icons/Home.svelte +15 -15
  115. package/dist/primitives/Icons/Icon.spec.js +169 -169
  116. package/dist/primitives/Icons/Icon.stories.svelte +100 -100
  117. package/dist/primitives/Icons/Icon.svelte +52 -52
  118. package/dist/primitives/Icons/IconGallery.stories.svelte +235 -235
  119. package/dist/primitives/Icons/Info.svelte +7 -7
  120. package/dist/primitives/Icons/InstagramIcon.svelte +4 -4
  121. package/dist/primitives/Icons/LogoInstagram.svelte +2 -2
  122. package/dist/primitives/Icons/Message.svelte +15 -15
  123. package/dist/primitives/Icons/MoonIcon.svelte +5 -5
  124. package/dist/primitives/Icons/More.svelte +21 -21
  125. package/dist/primitives/Icons/MoreHori.spec.js +61 -61
  126. package/dist/primitives/Icons/MoreHori.svelte +22 -22
  127. package/dist/primitives/Icons/Notification.svelte +14 -14
  128. package/dist/primitives/Icons/Payment.svelte +14 -14
  129. package/dist/primitives/Icons/Profile.svelte +21 -21
  130. package/dist/primitives/Icons/Reload.svelte +29 -29
  131. package/dist/primitives/Icons/Shows.svelte +21 -21
  132. package/dist/primitives/Icons/Signout.svelte +21 -21
  133. package/dist/primitives/Icons/SunIcon.svelte +8 -8
  134. package/dist/primitives/Icons/TiktokIcon.svelte +2 -2
  135. package/dist/primitives/Icons/TwitterIcon.svelte +2 -2
  136. package/dist/primitives/Icons/WarningIcon.spec.js +18 -18
  137. package/dist/primitives/Icons/WarningIcon.svelte +5 -5
  138. package/dist/primitives/Input/Input.spec.js +573 -573
  139. package/dist/primitives/Input/Input.stories.svelte +139 -139
  140. package/dist/primitives/Input/Input.svelte +423 -423
  141. package/dist/primitives/Input/Select.spec.js +218 -218
  142. package/dist/primitives/Input/Select.stories.svelte +112 -112
  143. package/dist/primitives/Input/Select.svelte +252 -252
  144. package/dist/primitives/Input/Textarea.stories.svelte +137 -137
  145. package/dist/primitives/Input/Textarea.svelte +105 -105
  146. package/dist/primitives/Label/Label.svelte +37 -37
  147. package/dist/primitives/Modal/Modal.spec.js +99 -99
  148. package/dist/primitives/Modal/Modal.stories.svelte +86 -86
  149. package/dist/primitives/Modal/Modal.svelte +174 -157
  150. package/dist/primitives/Modal/Modal.svelte.d.ts +2 -0
  151. package/dist/primitives/Modal/Modal.svelte.d.ts.map +1 -1
  152. package/dist/primitives/Pagination/Pagination.stories.svelte +76 -76
  153. package/dist/primitives/Pagination/Pagination.svelte +261 -261
  154. package/dist/primitives/Radio/Radio.stories.svelte +80 -80
  155. package/dist/primitives/Radio/Radio.svelte +67 -67
  156. package/dist/primitives/Skeleton/CardPlaceholder.svelte +87 -87
  157. package/dist/primitives/Skeleton/ImagePlaceholder.svelte +59 -59
  158. package/dist/primitives/Skeleton/ListPlaceholder.svelte +76 -76
  159. package/dist/primitives/Skeleton/Skeleton.stories.svelte +151 -151
  160. package/dist/primitives/Skeleton/Skeleton.svelte +26 -26
  161. package/dist/primitives/Spinner/Spinner.spec.js +71 -71
  162. package/dist/primitives/Spinner/Spinner.stories.svelte +29 -29
  163. package/dist/primitives/Spinner/Spinner.svelte +20 -20
  164. package/dist/primitives/Tabs/TabItem.svelte +49 -49
  165. package/dist/primitives/Tabs/Tabs.stories.svelte +112 -112
  166. package/dist/primitives/Tabs/Tabs.svelte +137 -137
  167. package/dist/primitives/Toggle.spec.js +146 -146
  168. package/dist/primitives/Toggle.stories.svelte +92 -92
  169. package/dist/primitives/Toggle.svelte +141 -131
  170. package/dist/primitives/Toggle.svelte.d.ts +2 -0
  171. package/dist/primitives/Toggle.svelte.d.ts.map +1 -1
  172. package/dist/primitives/Tooltip/Tooltip.svelte +83 -83
  173. package/dist/primitives/Typography/Typography.svelte +53 -53
  174. package/dist/primitives/ValidationError.spec.js +103 -103
  175. package/dist/primitives/ValidationError.stories.svelte +69 -69
  176. package/dist/primitives/ValidationError.svelte +29 -29
  177. package/dist/primitives/index.js +92 -92
  178. package/dist/recipes/CropImage/CropImage.spec.js +208 -208
  179. package/dist/recipes/CropImage/CropImage.stories.svelte +104 -104
  180. package/dist/recipes/CropImage/CropImage.svelte +219 -219
  181. package/dist/recipes/ImageUploader/ImageUploader.stories.svelte +125 -125
  182. package/dist/recipes/ImageUploader/ImageUploader.svelte +970 -970
  183. package/dist/recipes/Toaster/Toaster.stories.svelte +62 -62
  184. package/dist/recipes/feedback/EmptyState/EmptyState.svelte +1 -1
  185. package/dist/recipes/feedback/ErrorDisplay.spec.js +69 -69
  186. package/dist/recipes/feedback/ErrorDisplay.stories.svelte +101 -101
  187. package/dist/recipes/feedback/ErrorDisplay.svelte +1 -1
  188. package/dist/recipes/feedback/StatusIndicator/StatusIndicator.spec.js +133 -133
  189. package/dist/recipes/feedback/StatusIndicator/StatusIndicator.svelte +157 -157
  190. package/dist/recipes/fields/CheckboxField.svelte +85 -85
  191. package/dist/recipes/fields/FormField.svelte +58 -58
  192. package/dist/recipes/fields/RadioGroup.svelte +95 -95
  193. package/dist/recipes/fields/SelectField.svelte +80 -80
  194. package/dist/recipes/fields/TextareaField.svelte +97 -97
  195. package/dist/recipes/fields/ToggleField.svelte +60 -60
  196. package/dist/recipes/fields/index.js +7 -7
  197. package/dist/recipes/inputs/MultiSelect.spec.js +260 -260
  198. package/dist/recipes/inputs/MultiSelect.stories.svelte +133 -133
  199. package/dist/recipes/inputs/MultiSelect.svelte +283 -283
  200. package/dist/recipes/inputs/OTPInput.spec.js +251 -251
  201. package/dist/recipes/inputs/OTPInput.stories.svelte +162 -162
  202. package/dist/recipes/inputs/OTPInput.svelte +117 -117
  203. package/dist/recipes/inputs/PasswordInput.svelte +22 -22
  204. package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte +131 -131
  205. package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte +123 -123
  206. package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte +344 -344
  207. package/dist/recipes/inputs/Search.svelte +102 -102
  208. package/dist/recipes/inputs/SelectDropdown.svelte +171 -171
  209. package/dist/recipes/modals/AlertModal.svelte +130 -130
  210. package/dist/recipes/modals/ConfirmationModal.spec.js +206 -206
  211. package/dist/recipes/modals/ConfirmationModal.stories.svelte +119 -119
  212. package/dist/recipes/modals/ConfirmationModal.svelte +162 -152
  213. package/dist/recipes/modals/ConfirmationModal.svelte.d.ts +2 -0
  214. package/dist/recipes/modals/ConfirmationModal.svelte.d.ts.map +1 -1
  215. package/dist/recipes/modals/InputModal.svelte +182 -182
  216. package/dist/recipes/modals/ModalStateManager.spec.js +100 -100
  217. package/dist/recipes/modals/ModalStateManager.svelte +77 -77
  218. package/dist/recipes/modals/ModalTestWrapper.svelte +65 -65
  219. package/dist/recipes/modals/StatusModal.svelte +206 -206
  220. package/dist/services/EventService.js +75 -75
  221. package/dist/services/EventService.spec.js +217 -217
  222. package/dist/services/ShowService.spec.js +345 -345
  223. package/dist/stores/toaster.js +13 -13
  224. package/dist/stories/ButtonAuditReview.stories.svelte +14 -14
  225. package/dist/stories/ButtonAuditReview.svelte +427 -427
  226. package/dist/stories/PatternsGallery.stories.svelte +19 -19
  227. package/dist/stories/PatternsGallery.svelte +206 -206
  228. package/dist/stories/PrimitivesGallery.stories.svelte +19 -19
  229. package/dist/stories/PrimitivesGallery.svelte +752 -752
  230. package/dist/stories/RecipesGallery.stories.svelte +19 -19
  231. package/dist/stories/RecipesGallery.svelte +471 -471
  232. package/dist/stories/button-audit-manifest.json +11186 -11186
  233. package/dist/tailwind/preset.cjs +82 -82
  234. package/dist/telemetry.js +405 -405
  235. package/dist/telemetry.spec.js +1169 -1169
  236. package/dist/tokens/tokens.css +87 -87
  237. package/dist/tokens/typography-base.css +163 -163
  238. package/dist/tokens/utilities.css +353 -353
  239. package/dist/utils/apiConfig.spec.js +219 -219
  240. package/dist/utils/haptic.d.ts +41 -0
  241. package/dist/utils/haptic.d.ts.map +1 -0
  242. package/dist/utils/haptic.js +115 -0
  243. package/dist/utils/transitions.js +4 -4
  244. package/dist/utils/utils.js +693 -693
  245. package/package.json +297 -297
@@ -1,108 +1,108 @@
1
- <script lang="ts">
2
- import type { Snippet } from 'svelte';
3
-
4
- type Gap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
5
- type Ratio = 'equal' | '1:2' | '2:1' | '1:3' | '3:1';
6
- type StackAt = 'sm' | 'md' | 'lg' | 'never';
7
-
8
- interface Props {
9
- /** Gap between columns */
10
- gap?: Gap;
11
- /** Column ratio */
12
- ratio?: Ratio;
13
- /** Breakpoint at which columns stack vertically */
14
- stackAt?: StackAt;
15
- /** Reverse order when stacked */
16
- reverseOnStack?: boolean;
17
- /** Vertical alignment */
18
- align?: 'start' | 'center' | 'end' | 'stretch';
19
- /** Additional CSS classes */
20
- class?: string;
21
- /** Left column content */
22
- left?: Snippet;
23
- /** Right column content */
24
- right?: Snippet;
25
- /** Children (alternative to left/right slots) */
26
- children?: Snippet;
27
- }
28
-
29
- let {
30
- gap = 'md',
31
- ratio = 'equal',
32
- stackAt = 'md',
33
- reverseOnStack = false,
34
- align = 'stretch',
35
- class: className = '',
36
- left,
37
- right,
38
- children,
39
- }: Props = $props();
40
-
41
- const gapClasses: Record<Gap, string> = {
42
- none: 'gap-0',
43
- sm: 'gap-2',
44
- md: 'gap-4',
45
- lg: 'gap-6',
46
- xl: 'gap-8',
47
- };
48
-
49
- // Stack classes: normal and reversed versions
50
- const stackAtClasses: Record<StackAt, string> = {
51
- sm: 'flex-col sm:flex-row',
52
- md: 'flex-col md:flex-row',
53
- lg: 'flex-col lg:flex-row',
54
- never: 'flex-row',
55
- };
56
-
57
- const stackAtReversedClasses: Record<StackAt, string> = {
58
- sm: 'flex-col-reverse sm:flex-row',
59
- md: 'flex-col-reverse md:flex-row',
60
- lg: 'flex-col-reverse lg:flex-row',
61
- never: 'flex-row',
62
- };
63
-
64
- const alignClasses: Record<string, string> = {
65
- start: 'items-start',
66
- center: 'items-center',
67
- end: 'items-end',
68
- stretch: 'items-stretch',
69
- };
70
-
71
- // Ratio classes for each column
72
- const ratioLeftClasses: Record<Ratio, string> = {
73
- equal: 'flex-1',
74
- '1:2': 'w-full md:w-1/3',
75
- '2:1': 'w-full md:w-2/3',
76
- '1:3': 'w-full md:w-1/4',
77
- '3:1': 'w-full md:w-3/4',
78
- };
79
-
80
- const ratioRightClasses: Record<Ratio, string> = {
81
- equal: 'flex-1',
82
- '1:2': 'w-full md:w-2/3',
83
- '2:1': 'w-full md:w-1/3',
84
- '1:3': 'w-full md:w-3/4',
85
- '3:1': 'w-full md:w-1/4',
86
- };
87
-
88
- let containerClasses = $derived([
89
- 'flex',
90
- reverseOnStack ? stackAtReversedClasses[stackAt] : stackAtClasses[stackAt],
91
- gapClasses[gap],
92
- alignClasses[align],
93
- className,
94
- ].filter(Boolean).join(' '));
95
- </script>
96
-
97
- <div class={containerClasses}>
98
- {#if left && right}
99
- <div class={ratioLeftClasses[ratio]}>
100
- {@render left()}
101
- </div>
102
- <div class={ratioRightClasses[ratio]}>
103
- {@render right()}
104
- </div>
105
- {:else if children}
106
- {@render children()}
107
- {/if}
108
- </div>
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+
4
+ type Gap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
5
+ type Ratio = 'equal' | '1:2' | '2:1' | '1:3' | '3:1';
6
+ type StackAt = 'sm' | 'md' | 'lg' | 'never';
7
+
8
+ interface Props {
9
+ /** Gap between columns */
10
+ gap?: Gap;
11
+ /** Column ratio */
12
+ ratio?: Ratio;
13
+ /** Breakpoint at which columns stack vertically */
14
+ stackAt?: StackAt;
15
+ /** Reverse order when stacked */
16
+ reverseOnStack?: boolean;
17
+ /** Vertical alignment */
18
+ align?: 'start' | 'center' | 'end' | 'stretch';
19
+ /** Additional CSS classes */
20
+ class?: string;
21
+ /** Left column content */
22
+ left?: Snippet;
23
+ /** Right column content */
24
+ right?: Snippet;
25
+ /** Children (alternative to left/right slots) */
26
+ children?: Snippet;
27
+ }
28
+
29
+ let {
30
+ gap = 'md',
31
+ ratio = 'equal',
32
+ stackAt = 'md',
33
+ reverseOnStack = false,
34
+ align = 'stretch',
35
+ class: className = '',
36
+ left,
37
+ right,
38
+ children,
39
+ }: Props = $props();
40
+
41
+ const gapClasses: Record<Gap, string> = {
42
+ none: 'gap-0',
43
+ sm: 'gap-2',
44
+ md: 'gap-4',
45
+ lg: 'gap-6',
46
+ xl: 'gap-8',
47
+ };
48
+
49
+ // Stack classes: normal and reversed versions
50
+ const stackAtClasses: Record<StackAt, string> = {
51
+ sm: 'flex-col sm:flex-row',
52
+ md: 'flex-col md:flex-row',
53
+ lg: 'flex-col lg:flex-row',
54
+ never: 'flex-row',
55
+ };
56
+
57
+ const stackAtReversedClasses: Record<StackAt, string> = {
58
+ sm: 'flex-col-reverse sm:flex-row',
59
+ md: 'flex-col-reverse md:flex-row',
60
+ lg: 'flex-col-reverse lg:flex-row',
61
+ never: 'flex-row',
62
+ };
63
+
64
+ const alignClasses: Record<string, string> = {
65
+ start: 'items-start',
66
+ center: 'items-center',
67
+ end: 'items-end',
68
+ stretch: 'items-stretch',
69
+ };
70
+
71
+ // Ratio classes for each column
72
+ const ratioLeftClasses: Record<Ratio, string> = {
73
+ equal: 'flex-1',
74
+ '1:2': 'w-full md:w-1/3',
75
+ '2:1': 'w-full md:w-2/3',
76
+ '1:3': 'w-full md:w-1/4',
77
+ '3:1': 'w-full md:w-3/4',
78
+ };
79
+
80
+ const ratioRightClasses: Record<Ratio, string> = {
81
+ equal: 'flex-1',
82
+ '1:2': 'w-full md:w-2/3',
83
+ '2:1': 'w-full md:w-1/3',
84
+ '1:3': 'w-full md:w-3/4',
85
+ '3:1': 'w-full md:w-1/4',
86
+ };
87
+
88
+ let containerClasses = $derived([
89
+ 'flex',
90
+ reverseOnStack ? stackAtReversedClasses[stackAt] : stackAtClasses[stackAt],
91
+ gapClasses[gap],
92
+ alignClasses[align],
93
+ className,
94
+ ].filter(Boolean).join(' '));
95
+ </script>
96
+
97
+ <div class={containerClasses}>
98
+ {#if left && right}
99
+ <div class={ratioLeftClasses[ratio]}>
100
+ {@render left()}
101
+ </div>
102
+ <div class={ratioRightClasses[ratio]}>
103
+ {@render right()}
104
+ </div>
105
+ {:else if children}
106
+ {@render children()}
107
+ {/if}
108
+ </div>
@@ -1,53 +1,53 @@
1
- <script lang="ts">
2
- import type { Snippet } from 'svelte';
3
-
4
- interface Props {
5
- size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
6
- leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
7
- color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
8
- class?: string;
9
- children: Snippet;
10
- }
11
-
12
- let {
13
- size = 'md',
14
- leading,
15
- color = 'default',
16
- class: className = '',
17
- children,
18
- }: Props = $props();
19
-
20
- const sizeClasses: Record<string, string> = {
21
- xs: 'text-xs',
22
- sm: 'text-sm',
23
- base: 'text-base',
24
- md: 'text-base',
25
- lg: 'text-lg',
26
- xl: 'text-xl',
27
- '2xl': 'text-2xl',
28
- };
29
-
30
- const colorClasses: Record<string, string> = {
31
- default: 'text-gray-900 dark:text-gray-100',
32
- muted: 'text-gray-500 dark:text-gray-400',
33
- primary: 'text-primary-600 dark:text-primary-400',
34
- secondary: 'text-gray-600 dark:text-gray-300',
35
- success: 'text-green-600 dark:text-green-400',
36
- warning: 'text-yellow-600 dark:text-yellow-400',
37
- error: 'text-red-600 dark:text-red-400',
38
- };
39
-
40
- const leadingClasses: Record<string, string> = {
41
- none: 'leading-none',
42
- tight: 'leading-tight',
43
- snug: 'leading-snug',
44
- normal: 'leading-normal',
45
- relaxed: 'leading-relaxed',
46
- loose: 'leading-loose',
47
- };
48
-
49
- let leadingClass = $derived(leading ? leadingClasses[leading] : '');
50
- let classes = $derived(`${sizeClasses[size] || 'text-base'} ${leadingClass} ${colorClasses[color] || ''} ${className}`.trim());
51
- </script>
52
-
53
- <span class={classes}>{@render children()}</span>
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte';
3
+
4
+ interface Props {
5
+ size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
6
+ leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
7
+ color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
8
+ class?: string;
9
+ children: Snippet;
10
+ }
11
+
12
+ let {
13
+ size = 'md',
14
+ leading,
15
+ color = 'default',
16
+ class: className = '',
17
+ children,
18
+ }: Props = $props();
19
+
20
+ const sizeClasses: Record<string, string> = {
21
+ xs: 'text-xs',
22
+ sm: 'text-sm',
23
+ base: 'text-base',
24
+ md: 'text-base',
25
+ lg: 'text-lg',
26
+ xl: 'text-xl',
27
+ '2xl': 'text-2xl',
28
+ };
29
+
30
+ const colorClasses: Record<string, string> = {
31
+ default: 'text-gray-900 dark:text-gray-100',
32
+ muted: 'text-gray-500 dark:text-gray-400',
33
+ primary: 'text-primary-600 dark:text-primary-400',
34
+ secondary: 'text-gray-600 dark:text-gray-300',
35
+ success: 'text-green-600 dark:text-green-400',
36
+ warning: 'text-yellow-600 dark:text-yellow-400',
37
+ error: 'text-red-600 dark:text-red-400',
38
+ };
39
+
40
+ const leadingClasses: Record<string, string> = {
41
+ none: 'leading-none',
42
+ tight: 'leading-tight',
43
+ snug: 'leading-snug',
44
+ normal: 'leading-normal',
45
+ relaxed: 'leading-relaxed',
46
+ loose: 'leading-loose',
47
+ };
48
+
49
+ let leadingClass = $derived(leading ? leadingClasses[leading] : '');
50
+ let classes = $derived(`${sizeClasses[size] || 'text-base'} ${leadingClass} ${colorClasses[color] || ''} ${className}`.trim());
51
+ </script>
52
+
53
+ <span class={classes}>{@render children()}</span>
@@ -1,91 +1,91 @@
1
- /**
2
- * Validation Constants
3
- *
4
- * Shared validation rules and defaults for event, ticket, and promo code validation.
5
- * Used by micdrop-frontend, venue-calendar-npm, and other apps.
6
- *
7
- * @example
8
- * import { MIN_EVENT_DURATION_MINS, DEFAULT_EVENT_DURATION_MINS } from '@getmicdrop/svelte-components';
9
- */
10
-
11
- // ============================================================================
12
- // Event Time Constants
13
- // ============================================================================
14
-
15
- /** Minimum event duration in minutes (validation constraint) */
16
- export const MIN_EVENT_DURATION_MINS = 15;
17
-
18
- /** Maximum event duration in minutes (24 hours) */
19
- export const MAX_EVENT_DURATION_MINS = 1440;
20
-
21
- /** Default event duration in minutes (used when auto-filling end time) */
22
- export const DEFAULT_EVENT_DURATION_MINS = 90;
23
-
24
- /** Default time doors open before event start in minutes (used when auto-filling) */
25
- export const DEFAULT_DOORS_BEFORE_START_MINS = 30;
26
-
27
- // ============================================================================
28
- // Ticket Constants
29
- // ============================================================================
30
-
31
- /** Maximum tickets per order limit */
32
- export const MAX_TICKETS_PER_ORDER = 100;
33
-
34
- /** Minimum tickets per order limit */
35
- export const MIN_TICKETS_PER_ORDER = 0;
36
-
37
- // ============================================================================
38
- // Promo Code Constants
39
- // ============================================================================
40
-
41
- /** Maximum percentage discount */
42
- export const MAX_PERCENTAGE_DISCOUNT = 100;
43
-
44
- // ============================================================================
45
- // Error Codes
46
- // ============================================================================
47
-
48
- export const ErrorCodes = {
49
- // Event errors
50
- EVENT_DURATION_TOO_SHORT: 'EVENT_DURATION_TOO_SHORT',
51
- EVENT_DURATION_TOO_LONG: 'EVENT_DURATION_TOO_LONG',
52
- EVENT_END_BEFORE_START: 'EVENT_END_BEFORE_START',
53
- EVENT_DOORS_SAME_AS_START: 'EVENT_DOORS_SAME_AS_START',
54
- EVENT_DOORS_TOO_CLOSE: 'EVENT_DOORS_TOO_CLOSE',
55
- EVENT_INVALID_TIME_FORMAT: 'EVENT_INVALID_TIME_FORMAT',
56
-
57
- // Price/quantity errors
58
- PRICE_REQUIRED: 'PRICE_REQUIRED',
59
- PRICE_MUST_BE_POSITIVE: 'PRICE_MUST_BE_POSITIVE',
60
- PRICE_INVALID_FORMAT: 'PRICE_INVALID_FORMAT',
61
- QUANTITY_REQUIRED: 'QUANTITY_REQUIRED',
62
- QUANTITY_MUST_BE_POSITIVE: 'QUANTITY_MUST_BE_POSITIVE',
63
- QUANTITY_INVALID_FORMAT: 'QUANTITY_INVALID_FORMAT',
64
-
65
- // Ticket limit errors
66
- MIN_TICKETS_REQUIRED: 'MIN_TICKETS_REQUIRED',
67
- MIN_TICKETS_EXCEEDS_MAX_ALLOWED: 'MIN_TICKETS_EXCEEDS_MAX_ALLOWED',
68
- MAX_TICKETS_EXCEEDS_MAX_ALLOWED: 'MAX_TICKETS_EXCEEDS_MAX_ALLOWED',
69
- MIN_EXCEEDS_MAX: 'MIN_EXCEEDS_MAX',
70
-
71
- // Sales window errors
72
- SALES_BEGIN_AFTER_EVENT_END: 'SALES_BEGIN_AFTER_EVENT_END',
73
- SALES_END_AFTER_EVENT_END: 'SALES_END_AFTER_EVENT_END',
74
- SALES_END_BEFORE_BEGIN: 'SALES_END_BEFORE_BEGIN',
75
-
76
- // Capacity errors
77
- CAPACITY_EXCEEDED: 'CAPACITY_EXCEEDED',
78
-
79
- // Promo code errors
80
- PROMO_NAME_REQUIRED: 'PROMO_NAME_REQUIRED',
81
- PROMO_NAME_COLLISION: 'PROMO_NAME_COLLISION',
82
- PROMO_END_BEFORE_START: 'PROMO_END_BEFORE_START',
83
- PROMO_DISCOUNT_REQUIRED: 'PROMO_DISCOUNT_REQUIRED',
84
- PROMO_BOTH_DISCOUNT_TYPES: 'PROMO_BOTH_DISCOUNT_TYPES',
85
- PROMO_PERCENT_EXCEEDS_100: 'PROMO_PERCENT_EXCEEDS_100',
86
- PROMO_LIMIT_REQUIRED: 'PROMO_LIMIT_REQUIRED',
87
-
88
- // Warning codes
89
- PROMO_EXTENDS_PAST_EVENT: 'PROMO_EXTENDS_PAST_EVENT',
90
- SALES_CLOSE_TO_EVENT: 'SALES_CLOSE_TO_EVENT',
91
- };
1
+ /**
2
+ * Validation Constants
3
+ *
4
+ * Shared validation rules and defaults for event, ticket, and promo code validation.
5
+ * Used by micdrop-frontend, venue-calendar-npm, and other apps.
6
+ *
7
+ * @example
8
+ * import { MIN_EVENT_DURATION_MINS, DEFAULT_EVENT_DURATION_MINS } from '@getmicdrop/svelte-components';
9
+ */
10
+
11
+ // ============================================================================
12
+ // Event Time Constants
13
+ // ============================================================================
14
+
15
+ /** Minimum event duration in minutes (validation constraint) */
16
+ export const MIN_EVENT_DURATION_MINS = 15;
17
+
18
+ /** Maximum event duration in minutes (24 hours) */
19
+ export const MAX_EVENT_DURATION_MINS = 1440;
20
+
21
+ /** Default event duration in minutes (used when auto-filling end time) */
22
+ export const DEFAULT_EVENT_DURATION_MINS = 90;
23
+
24
+ /** Default time doors open before event start in minutes (used when auto-filling) */
25
+ export const DEFAULT_DOORS_BEFORE_START_MINS = 30;
26
+
27
+ // ============================================================================
28
+ // Ticket Constants
29
+ // ============================================================================
30
+
31
+ /** Maximum tickets per order limit */
32
+ export const MAX_TICKETS_PER_ORDER = 100;
33
+
34
+ /** Minimum tickets per order limit */
35
+ export const MIN_TICKETS_PER_ORDER = 0;
36
+
37
+ // ============================================================================
38
+ // Promo Code Constants
39
+ // ============================================================================
40
+
41
+ /** Maximum percentage discount */
42
+ export const MAX_PERCENTAGE_DISCOUNT = 100;
43
+
44
+ // ============================================================================
45
+ // Error Codes
46
+ // ============================================================================
47
+
48
+ export const ErrorCodes = {
49
+ // Event errors
50
+ EVENT_DURATION_TOO_SHORT: 'EVENT_DURATION_TOO_SHORT',
51
+ EVENT_DURATION_TOO_LONG: 'EVENT_DURATION_TOO_LONG',
52
+ EVENT_END_BEFORE_START: 'EVENT_END_BEFORE_START',
53
+ EVENT_DOORS_SAME_AS_START: 'EVENT_DOORS_SAME_AS_START',
54
+ EVENT_DOORS_TOO_CLOSE: 'EVENT_DOORS_TOO_CLOSE',
55
+ EVENT_INVALID_TIME_FORMAT: 'EVENT_INVALID_TIME_FORMAT',
56
+
57
+ // Price/quantity errors
58
+ PRICE_REQUIRED: 'PRICE_REQUIRED',
59
+ PRICE_MUST_BE_POSITIVE: 'PRICE_MUST_BE_POSITIVE',
60
+ PRICE_INVALID_FORMAT: 'PRICE_INVALID_FORMAT',
61
+ QUANTITY_REQUIRED: 'QUANTITY_REQUIRED',
62
+ QUANTITY_MUST_BE_POSITIVE: 'QUANTITY_MUST_BE_POSITIVE',
63
+ QUANTITY_INVALID_FORMAT: 'QUANTITY_INVALID_FORMAT',
64
+
65
+ // Ticket limit errors
66
+ MIN_TICKETS_REQUIRED: 'MIN_TICKETS_REQUIRED',
67
+ MIN_TICKETS_EXCEEDS_MAX_ALLOWED: 'MIN_TICKETS_EXCEEDS_MAX_ALLOWED',
68
+ MAX_TICKETS_EXCEEDS_MAX_ALLOWED: 'MAX_TICKETS_EXCEEDS_MAX_ALLOWED',
69
+ MIN_EXCEEDS_MAX: 'MIN_EXCEEDS_MAX',
70
+
71
+ // Sales window errors
72
+ SALES_BEGIN_AFTER_EVENT_END: 'SALES_BEGIN_AFTER_EVENT_END',
73
+ SALES_END_AFTER_EVENT_END: 'SALES_END_AFTER_EVENT_END',
74
+ SALES_END_BEFORE_BEGIN: 'SALES_END_BEFORE_BEGIN',
75
+
76
+ // Capacity errors
77
+ CAPACITY_EXCEEDED: 'CAPACITY_EXCEEDED',
78
+
79
+ // Promo code errors
80
+ PROMO_NAME_REQUIRED: 'PROMO_NAME_REQUIRED',
81
+ PROMO_NAME_COLLISION: 'PROMO_NAME_COLLISION',
82
+ PROMO_END_BEFORE_START: 'PROMO_END_BEFORE_START',
83
+ PROMO_DISCOUNT_REQUIRED: 'PROMO_DISCOUNT_REQUIRED',
84
+ PROMO_BOTH_DISCOUNT_TYPES: 'PROMO_BOTH_DISCOUNT_TYPES',
85
+ PROMO_PERCENT_EXCEEDS_100: 'PROMO_PERCENT_EXCEEDS_100',
86
+ PROMO_LIMIT_REQUIRED: 'PROMO_LIMIT_REQUIRED',
87
+
88
+ // Warning codes
89
+ PROMO_EXTENDS_PAST_EVENT: 'PROMO_EXTENDS_PAST_EVENT',
90
+ SALES_CLOSE_TO_EVENT: 'SALES_CLOSE_TO_EVENT',
91
+ };
@@ -1,64 +1,64 @@
1
- import { describe, it, expect } from 'vitest';
2
- import {
3
- MIN_EVENT_DURATION_MINS,
4
- MAX_EVENT_DURATION_MINS,
5
- DEFAULT_EVENT_DURATION_MINS,
6
- DEFAULT_DOORS_BEFORE_START_MINS,
7
- MAX_TICKETS_PER_ORDER,
8
- MIN_TICKETS_PER_ORDER,
9
- MAX_PERCENTAGE_DISCOUNT,
10
- ErrorCodes,
11
- } from './validation.js';
12
-
13
- describe('validation constants', () => {
14
- describe('event time constants', () => {
15
- it('exports MIN_EVENT_DURATION_MINS as 15', () => {
16
- expect(MIN_EVENT_DURATION_MINS).toBe(15);
17
- });
18
-
19
- it('exports MAX_EVENT_DURATION_MINS as 1440 (24 hours)', () => {
20
- expect(MAX_EVENT_DURATION_MINS).toBe(1440);
21
- });
22
-
23
- it('exports DEFAULT_EVENT_DURATION_MINS as 90', () => {
24
- expect(DEFAULT_EVENT_DURATION_MINS).toBe(90);
25
- });
26
-
27
- it('exports DEFAULT_DOORS_BEFORE_START_MINS as 30', () => {
28
- expect(DEFAULT_DOORS_BEFORE_START_MINS).toBe(30);
29
- });
30
- });
31
-
32
- describe('ticket constants', () => {
33
- it('exports MAX_TICKETS_PER_ORDER as 100', () => {
34
- expect(MAX_TICKETS_PER_ORDER).toBe(100);
35
- });
36
-
37
- it('exports MIN_TICKETS_PER_ORDER as 0', () => {
38
- expect(MIN_TICKETS_PER_ORDER).toBe(0);
39
- });
40
- });
41
-
42
- describe('promo code constants', () => {
43
- it('exports MAX_PERCENTAGE_DISCOUNT as 100', () => {
44
- expect(MAX_PERCENTAGE_DISCOUNT).toBe(100);
45
- });
46
- });
47
-
48
- describe('error codes', () => {
49
- it('exports ErrorCodes object with event errors', () => {
50
- expect(ErrorCodes.EVENT_DURATION_TOO_SHORT).toBe('EVENT_DURATION_TOO_SHORT');
51
- expect(ErrorCodes.EVENT_END_BEFORE_START).toBe('EVENT_END_BEFORE_START');
52
- });
53
-
54
- it('exports ErrorCodes object with ticket errors', () => {
55
- expect(ErrorCodes.PRICE_REQUIRED).toBe('PRICE_REQUIRED');
56
- expect(ErrorCodes.QUANTITY_REQUIRED).toBe('QUANTITY_REQUIRED');
57
- });
58
-
59
- it('exports ErrorCodes object with promo errors', () => {
60
- expect(ErrorCodes.PROMO_NAME_REQUIRED).toBe('PROMO_NAME_REQUIRED');
61
- expect(ErrorCodes.PROMO_PERCENT_EXCEEDS_100).toBe('PROMO_PERCENT_EXCEEDS_100');
62
- });
63
- });
64
- });
1
+ import { describe, it, expect } from 'vitest';
2
+ import {
3
+ MIN_EVENT_DURATION_MINS,
4
+ MAX_EVENT_DURATION_MINS,
5
+ DEFAULT_EVENT_DURATION_MINS,
6
+ DEFAULT_DOORS_BEFORE_START_MINS,
7
+ MAX_TICKETS_PER_ORDER,
8
+ MIN_TICKETS_PER_ORDER,
9
+ MAX_PERCENTAGE_DISCOUNT,
10
+ ErrorCodes,
11
+ } from './validation.js';
12
+
13
+ describe('validation constants', () => {
14
+ describe('event time constants', () => {
15
+ it('exports MIN_EVENT_DURATION_MINS as 15', () => {
16
+ expect(MIN_EVENT_DURATION_MINS).toBe(15);
17
+ });
18
+
19
+ it('exports MAX_EVENT_DURATION_MINS as 1440 (24 hours)', () => {
20
+ expect(MAX_EVENT_DURATION_MINS).toBe(1440);
21
+ });
22
+
23
+ it('exports DEFAULT_EVENT_DURATION_MINS as 90', () => {
24
+ expect(DEFAULT_EVENT_DURATION_MINS).toBe(90);
25
+ });
26
+
27
+ it('exports DEFAULT_DOORS_BEFORE_START_MINS as 30', () => {
28
+ expect(DEFAULT_DOORS_BEFORE_START_MINS).toBe(30);
29
+ });
30
+ });
31
+
32
+ describe('ticket constants', () => {
33
+ it('exports MAX_TICKETS_PER_ORDER as 100', () => {
34
+ expect(MAX_TICKETS_PER_ORDER).toBe(100);
35
+ });
36
+
37
+ it('exports MIN_TICKETS_PER_ORDER as 0', () => {
38
+ expect(MIN_TICKETS_PER_ORDER).toBe(0);
39
+ });
40
+ });
41
+
42
+ describe('promo code constants', () => {
43
+ it('exports MAX_PERCENTAGE_DISCOUNT as 100', () => {
44
+ expect(MAX_PERCENTAGE_DISCOUNT).toBe(100);
45
+ });
46
+ });
47
+
48
+ describe('error codes', () => {
49
+ it('exports ErrorCodes object with event errors', () => {
50
+ expect(ErrorCodes.EVENT_DURATION_TOO_SHORT).toBe('EVENT_DURATION_TOO_SHORT');
51
+ expect(ErrorCodes.EVENT_END_BEFORE_START).toBe('EVENT_END_BEFORE_START');
52
+ });
53
+
54
+ it('exports ErrorCodes object with ticket errors', () => {
55
+ expect(ErrorCodes.PRICE_REQUIRED).toBe('PRICE_REQUIRED');
56
+ expect(ErrorCodes.QUANTITY_REQUIRED).toBe('QUANTITY_REQUIRED');
57
+ });
58
+
59
+ it('exports ErrorCodes object with promo errors', () => {
60
+ expect(ErrorCodes.PROMO_NAME_REQUIRED).toBe('PROMO_NAME_REQUIRED');
61
+ expect(ErrorCodes.PROMO_PERCENT_EXCEEDS_100).toBe('PROMO_PERCENT_EXCEEDS_100');
62
+ });
63
+ });
64
+ });
@@ -1,6 +1,6 @@
1
1
  import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
2
2
  import { formatCleanTimeRange, formatDateRange, formatDayOfWeek, formatEventDate, formatEventDateTime, formatEventTime, formatHour, formatMonth, formatNotificationTime, formatRelativeTime, formatTimeRange, getDateInTimezone, getDateParts, getHourInTimezone, isToday, } from '../format';
3
- import { DateTimeError, DateTimeErrorCode } from '../types';
3
+ import { DateTimeError } from '../types';
4
4
  describe('format utilities', () => {
5
5
  describe('formatEventTime', () => {
6
6
  it('formats time in specified timezone', () => {
@@ -1,6 +1,6 @@
1
1
  import { describe, expect, it } from 'vitest';
2
2
  import { combineDateAndTime, formatDateTimeForAPI, isNextDayTime, minutesToTimeString, parseDateTimeFromAPI, parseEndOfDay, parseLocalToUTC, parseStartOfDay, parseTimeToMinutes, parseUTCToLocal, stripNextDayPrefix, } from '../parse';
3
- import { DateTimeError, DateTimeErrorCode } from '../types';
3
+ import { DateTimeError } from '../types';
4
4
  describe('parse utilities', () => {
5
5
  describe('parseLocalToUTC', () => {
6
6
  it('converts local datetime to UTC', () => {
@@ -1,4 +1,4 @@
1
- import { beforeEach, describe, expect, it, vi } from 'vitest';
1
+ import { describe, expect, it } from 'vitest';
2
2
  import { getTimezoneDisplayName, getTimezoneOffset, getUserTimezone, getVenueTimezone, isDST, isValidTimezone, normalizeTimezone, getIANATimezone, isValidIANATimezone, getAllTimezones, formatTimezoneForDisplay, getTimezoneOptions, getCommonUSTimezoneOptions, } from '../timezone';
3
3
  import { DateTimeError, DateTimeErrorCode } from '../types';
4
4
  describe('timezone utilities', () => {