fluid-ui-svelte 0.0.7 → 0.0.8

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 (134) hide show
  1. package/README.md +35 -84
  2. package/dist/community/components/index.d.ts +1 -0
  3. package/dist/community/components/index.js +1 -0
  4. package/dist/community/prebuilt/index.d.ts +1 -0
  5. package/dist/community/prebuilt/index.js +1 -0
  6. package/dist/components/Accordion.svelte +1 -0
  7. package/dist/components/Accordion.svelte.d.ts +26 -0
  8. package/dist/components/Breadcrumb.svelte +1 -0
  9. package/dist/components/Breadcrumb.svelte.d.ts +26 -0
  10. package/dist/components/Drawer.svelte +35 -0
  11. package/dist/components/Drawer.svelte.d.ts +9 -0
  12. package/dist/components/Dropdown.svelte +34 -0
  13. package/dist/components/Dropdown.svelte.d.ts +9 -0
  14. package/dist/components/NotificationArea.svelte +1 -0
  15. package/dist/components/NotificationArea.svelte.d.ts +26 -0
  16. package/dist/components/Pagination.svelte +1 -0
  17. package/dist/components/Pagination.svelte.d.ts +26 -0
  18. package/dist/components/Progress.svelte +1 -0
  19. package/dist/components/Progress.svelte.d.ts +26 -0
  20. package/dist/components/Switch.svelte +32 -0
  21. package/dist/components/Switch.svelte.d.ts +6 -0
  22. package/dist/components/Tabs.svelte +1 -0
  23. package/dist/components/Tabs.svelte.d.ts +26 -0
  24. package/dist/components/Tooltip.svelte +1 -0
  25. package/dist/components/Tooltip.svelte.d.ts +26 -0
  26. package/dist/components/UploadZone.svelte +1 -0
  27. package/dist/components/UploadZone.svelte.d.ts +26 -0
  28. package/dist/index.d.ts +32 -29
  29. package/dist/index.js +35 -34
  30. package/dist/prebuilt/FormBuilder.svelte +1 -0
  31. package/dist/prebuilt/FormBuilder.svelte.d.ts +26 -0
  32. package/dist/prebuilt/InteractiveScrollArea.svelte +1 -0
  33. package/dist/prebuilt/InteractiveScrollArea.svelte.d.ts +26 -0
  34. package/dist/prebuilt/document/Document.svelte +1 -0
  35. package/dist/prebuilt/document/Document.svelte.d.ts +26 -0
  36. package/dist/prebuilt/document/DocumentBlock.svelte +1 -0
  37. package/dist/prebuilt/document/DocumentBlock.svelte.d.ts +26 -0
  38. package/dist/prebuilt/document/DocumentPage.svelte +1 -0
  39. package/dist/prebuilt/document/DocumentPage.svelte.d.ts +26 -0
  40. package/dist/primitives/Anchor.svelte +18 -0
  41. package/dist/primitives/Anchor.svelte.d.ts +8 -0
  42. package/dist/primitives/Button.svelte +42 -0
  43. package/dist/primitives/Button.svelte.d.ts +11 -0
  44. package/dist/primitives/Container.svelte +49 -0
  45. package/dist/primitives/Container.svelte.d.ts +9 -0
  46. package/dist/primitives/Dialog.svelte +39 -0
  47. package/dist/primitives/Dialog.svelte.d.ts +10 -0
  48. package/dist/primitives/Form.svelte +18 -0
  49. package/dist/primitives/Form.svelte.d.ts +8 -0
  50. package/dist/primitives/Image.svelte +64 -0
  51. package/dist/primitives/Image.svelte.d.ts +10 -0
  52. package/dist/primitives/Input.svelte +23 -0
  53. package/dist/primitives/Input.svelte.d.ts +9 -0
  54. package/dist/primitives/Label.svelte +18 -0
  55. package/dist/primitives/Label.svelte.d.ts +8 -0
  56. package/dist/primitives/Table.svelte +18 -0
  57. package/dist/primitives/Table.svelte.d.ts +8 -0
  58. package/dist/primitives/TableBody.svelte +17 -0
  59. package/dist/primitives/TableBody.svelte.d.ts +7 -0
  60. package/dist/primitives/TableData.svelte +18 -0
  61. package/dist/primitives/TableData.svelte.d.ts +8 -0
  62. package/dist/primitives/TableFooter.svelte +17 -0
  63. package/dist/primitives/TableFooter.svelte.d.ts +7 -0
  64. package/dist/primitives/TableHead.svelte +18 -0
  65. package/dist/primitives/TableHead.svelte.d.ts +8 -0
  66. package/dist/primitives/TableHeader.svelte +17 -0
  67. package/dist/primitives/TableHeader.svelte.d.ts +7 -0
  68. package/dist/primitives/TableRow.svelte +18 -0
  69. package/dist/primitives/TableRow.svelte.d.ts +8 -0
  70. package/dist/primitives/Text.svelte +46 -0
  71. package/dist/primitives/Text.svelte.d.ts +8 -0
  72. package/dist/primitives/TextArea.svelte +15 -0
  73. package/dist/primitives/TextArea.svelte.d.ts +7 -0
  74. package/package.json +40 -39
  75. package/dist/components/Accordion/AccordionContent.svelte +0 -12
  76. package/dist/components/Accordion/AccordionContent.svelte.d.ts +0 -19
  77. package/dist/components/Accordion/AccordionHeader.svelte +0 -11
  78. package/dist/components/Accordion/AccordionHeader.svelte.d.ts +0 -21
  79. package/dist/components/Accordion/AccordionWrapper.svelte +0 -7
  80. package/dist/components/Accordion/AccordionWrapper.svelte.d.ts +0 -18
  81. package/dist/components/Avatar/Avatar.svelte +0 -12
  82. package/dist/components/Avatar/Avatar.svelte.d.ts +0 -19
  83. package/dist/components/FileDropzone/FileDrop.svelte +0 -0
  84. package/dist/components/FileDropzone/FileDrop.svelte.d.ts +0 -23
  85. package/dist/components/Modal/ModalContainer.svelte +0 -25
  86. package/dist/components/Modal/ModalContainer.svelte.d.ts +0 -19
  87. package/dist/primitives/Audio/Audio.svelte +0 -22
  88. package/dist/primitives/Audio/Audio.svelte.d.ts +0 -27
  89. package/dist/primitives/Button/Button.svelte +0 -33
  90. package/dist/primitives/Button/Button.svelte.d.ts +0 -29
  91. package/dist/primitives/Container/Container.svelte +0 -53
  92. package/dist/primitives/Container/Container.svelte.d.ts +0 -24
  93. package/dist/primitives/Form/Form.svelte +0 -13
  94. package/dist/primitives/Form/Form.svelte.d.ts +0 -21
  95. package/dist/primitives/Image/Image.svelte +0 -13
  96. package/dist/primitives/Image/Image.svelte.d.ts +0 -21
  97. package/dist/primitives/Input/ColorInput.svelte +0 -12
  98. package/dist/primitives/Input/ColorInput.svelte.d.ts +0 -20
  99. package/dist/primitives/Input/DateTimeInput.svelte +0 -12
  100. package/dist/primitives/Input/DateTimeInput.svelte.d.ts +0 -19
  101. package/dist/primitives/Input/FileInput.svelte +0 -6
  102. package/dist/primitives/Input/FileInput.svelte.d.ts +0 -18
  103. package/dist/primitives/Input/PasswordInput.svelte +0 -11
  104. package/dist/primitives/Input/PasswordInput.svelte.d.ts +0 -19
  105. package/dist/primitives/Input/TextInput.svelte +0 -11
  106. package/dist/primitives/Input/TextInput.svelte.d.ts +0 -19
  107. package/dist/primitives/Input/ToggleInput.svelte +0 -12
  108. package/dist/primitives/Input/ToggleInput.svelte.d.ts +0 -17
  109. package/dist/primitives/Label/Label.svelte +0 -10
  110. package/dist/primitives/Label/Label.svelte.d.ts +0 -20
  111. package/dist/primitives/Link/Link.svelte +0 -16
  112. package/dist/primitives/Link/Link.svelte.d.ts +0 -23
  113. package/dist/primitives/Select/Option.svelte +0 -9
  114. package/dist/primitives/Select/Option.svelte.d.ts +0 -21
  115. package/dist/primitives/Select/Select.svelte +0 -14
  116. package/dist/primitives/Select/Select.svelte.d.ts +0 -22
  117. package/dist/primitives/Table/Table.svelte +0 -8
  118. package/dist/primitives/Table/Table.svelte.d.ts +0 -20
  119. package/dist/primitives/Table/TableBody.svelte +0 -8
  120. package/dist/primitives/Table/TableBody.svelte.d.ts +0 -20
  121. package/dist/primitives/Table/TableDataCell.svelte +0 -8
  122. package/dist/primitives/Table/TableDataCell.svelte.d.ts +0 -20
  123. package/dist/primitives/Table/TableFoot.svelte +0 -8
  124. package/dist/primitives/Table/TableFoot.svelte.d.ts +0 -20
  125. package/dist/primitives/Table/TableHead.svelte +0 -8
  126. package/dist/primitives/Table/TableHead.svelte.d.ts +0 -20
  127. package/dist/primitives/Table/TableHeader.svelte +0 -8
  128. package/dist/primitives/Table/TableHeader.svelte.d.ts +0 -20
  129. package/dist/primitives/Table/TableRow.svelte +0 -8
  130. package/dist/primitives/Table/TableRow.svelte.d.ts +0 -20
  131. package/dist/primitives/Text/Text.svelte +0 -37
  132. package/dist/primitives/Text/Text.svelte.d.ts +0 -22
  133. package/dist/primitives/Video/Video.svelte +0 -25
  134. package/dist/primitives/Video/Video.svelte.d.ts +0 -30
package/dist/index.js CHANGED
@@ -1,34 +1,35 @@
1
- //Primitives
2
- export { default as Audio } from './primitives/Audio/Audio.svelte';
3
- export { default as Button } from './primitives/Button/Button.svelte';
4
- export { default as Container } from './primitives/Container/Container.svelte';
5
- export { default as Form } from './primitives/Form/Form.svelte';
6
- export { default as Image } from "./primitives/Image/Image.svelte";
7
- export { default as ColorInput } from './primitives/Input/ColorInput.svelte';
8
- export { default as DateTimeInput } from './primitives/Input/DateTimeInput.svelte';
9
- export { default as FileInput } from './primitives/Input/FileInput.svelte';
10
- export { default as TextInput } from './primitives/Input/TextInput.svelte';
11
- export { default as PasswordInput } from './primitives/Input/PasswordInput.svelte';
12
- export { default as ToggleInput } from './primitives/Input/ToggleInput.svelte';
13
- export { default as Label } from './primitives/Label/Label.svelte';
14
- export { default as Link } from "./primitives/Link/Link.svelte";
15
- export { default as Option } from "./primitives/Select/Option.svelte";
16
- export { default as Select } from "./primitives/Select/Select.svelte";
17
- export { default as Table } from "./primitives/Table/Table.svelte";
18
- export { default as TableBody } from "./primitives/Table/TableBody.svelte";
19
- export { default as TableDataCell } from "./primitives/Table/TableDataCell.svelte";
20
- export { default as TableFoot } from "./primitives/Table/TableFoot.svelte";
21
- export { default as TableHead } from "./primitives/Table/TableHead.svelte";
22
- export { default as TableHeader } from "./primitives/Table/TableHeader.svelte";
23
- export { default as TableRow } from "./primitives/Table/TableRow.svelte";
24
- export { default as Text } from "./primitives/Text/Text.svelte";
25
- export { default as Video } from "./primitives/Video/Video.svelte";
26
-
27
- //Components
28
- export { default as AccordionWrapper } from './components/Accordion/AccordionWrapper.svelte';
29
- export { default as AccordionContent } from './components/Accordion/AccordionContent.svelte';
30
- export { default as AccordionHeader } from './components/Accordion/AccordionHeader.svelte';
31
- export { default as Avatar } from './components/Avatar/Avatar.svelte';
32
- export { default as ModalContainer } from './components/Modal/ModalContainer.svelte';
33
-
34
-
1
+ // Primitives
2
+ export { default as Anchor } from "./primitives/Anchor.svelte";
3
+ export { default as Button } from "./primitives/Button.svelte";
4
+ export { default as Container } from "./primitives/Container.svelte";
5
+ export { default as Dialog } from "./primitives/Dialog.svelte";
6
+ export { default as Form } from "./primitives/Form.svelte";
7
+ export { default as Image } from "./primitives/Image.svelte";
8
+ export { default as Input } from "./primitives/Input.svelte";
9
+ export { default as Label } from "./primitives/Label.svelte";
10
+ export { default as Table } from "./primitives/Table.svelte";
11
+ export { default as TableBody } from "./primitives/TableBody.svelte";
12
+ export { default as TableData } from "./primitives/TableData.svelte";
13
+ export { default as TableFooter } from "./primitives/TableFooter.svelte";
14
+ export { default as TableHead } from "./primitives/TableHead.svelte";
15
+ export { default as TableHeader } from "./primitives/TableHeader.svelte";
16
+ export { default as TableRow } from "./primitives/TableRow.svelte";
17
+ export { default as Text } from "./primitives/Text.svelte";
18
+ export { default as TextArea } from "./primitives/TextArea.svelte";
19
+ // Components
20
+ export { default as Accordion } from "./components/Accordion.svelte";
21
+ export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
22
+ export { default as Drawer } from "./components/Drawer.svelte";
23
+ export { default as Dropdown } from "./components/Dropdown.svelte";
24
+ export { default as NotificationArea } from "./components/NotificationArea.svelte";
25
+ export { default as Pagination } from "./components/Pagination.svelte";
26
+ export { default as Progress } from "./components/Progress.svelte";
27
+ export { default as Switch } from "./components/Switch.svelte";
28
+ export { default as Tabs } from "./components/Tabs.svelte";
29
+ export { default as UploadZone } from "./components/UploadZone.svelte";
30
+ // Prebuilt
31
+ export { default as FormBuilder } from "./prebuilt/FormBuilder.svelte";
32
+ export { default as InteractiveScrollArea } from "./prebuilt/InteractiveScrollArea.svelte";
33
+ export { default as Document } from "./prebuilt/document/Document.svelte";
34
+ export { default as DocumentBlock } from "./prebuilt/document/DocumentBlock.svelte";
35
+ export { default as DocumentPage } from "./prebuilt/document/DocumentPage.svelte";
@@ -0,0 +1 @@
1
+ <!-- TODO -->
@@ -0,0 +1,26 @@
1
+ export default FormBuilder;
2
+ type FormBuilder = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const FormBuilder: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1 @@
1
+ <!-- TODO -->
@@ -0,0 +1,26 @@
1
+ export default InteractiveScrollArea;
2
+ type InteractiveScrollArea = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const InteractiveScrollArea: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1 @@
1
+ <!-- TODO -->
@@ -0,0 +1,26 @@
1
+ export default Document;
2
+ type Document = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const Document: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1 @@
1
+ <!-- TODO -->
@@ -0,0 +1,26 @@
1
+ export default DocumentBlock;
2
+ type DocumentBlock = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const DocumentBlock: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1 @@
1
+ <!-- TODO -->
@@ -0,0 +1,26 @@
1
+ export default DocumentPage;
2
+ type DocumentPage = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const DocumentPage: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1,18 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLAnchorAttributes } from "svelte/elements";
4
+ const {
5
+ class: className,
6
+ children,
7
+ overrideDefaultStyling = false,
8
+ ...restProps
9
+ }: {
10
+ class?: string;
11
+ overrideDefaultStyling?: boolean;
12
+ children: Snippet;
13
+ } & HTMLAnchorAttributes = $props();
14
+ </script>
15
+
16
+ <a {...restProps} class={(overrideDefaultStyling ? "" : "fluid-anchor") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
17
+ {@render children()}
18
+ </a>
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLAnchorAttributes } from "svelte/elements";
3
+ declare const Anchor: import("svelte").Component<{
4
+ class?: string;
5
+ overrideDefaultStyling?: boolean;
6
+ children: Snippet;
7
+ } & HTMLAnchorAttributes, {}, "">;
8
+ export default Anchor;
@@ -0,0 +1,42 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLButtonAttributes } from "svelte/elements";
4
+
5
+ const {
6
+ class: className = "",
7
+ buttonType = "solid",
8
+ buttonStyle = "primary",
9
+ onclick,
10
+ overrideDefaultStyling = false,
11
+ children,
12
+ ...restProps
13
+ }: {
14
+ class?: string;
15
+ buttonType?: "solid" | "outline" | "transparent";
16
+ buttonStyle?: "primary" | "secondary" | "tetriary" | "neutral";
17
+ onclick: (e: Event) => any;
18
+ overrideDefaultStyling?: boolean;
19
+ children: Snippet;
20
+ } & Omit<HTMLButtonAttributes, "onclick"> = $props();
21
+ let isActive = $state(false);
22
+ </script>
23
+
24
+ <button
25
+ onclick={async (e: Event) => {
26
+ if (isActive) {
27
+ return;
28
+ }
29
+ if (onclick) {
30
+ isActive = true;
31
+ await onclick(e);
32
+ isActive = false;
33
+ }
34
+ }}
35
+ class={(overrideDefaultStyling ? "" : "fluid-button") +
36
+ (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "") +
37
+ (" fluid-" + buttonType + "-button") +
38
+ (" fluid-" + buttonStyle + "-button")}
39
+ {...restProps}
40
+ >
41
+ {@render children()}
42
+ </button>
@@ -0,0 +1,11 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLButtonAttributes } from "svelte/elements";
3
+ declare const Button: import("svelte").Component<{
4
+ class?: string;
5
+ buttonType?: "solid" | "outline" | "transparent";
6
+ buttonStyle?: "primary" | "secondary" | "tetriary" | "neutral";
7
+ onclick: (e: Event) => any;
8
+ overrideDefaultStyling?: boolean;
9
+ children: Snippet;
10
+ } & Omit<HTMLButtonAttributes, "onclick">, {}, "">;
11
+ export default Button;
@@ -0,0 +1,49 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLAttributes } from "svelte/elements";
4
+
5
+ const {
6
+ containerType = "div",
7
+ class: className = "",
8
+ overrideDefaultStyling = false,
9
+ children,
10
+ ...restProps
11
+ }: {
12
+ containerType?: "div" | "section" | "aside" | "nav" | "footer";
13
+ class?: string;
14
+ overrideDefaultStyling?: boolean;
15
+ children?: Snippet;
16
+ } & HTMLAttributes<HTMLElement> = $props();
17
+ </script>
18
+
19
+ {#if containerType == "div"}
20
+ <div {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
21
+ {#if children}
22
+ {@render children()}
23
+ {/if}
24
+ </div>
25
+ {:else if containerType == "section"}
26
+ <section {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
27
+ {#if children}
28
+ {@render children()}
29
+ {/if}
30
+ </section>
31
+ {:else if containerType == "aside"}
32
+ <aside {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
33
+ {#if children}
34
+ {@render children()}
35
+ {/if}
36
+ </aside>
37
+ {:else if containerType == "nav"}
38
+ <nav {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
39
+ {#if children}
40
+ {@render children()}
41
+ {/if}
42
+ </nav>
43
+ {:else if containerType == "footer"}
44
+ <footer {...restProps} class={(overrideDefaultStyling ? "" : "fluid-container") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
45
+ {#if children}
46
+ {@render children()}
47
+ {/if}
48
+ </footer>
49
+ {/if}
@@ -0,0 +1,9 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLAttributes } from "svelte/elements";
3
+ declare const Container: import("svelte").Component<{
4
+ containerType?: "div" | "section" | "aside" | "nav" | "footer";
5
+ class?: string;
6
+ overrideDefaultStyling?: boolean;
7
+ children?: Snippet;
8
+ } & HTMLAttributes<HTMLElement>, {}, "">;
9
+ export default Container;
@@ -0,0 +1,39 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLDialogAttributes } from "svelte/elements";
4
+ let {
5
+ class: className,
6
+ isOpen = $bindable(false),
7
+ dialogType = "modal",
8
+ children,
9
+ overrideDefaultStyling = false,
10
+ ...restProps
11
+ }: {
12
+ class?: string;
13
+ isOpen?: boolean;
14
+ dialogType?: "modal" | "normal";
15
+ overrideDefaultStyling?: boolean;
16
+ children: Snippet;
17
+ } & HTMLDialogAttributes = $props();
18
+
19
+ let dialogElement: HTMLDialogElement;
20
+
21
+ $effect(() => {
22
+ if (isOpen) {
23
+ dialogType === "modal" ? dialogElement.showModal() : dialogElement.show();
24
+ } else {
25
+ dialogElement.close();
26
+ }
27
+ });
28
+ </script>
29
+
30
+ <dialog
31
+ bind:this={dialogElement}
32
+ onclose={(e: Event) => {
33
+ isOpen = false;
34
+ }}
35
+ class={(overrideDefaultStyling ? "" : "fluid-dialog") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}
36
+ {...restProps}
37
+ >
38
+ {@render children()}
39
+ </dialog>
@@ -0,0 +1,10 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLDialogAttributes } from "svelte/elements";
3
+ declare const Dialog: import("svelte").Component<{
4
+ class?: string;
5
+ isOpen?: boolean;
6
+ dialogType?: "modal" | "normal";
7
+ overrideDefaultStyling?: boolean;
8
+ children: Snippet;
9
+ } & HTMLDialogAttributes, {}, "isOpen">;
10
+ export default Dialog;
@@ -0,0 +1,18 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLFormAttributes } from "svelte/elements";
4
+ const {
5
+ class: className,
6
+ children,
7
+ overrideDefaultStyling = false,
8
+ ...restProps
9
+ }: {
10
+ class?: string;
11
+ overrideDefaultStyling?: boolean;
12
+ children: Snippet;
13
+ } & HTMLFormAttributes = $props();
14
+ </script>
15
+
16
+ <form {...restProps} class={(overrideDefaultStyling ? "" : "fluid-form") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
17
+ {@render children()}
18
+ </form>
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLFormAttributes } from "svelte/elements";
3
+ declare const Form: import("svelte").Component<{
4
+ class?: string;
5
+ overrideDefaultStyling?: boolean;
6
+ children: Snippet;
7
+ } & HTMLFormAttributes, {}, "">;
8
+ export default Form;
@@ -0,0 +1,64 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLImgAttributes } from "svelte/elements";
4
+ const {
5
+ class: className,
6
+ loadingSnippet,
7
+ errorSnippet,
8
+ noPlaceholders = false,
9
+ overrideDefaultStyling = false,
10
+ ...restProps
11
+ }: {
12
+ class?: string;
13
+ loadingSnippet?: Snippet;
14
+ errorSnippet?: Snippet;
15
+ noPlaceholders?: boolean;
16
+ overrideDefaultStyling?: boolean;
17
+ } & Omit<HTMLImgAttributes, "onerror" | "onload"> = $props();
18
+
19
+ let status = $state("loading");
20
+ </script>
21
+
22
+ {#if noPlaceholders}
23
+ <img
24
+ {...restProps}
25
+ onerror={() => {
26
+ status = "failed";
27
+ console.log(status);
28
+ }}
29
+ onload={() => {
30
+ status = "done";
31
+ console.log(status);
32
+ }}
33
+ class={(overrideDefaultStyling ? "" : "fluid-image") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "") + (status == "loading" ? " invisible" : "")}
34
+ />
35
+ {:else if status == "loading" || status == "done"}
36
+ <div class={"fluid-image-loading" + (status === "done" ? " hidden" : "")}>
37
+ {#if loadingSnippet}
38
+ {@render loadingSnippet()}
39
+ {:else}
40
+ <p>No loading snippet provided.</p>
41
+ {/if}
42
+ </div>
43
+
44
+ <img
45
+ {...restProps}
46
+ onerror={() => {
47
+ status = "failed";
48
+ console.log(status);
49
+ }}
50
+ onload={() => {
51
+ status = "done";
52
+ console.log(status);
53
+ }}
54
+ class={(overrideDefaultStyling ? "" : "fluid-image") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "") + (status == "loading" ? " invisible" : "")}
55
+ />
56
+ {:else if status == "failed"}
57
+ <div class="fluid-image-error">
58
+ {#if errorSnippet}
59
+ {@render errorSnippet()}
60
+ {:else}
61
+ <p>No error snippet provided.</p>
62
+ {/if}
63
+ </div>
64
+ {/if}
@@ -0,0 +1,10 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLImgAttributes } from "svelte/elements";
3
+ declare const Image: import("svelte").Component<{
4
+ class?: string;
5
+ loadingSnippet?: Snippet;
6
+ errorSnippet?: Snippet;
7
+ noPlaceholders?: boolean;
8
+ overrideDefaultStyling?: boolean;
9
+ } & Omit<HTMLImgAttributes, "onload" | "onerror">, {}, "">;
10
+ export default Image;
@@ -0,0 +1,23 @@
1
+ <script lang="ts">
2
+ import { type HTMLInputAttributes } from "svelte/elements";
3
+ let {
4
+ class: className,
5
+ value = $bindable(),
6
+ checked = $bindable(false),
7
+ type,
8
+ overrideDefaultStyling = false,
9
+ ...restProps
10
+ }: {
11
+ class?: string;
12
+ overrideDefaultStyling?: boolean;
13
+ value?: any;
14
+ checked?: boolean;
15
+ type: string;
16
+ } & Omit<HTMLInputAttributes, "value" | "type"> = $props();
17
+ </script>
18
+
19
+ {#if type === "checkbox"}
20
+ <input {...restProps} bind:checked type="checkbox" class={(overrideDefaultStyling ? "" : "fluid-checkbox") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")} />
21
+ {:else}
22
+ <input {...restProps} bind:value class={(overrideDefaultStyling ? "" : "fluid-input") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")} />
23
+ {/if}
@@ -0,0 +1,9 @@
1
+ import { type HTMLInputAttributes } from "svelte/elements";
2
+ declare const Input: import("svelte").Component<{
3
+ class?: string;
4
+ overrideDefaultStyling?: boolean;
5
+ value?: any;
6
+ checked?: boolean;
7
+ type: string;
8
+ } & Omit<HTMLInputAttributes, "type" | "value">, {}, "value" | "checked">;
9
+ export default Input;
@@ -0,0 +1,18 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLLabelAttributes } from "svelte/elements";
4
+ const {
5
+ class: className,
6
+ children,
7
+ overrideDefaultStyling = false,
8
+ ...restProps
9
+ }: {
10
+ class?: string;
11
+ overrideDefaultStyling?: boolean;
12
+ children: Snippet;
13
+ } & HTMLLabelAttributes = $props();
14
+ </script>
15
+
16
+ <label {...restProps} class={(overrideDefaultStyling ? "" : "fluid-label") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
17
+ {@render children()}
18
+ </label>
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLLabelAttributes } from "svelte/elements";
3
+ declare const Label: import("svelte").Component<{
4
+ class?: string;
5
+ overrideDefaultStyling?: boolean;
6
+ children: Snippet;
7
+ } & HTMLLabelAttributes, {}, "">;
8
+ export default Label;
@@ -0,0 +1,18 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import { type HTMLTableAttributes } from "svelte/elements";
4
+ const {
5
+ class: className,
6
+ children,
7
+ overrideDefaultStyling = false,
8
+ ...restProps
9
+ }: {
10
+ class?: string;
11
+ overrideDefaultStyling?: boolean;
12
+ children: Snippet;
13
+ } & HTMLTableAttributes = $props();
14
+ </script>
15
+
16
+ <table {...restProps} class={(overrideDefaultStyling ? "" : "fluid-table") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
17
+ {@render children()}
18
+ </table>
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from "svelte";
2
+ import { type HTMLTableAttributes } from "svelte/elements";
3
+ declare const Table: import("svelte").Component<{
4
+ class?: string;
5
+ overrideDefaultStyling?: boolean;
6
+ children: Snippet;
7
+ } & HTMLTableAttributes, {}, "">;
8
+ export default Table;
@@ -0,0 +1,17 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ const {
4
+ class: className,
5
+ overrideDefaultStyling = false,
6
+ children,
7
+ ...restProps
8
+ }: {
9
+ class?: string;
10
+ overrideDefaultStyling?: boolean;
11
+ children: Snippet;
12
+ } = $props();
13
+ </script>
14
+
15
+ <tbody {...restProps} class={(overrideDefaultStyling ? "" : "fluid-table-body") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
16
+ {@render children()}
17
+ </tbody>
@@ -0,0 +1,7 @@
1
+ import type { Snippet } from "svelte";
2
+ declare const TableBody: import("svelte").Component<{
3
+ class?: string;
4
+ overrideDefaultStyling?: boolean;
5
+ children: Snippet;
6
+ }, {}, "">;
7
+ export default TableBody;