@getmicdrop/svelte-components 2.8.1 → 3.0.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 (90) hide show
  1. package/dist/components/Alert/Alert.svelte +24 -12
  2. package/dist/components/Alert/Alert.svelte.d.ts +15 -45
  3. package/dist/components/Alert/Alert.svelte.d.ts.map +1 -1
  4. package/dist/components/Badges/Badge.svelte +53 -37
  5. package/dist/components/Badges/Badge.svelte.d.ts +60 -48
  6. package/dist/components/Badges/Badge.svelte.d.ts.map +1 -1
  7. package/dist/components/BottomSheet/BottomSheet.svelte +37 -20
  8. package/dist/components/BottomSheet/BottomSheet.svelte.d.ts +45 -47
  9. package/dist/components/BottomSheet/BottomSheet.svelte.d.ts.map +1 -1
  10. package/dist/components/Breadcrumb/Breadcrumb.svelte +22 -16
  11. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts +50 -31
  12. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
  13. package/dist/components/Button/Button.svelte +179 -134
  14. package/dist/components/Button/Button.svelte.d.ts +37 -78
  15. package/dist/components/Button/Button.svelte.d.ts.map +1 -1
  16. package/dist/components/Checkbox/Checkbox.svelte +71 -41
  17. package/dist/components/Checkbox/Checkbox.svelte.d.ts +34 -62
  18. package/dist/components/Checkbox/Checkbox.svelte.d.ts.map +1 -1
  19. package/dist/components/Drawer/Drawer.svelte +63 -46
  20. package/dist/components/Drawer/Drawer.svelte.d.ts +110 -54
  21. package/dist/components/Drawer/Drawer.svelte.d.ts.map +1 -1
  22. package/dist/components/Dropdown/Dropdown.svelte +203 -193
  23. package/dist/components/Dropdown/Dropdown.svelte.d.ts +44 -42
  24. package/dist/components/Dropdown/Dropdown.svelte.d.ts.map +1 -1
  25. package/dist/components/Dropdown/DropdownItem.svelte +124 -111
  26. package/dist/components/Dropdown/DropdownItem.svelte.d.ts +39 -43
  27. package/dist/components/Dropdown/DropdownItem.svelte.d.ts.map +1 -1
  28. package/dist/components/Dropdown/SelectDropdown.svelte +31 -25
  29. package/dist/components/Dropdown/SelectDropdown.svelte.d.ts +48 -29
  30. package/dist/components/Dropdown/SelectDropdown.svelte.d.ts.map +1 -1
  31. package/dist/components/Input/Input.svelte +141 -98
  32. package/dist/components/Input/Input.svelte.d.ts +94 -110
  33. package/dist/components/Input/Input.svelte.d.ts.map +1 -1
  34. package/dist/components/Input/MultiSelect.svelte +58 -39
  35. package/dist/components/Input/MultiSelect.svelte.d.ts +101 -40
  36. package/dist/components/Input/MultiSelect.svelte.d.ts.map +1 -1
  37. package/dist/components/Input/OTPInput.svelte +30 -17
  38. package/dist/components/Input/OTPInput.svelte.d.ts +45 -36
  39. package/dist/components/Input/OTPInput.svelte.d.ts.map +1 -1
  40. package/dist/components/Input/Search.svelte +196 -173
  41. package/dist/components/Input/Search.svelte.d.ts +36 -65
  42. package/dist/components/Input/Search.svelte.d.ts.map +1 -1
  43. package/dist/components/Input/Select.svelte +49 -35
  44. package/dist/components/Input/Select.svelte.d.ts +44 -46
  45. package/dist/components/Input/Select.svelte.d.ts.map +1 -1
  46. package/dist/components/Input/Textarea.svelte +187 -160
  47. package/dist/components/Input/Textarea.svelte.d.ts +56 -66
  48. package/dist/components/Input/Textarea.svelte.d.ts.map +1 -1
  49. package/dist/components/Modal/ConfirmationModal.svelte +103 -78
  50. package/dist/components/Modal/ConfirmationModal.svelte.d.ts +132 -47
  51. package/dist/components/Modal/ConfirmationModal.svelte.d.ts.map +1 -1
  52. package/dist/components/Modal/InputModal.svelte +157 -132
  53. package/dist/components/Modal/InputModal.svelte.d.ts +181 -48
  54. package/dist/components/Modal/InputModal.svelte.d.ts.map +1 -1
  55. package/dist/components/Modal/Modal.svelte +77 -45
  56. package/dist/components/Modal/Modal.svelte.d.ts +56 -41
  57. package/dist/components/Modal/Modal.svelte.d.ts.map +1 -1
  58. package/dist/components/Modal/ModalTestWrapper.svelte.d.ts +2 -2
  59. package/dist/components/Modal/StatusModal.svelte +149 -122
  60. package/dist/components/Modal/StatusModal.svelte.d.ts +126 -47
  61. package/dist/components/Modal/StatusModal.svelte.d.ts.map +1 -1
  62. package/dist/components/OrderSummary/OrderSummary.svelte +68 -59
  63. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts +72 -60
  64. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts.map +1 -1
  65. package/dist/components/Pagination/Pagination.svelte +49 -39
  66. package/dist/components/Pagination/Pagination.svelte.d.ts +89 -36
  67. package/dist/components/Pagination/Pagination.svelte.d.ts.map +1 -1
  68. package/dist/components/PublicCard/PublicCard.svelte +22 -12
  69. package/dist/components/PublicCard/PublicCard.svelte.d.ts +14 -32
  70. package/dist/components/PublicCard/PublicCard.svelte.d.ts.map +1 -1
  71. package/dist/components/Radio/Radio.svelte +35 -21
  72. package/dist/components/Radio/Radio.svelte.d.ts +22 -51
  73. package/dist/components/Radio/Radio.svelte.d.ts.map +1 -1
  74. package/dist/components/ShowCard/ShowCard.svelte +47 -40
  75. package/dist/components/ShowCard/ShowCard.svelte.d.ts +30 -36
  76. package/dist/components/ShowCard/ShowCard.svelte.d.ts.map +1 -1
  77. package/dist/components/ShowTimeCard/ShowTimeCard.svelte +23 -14
  78. package/dist/components/ShowTimeCard/ShowTimeCard.svelte.d.ts +20 -34
  79. package/dist/components/ShowTimeCard/ShowTimeCard.svelte.d.ts.map +1 -1
  80. package/dist/components/Toggle.spec.js +21 -52
  81. package/dist/components/Toggle.svelte +11 -9
  82. package/dist/components/Toggle.svelte.d.ts +17 -30
  83. package/dist/components/Toggle.svelte.d.ts.map +1 -1
  84. package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte +45 -32
  85. package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts +22 -36
  86. package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts.map +1 -1
  87. package/dist/components/pages/shows/TabNavigation.svelte +16 -8
  88. package/dist/components/pages/shows/TabNavigation.svelte.d.ts +20 -30
  89. package/dist/components/pages/shows/TabNavigation.svelte.d.ts.map +1 -1
  90. package/package.json +1 -1
@@ -1,30 +1,40 @@
1
1
  <script>
2
2
  import { Alert } from "flowbite-svelte";
3
- import { createEventDispatcher } from "svelte";
4
3
 
5
- export let title = "";
6
- export let message = "";
7
- export let type = "info"; // info, success, warning, danger
8
- export let onClose = undefined;
4
+ /**
5
+ * @typedef {Object} Props
6
+ * @property {string} [title]
7
+ * @property {string} [message]
8
+ * @property {'info'|'success'|'warning'|'danger'} [type]
9
+ * @property {Function} [onClose]
10
+ * @property {import('svelte').Snippet} [children]
11
+ */
9
12
 
10
- const dispatch = createEventDispatcher();
13
+ /** @type {Props} */
14
+ let {
15
+ title = "",
16
+ message = "",
17
+ type = "info",
18
+ onClose = undefined,
19
+ children
20
+ } = $props();
11
21
 
12
22
  // Map legacy 'type' to Flowbite 'color'
13
- $: color =
23
+ let color = $derived(
14
24
  {
15
25
  info: "blue",
16
26
  success: "green",
17
27
  warning: "yellow",
18
28
  danger: "red",
19
- }[type] || "blue";
29
+ }[type] || "blue"
30
+ );
20
31
 
21
32
  function handleClose() {
22
- if (onClose) onClose();
23
- dispatch("close");
33
+ onClose?.();
24
34
  }
25
35
  </script>
26
36
 
27
- <Alert {color} dismissable={!!onClose} on:close={handleClose} class="mb-4 custom-alert">
37
+ <Alert {color} dismissable={!!onClose} onclose={handleClose} class="mb-4 custom-alert">
28
38
  {#if title}
29
39
  <span class="font-medium">{title}</span>
30
40
  {/if}
@@ -33,7 +43,9 @@
33
43
  {message}
34
44
  </div>
35
45
  {/if}
36
- <slot />
46
+ {#if children}
47
+ {@render children()}
48
+ {/if}
37
49
  </Alert>
38
50
 
39
51
  <style>
@@ -1,51 +1,21 @@
1
1
  export default Alert;
2
- type Alert = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
3
- title?: string | undefined;
4
- message?: string | undefined;
5
- type?: string | undefined;
6
- onClose?: any;
7
- }, {
8
- default: {};
9
- }>, {
10
- close: CustomEvent<any>;
11
- } & {
12
- [evt: string]: CustomEvent<any>;
13
- }, {
14
- default: {};
15
- }> & {
16
- $$bindings?: string | undefined;
2
+ type Alert = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<Props>): void;
17
5
  };
18
- declare const Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
6
+ declare const Alert: import("svelte").Component<{
19
7
  title?: string | undefined;
20
8
  message?: string | undefined;
21
- type?: string | undefined;
22
- onClose?: any;
23
- }, {
24
- default: {};
25
- }>, {
26
- close: CustomEvent<any>;
27
- } & {
28
- [evt: string]: CustomEvent<any>;
29
- }, {
30
- default: {};
31
- }, {}, string>;
9
+ type?: "info" | "success" | "warning" | "danger" | undefined;
10
+ onClose?: Function | undefined;
11
+ children?: import("svelte").Snippet<[]> | undefined;
12
+ }, {}, "">;
32
13
  import { Alert } from "flowbite-svelte";
33
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
34
- default: any;
35
- } ? Props extends Record<string, never> ? any : {
36
- children?: any;
37
- } : {});
38
- 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> {
39
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
40
- $$bindings?: Bindings;
41
- } & Exports;
42
- (internal: unknown, props: Props & {
43
- $$events?: Events;
44
- $$slots?: Slots;
45
- }): Exports & {
46
- $set?: any;
47
- $on?: any;
48
- };
49
- z_$$bindings?: Bindings;
50
- }
14
+ type Props = {
15
+ title?: string | undefined;
16
+ message?: string | undefined;
17
+ type?: "info" | "success" | "warning" | "danger" | undefined;
18
+ onClose?: Function | undefined;
19
+ children?: import("svelte").Snippet<[]> | undefined;
20
+ };
51
21
  //# sourceMappingURL=Alert.svelte.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/Alert.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA8DA;;;;;;;;;;;;;eAA6J;sBA3DvI,iBAAiB;sCAkDD,KAAK,EAAE,KAAK;;;;;6CALL,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":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/Alert.svelte.js"],"names":[],"mappings":";;;;;AA2DA;;;;;;WAAoD;sBAxD9B,iBAAiB"}
@@ -1,27 +1,39 @@
1
1
  <script>
2
- import { createEventDispatcher } from "svelte";
3
2
  import { classNames } from "./../../utils/utils.js";
4
3
 
5
- const dispatch = createEventDispatcher();
6
-
7
- export let size = "medium";
8
- export let className = "";
9
- /** @type {string|number} Semantic variant or tier number (1-5) */
10
- export let variant = "neutral";
11
- /** @type {string|null} Event display type: "square" or "circle" */
12
- export let event = null;
13
- /** @type {string|null} Custom text color (hex) */
14
- export let textColor = null;
15
- /** @type {string|null} Custom background color (hex or rgba) */
16
- export let bgColor = null;
17
- /** @type {boolean} Show status dot before text (uses variant color) */
18
- export let showDot = false;
19
- /** @type {boolean} Pill mode for counts/notifications (circular, minimal padding) */
20
- export let pill = false;
21
- /** @type {"rounded"|"pill"} Border radius style - rounded-rect or full pill */
22
- export let shape = "rounded";
23
-
24
- $: sizeClass = (() => {
4
+ /**
5
+ * @typedef {Object} Props
6
+ * @property {'xs'|'small'|'medium'|'large'} [size]
7
+ * @property {string} [className]
8
+ * @property {string|number} [variant] - Semantic variant or tier number (1-5)
9
+ * @property {string|null} [event] - Event display type: "square" or "circle"
10
+ * @property {string|null} [textColor] - Custom text color (hex)
11
+ * @property {string|null} [bgColor] - Custom background color (hex or rgba)
12
+ * @property {boolean} [showDot] - Show status dot before text (uses variant color)
13
+ * @property {boolean} [pill] - Pill mode for counts/notifications (circular, minimal padding)
14
+ * @property {'rounded'|'pill'} [shape] - Border radius style - rounded-rect or full pill
15
+ * @property {Function} [onclick]
16
+ * @property {import('svelte').Snippet} [leftIcon]
17
+ * @property {import('svelte').Snippet} [children]
18
+ */
19
+
20
+ /** @type {Props} */
21
+ let {
22
+ size = "medium",
23
+ className = "",
24
+ variant = "neutral",
25
+ event = null,
26
+ textColor = null,
27
+ bgColor = null,
28
+ showDot = false,
29
+ pill = false,
30
+ shape = "rounded",
31
+ onclick,
32
+ leftIcon,
33
+ children
34
+ } = $props();
35
+
36
+ let sizeClass = $derived((() => {
25
37
  switch (size) {
26
38
  case "xs":
27
39
  return "badge-xs";
@@ -34,12 +46,12 @@
34
46
  default:
35
47
  return "badge-md";
36
48
  }
37
- })();
49
+ })());
38
50
 
39
- $: shapeClass = pill ? "badge-pill" : (shape === "pill" ? "badge-shape-pill" : "badge-shape-rounded");
51
+ let shapeClass = $derived(pill ? "badge-pill" : (shape === "pill" ? "badge-shape-pill" : "badge-shape-rounded"));
40
52
 
41
53
  // Handle tier numbers (1-5) as variants
42
- $: normalizedVariant = (() => {
54
+ let normalizedVariant = $derived((() => {
43
55
  if (typeof variant === "number" || !isNaN(Number(variant))) {
44
56
  const tierNum = Number(variant);
45
57
  switch (tierNum) {
@@ -52,9 +64,9 @@
52
64
  }
53
65
  }
54
66
  return String(variant).toLowerCase();
55
- })();
67
+ })());
56
68
 
57
- $: variantClass = (() => {
69
+ let variantClass = $derived((() => {
58
70
  switch (normalizedVariant) {
59
71
  // Role variants
60
72
  case "host":
@@ -112,9 +124,9 @@
112
124
  default:
113
125
  return "badge-neutral";
114
126
  }
115
- })();
127
+ })());
116
128
 
117
- $: eventClass = (() => {
129
+ let eventClass = $derived((() => {
118
130
  if (!event) return "";
119
131
  switch (event) {
120
132
  case "square":
@@ -124,19 +136,19 @@
124
136
  default:
125
137
  return "";
126
138
  }
127
- })();
139
+ })());
128
140
 
129
141
  // Custom style for text/bg color overrides
130
- $: customStyle = (() => {
142
+ let customStyle = $derived((() => {
131
143
  const styles = [];
132
144
  if (textColor) styles.push(`color: ${textColor}`);
133
145
  if (bgColor) styles.push(`background-color: ${bgColor}`);
134
146
  return styles.length > 0 ? styles.join("; ") : null;
135
- })();
147
+ })());
136
148
  </script>
137
149
 
138
- <!-- svelte-ignore a11y-click-events-have-key-events -->
139
- <!-- svelte-ignore a11y-no-static-element-interactions -->
150
+ <!-- svelte-ignore a11y_click_events_have_key_events -->
151
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
140
152
  <div
141
153
  class={classNames(
142
154
  "badge",
@@ -147,19 +159,23 @@
147
159
  className
148
160
  )}
149
161
  style={customStyle}
150
- on:click={(e) => dispatch("click", e)}
162
+ onclick={(e) => onclick?.(e)}
151
163
  >
152
164
  {#if showDot}
153
165
  <span class="badge-dot"></span>
154
166
  {/if}
155
- <slot name="leftIcon" />
156
- <slot />
167
+ {#if leftIcon}
168
+ {@render leftIcon()}
169
+ {/if}
170
+ {#if children}
171
+ {@render children()}
172
+ {/if}
157
173
  </div>
158
174
 
159
175
  <!--
160
176
  Usage: <Badge variant="host">Host</Badge>
161
177
 
162
- With icon: <Badge variant="success"><CheckIcon slot="leftIcon" />Verified</Badge>
178
+ With icon: <Badge variant="success">{#snippet leftIcon}<CheckIcon />{/snippet}Verified</Badge>
163
179
  With dot: <Badge variant="success" showDot>On Sale</Badge>
164
180
 
165
181
  Role variants: host, headliner, feature, special-guest, opener, guest, teacher, assistant
@@ -1,64 +1,76 @@
1
1
  export default Badge;
2
- type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
3
- pill?: boolean | undefined;
4
- size?: string | undefined;
2
+ type Badge = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<Props>): void;
5
+ };
6
+ declare const Badge: import("svelte").Component<{
7
+ size?: "xs" | "small" | "medium" | "large" | undefined;
5
8
  className?: string | undefined;
9
+ /**
10
+ * - Semantic variant or tier number (1-5)
11
+ */
6
12
  variant?: string | number | undefined;
13
+ /**
14
+ * - Event display type: "square" or "circle"
15
+ */
7
16
  event?: string | null | undefined;
17
+ /**
18
+ * - Custom text color (hex)
19
+ */
8
20
  textColor?: string | null | undefined;
21
+ /**
22
+ * - Custom background color (hex or rgba)
23
+ */
9
24
  bgColor?: string | null | undefined;
25
+ /**
26
+ * - Show status dot before text (uses variant color)
27
+ */
10
28
  showDot?: boolean | undefined;
11
- shape?: "rounded" | "pill" | undefined;
12
- }, {
13
- leftIcon: {};
14
- default: {};
15
- }>, {
16
- click: CustomEvent<any>;
17
- } & {
18
- [evt: string]: CustomEvent<any>;
19
- }, {
20
- leftIcon: {};
21
- default: {};
22
- }> & {
23
- $$bindings?: string | undefined;
24
- };
25
- declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
29
+ /**
30
+ * - Pill mode for counts/notifications (circular, minimal padding)
31
+ */
26
32
  pill?: boolean | undefined;
27
- size?: string | undefined;
33
+ /**
34
+ * - Border radius style - rounded-rect or full pill
35
+ */
36
+ shape?: "rounded" | "pill" | undefined;
37
+ onclick?: Function | undefined;
38
+ leftIcon?: import("svelte").Snippet<[]> | undefined;
39
+ children?: import("svelte").Snippet<[]> | undefined;
40
+ }, {}, "">;
41
+ type Props = {
42
+ size?: "xs" | "small" | "medium" | "large" | undefined;
28
43
  className?: string | undefined;
44
+ /**
45
+ * - Semantic variant or tier number (1-5)
46
+ */
29
47
  variant?: string | number | undefined;
48
+ /**
49
+ * - Event display type: "square" or "circle"
50
+ */
30
51
  event?: string | null | undefined;
52
+ /**
53
+ * - Custom text color (hex)
54
+ */
31
55
  textColor?: string | null | undefined;
56
+ /**
57
+ * - Custom background color (hex or rgba)
58
+ */
32
59
  bgColor?: string | null | undefined;
60
+ /**
61
+ * - Show status dot before text (uses variant color)
62
+ */
33
63
  showDot?: boolean | undefined;
64
+ /**
65
+ * - Pill mode for counts/notifications (circular, minimal padding)
66
+ */
67
+ pill?: boolean | undefined;
68
+ /**
69
+ * - Border radius style - rounded-rect or full pill
70
+ */
34
71
  shape?: "rounded" | "pill" | undefined;
35
- }, {
36
- leftIcon: {};
37
- default: {};
38
- }>, {
39
- click: CustomEvent<any>;
40
- } & {
41
- [evt: string]: CustomEvent<any>;
42
- }, {
43
- leftIcon: {};
44
- default: {};
45
- }, {}, string>;
46
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
47
- default: any;
48
- } ? Props extends Record<string, never> ? any : {
49
- children?: any;
50
- } : {});
51
- 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> {
52
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
53
- $$bindings?: Bindings;
54
- } & Exports;
55
- (internal: unknown, props: Props & {
56
- $$events?: Events;
57
- $$slots?: Slots;
58
- }): Exports & {
59
- $set?: any;
60
- $on?: any;
61
- };
62
- z_$$bindings?: Bindings;
63
- }
72
+ onclick?: Function | undefined;
73
+ leftIcon?: import("svelte").Snippet<[]> | undefined;
74
+ children?: import("svelte").Snippet<[]> | undefined;
75
+ };
64
76
  //# sourceMappingURL=Badge.svelte.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2LA;;;;;;;;;;;;;;;;;;;;eAA8M;sCATxK,KAAK,EAAE,KAAK;;;;;6CALL,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":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;AAqLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAoD"}
@@ -1,15 +1,28 @@
1
1
  <script>
2
- import { createEventDispatcher, onMount, onDestroy } from "svelte";
2
+ import { onDestroy } from "svelte";
3
3
  import { fly, fade } from "svelte/transition";
4
4
  import { cubicOut } from "svelte/easing";
5
5
 
6
- export let show = false;
7
- export let title = "";
8
-
9
- const dispatch = createEventDispatcher();
6
+ /**
7
+ * @typedef {Object} Props
8
+ * @property {boolean} [show] - Whether the sheet is visible
9
+ * @property {string} [title] - Optional title
10
+ * @property {Function} [onclose] - Close callback
11
+ * @property {import('svelte').Snippet} [actions] - Actions snippet
12
+ * @property {import('svelte').Snippet} [children] - Default content
13
+ */
14
+
15
+ /** @type {Props} */
16
+ let {
17
+ show = $bindable(false),
18
+ title = "",
19
+ onclose,
20
+ actions,
21
+ children
22
+ } = $props();
10
23
 
11
24
  function close() {
12
- dispatch("close");
25
+ onclose?.();
13
26
  }
14
27
 
15
28
  function handleBackdropClick(e) {
@@ -25,13 +38,15 @@
25
38
  }
26
39
 
27
40
  // Lock body scroll when sheet is open
28
- $: if (typeof document !== "undefined") {
29
- if (show) {
30
- document.body.style.overflow = "hidden";
31
- } else {
32
- document.body.style.overflow = "";
41
+ $effect(() => {
42
+ if (typeof document !== "undefined") {
43
+ if (show) {
44
+ document.body.style.overflow = "hidden";
45
+ } else {
46
+ document.body.style.overflow = "";
47
+ }
33
48
  }
34
- }
49
+ });
35
50
 
36
51
  onDestroy(() => {
37
52
  if (typeof document !== "undefined") {
@@ -40,19 +55,19 @@
40
55
  });
41
56
  </script>
42
57
 
43
- <svelte:window on:keydown={handleKeydown} />
58
+ <svelte:window onkeydown={handleKeydown} />
44
59
 
45
60
  {#if show}
46
- <!-- svelte-ignore a11y-click-events-have-key-events -->
47
- <!-- svelte-ignore a11y-no-static-element-interactions -->
61
+ <!-- svelte-ignore a11y_click_events_have_key_events -->
62
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
48
63
  <div
49
64
  class="bottom-sheet-backdrop"
50
- on:click={handleBackdropClick}
65
+ onclick={handleBackdropClick}
51
66
  transition:fade={{ duration: 200 }}
52
67
  >
53
68
  <div
54
69
  class="bottom-sheet"
55
- on:click|stopPropagation
70
+ onclick={(e) => e.stopPropagation()}
56
71
  transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
57
72
  >
58
73
  <!-- Handle bar for drag indication -->
@@ -69,13 +84,15 @@
69
84
 
70
85
  <!-- Content slot -->
71
86
  <div class="bottom-sheet__content">
72
- <slot />
87
+ {#if children}
88
+ {@render children()}
89
+ {/if}
73
90
  </div>
74
91
 
75
92
  <!-- Actions slot (optional) -->
76
- {#if $$slots.actions}
93
+ {#if actions}
77
94
  <div class="bottom-sheet__actions">
78
- <slot name="actions" />
95
+ {@render actions()}
79
96
  </div>
80
97
  {/if}
81
98
  </div>
@@ -1,52 +1,50 @@
1
1
  export default BottomSheet;
2
- type BottomSheet = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
3
- title?: string | undefined;
4
- show?: boolean | undefined;
5
- }, {
6
- default: {};
7
- actions: {};
8
- }>, {
9
- click: PointerEvent;
10
- close: CustomEvent<any>;
11
- } & {
12
- [evt: string]: CustomEvent<any>;
13
- }, {
14
- default: {};
15
- actions: {};
16
- }> & {
17
- $$bindings?: string | undefined;
2
+ type BottomSheet = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<Props>): void;
18
5
  };
19
- declare const BottomSheet: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
6
+ declare const BottomSheet: import("svelte").Component<{
7
+ /**
8
+ * - Whether the sheet is visible
9
+ */
10
+ show?: boolean | undefined;
11
+ /**
12
+ * - Optional title
13
+ */
20
14
  title?: string | undefined;
15
+ /**
16
+ * - Close callback
17
+ */
18
+ onclose?: Function | undefined;
19
+ /**
20
+ * - Actions snippet
21
+ */
22
+ actions?: import("svelte").Snippet<[]> | undefined;
23
+ /**
24
+ * - Default content
25
+ */
26
+ children?: import("svelte").Snippet<[]> | undefined;
27
+ }, {}, "show">;
28
+ type Props = {
29
+ /**
30
+ * - Whether the sheet is visible
31
+ */
21
32
  show?: boolean | undefined;
22
- }, {
23
- default: {};
24
- actions: {};
25
- }>, {
26
- click: PointerEvent;
27
- close: CustomEvent<any>;
28
- } & {
29
- [evt: string]: CustomEvent<any>;
30
- }, {
31
- default: {};
32
- actions: {};
33
- }, {}, string>;
34
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
35
- default: any;
36
- } ? Props extends Record<string, never> ? any : {
37
- children?: any;
38
- } : {});
39
- 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> {
40
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
41
- $$bindings?: Bindings;
42
- } & Exports;
43
- (internal: unknown, props: Props & {
44
- $$events?: Events;
45
- $$slots?: Slots;
46
- }): Exports & {
47
- $set?: any;
48
- $on?: any;
49
- };
50
- z_$$bindings?: Bindings;
51
- }
33
+ /**
34
+ * - Optional title
35
+ */
36
+ title?: string | undefined;
37
+ /**
38
+ * - Close callback
39
+ */
40
+ onclose?: Function | undefined;
41
+ /**
42
+ * - Actions snippet
43
+ */
44
+ actions?: import("svelte").Snippet<[]> | undefined;
45
+ /**
46
+ * - Default content
47
+ */
48
+ children?: import("svelte").Snippet<[]> | undefined;
49
+ };
52
50
  //# sourceMappingURL=BottomSheet.svelte.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAqGA;;;;;;;;;;;;;;eAA+I;sCATzG,KAAK,EAAE,KAAK;;;;;6CALL,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":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.svelte.js"],"names":[],"mappings":";;;;;AAwGA;;;;;;;;;;;;;;;;;;;;;eAA0D"}