@getmicdrop/svelte-components 5.10.1 → 5.10.3

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 (227) 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.svelte +6 -6
  21. package/dist/components/Layout/Text.svelte +87 -87
  22. package/dist/components/Layout/TwoColumn.svelte +108 -108
  23. package/dist/components/Text.svelte +53 -53
  24. package/dist/constants/validation.js +91 -91
  25. package/dist/constants/validation.spec.js +64 -64
  26. package/dist/index.js +51 -51
  27. package/dist/patterns/data/DataGrid.svelte +45 -45
  28. package/dist/patterns/data/DataList.svelte +24 -24
  29. package/dist/patterns/data/DataTable.svelte +36 -36
  30. package/dist/patterns/forms/FormActions.spec.js +95 -95
  31. package/dist/patterns/forms/FormActions.stories.svelte +97 -97
  32. package/dist/patterns/forms/FormActions.svelte +46 -46
  33. package/dist/patterns/forms/FormGrid.svelte +33 -33
  34. package/dist/patterns/forms/FormSection.svelte +32 -32
  35. package/dist/patterns/forms/FormValidationSummary.stories.svelte +83 -83
  36. package/dist/patterns/forms/FormValidationSummary.svelte +74 -74
  37. package/dist/patterns/layout/Sidebar.svelte +39 -39
  38. package/dist/patterns/layout/index.js +29 -29
  39. package/dist/patterns/navigation/BottomNav.stories.svelte +117 -117
  40. package/dist/patterns/navigation/BottomNav.svelte +74 -74
  41. package/dist/patterns/navigation/Header.stories.svelte +77 -77
  42. package/dist/patterns/navigation/Header.svelte +255 -255
  43. package/dist/patterns/page/PageHeader.svelte +18 -18
  44. package/dist/patterns/page/PageLayout.svelte +40 -40
  45. package/dist/patterns/page/PageLoader.spec.js +57 -57
  46. package/dist/patterns/page/PageLoader.stories.svelte +137 -137
  47. package/dist/patterns/page/PageLoader.svelte +24 -24
  48. package/dist/patterns/page/SectionHeader.svelte +29 -29
  49. package/dist/presets/badges.js +112 -112
  50. package/dist/presets/buttons.js +76 -76
  51. package/dist/presets/index.js +9 -9
  52. package/dist/primitives/Accordion/Accordion.stories.svelte +75 -75
  53. package/dist/primitives/Accordion/Accordion.svelte +42 -42
  54. package/dist/primitives/Accordion/AccordionItem.svelte +95 -95
  55. package/dist/primitives/Alert/Alert.spec.js +173 -173
  56. package/dist/primitives/Alert/Alert.stories.svelte +88 -88
  57. package/dist/primitives/Alert/Alert.svelte +27 -27
  58. package/dist/primitives/Avatar/Avatar.stories.svelte +94 -94
  59. package/dist/primitives/Avatar/Avatar.svelte +66 -66
  60. package/dist/primitives/Badges/Badge.spec.js +144 -144
  61. package/dist/primitives/Badges/Badge.stories.svelte +86 -86
  62. package/dist/primitives/Badges/Badge.svelte +99 -99
  63. package/dist/primitives/BottomSheet/BottomSheet.spec.js +136 -136
  64. package/dist/primitives/BottomSheet/BottomSheet.stories.svelte +83 -83
  65. package/dist/primitives/BottomSheet/BottomSheet.svelte +100 -100
  66. package/dist/primitives/Breadcrumb/Breadcrumb.spec.js +122 -122
  67. package/dist/primitives/Breadcrumb/Breadcrumb.stories.svelte +23 -23
  68. package/dist/primitives/Breadcrumb/Breadcrumb.svelte +98 -98
  69. package/dist/primitives/Button/Button.spec.js +223 -223
  70. package/dist/primitives/Button/Button.stories.svelte +76 -76
  71. package/dist/primitives/Button/Button.svelte +283 -283
  72. package/dist/primitives/Button/ButtonGroup.svelte +50 -50
  73. package/dist/primitives/Button/ButtonSaveDemo.spec.js +146 -146
  74. package/dist/primitives/Button/ButtonSaveDemo.svelte +25 -25
  75. package/dist/primitives/Button/ButtonVariantShowcase.svelte +129 -129
  76. package/dist/primitives/Card.spec.js +49 -49
  77. package/dist/primitives/Card.stories.svelte +22 -22
  78. package/dist/primitives/Card.svelte +28 -28
  79. package/dist/primitives/Checkbox/Checkbox.stories.svelte +84 -84
  80. package/dist/primitives/Checkbox/Checkbox.svelte +88 -88
  81. package/dist/primitives/DarkModeToggle.spec.js +390 -390
  82. package/dist/primitives/DarkModeToggle.stories.svelte +57 -57
  83. package/dist/primitives/DarkModeToggle.svelte +136 -136
  84. package/dist/primitives/Drawer/Drawer.stories.svelte +80 -80
  85. package/dist/primitives/Drawer/Drawer.svelte +120 -120
  86. package/dist/primitives/Dropdown/Dropdown.stories.svelte +137 -137
  87. package/dist/primitives/Dropdown/Dropdown.svelte +170 -170
  88. package/dist/primitives/Dropdown/DropdownDivider.svelte +9 -9
  89. package/dist/primitives/Dropdown/DropdownItem.svelte +80 -80
  90. package/dist/primitives/Helper/Helper.svelte +33 -33
  91. package/dist/primitives/Icons/ArrowLeft.svelte +8 -8
  92. package/dist/primitives/Icons/ArrowRight.svelte +8 -8
  93. package/dist/primitives/Icons/Availability.svelte +14 -14
  94. package/dist/primitives/Icons/Back.svelte +14 -14
  95. package/dist/primitives/Icons/CheckCircle.svelte +6 -6
  96. package/dist/primitives/Icons/CheckCircleOutline.svelte +15 -15
  97. package/dist/primitives/Icons/ChevronLeft.svelte +4 -4
  98. package/dist/primitives/Icons/ChevronRight.svelte +4 -4
  99. package/dist/primitives/Icons/Copy.svelte +15 -15
  100. package/dist/primitives/Icons/Cross.svelte +5 -5
  101. package/dist/primitives/Icons/DownArrow.svelte +8 -8
  102. package/dist/primitives/Icons/ErrorCircle.svelte +6 -6
  103. package/dist/primitives/Icons/FacebookIcon.svelte +2 -2
  104. package/dist/primitives/Icons/Home.svelte +15 -15
  105. package/dist/primitives/Icons/Icon.spec.js +169 -169
  106. package/dist/primitives/Icons/Icon.stories.svelte +100 -100
  107. package/dist/primitives/Icons/Icon.svelte +52 -52
  108. package/dist/primitives/Icons/IconGallery.stories.svelte +235 -235
  109. package/dist/primitives/Icons/Info.svelte +7 -7
  110. package/dist/primitives/Icons/InstagramIcon.svelte +4 -4
  111. package/dist/primitives/Icons/LogoInstagram.svelte +2 -2
  112. package/dist/primitives/Icons/Message.svelte +15 -15
  113. package/dist/primitives/Icons/MoonIcon.svelte +5 -5
  114. package/dist/primitives/Icons/More.svelte +21 -21
  115. package/dist/primitives/Icons/MoreHori.spec.js +61 -61
  116. package/dist/primitives/Icons/MoreHori.svelte +22 -22
  117. package/dist/primitives/Icons/Notification.svelte +14 -14
  118. package/dist/primitives/Icons/Payment.svelte +14 -14
  119. package/dist/primitives/Icons/Profile.svelte +21 -21
  120. package/dist/primitives/Icons/Reload.svelte +29 -29
  121. package/dist/primitives/Icons/Shows.svelte +21 -21
  122. package/dist/primitives/Icons/Signout.svelte +21 -21
  123. package/dist/primitives/Icons/SunIcon.svelte +8 -8
  124. package/dist/primitives/Icons/TiktokIcon.svelte +2 -2
  125. package/dist/primitives/Icons/TwitterIcon.svelte +2 -2
  126. package/dist/primitives/Icons/WarningIcon.spec.js +18 -18
  127. package/dist/primitives/Icons/WarningIcon.svelte +5 -5
  128. package/dist/primitives/Input/Input.spec.js +573 -573
  129. package/dist/primitives/Input/Input.stories.svelte +139 -139
  130. package/dist/primitives/Input/Input.svelte +423 -423
  131. package/dist/primitives/Input/Select.spec.js +218 -218
  132. package/dist/primitives/Input/Select.stories.svelte +112 -112
  133. package/dist/primitives/Input/Select.svelte +252 -252
  134. package/dist/primitives/Input/Textarea.stories.svelte +137 -137
  135. package/dist/primitives/Input/Textarea.svelte +105 -105
  136. package/dist/primitives/Label/Label.svelte +37 -37
  137. package/dist/primitives/Modal/Modal.spec.js +99 -99
  138. package/dist/primitives/Modal/Modal.stories.svelte +86 -86
  139. package/dist/primitives/Modal/Modal.svelte +157 -157
  140. package/dist/primitives/Pagination/Pagination.stories.svelte +76 -76
  141. package/dist/primitives/Pagination/Pagination.svelte +261 -261
  142. package/dist/primitives/Radio/Radio.stories.svelte +80 -80
  143. package/dist/primitives/Radio/Radio.svelte +67 -67
  144. package/dist/primitives/Skeleton/CardPlaceholder.svelte +87 -87
  145. package/dist/primitives/Skeleton/ImagePlaceholder.svelte +59 -59
  146. package/dist/primitives/Skeleton/ListPlaceholder.svelte +76 -76
  147. package/dist/primitives/Skeleton/Skeleton.stories.svelte +151 -151
  148. package/dist/primitives/Skeleton/Skeleton.svelte +26 -26
  149. package/dist/primitives/Spinner/Spinner.spec.js +71 -71
  150. package/dist/primitives/Spinner/Spinner.stories.svelte +29 -29
  151. package/dist/primitives/Spinner/Spinner.svelte +20 -20
  152. package/dist/primitives/Tabs/TabItem.svelte +49 -49
  153. package/dist/primitives/Tabs/Tabs.stories.svelte +112 -112
  154. package/dist/primitives/Tabs/Tabs.svelte +137 -137
  155. package/dist/primitives/Toggle.spec.js +146 -146
  156. package/dist/primitives/Toggle.stories.svelte +92 -92
  157. package/dist/primitives/Toggle.svelte +131 -131
  158. package/dist/primitives/Tooltip/Tooltip.svelte +83 -83
  159. package/dist/primitives/Typography/Typography.svelte +53 -53
  160. package/dist/primitives/ValidationError.spec.js +103 -103
  161. package/dist/primitives/ValidationError.stories.svelte +69 -69
  162. package/dist/primitives/ValidationError.svelte +29 -29
  163. package/dist/primitives/index.js +92 -92
  164. package/dist/recipes/CropImage/CropImage.spec.js +208 -208
  165. package/dist/recipes/CropImage/CropImage.stories.svelte +104 -104
  166. package/dist/recipes/CropImage/CropImage.svelte +219 -219
  167. package/dist/recipes/ImageUploader/ImageUploader.stories.svelte +125 -125
  168. package/dist/recipes/ImageUploader/ImageUploader.svelte +970 -970
  169. package/dist/recipes/Toaster/Toaster.stories.svelte +62 -62
  170. package/dist/recipes/feedback/EmptyState/EmptyState.svelte +1 -1
  171. package/dist/recipes/feedback/ErrorDisplay.spec.js +69 -69
  172. package/dist/recipes/feedback/ErrorDisplay.stories.svelte +101 -101
  173. package/dist/recipes/feedback/ErrorDisplay.svelte +1 -1
  174. package/dist/recipes/feedback/StatusIndicator/StatusIndicator.spec.js +133 -133
  175. package/dist/recipes/feedback/StatusIndicator/StatusIndicator.svelte +157 -157
  176. package/dist/recipes/fields/CheckboxField.svelte +85 -85
  177. package/dist/recipes/fields/FormField.svelte +58 -58
  178. package/dist/recipes/fields/RadioGroup.svelte +95 -95
  179. package/dist/recipes/fields/SelectField.svelte +80 -80
  180. package/dist/recipes/fields/TextareaField.svelte +97 -97
  181. package/dist/recipes/fields/ToggleField.svelte +60 -60
  182. package/dist/recipes/fields/index.js +7 -7
  183. package/dist/recipes/inputs/MultiSelect.spec.js +260 -260
  184. package/dist/recipes/inputs/MultiSelect.stories.svelte +133 -133
  185. package/dist/recipes/inputs/MultiSelect.svelte +283 -283
  186. package/dist/recipes/inputs/OTPInput.spec.js +251 -251
  187. package/dist/recipes/inputs/OTPInput.stories.svelte +162 -162
  188. package/dist/recipes/inputs/OTPInput.svelte +117 -117
  189. package/dist/recipes/inputs/PasswordInput.svelte +22 -22
  190. package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte +131 -117
  191. package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts.map +1 -1
  192. package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte +123 -123
  193. package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte +344 -344
  194. package/dist/recipes/inputs/Search.svelte +102 -102
  195. package/dist/recipes/inputs/SelectDropdown.svelte +171 -171
  196. package/dist/recipes/modals/AlertModal.svelte +130 -130
  197. package/dist/recipes/modals/ConfirmationModal.spec.js +206 -206
  198. package/dist/recipes/modals/ConfirmationModal.stories.svelte +119 -119
  199. package/dist/recipes/modals/ConfirmationModal.svelte +152 -152
  200. package/dist/recipes/modals/InputModal.svelte +182 -182
  201. package/dist/recipes/modals/ModalStateManager.spec.js +100 -100
  202. package/dist/recipes/modals/ModalStateManager.svelte +77 -77
  203. package/dist/recipes/modals/ModalTestWrapper.svelte +65 -65
  204. package/dist/recipes/modals/StatusModal.svelte +206 -206
  205. package/dist/services/EventService.js +75 -75
  206. package/dist/services/EventService.spec.js +217 -217
  207. package/dist/services/ShowService.spec.js +345 -345
  208. package/dist/stores/toaster.js +13 -13
  209. package/dist/stories/ButtonAuditReview.stories.svelte +14 -14
  210. package/dist/stories/ButtonAuditReview.svelte +427 -427
  211. package/dist/stories/PatternsGallery.stories.svelte +19 -19
  212. package/dist/stories/PatternsGallery.svelte +206 -206
  213. package/dist/stories/PrimitivesGallery.stories.svelte +19 -19
  214. package/dist/stories/PrimitivesGallery.svelte +752 -752
  215. package/dist/stories/RecipesGallery.stories.svelte +19 -19
  216. package/dist/stories/RecipesGallery.svelte +471 -471
  217. package/dist/stories/button-audit-manifest.json +11186 -11186
  218. package/dist/tailwind/preset.cjs +82 -82
  219. package/dist/telemetry.js +405 -405
  220. package/dist/telemetry.spec.js +1169 -1169
  221. package/dist/tokens/tokens.css +87 -87
  222. package/dist/tokens/typography-base.css +163 -163
  223. package/dist/tokens/utilities.css +353 -353
  224. package/dist/utils/apiConfig.spec.js +219 -219
  225. package/dist/utils/transitions.js +4 -4
  226. package/dist/utils/utils.js +693 -693
  227. 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
+ });