@getmicdrop/svelte-components 2.6.0 → 2.6.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 (152) hide show
  1. package/dist/__LIB_STORES__.js +2 -30
  2. package/dist/components/Badges/Badge.svelte +17 -268
  3. package/dist/components/Badges/Badge.svelte.d.ts +2 -18
  4. package/dist/components/Badges/Badge.svelte.d.ts.map +1 -1
  5. package/dist/components/Breadcrumb/Breadcrumb.svelte +36 -65
  6. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts +2 -16
  7. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
  8. package/dist/components/Button/Button.svelte +3 -136
  9. package/dist/components/Button/Button.svelte.d.ts +0 -2
  10. package/dist/components/Button/Button.svelte.d.ts.map +1 -1
  11. package/dist/components/Calendar/Calendar.spec.d.ts +2 -0
  12. package/dist/components/Calendar/Calendar.spec.d.ts.map +1 -0
  13. package/dist/components/Calendar/Calendar.spec.js +131 -0
  14. package/dist/components/Calendar/Calendar.svelte +1115 -0
  15. package/dist/components/Calendar/{MiniMonthCalendar.svelte.d.ts → Calendar.svelte.d.ts} +21 -20
  16. package/dist/components/Calendar/Calendar.svelte.d.ts.map +1 -0
  17. package/dist/components/Calendar/QuarterView.spec.d.ts +2 -0
  18. package/dist/components/Calendar/QuarterView.spec.d.ts.map +1 -0
  19. package/dist/components/Calendar/QuarterView.spec.js +394 -0
  20. package/dist/components/Calendar/QuarterView.stories.svelte +134 -0
  21. package/dist/components/{ShowTimeCard/ShowTimeCard.svelte.d.ts → Calendar/QuarterView.stories.svelte.d.ts} +21 -17
  22. package/dist/components/Calendar/QuarterView.stories.svelte.d.ts.map +1 -0
  23. package/dist/components/Calendar/QuarterView.svelte +736 -0
  24. package/dist/components/{FAQs/FAQs.svelte.d.ts → Calendar/QuarterView.svelte.d.ts} +10 -10
  25. package/dist/components/{Skeleton/Skeleton.svelte.d.ts.map → Calendar/QuarterView.svelte.d.ts.map} +1 -1
  26. package/dist/components/Card.svelte +2 -2
  27. package/dist/components/Card.svelte.d.ts +2 -2
  28. package/dist/components/Card.svelte.d.ts.map +1 -1
  29. package/dist/components/DarkModeToggle.svelte +0 -2
  30. package/dist/components/DarkModeToggle.svelte.d.ts.map +1 -1
  31. package/dist/components/ErrorDisplay.svelte.d.ts +2 -2
  32. package/dist/components/Input/Input.svelte +12 -105
  33. package/dist/components/Input/Input.svelte.d.ts +12 -28
  34. package/dist/components/Input/Input.svelte.d.ts.map +1 -1
  35. package/dist/components/Input/MultiSelect.svelte +5 -4
  36. package/dist/components/Input/MultiSelect.svelte.d.ts +8 -8
  37. package/dist/components/Input/MultiSelect.svelte.d.ts.map +1 -1
  38. package/dist/components/Input/OTPInput.svelte +1 -1
  39. package/dist/components/Input/Select.svelte +5 -4
  40. package/dist/components/Input/Select.svelte.d.ts +8 -8
  41. package/dist/components/Input/Select.svelte.d.ts.map +1 -1
  42. package/dist/components/Layout/Header.svelte +4 -14
  43. package/dist/components/Modal/ConfirmationModal.svelte +17 -69
  44. package/dist/components/Modal/ConfirmationModal.svelte.d.ts +0 -22
  45. package/dist/components/Modal/ConfirmationModal.svelte.d.ts.map +1 -1
  46. package/dist/components/Modal/Modal.svelte +8 -34
  47. package/dist/components/Modal/Modal.svelte.d.ts +0 -2
  48. package/dist/components/Modal/Modal.svelte.d.ts.map +1 -1
  49. package/dist/components/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts +2 -2
  50. package/dist/components/Spinner/Spinner.svelte +17 -73
  51. package/dist/components/Spinner/Spinner.svelte.d.ts +3 -5
  52. package/dist/components/Spinner/Spinner.svelte.d.ts.map +1 -1
  53. package/dist/components/pages/performers/AvailabilityCalendarModal.svelte +632 -0
  54. package/dist/components/{PublicCard/PublicCard.svelte.d.ts → pages/performers/AvailabilityCalendarModal.svelte.d.ts} +14 -12
  55. package/dist/components/pages/performers/AvailabilityCalendarModal.svelte.d.ts.map +1 -0
  56. package/dist/components/pages/performers/ShowDetails.svelte.d.ts +4 -4
  57. package/dist/components/pages/performers/ShowItemCard.svelte.d.ts +8 -8
  58. package/dist/components/pages/performers/SwitchOption.svelte.d.ts +2 -2
  59. package/dist/components/pages/performers/VenueInfo.svelte.d.ts +2 -2
  60. package/dist/components/pages/performers/VenueItemCard.svelte +2 -2
  61. package/dist/components/pages/performers/VenueItemCard.svelte.d.ts +4 -4
  62. package/dist/components/pages/profile/profile-form.svelte +1 -1
  63. package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts +2 -2
  64. package/dist/components/pages/shows/TabNavigation.svelte +8 -7
  65. package/dist/constants/formOptions.d.ts +2 -5
  66. package/dist/constants/formOptions.d.ts.map +1 -1
  67. package/dist/constants/formOptions.js +1 -2
  68. package/dist/index.d.ts +4 -28
  69. package/dist/index.js +29 -33
  70. package/dist/services/EventService.js +75 -75
  71. package/dist/services/EventService.spec.js +217 -217
  72. package/dist/services/ShowService.spec.js +342 -342
  73. package/package.json +160 -160
  74. package/dist/components/AboutShow/AboutShow.svelte +0 -278
  75. package/dist/components/AboutShow/AboutShow.svelte.d.ts +0 -43
  76. package/dist/components/AboutShow/AboutShow.svelte.d.ts.map +0 -1
  77. package/dist/components/Accordion/Accordion.svelte +0 -44
  78. package/dist/components/Accordion/Accordion.svelte.d.ts +0 -42
  79. package/dist/components/Accordion/Accordion.svelte.d.ts.map +0 -1
  80. package/dist/components/Accordion/AccordionItem.svelte +0 -141
  81. package/dist/components/Accordion/AccordionItem.svelte.d.ts +0 -50
  82. package/dist/components/Accordion/AccordionItem.svelte.d.ts.map +0 -1
  83. package/dist/components/Calendar/MiniMonthCalendar.svelte +0 -1446
  84. package/dist/components/Calendar/MiniMonthCalendar.svelte.d.ts.map +0 -1
  85. package/dist/components/Checkbox/Checkbox.svelte +0 -90
  86. package/dist/components/Checkbox/Checkbox.svelte.d.ts +0 -64
  87. package/dist/components/Checkbox/Checkbox.svelte.d.ts.map +0 -1
  88. package/dist/components/Drawer/Drawer.svelte +0 -207
  89. package/dist/components/Drawer/Drawer.svelte.d.ts +0 -74
  90. package/dist/components/Drawer/Drawer.svelte.d.ts.map +0 -1
  91. package/dist/components/Dropdown/Dropdown.svelte +0 -193
  92. package/dist/components/Dropdown/Dropdown.svelte.d.ts +0 -50
  93. package/dist/components/Dropdown/Dropdown.svelte.d.ts.map +0 -1
  94. package/dist/components/Dropdown/DropdownItem.svelte +0 -111
  95. package/dist/components/Dropdown/DropdownItem.svelte.d.ts +0 -48
  96. package/dist/components/Dropdown/DropdownItem.svelte.d.ts.map +0 -1
  97. package/dist/components/Dropdown/SelectDropdown.svelte +0 -301
  98. package/dist/components/Dropdown/SelectDropdown.svelte.d.ts +0 -51
  99. package/dist/components/Dropdown/SelectDropdown.svelte.d.ts.map +0 -1
  100. package/dist/components/EmptyState/EmptyState.svelte +0 -80
  101. package/dist/components/EmptyState/EmptyState.svelte.d.ts +0 -37
  102. package/dist/components/EmptyState/EmptyState.svelte.d.ts.map +0 -1
  103. package/dist/components/FAQs/FAQs.svelte +0 -49
  104. package/dist/components/FAQs/FAQs.svelte.d.ts.map +0 -1
  105. package/dist/components/Input/Search.svelte +0 -173
  106. package/dist/components/Input/Search.svelte.d.ts +0 -68
  107. package/dist/components/Input/Search.svelte.d.ts.map +0 -1
  108. package/dist/components/Input/Textarea.svelte +0 -160
  109. package/dist/components/Input/Textarea.svelte.d.ts +0 -69
  110. package/dist/components/Input/Textarea.svelte.d.ts.map +0 -1
  111. package/dist/components/Label/Label.svelte +0 -60
  112. package/dist/components/Label/Label.svelte.d.ts +0 -48
  113. package/dist/components/Label/Label.svelte.d.ts.map +0 -1
  114. package/dist/components/Layout/PageLayout.svelte +0 -64
  115. package/dist/components/Layout/PageLayout.svelte.d.ts +0 -58
  116. package/dist/components/Layout/PageLayout.svelte.d.ts.map +0 -1
  117. package/dist/components/Modal/InputModal.svelte +0 -180
  118. package/dist/components/Modal/InputModal.svelte.d.ts +0 -77
  119. package/dist/components/Modal/InputModal.svelte.d.ts.map +0 -1
  120. package/dist/components/Modal/StatusModal.svelte +0 -221
  121. package/dist/components/Modal/StatusModal.svelte.d.ts +0 -59
  122. package/dist/components/Modal/StatusModal.svelte.d.ts.map +0 -1
  123. package/dist/components/MonthSwitcher/MonthSwitcher.svelte +0 -206
  124. package/dist/components/MonthSwitcher/MonthSwitcher.svelte.d.ts +0 -37
  125. package/dist/components/MonthSwitcher/MonthSwitcher.svelte.d.ts.map +0 -1
  126. package/dist/components/OrderSummary/OrderSummary.svelte +0 -553
  127. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts +0 -65
  128. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts.map +0 -1
  129. package/dist/components/Pagination/Pagination.svelte +0 -197
  130. package/dist/components/Pagination/Pagination.svelte.d.ts +0 -53
  131. package/dist/components/Pagination/Pagination.svelte.d.ts.map +0 -1
  132. package/dist/components/PublicCard/PublicCard.svelte +0 -267
  133. package/dist/components/PublicCard/PublicCard.svelte.d.ts.map +0 -1
  134. package/dist/components/Radio/Radio.svelte +0 -119
  135. package/dist/components/Radio/Radio.svelte.d.ts +0 -54
  136. package/dist/components/Radio/Radio.svelte.d.ts.map +0 -1
  137. package/dist/components/ShowCard/ShowCard.svelte +0 -240
  138. package/dist/components/ShowCard/ShowCard.svelte.d.ts +0 -39
  139. package/dist/components/ShowCard/ShowCard.svelte.d.ts.map +0 -1
  140. package/dist/components/ShowTimeCard/ShowTimeCard.svelte +0 -92
  141. package/dist/components/ShowTimeCard/ShowTimeCard.svelte.d.ts.map +0 -1
  142. package/dist/components/Skeleton/Skeleton.svelte +0 -68
  143. package/dist/components/Skeleton/Skeleton.svelte.d.ts +0 -37
  144. package/dist/components/Tabs/TabItem.svelte +0 -39
  145. package/dist/components/Tabs/TabItem.svelte.d.ts +0 -52
  146. package/dist/components/Tabs/TabItem.svelte.d.ts.map +0 -1
  147. package/dist/components/Tabs/Tabs.svelte +0 -181
  148. package/dist/components/Tabs/Tabs.svelte.d.ts +0 -46
  149. package/dist/components/Tabs/Tabs.svelte.d.ts.map +0 -1
  150. package/dist/components/Typography/Typography.svelte +0 -50
  151. package/dist/components/Typography/Typography.svelte.d.ts +0 -48
  152. package/dist/components/Typography/Typography.svelte.d.ts.map +0 -1
@@ -5,68 +5,21 @@
5
5
  import Modal from "./Modal.svelte";
6
6
 
7
7
  export let show = false;
8
- export let size = "default"; // "small" | "default" | "large"
9
8
  export let title = "";
10
9
  export let description = "";
11
10
  export let warningText = "";
12
11
  export let actions = [];
13
12
  export let icon = null;
14
- export let customIcon = null; // Alias for icon (used by some wrappers)
15
13
  export let closeBtn = false; // To show close button
16
14
 
17
- // Simple props-based API (alternative to actions array)
18
- export let primaryButtonText = "";
19
- export let secondaryButtonText = "";
20
- export let variant = "default"; // "default" | "danger"
21
-
22
- // Loading/disabled state
23
- export let loading = false;
24
- export let disabled = false;
25
-
26
15
  const dispatch = createEventDispatcher();
27
16
 
28
- // Resolve icon (support both prop names)
29
- $: resolvedIcon = customIcon || icon;
30
-
31
- // Build actions from simple props if actions array is empty
32
- $: resolvedActions = actions.length > 0 ? actions : buildActionsFromProps();
33
-
34
- function buildActionsFromProps() {
35
- const result = [];
36
-
37
- if (secondaryButtonText) {
38
- result.push({
39
- label: secondaryButtonText,
40
- variant: "gray-outline",
41
- onClick: () => dispatch("cancel")
42
- });
43
- }
44
-
45
- if (primaryButtonText) {
46
- result.push({
47
- label: primaryButtonText,
48
- variant: variant === "danger" ? "red-solid" : "blue-solid",
49
- onClick: () => dispatch("confirm"),
50
- primary: true
51
- });
52
- }
53
-
54
- return result;
55
- }
56
-
57
17
  const handleAction = (action) => {
58
- if (disabled || loading) return;
59
- action.onClick?.();
18
+ action.onClick();
60
19
  dispatch(action.label.toLowerCase());
61
20
  show = false;
62
21
  };
63
22
 
64
- const handleClose = () => {
65
- if (disabled || loading) return;
66
- dispatch("close");
67
- show = false;
68
- };
69
-
70
23
  const getVariant = (action) => {
71
24
  // If variant is already specified, use it
72
25
  if (action.variant) return action.variant;
@@ -95,59 +48,54 @@
95
48
  onClick,
96
49
  beforeIcon,
97
50
  afterIcon,
98
- primary,
99
51
  ...rest
100
52
  } = action;
101
53
  return rest;
102
54
  };
103
55
  </script>
104
56
 
105
- <Modal bind:show {size}>
106
- <div slot="header" class="text-center">
57
+ <Modal bind:show>
58
+ <div slot="header" class="flex flex-col gap-6 text-center">
107
59
  {#if closeBtn}
108
- <div class="flex justify-end -mt-2 -mr-2 mb-2">
109
- <button
110
- class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none transition-colors"
111
- on:click={handleClose}
112
- {disabled}
113
- >
114
- <img src={Cancel} alt="Close" class="w-5 h-5" />
60
+ <div class="flex justify-end">
61
+ <button class="focus:outline-none" on:click={() => (show = false)}>
62
+ <img src={Cancel} alt="Close Icon" />
115
63
  </button>
116
64
  </div>
117
65
  {/if}
118
- {#if resolvedIcon}
119
- <div class="flex justify-center mb-4">
120
- <img src={resolvedIcon} alt="" class="w-12 h-12" />
66
+ {#if icon}
67
+ <div class="flex justify-center items-center">
68
+ <img src={icon} alt="Icon here" />
121
69
  </div>
122
70
  {/if}
123
71
  {#if title}
124
- <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
72
+ <h2 class="text-xl text-Text-Primary leading-5 font-normal">{title}</h2>
125
73
  {/if}
126
74
  </div>
127
75
 
128
- <div slot="body" class="text-center mt-4">
76
+ <div slot="body" class="flex flex-col gap-6 text-center mt-6">
129
77
  {#if description}
130
- <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
78
+ <p class="text-Text-Tartiary text-sm leading-[22px] font-normal">
131
79
  {description}
132
80
  </p>
133
81
  {/if}
134
82
  {#if warningText}
135
- <p class="mt-3 text-sm font-medium text-red-600 dark:text-red-400">
83
+ <p
84
+ class="text-accent-Danger text-center text-sm leading-[22px] font-bold"
85
+ >
136
86
  {warningText}
137
87
  </p>
138
88
  {/if}
139
89
  </div>
140
90
 
141
- <div slot="footer" class="flex gap-3">
142
- {#each resolvedActions as action}
91
+ <div slot="footer" class="flex justify-around gap-3 mt-6">
92
+ {#each actions as action}
143
93
  <Button
144
94
  size="full"
145
95
  variant={getVariant(action)}
146
96
  {...cleanActionProps(action)}
147
97
  beforeIcon={action.beforeIcon}
148
98
  afterIcon={action.afterIcon}
149
- disabled={disabled || action.disabled}
150
- loading={action.primary && loading}
151
99
  on:click={() => handleAction(action)}
152
100
  >
153
101
  {action.label}
@@ -1,48 +1,26 @@
1
1
  export default ConfirmationModal;
2
2
  type ConfirmationModal = SvelteComponent<{
3
3
  title?: string | undefined;
4
- size?: string | undefined;
5
- variant?: string | undefined;
6
4
  actions?: any[] | undefined;
7
5
  show?: boolean | undefined;
8
- disabled?: boolean | undefined;
9
- loading?: boolean | undefined;
10
6
  icon?: null | undefined;
11
7
  description?: string | undefined;
12
8
  warningText?: string | undefined;
13
- customIcon?: null | undefined;
14
9
  closeBtn?: boolean | undefined;
15
- primaryButtonText?: string | undefined;
16
- secondaryButtonText?: string | undefined;
17
10
  }, {
18
- cancel: CustomEvent<any>;
19
- confirm: CustomEvent<any>;
20
- close: CustomEvent<any>;
21
- } & {
22
11
  [evt: string]: CustomEvent<any>;
23
12
  }, {}> & {
24
13
  $$bindings?: string | undefined;
25
14
  };
26
15
  declare const ConfirmationModal: $$__sveltets_2_IsomorphicComponent<{
27
16
  title?: string | undefined;
28
- size?: string | undefined;
29
- variant?: string | undefined;
30
17
  actions?: any[] | undefined;
31
18
  show?: boolean | undefined;
32
- disabled?: boolean | undefined;
33
- loading?: boolean | undefined;
34
19
  icon?: null | undefined;
35
20
  description?: string | undefined;
36
21
  warningText?: string | undefined;
37
- customIcon?: null | undefined;
38
22
  closeBtn?: boolean | undefined;
39
- primaryButtonText?: string | undefined;
40
- secondaryButtonText?: string | undefined;
41
23
  }, {
42
- cancel: CustomEvent<any>;
43
- confirm: CustomEvent<any>;
44
- close: CustomEvent<any>;
45
- } & {
46
24
  [evt: string]: CustomEvent<any>;
47
25
  }, {}, {}, string>;
48
26
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoKA;;;;;;;;;;;;;;;;;;;;;mBAAoS;6CATvP,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAoHA;;;;;;;;;;mBAAuM;6CAT1J,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
@@ -8,7 +8,6 @@
8
8
  export let isProcessing = false;
9
9
  export let isSuccess = false;
10
10
  export let size = "default"; // "default" | "small" | "large"
11
- export let persistent = false; // When true, prevents closing by clicking backdrop or pressing Escape
12
11
 
13
12
  const dispatch = createEventDispatcher();
14
13
 
@@ -17,7 +16,7 @@
17
16
 
18
17
  // Handle escape key
19
18
  function handleKeydown(event) {
20
- if (event.key === "Escape" && show && !persistent) {
19
+ if (event.key === "Escape" && show) {
21
20
  resetModal();
22
21
  }
23
22
  }
@@ -73,7 +72,7 @@
73
72
  <!-- svelte-ignore a11y-no-static-element-interactions -->
74
73
  <div
75
74
  class="modal-backdrop"
76
- on:click={persistent ? null : resetModal}
75
+ on:click={resetModal}
77
76
  transition:fade={{ duration: 300 }}
78
77
  role="dialog"
79
78
  aria-modal="true"
@@ -123,17 +122,12 @@
123
122
  {/if}
124
123
 
125
124
  <style>
126
- /*
127
- * Modal uses Tailwind-compatible colors with dark mode support.
128
- * Works across projects without requiring CSS variable synchronization.
129
- */
130
-
131
125
  .modal-backdrop {
132
126
  position: fixed;
133
127
  inset: 0;
134
128
  display: flex;
135
129
  background-color: rgba(0, 0, 0, 0.5);
136
- z-index: 50;
130
+ z-index: var(--z-modal, 50);
137
131
 
138
132
  /* iOS scroll lock - prevent scroll bleed-through */
139
133
  touch-action: none;
@@ -155,7 +149,7 @@
155
149
 
156
150
  /* Mobile: Bottom sheet style */
157
151
  .modal-sheet {
158
- background-color: #ffffff;
152
+ background-color: hsl(var(--BG-Primary));
159
153
  border-radius: 1.5rem 1.5rem 0 0;
160
154
  width: 100%;
161
155
  max-height: 90vh;
@@ -170,10 +164,6 @@
170
164
  overscroll-behavior: contain;
171
165
  }
172
166
 
173
- :global(.dark) .modal-sheet {
174
- background-color: #1f2937; /* gray-800 */
175
- }
176
-
177
167
  /* Hide sheet on desktop */
178
168
  @media (min-width: 768px) {
179
169
  .modal-sheet {
@@ -191,18 +181,13 @@
191
181
  .sheet-handle {
192
182
  width: 2.5rem;
193
183
  height: 0.25rem;
194
- background-color: #d1d5db; /* gray-300 */
184
+ background-color: hsl(var(--Stroke-Primary));
195
185
  border-radius: 0.125rem;
196
186
  }
197
187
 
198
- :global(.dark) .sheet-handle {
199
- background-color: #4b5563; /* gray-600 */
200
- }
201
-
202
188
  .modal-inner {
203
- padding: 1.5rem;
204
- /* Account for bottom nav bars (~70px) plus safe area */
205
- padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
189
+ padding: 0.5rem 1.5rem 1.5rem;
190
+ padding-bottom: calc(1.5rem + var(--safe-bottom, 0px));
206
191
  overflow-y: auto;
207
192
  flex: 1;
208
193
  }
@@ -210,18 +195,13 @@
210
195
  /* Desktop: Centered modal style */
211
196
  .modal-centered {
212
197
  display: none;
213
- background-color: #ffffff;
198
+ background-color: hsl(var(--BG-Primary));
214
199
  padding: 1.5rem;
215
200
  border-radius: 1rem;
216
201
  max-width: 420px;
217
202
  width: 100%;
218
203
  max-height: calc(100vh - 4rem);
219
204
  overflow-y: auto;
220
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
221
- }
222
-
223
- :global(.dark) .modal-centered {
224
- background-color: #1f2937; /* gray-800 */
225
205
  }
226
206
 
227
207
  @media (min-width: 768px) {
@@ -243,12 +223,6 @@
243
223
  display: flex;
244
224
  flex-direction: column;
245
225
  gap: 0.75rem;
246
- margin-top: 1.5rem; /* 24px - consistent gap before buttons */
247
- }
248
-
249
- .modal-footer:empty {
250
- display: none;
251
- margin-top: 0;
252
226
  }
253
227
 
254
228
  @media (min-width: 768px) {
@@ -4,7 +4,6 @@ type Modal = SvelteComponent<{
4
4
  show?: boolean | undefined;
5
5
  isSuccess?: boolean | undefined;
6
6
  isProcessing?: boolean | undefined;
7
- persistent?: boolean | undefined;
8
7
  }, {
9
8
  click: PointerEvent;
10
9
  cancel: CustomEvent<any>;
@@ -22,7 +21,6 @@ declare const Modal: $$__sveltets_2_IsomorphicComponent<{
22
21
  show?: boolean | undefined;
23
22
  isSuccess?: boolean | undefined;
24
23
  isProcessing?: boolean | undefined;
25
- persistent?: boolean | undefined;
26
24
  }, {
27
25
  click: PointerEvent;
28
26
  cancel: CustomEvent<any>;
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmIA;;;;;;;;;;;;;;;eAAgL;6CAdnI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkIA;;;;;;;;;;;;;;eAAmK;6CAdtH,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
@@ -1,9 +1,9 @@
1
1
  export default PasswordStrengthIndicator;
2
2
  type PasswordStrengthIndicator = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
3
- textColor?: string | undefined;
4
3
  password?: string | undefined;
5
4
  strengthText?: string | undefined;
6
5
  score?: number | undefined;
6
+ textColor?: string | undefined;
7
7
  }, {
8
8
  default: {};
9
9
  }>, {
@@ -14,10 +14,10 @@ type PasswordStrengthIndicator = SvelteComponent<$$__sveltets_2_PropsWithChildre
14
14
  $$bindings?: string | undefined;
15
15
  };
16
16
  declare const PasswordStrengthIndicator: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
17
- textColor?: string | undefined;
18
17
  password?: string | undefined;
19
18
  strengthText?: string | undefined;
20
19
  score?: number | undefined;
20
+ textColor?: string | undefined;
21
21
  }, {
22
22
  default: {};
23
23
  }>, {
@@ -1,75 +1,19 @@
1
- <script>
2
- export let size = 'md';
3
- export let color = 'brand'; // brand, white, secondary, error, success
4
-
5
- const sizeClasses = {
6
- sm: 'w-4 h-4 border-2',
7
- md: 'w-8 h-8 border-3',
8
- lg: 'w-12 h-12 border-4',
9
- xl: 'w-16 h-16 border-4'
10
- };
11
-
12
- $: sizeClass = sizeClasses[size] || sizeClasses.md;
13
- </script>
14
-
15
- <div
16
- class="spinner {sizeClass} color-{color} rounded-full animate-spin"
17
- role="status"
18
- aria-label="Loading"
19
- >
1
+ <div role="status" class="flex flex-col justify-center items-center h-10 gap-3">
2
+ <svg
3
+ aria-hidden="true"
4
+ class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
5
+ viewBox="0 0 100 101"
6
+ fill="none"
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ >
9
+ <path
10
+ d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
11
+ fill="currentColor"
12
+ />
13
+ <path
14
+ d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
15
+ fill="currentFill"
16
+ />
17
+ </svg>
20
18
  <span class="sr-only">Loading...</span>
21
19
  </div>
22
-
23
- <style>
24
- .spinner {
25
- border-style: solid;
26
- animation: spin 0.8s linear infinite;
27
- }
28
-
29
- /* Theme-responsive spinner colors */
30
- .spinner.color-brand {
31
- border-color: hsl(var(--Brand-Primary));
32
- border-top-color: transparent;
33
- }
34
-
35
- .spinner.color-white {
36
- border-color: white;
37
- border-top-color: transparent;
38
- }
39
-
40
- .spinner.color-secondary {
41
- border-color: hsl(var(--Text-Secondary));
42
- border-top-color: transparent;
43
- }
44
-
45
- .spinner.color-error {
46
- border-color: hsl(var(--Status-SoldOut));
47
- border-top-color: transparent;
48
- }
49
-
50
- .spinner.color-success {
51
- border-color: hsl(var(--Status-OnSale));
52
- border-top-color: transparent;
53
- }
54
-
55
- @keyframes spin {
56
- 0% {
57
- transform: rotate(0deg);
58
- }
59
- 100% {
60
- transform: rotate(360deg);
61
- }
62
- }
63
-
64
- .sr-only {
65
- position: absolute;
66
- width: 1px;
67
- height: 1px;
68
- padding: 0;
69
- margin: -1px;
70
- overflow: hidden;
71
- clip: rect(0, 0, 0, 0);
72
- white-space: nowrap;
73
- border-width: 0;
74
- }
75
- </style>
@@ -1,15 +1,13 @@
1
1
  export default Spinner;
2
2
  type Spinner = SvelteComponent<{
3
- color?: string | undefined;
4
- size?: string | undefined;
3
+ [x: string]: never;
5
4
  }, {
6
5
  [evt: string]: CustomEvent<any>;
7
6
  }, {}> & {
8
7
  $$bindings?: string | undefined;
9
8
  };
10
9
  declare const Spinner: $$__sveltets_2_IsomorphicComponent<{
11
- color?: string | undefined;
12
- size?: string | undefined;
10
+ [x: string]: never;
13
11
  }, {
14
12
  [evt: string]: CustomEvent<any>;
15
13
  }, {}, {}, string>;
@@ -17,7 +15,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
17
15
  new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
18
16
  $$bindings?: Bindings;
19
17
  } & Exports;
20
- (internal: unknown, props: Props & {
18
+ (internal: unknown, props: {
21
19
  $$events?: Events;
22
20
  $$slots?: Slots;
23
21
  }): Exports & {
@@ -1 +1 @@
1
- {"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Spinner/Spinner.svelte.js"],"names":[],"mappings":";;;;;;;;;AAkCA;;;;;mBAAqI;6CATxF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Spinner/Spinner.svelte.js"],"names":[],"mappings":";;;;;;;;AAqBA;;;;mBAAmH;6CATtE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}