lutra 0.0.33 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (242) hide show
  1. package/README.md +4 -24
  2. package/dist/components/AspectRatio.svelte +26 -0
  3. package/dist/components/AspectRatio.svelte.d.ts +8 -0
  4. package/dist/components/Dialog.svelte +78 -0
  5. package/dist/components/Dialog.svelte.d.ts +14 -0
  6. package/dist/components/Layout.svelte +32 -0
  7. package/dist/components/Layout.svelte.d.ts +11 -0
  8. package/dist/components/PageContent.svelte +108 -0
  9. package/dist/components/PageContent.svelte.d.ts +38 -0
  10. package/dist/components/Theme.svelte +87 -0
  11. package/dist/components/Theme.svelte.d.ts +17 -0
  12. package/dist/{display → components}/Tooltip.svelte +33 -8
  13. package/dist/components/Tooltip.svelte.d.ts +12 -0
  14. package/dist/config.d.ts +30 -0
  15. package/dist/config.js +18 -0
  16. package/dist/css/0-layers.css +1 -0
  17. package/dist/css/1-props.css +775 -0
  18. package/dist/css/2-base.css +209 -0
  19. package/dist/css/3-typo.css +65 -0
  20. package/dist/css/4-layout.css +5 -0
  21. package/dist/css/5-media.css +21 -0
  22. package/dist/css/lutra.css +6 -0
  23. package/dist/index.d.ts +5 -1
  24. package/dist/index.js +5 -2
  25. package/dist/types.d.ts +39 -0
  26. package/dist/types.js +25 -0
  27. package/package.json +29 -82
  28. package/dist/color.css +0 -0
  29. package/dist/display/Avatar.svelte +0 -61
  30. package/dist/display/Avatar.svelte.d.ts +0 -19
  31. package/dist/display/Badge.svelte +0 -91
  32. package/dist/display/Badge.svelte.d.ts +0 -30
  33. package/dist/display/Callout.svelte +0 -109
  34. package/dist/display/Callout.svelte.d.ts +0 -28
  35. package/dist/display/Close.svelte +0 -58
  36. package/dist/display/Close.svelte.d.ts +0 -18
  37. package/dist/display/Code.svelte +0 -190
  38. package/dist/display/Code.svelte.d.ts +0 -32
  39. package/dist/display/ContextTip.svelte +0 -23
  40. package/dist/display/ContextTip.svelte.d.ts +0 -18
  41. package/dist/display/DataList.svelte +0 -16
  42. package/dist/display/DataList.svelte.d.ts +0 -21
  43. package/dist/display/Details.svelte +0 -49
  44. package/dist/display/Details.svelte.d.ts +0 -27
  45. package/dist/display/Hero.svelte +0 -50
  46. package/dist/display/Hero.svelte.d.ts +0 -26
  47. package/dist/display/Icon.svelte +0 -39
  48. package/dist/display/Icon.svelte.d.ts +0 -19
  49. package/dist/display/IconButton.svelte +0 -91
  50. package/dist/display/IconButton.svelte.d.ts +0 -27
  51. package/dist/display/Image.svelte +0 -91
  52. package/dist/display/Image.svelte.d.ts +0 -26
  53. package/dist/display/Indicator.svelte +0 -352
  54. package/dist/display/Indicator.svelte.d.ts +0 -23
  55. package/dist/display/Inset.svelte +0 -18
  56. package/dist/display/Inset.svelte.d.ts +0 -18
  57. package/dist/display/LineChart.svelte +0 -385
  58. package/dist/display/LineChart.svelte.d.ts +0 -24
  59. package/dist/display/LoadingIndicator.svelte +0 -33
  60. package/dist/display/LoadingIndicator.svelte.d.ts +0 -15
  61. package/dist/display/Modal.svelte +0 -116
  62. package/dist/display/Modal.svelte.d.ts +0 -27
  63. package/dist/display/Notification.svelte +0 -104
  64. package/dist/display/Notification.svelte.d.ts +0 -23
  65. package/dist/display/Panel.svelte +0 -23
  66. package/dist/display/Panel.svelte.d.ts +0 -19
  67. package/dist/display/Popup.svelte +0 -111
  68. package/dist/display/Popup.svelte.d.ts +0 -25
  69. package/dist/display/Stat.svelte +0 -81
  70. package/dist/display/Stat.svelte.d.ts +0 -30
  71. package/dist/display/Table.svelte +0 -28
  72. package/dist/display/Table.svelte.d.ts +0 -24
  73. package/dist/display/TablePaginator.svelte +0 -51
  74. package/dist/display/TablePaginator.svelte.d.ts +0 -21
  75. package/dist/display/Tag.svelte +0 -90
  76. package/dist/display/Tag.svelte.d.ts +0 -32
  77. package/dist/display/Tooltip.svelte.d.ts +0 -23
  78. package/dist/display/chart.d.ts +0 -78
  79. package/dist/display/chart.js +0 -212
  80. package/dist/display/index.d.ts +0 -24
  81. package/dist/display/index.js +0 -24
  82. package/dist/display/notifications.svelte.d.ts +0 -21
  83. package/dist/display/notifications.svelte.js +0 -31
  84. package/dist/form/Button.svelte +0 -39
  85. package/dist/form/Button.svelte.d.ts +0 -26
  86. package/dist/form/FieldActions.svelte +0 -68
  87. package/dist/form/FieldActions.svelte.d.ts +0 -20
  88. package/dist/form/FieldContainer.svelte +0 -37
  89. package/dist/form/FieldContainer.svelte.d.ts +0 -19
  90. package/dist/form/FieldContent.svelte +0 -153
  91. package/dist/form/FieldContent.svelte.d.ts +0 -31
  92. package/dist/form/FieldError.svelte +0 -14
  93. package/dist/form/FieldError.svelte.d.ts +0 -18
  94. package/dist/form/FieldSection.svelte +0 -86
  95. package/dist/form/FieldSection.svelte.d.ts +0 -20
  96. package/dist/form/Fieldset.svelte +0 -68
  97. package/dist/form/Fieldset.svelte.d.ts +0 -31
  98. package/dist/form/Form.svelte +0 -136
  99. package/dist/form/Form.svelte.d.ts +0 -38
  100. package/dist/form/ImageUpload.svelte +0 -259
  101. package/dist/form/ImageUpload.svelte.d.ts +0 -31
  102. package/dist/form/Input.svelte +0 -326
  103. package/dist/form/Input.svelte.d.ts +0 -117
  104. package/dist/form/InputLength.svelte +0 -32
  105. package/dist/form/InputLength.svelte.d.ts +0 -20
  106. package/dist/form/Label.svelte +0 -44
  107. package/dist/form/Label.svelte.d.ts +0 -25
  108. package/dist/form/LogoUpload.svelte +0 -100
  109. package/dist/form/LogoUpload.svelte.d.ts +0 -29
  110. package/dist/form/Select.svelte +0 -136
  111. package/dist/form/Select.svelte.d.ts +0 -70
  112. package/dist/form/Textarea.svelte +0 -163
  113. package/dist/form/Textarea.svelte.d.ts +0 -108
  114. package/dist/form/Toggle.svelte +0 -2
  115. package/dist/form/Toggle.svelte.d.ts +0 -15
  116. package/dist/form/client.svelte.d.ts +0 -44
  117. package/dist/form/client.svelte.js +0 -98
  118. package/dist/form/form.d.ts +0 -54
  119. package/dist/form/form.js +0 -340
  120. package/dist/form/index.d.ts +0 -18
  121. package/dist/form/index.js +0 -18
  122. package/dist/form/types.d.ts +0 -62
  123. package/dist/form/types.js +0 -1
  124. package/dist/icons/IconAlert.svelte +0 -3
  125. package/dist/icons/IconAlert.svelte.d.ts +0 -23
  126. package/dist/icons/IconCopy.svelte +0 -3
  127. package/dist/icons/IconCopy.svelte.d.ts +0 -23
  128. package/dist/icons/IconDone.svelte +0 -3
  129. package/dist/icons/IconDone.svelte.d.ts +0 -23
  130. package/dist/icons/IconError.svelte +0 -3
  131. package/dist/icons/IconError.svelte.d.ts +0 -23
  132. package/dist/icons/IconHelp.svelte +0 -3
  133. package/dist/icons/IconHelp.svelte.d.ts +0 -23
  134. package/dist/icons/IconHide.svelte +0 -3
  135. package/dist/icons/IconHide.svelte.d.ts +0 -23
  136. package/dist/icons/IconInfo.svelte +0 -3
  137. package/dist/icons/IconInfo.svelte.d.ts +0 -23
  138. package/dist/icons/IconLink.svelte +0 -3
  139. package/dist/icons/IconLink.svelte.d.ts +0 -23
  140. package/dist/icons/IconMenuBurger.svelte +0 -3
  141. package/dist/icons/IconMenuBurger.svelte.d.ts +0 -23
  142. package/dist/icons/IconMenuDots.svelte +0 -3
  143. package/dist/icons/IconMenuDots.svelte.d.ts +0 -23
  144. package/dist/icons/IconSearch.svelte +0 -3
  145. package/dist/icons/IconSearch.svelte.d.ts +0 -23
  146. package/dist/icons/IconShow.svelte +0 -3
  147. package/dist/icons/IconShow.svelte.d.ts +0 -23
  148. package/dist/icons/IconSuccess.svelte +0 -3
  149. package/dist/icons/IconSuccess.svelte.d.ts +0 -23
  150. package/dist/icons/IconWarning.svelte +0 -3
  151. package/dist/icons/IconWarning.svelte.d.ts +0 -23
  152. package/dist/icons/index.d.ts +0 -14
  153. package/dist/icons/index.js +0 -14
  154. package/dist/layout/Layout.svelte +0 -47
  155. package/dist/layout/Layout.svelte.d.ts +0 -22
  156. package/dist/layout/LayoutFooter.svelte +0 -21
  157. package/dist/layout/LayoutFooter.svelte.d.ts +0 -18
  158. package/dist/layout/LayoutGrid.svelte +0 -51
  159. package/dist/layout/LayoutGrid.svelte.d.ts +0 -27
  160. package/dist/layout/LayoutHeader.svelte +0 -97
  161. package/dist/layout/LayoutHeader.svelte.d.ts +0 -34
  162. package/dist/layout/LayoutSideMenu.svelte +0 -55
  163. package/dist/layout/LayoutSideMenu.svelte.d.ts +0 -21
  164. package/dist/layout/LayoutTypes.d.ts +0 -15
  165. package/dist/layout/LayoutTypes.js +0 -9
  166. package/dist/layout/Overlay.svelte +0 -20
  167. package/dist/layout/Overlay.svelte.d.ts +0 -25
  168. package/dist/layout/OverlayContainer.svelte +0 -28
  169. package/dist/layout/OverlayContainer.svelte.d.ts +0 -15
  170. package/dist/layout/OverlayLayer.svelte +0 -140
  171. package/dist/layout/OverlayLayer.svelte.d.ts +0 -19
  172. package/dist/layout/PageContent.svelte +0 -82
  173. package/dist/layout/PageContent.svelte.d.ts +0 -25
  174. package/dist/layout/Theme.svelte +0 -243
  175. package/dist/layout/Theme.svelte.d.ts +0 -19
  176. package/dist/layout/UIContent.svelte +0 -15
  177. package/dist/layout/UIContent.svelte.d.ts +0 -18
  178. package/dist/layout/index.d.ts +0 -11
  179. package/dist/layout/index.js +0 -11
  180. package/dist/layout/overlays.svelte.d.ts +0 -34
  181. package/dist/layout/overlays.svelte.js +0 -44
  182. package/dist/nav/Breadcrumb.svelte +0 -82
  183. package/dist/nav/Breadcrumb.svelte.d.ts +0 -28
  184. package/dist/nav/Menu.svelte +0 -170
  185. package/dist/nav/Menu.svelte.d.ts +0 -27
  186. package/dist/nav/MenuItem.svelte +0 -147
  187. package/dist/nav/MenuItem.svelte.d.ts +0 -22
  188. package/dist/nav/MenuTypes.d.ts +0 -58
  189. package/dist/nav/MenuTypes.js +0 -1
  190. package/dist/nav/NavMenu.svelte +0 -181
  191. package/dist/nav/NavMenu.svelte.d.ts +0 -19
  192. package/dist/nav/TabbedContent.svelte +0 -43
  193. package/dist/nav/TabbedContent.svelte.d.ts +0 -23
  194. package/dist/nav/Tabs.svelte +0 -158
  195. package/dist/nav/Tabs.svelte.d.ts +0 -25
  196. package/dist/nav/index.d.ts +0 -7
  197. package/dist/nav/index.js +0 -6
  198. package/dist/style.css +0 -950
  199. package/dist/typo/Clamp.svelte +0 -25
  200. package/dist/typo/Clamp.svelte.d.ts +0 -24
  201. package/dist/typo/H.svelte +0 -52
  202. package/dist/typo/H.svelte.d.ts +0 -28
  203. package/dist/typo/H1.svelte +0 -14
  204. package/dist/typo/H1.svelte.d.ts +0 -26
  205. package/dist/typo/H2.svelte +0 -14
  206. package/dist/typo/H2.svelte.d.ts +0 -26
  207. package/dist/typo/H3.svelte +0 -14
  208. package/dist/typo/H3.svelte.d.ts +0 -26
  209. package/dist/typo/H4.svelte +0 -14
  210. package/dist/typo/H4.svelte.d.ts +0 -26
  211. package/dist/typo/H5.svelte +0 -14
  212. package/dist/typo/H5.svelte.d.ts +0 -26
  213. package/dist/typo/H6.svelte +0 -14
  214. package/dist/typo/H6.svelte.d.ts +0 -26
  215. package/dist/typo/P.svelte +0 -34
  216. package/dist/typo/P.svelte.d.ts +0 -26
  217. package/dist/typo/index.d.ts +0 -9
  218. package/dist/typo/index.js +0 -9
  219. package/dist/utils/StringOrComponent.svelte +0 -14
  220. package/dist/utils/StringOrComponent.svelte.d.ts +0 -19
  221. package/dist/utils/StringOrSnippet.svelte +0 -11
  222. package/dist/utils/StringOrSnippet.svelte.d.ts +0 -19
  223. package/dist/utils/attr.d.ts +0 -5
  224. package/dist/utils/attr.js +0 -21
  225. package/dist/utils/color.d.ts +0 -51
  226. package/dist/utils/color.js +0 -97
  227. package/dist/utils/defaults.d.ts +0 -4
  228. package/dist/utils/defaults.js +0 -1
  229. package/dist/utils/dom.d.ts +0 -15
  230. package/dist/utils/dom.js +0 -74
  231. package/dist/utils/hooks.server.d.ts +0 -2
  232. package/dist/utils/hooks.server.js +0 -16
  233. package/dist/utils/id.d.ts +0 -1
  234. package/dist/utils/id.js +0 -3
  235. package/dist/utils/index.d.ts +0 -9
  236. package/dist/utils/index.js +0 -6
  237. package/dist/utils/isSnippet.d.ts +0 -3
  238. package/dist/utils/isSnippet.js +0 -11
  239. package/dist/utils/keyboard.svelte.d.ts +0 -22
  240. package/dist/utils/keyboard.svelte.js +0 -161
  241. /package/dist/{utils → util}/transitions.d.ts +0 -0
  242. /package/dist/{utils → util}/transitions.js +0 -0
@@ -1,23 +0,0 @@
1
- import type { Snippet, Component } from "svelte";
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: Props & {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports;
10
- z_$$bindings?: Bindings;
11
- }
12
- declare const Notification: $$__sveltets_2_IsomorphicComponent<{
13
- id?: string;
14
- children?: Snippet;
15
- title?: string;
16
- content?: string;
17
- icon?: string | Snippet | Component;
18
- actions?: Snippet;
19
- }, {
20
- [evt: string]: CustomEvent<any>;
21
- }, {}, {}, "">;
22
- type Notification = InstanceType<typeof Notification>;
23
- export default Notification;
@@ -1,23 +0,0 @@
1
- <script lang="ts">import { getContext, setContext } from "svelte";
2
- let {
3
- children,
4
- z
5
- } = $props();
6
- const prevZ = getContext("ltr.z") ?? 0;
7
- const currentZ = Number.isInteger(z) ? z : prevZ + 1;
8
- setContext("ltr.z", currentZ);
9
- </script>
10
-
11
- <div class="Panel" style="--z: {currentZ};">
12
- Z: {currentZ}
13
- {@render children()}
14
- </div>
15
-
16
- <style>
17
- .Panel {
18
- background: var(--bg-panel);
19
- border: var(--border);
20
- padding: 2rem;
21
- position: relative;
22
- }
23
- </style>
@@ -1,19 +0,0 @@
1
- import { type Snippet } from "svelte";
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: Props & {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports;
10
- z_$$bindings?: Bindings;
11
- }
12
- declare const Panel: $$__sveltets_2_IsomorphicComponent<{
13
- children: Snippet;
14
- z?: 0 | 1 | 2 | 3;
15
- }, {
16
- [evt: string]: CustomEvent<any>;
17
- }, {}, {}, "">;
18
- type Panel = InstanceType<typeof Panel>;
19
- export default Panel;
@@ -1,111 +0,0 @@
1
- <script lang="ts">import UiContent from "../layout/UIContent.svelte";
2
- import { slidefade } from "../utils/transitions.js";
3
- import { attr } from "../utils/attr.js";
4
- let {
5
- content,
6
- trigger,
7
- hover = false,
8
- shape = "rounded"
9
- } = $props();
10
- const id = `po-${Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)}`;
11
- let isOpen = $state(false);
12
- function closePopup() {
13
- isOpen = false;
14
- }
15
- function togglePopup() {
16
- isOpen = !isOpen;
17
- }
18
- function clickElsewhere(e) {
19
- if (isOpen && e.target instanceof HTMLElement && !e.target.closest(".Popup")) {
20
- closePopup();
21
- }
22
- }
23
- let timeoutAmount = 250;
24
- let timeout;
25
- function mouseenterTrigger() {
26
- if (timeout) {
27
- clearTimeout(timeout);
28
- }
29
- if (!isOpen) {
30
- isOpen = true;
31
- }
32
- }
33
- function mouseleave(e) {
34
- timeout = setTimeout(closePopup, timeoutAmount);
35
- }
36
- function mouseoverContent() {
37
- if (timeout) {
38
- clearTimeout(timeout);
39
- }
40
- }
41
- let attrs = $derived.by(() => {
42
- return attr({
43
- "aria-haspopup": "dialog",
44
- "aria-expanded": isOpen,
45
- "aria-controls": id,
46
- onclick: !hover ? togglePopup : void 0,
47
- onmouseenter: hover ? mouseenterTrigger : void 0,
48
- onmouseleave: hover ? mouseleave : void 0,
49
- onfocusin: hover ? mouseenterTrigger : void 0,
50
- onblur: hover ? mouseleave : void 0
51
- });
52
- });
53
- </script>
54
-
55
- <svelte:window on:click={clickElsewhere} />
56
-
57
- <div class="Popup" class:hover>
58
- <div class="Trigger">
59
- {@render trigger(attrs)}
60
- </div>
61
- {#if isOpen}
62
- <UiContent>
63
- <div
64
- {id}
65
- class="PopupContainer"
66
- transition:slidefade={{duration: 100}}
67
- role="dialog"
68
- onmouseover={hover ? mouseoverContent : undefined}
69
- onfocus={hover ? mouseoverContent : undefined}
70
- onfocusin={hover ? mouseoverContent : undefined}
71
- onmouseout={hover ? mouseleave : undefined}
72
- onblur={hover ? mouseleave : undefined}
73
- onfocusout={hover ? mouseleave : undefined}
74
- >
75
- <div class="PopupContent {shape}">
76
- {@render content(closePopup)}
77
- </div>
78
- </div>
79
- </UiContent>
80
- {/if}
81
- </div>
82
-
83
- <style>
84
- .Popup, .Trigger {
85
- position: relative;
86
- display: inline-block;
87
- }
88
- .PopupContainer {
89
- position: absolute;
90
- padding-top: 0.5rem;
91
- }
92
- .Popup.hover .PopupContainer {
93
- padding: var(--safe-zone, 1rem);
94
- left: calc(-1 * var(--safe-zone, 1rem));
95
- top: calc(100% + -0.5 * var(--safe-zone, 1rem));
96
- }
97
- .PopupContent {
98
- background: var(--bg, var(--bg-app));
99
- border: var(--border);
100
- box-shadow: var(--shadow);
101
- z-index: 10000;
102
- padding: var(--content-padding, 1rem);
103
- opacity: 1;
104
- border-radius: var(--border-radius);
105
- box-shadow: 0 0.25rem 2rem 0 var(--shadow);
106
- left: 0;
107
- }
108
- .PopupContent.rounded {
109
- border-radius: var(--border-radius);
110
- }
111
- </style>
@@ -1,25 +0,0 @@
1
- import type { Snippet } from "svelte";
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: Props & {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports;
10
- z_$$bindings?: Bindings;
11
- }
12
- declare const Popup: $$__sveltets_2_IsomorphicComponent<{
13
- /** The content of the popup */
14
- content: Snippet<[close: () => void]>;
15
- /** Snippet containing the trigger element */
16
- trigger: Snippet<[attrs: (node: Element) => void]>;
17
- /** Triggers the popup on hover (and keyboard focus) instead of click */
18
- hover?: boolean;
19
- /** The shape of the popup */
20
- shape?: "rounded" | "sharp";
21
- }, {
22
- [evt: string]: CustomEvent<any>;
23
- }, {}, {}, "">;
24
- type Popup = InstanceType<typeof Popup>;
25
- export default Popup;
@@ -1,81 +0,0 @@
1
- <script lang="ts">import { getStatusColorVar, isStatusColor } from "../utils/color.js";
2
- import { isSnippet } from "../utils/isSnippet.js";
3
- let {
4
- title,
5
- value,
6
- prefix,
7
- suffix,
8
- color,
9
- formatter
10
- } = $props();
11
- let Prefix = prefix;
12
- let Suffix = suffix;
13
- let colorVar = $derived(getStatusColorVar(color, "var(--bg-app)"));
14
- let _value = $derived.by(() => {
15
- if (typeof value === "number" && formatter?.constructor === Intl.NumberFormat) {
16
- return formatter.format(value);
17
- } else if (value instanceof Date && formatter?.constructor === Intl.DateTimeFormat) {
18
- return formatter.format(value);
19
- } else if (typeof value === "number") {
20
- return value.toLocaleString();
21
- } else if (typeof value === "string") {
22
- return value;
23
- } else if (value instanceof Date) {
24
- return value.toLocaleDateString();
25
- }
26
- if (typeof formatter === "function") {
27
- return formatter(value);
28
- }
29
- return value;
30
- });
31
- </script>
32
-
33
- <section class="Stat" style="--bgColor: {colorVar};">
34
- <main>
35
- {#if prefix}
36
- {#if typeof prefix === "string"}
37
- <span class="Fix Prefix">{prefix}</span>
38
- {:else if isSnippet(prefix)}
39
- {@render prefix()}
40
- {:else}
41
- <Prefix />
42
- {/if}
43
- {/if}
44
- {_value}
45
- {#if suffix}
46
- {#if typeof suffix === "string"}
47
- <span class="Fix Suffix">{suffix}</span>
48
- {:else if isSnippet(suffix)}
49
- {@render suffix()}
50
- {:else}
51
- <Suffix />
52
- {/if}
53
- {/if}
54
- </main>
55
- {#if title}
56
- <header>{title}</header>
57
- {/if}
58
- </section>
59
-
60
- <style>
61
- .Stat {
62
- display: grid;
63
- grid-template-rows: auto 1fr;
64
- align-items: center;
65
- gap: 0.75rem;
66
- padding: 1rem;
67
- background-color: var(--bgColor);
68
- }
69
- header {
70
- font-size: max(0.9em, 11px);
71
- font-weight: 500;
72
- opacity: 0.75;
73
- color: var(--color, var(--text));
74
- }
75
- main {
76
- font-size: 1.5em;
77
- opacity: 0.95;
78
- font-weight: 700;
79
- color: var(--color, var(--text));
80
- }
81
- </style>
@@ -1,30 +0,0 @@
1
- import type { Component, Snippet } from "svelte";
2
- import { type StatusColorOrString } from "../utils/color.js";
3
- 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> {
4
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
5
- $$bindings?: Bindings;
6
- } & Exports;
7
- (internal: unknown, props: Props & {
8
- $$events?: Events;
9
- $$slots?: Slots;
10
- }): Exports;
11
- z_$$bindings?: Bindings;
12
- }
13
- declare const Stat: $$__sveltets_2_IsomorphicComponent<{
14
- /** The title of the stat. */
15
- title?: string;
16
- /** The value to display. */
17
- value?: number | string | Date;
18
- /** The prefix to display before the value. Can be a string, a URL, a Snippet, or a Svelte component. */
19
- prefix?: string | Snippet | Component;
20
- /** The suffix to display after the value. Can be a string, a URL, a Snippet, or a Svelte component. */
21
- suffix?: string | Snippet | Component;
22
- /** The color of the stat. */
23
- color?: StatusColorOrString;
24
- /** A function to format the value. Can be an [Intl.NumberFormat object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat), an [Intl.DateTimeFormat object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat), or a function that takes in a value and returns a string. */
25
- formatter?: ((value: number | string | Date | undefined) => string) | Intl.NumberFormat | Intl.DateTimeFormat;
26
- }, {
27
- [evt: string]: CustomEvent<any>;
28
- }, {}, {}, "">;
29
- type Stat = InstanceType<typeof Stat>;
30
- export default Stat;
@@ -1,28 +0,0 @@
1
- <script lang="ts">let {
2
- colored,
3
- contained,
4
- rounded,
5
- hoverable,
6
- hang,
7
- fullWidth,
8
- children
9
- } = $props();
10
- </script>
11
-
12
- <div
13
- class="table-container"
14
- class:hang
15
- class:contained
16
- class:rounded
17
- >
18
- <table
19
- class:colored
20
- class:contained
21
- class:rounded
22
- class:hang
23
- class:fullWidth
24
- class:hoverable
25
- >
26
- {@render children()}
27
- </table>
28
- </div>
@@ -1,24 +0,0 @@
1
- import type { Snippet } from "svelte";
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: Props & {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports;
10
- z_$$bindings?: Bindings;
11
- }
12
- declare const Table: $$__sveltets_2_IsomorphicComponent<{
13
- colored?: boolean;
14
- contained?: boolean;
15
- rounded?: boolean;
16
- hang?: boolean;
17
- hoverable?: boolean;
18
- fullWidth?: boolean;
19
- children: Snippet;
20
- }, {
21
- [evt: string]: CustomEvent<any>;
22
- }, {}, {}, "">;
23
- type Table = InstanceType<typeof Table>;
24
- export default Table;
@@ -1,51 +0,0 @@
1
- <script lang="ts">let {
2
- total,
3
- perPage,
4
- perPageOptions = [50, 100, 250],
5
- currentPage,
6
- onPageChange
7
- } = $props();
8
- </script>
9
-
10
- <div class="TablePaginator">
11
- <div class="TablePaginator__PerPage">
12
- <label for="perPage">Per Page</label>
13
- <select
14
- id="perPage"
15
- onchange={() => onPageChange(1)}
16
- >
17
- {#each perPageOptions as option}
18
- <option value={option}>{option}</option>
19
- {/each}
20
- </select>
21
- </div>
22
- <div class="TablePaginator__Page">
23
- <button
24
- disabled={currentPage === 1}
25
- onclick={() => onPageChange(currentPage - 1)}
26
- >
27
- Previous
28
- </button>
29
- <span>Page {currentPage} of {Math.ceil(total / perPage)}</span>
30
- <button
31
- disabled={currentPage === Math.ceil(total / perPage)}
32
- onclick={() => onPageChange(currentPage + 1)}
33
- >
34
- Next
35
- </button>
36
- </div>
37
- </div>
38
-
39
- <style>
40
- .TablePaginator {
41
- display: grid;
42
- grid-template-columns: auto auto;
43
- gap: 1em;
44
- align-items: center;
45
- justify-content: space-between;
46
- }
47
- .TablePaginator > * {
48
- display: flex;
49
- align-items: center;
50
- }
51
- </style>
@@ -1,21 +0,0 @@
1
- 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> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: Props & {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports;
9
- z_$$bindings?: Bindings;
10
- }
11
- declare const TablePaginator: $$__sveltets_2_IsomorphicComponent<{
12
- total: number;
13
- perPage: number;
14
- perPageOptions?: number[];
15
- currentPage: number;
16
- onPageChange: (page: number) => void;
17
- }, {
18
- [evt: string]: CustomEvent<any>;
19
- }, {}, {}, "">;
20
- type TablePaginator = InstanceType<typeof TablePaginator>;
21
- export default TablePaginator;
@@ -1,90 +0,0 @@
1
- <script lang="ts">import { isStatusColor } from "../utils/color.js";
2
- let {
3
- code,
4
- color = "default",
5
- shape = "pill",
6
- onclick,
7
- href,
8
- target,
9
- children
10
- } = $props();
11
- let isSet = $derived(color ? isStatusColor(color) : true);
12
- </script>
13
-
14
- {#snippet content()}
15
- <em>
16
- {@render children()}
17
- </em>
18
- {/snippet}
19
-
20
- {#if href}
21
- <a {href} {target} class:code class="Tag Link {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
22
- {@render content()}
23
- </a>
24
- {:else if onclick}
25
- <button type="button" class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
26
- {@render content()}
27
- </button>
28
- {:else}
29
- <span class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};">
30
- {@render content()}
31
- </span>
32
- {/if}
33
-
34
- <style>
35
- .Tag {
36
- display: inline-flex;
37
- padding: var(--padding, 0.25em 0.65em);
38
- font-weight: var(--font-weight, 600);
39
- --bgColor2: var(--bgColor);
40
- background: var(--bgColor);
41
- border-radius: var(--border-radius);
42
- font-size: var(--font-size, 1em);
43
- vertical-align: var(--vertical-align, baseline);
44
- border: 1px solid color-mix(in srgb, var(--bgColor) 95%, var(--mix-target, black) 5%);
45
- }
46
- .Tag.rectangle {
47
- border-radius: 0;
48
- }
49
- .Tag.pill {
50
- border-radius: 99999px;
51
- }
52
- .Tag.code {
53
- font-family: var(--font-family-mono);
54
- padding: var(--padding, 0.15em 0.35em);
55
- font-size: 1em;
56
- line-height: 1em;
57
- background: var(--bg, var(--bg-subtle));
58
- color: var(--text);
59
- border: var(--border, var(--border-subtle));
60
- }
61
- em {
62
- opacity: 0.75;
63
- font-style: normal;
64
- color: var(--bgColor2);
65
- filter: url(#bwFilter);
66
- mix-blend-mode: luminosity;
67
- left: 50%;
68
- position: relative;
69
- display: block;
70
- transform: translateX(-50%);
71
- }
72
- a:hover, button:hover {
73
- --bgColor2: color-mix(in srgb, var(--bgColor) 87%, white 13%);
74
- background-color: var(--bgColor2);
75
- cursor: pointer;
76
- }
77
- @media (prefers-contrast: more) {
78
- .Tag {
79
- border: 1px solid color-mix(in srgb, var(--bgColor) 50%, var(--mix-target, black) 50%);
80
- }
81
- em {
82
- opacity: 0.99;
83
- }
84
- }
85
- @media (prefers-contrast: less) {
86
- em {
87
- opacity: 0.65;
88
- }
89
- }
90
- </style>
@@ -1,32 +0,0 @@
1
- import type { Snippet } from "svelte";
2
- import type { StatusColorOrString } from '../utils/color.js';
3
- 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> {
4
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
5
- $$bindings?: Bindings;
6
- } & Exports;
7
- (internal: unknown, props: Props & {
8
- $$events?: Events;
9
- $$slots?: Slots;
10
- }): Exports;
11
- z_$$bindings?: Bindings;
12
- }
13
- declare const Tag: $$__sveltets_2_IsomorphicComponent<{
14
- /** Use a mono-spaced font for the tag. */
15
- code?: boolean;
16
- /** The color of the tag. */
17
- color?: StatusColorOrString;
18
- /** The shape of the tag. */
19
- shape?: "rounded" | "pill" | "rectangle";
20
- /** A function to run when the tag is clicked. */
21
- onclick?: (event: MouseEvent) => void;
22
- /** A URL to link to. */
23
- href?: string;
24
- /** The target of the link. */
25
- target?: string;
26
- /** The content of the tag. */
27
- children: Snippet;
28
- }, {
29
- [evt: string]: CustomEvent<any>;
30
- }, {}, {}, "">;
31
- type Tag = InstanceType<typeof Tag>;
32
- export default Tag;
@@ -1,23 +0,0 @@
1
- import type { Snippet } from "svelte";
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: Props & {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports;
10
- z_$$bindings?: Bindings;
11
- }
12
- declare const Tooltip: $$__sveltets_2_IsomorphicComponent<{
13
- /** Content to trigger the tooltip */
14
- children: Snippet;
15
- /** The content of the tooltip */
16
- tip: string | Snippet;
17
- /** Open the tooltip on render (cannot be closed) */
18
- open?: boolean;
19
- }, {
20
- [evt: string]: CustomEvent<any>;
21
- }, {}, {}, "">;
22
- type Tooltip = InstanceType<typeof Tooltip>;
23
- export default Tooltip;
@@ -1,78 +0,0 @@
1
- export interface ChartDataSet {
2
- values: number[];
3
- }
4
- export interface ChartData {
5
- labels: string[];
6
- values: number[];
7
- }
8
- export declare function scale(domain: number[], range: number[]): (num: number) => number;
9
- export declare function makeScale(numbers: number[], itemsToReturn: number): number[];
10
- export declare function getShortKValue(num: number): string;
11
- export type PointData = {
12
- p1: {
13
- x: number;
14
- y: number;
15
- };
16
- p2: {
17
- x: number;
18
- y: number;
19
- };
20
- bp1: {
21
- x: number;
22
- y: number;
23
- };
24
- bp2: {
25
- x: number;
26
- y: number;
27
- };
28
- };
29
- /**
30
- * Interpolates a Catmull-Rom Spline through a series of x/y points
31
- * Converts the CR Spline to Cubic Beziers for use with SVG items
32
- *
33
- * If 'alpha' is 0.5 then the 'Centripetal' variant is used
34
- * If 'alpha' is 1 then the 'Chordal' variant is used
35
- *
36
- * @param {Array} data - Array of points, each point in object literal holding x/y values
37
- * @return {String} d - SVG string with cubic bezier curves representing the Catmull-Rom Spline
38
- */
39
- export declare function catmullRomBase(data: {
40
- x: number;
41
- y: number;
42
- }[], alpha: number): PointData[];
43
- /**
44
- * Returns the SVG path for Catmull-Rom spline interpolation
45
- */
46
- export declare function catmullRomToSVG(pointsData: PointData[], alpha: number, firstValue: {
47
- x: number;
48
- y: number;
49
- }): string | false;
50
- /**
51
- * Returns the Y coordinate for the given X value on the Catmull-Rom spline
52
- */
53
- export declare function catmullRomGetY(pointsData: PointData[], alpha: number, xValue: number, yPadding: number): number | false | undefined;
54
- /**
55
- * Linear interpolation helper function
56
- */
57
- export declare function lerp(point1: {
58
- x: number;
59
- y: number;
60
- }, point2: {
61
- x: number;
62
- y: number;
63
- }, t: number): {
64
- x: number;
65
- y: number;
66
- };
67
- export declare function getSVGSize(svg: SVGSVGElement): {
68
- innerWidth: number;
69
- innerHeight: number;
70
- width: number;
71
- height: number;
72
- padding: {
73
- left: number;
74
- right: number;
75
- top: number;
76
- bottom: number;
77
- };
78
- };