fluid-ui-svelte 0.0.6 → 0.0.8

package/README.md

@@ -1,105 +1,58 @@
-# Fluid UI for Svelte/SvelteKit
+# create-svelte
 
-Fluid UI is a UI library with minimal styling and layout. All of the primitives are basic abstractions of html elements and components are just building blocks for the actual component. You will need to build components yourself using those building blocks.
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
-# Getting Started
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-Install the library.
-```
-npm i fluid-ui-svelte
-```
+## Creating a project
 
-Import a component to your UI.
-```
-<script lang="ts">
-	import '../app.css';
-	import {Button} from '$lib/index.js';
-</script>
+If you're seeing this, you've probably already done this step. Congrats!
 
-<Button></Button>
-```
-Success :)
+```bash
+# create a new project in the current directory
+npx sv create
 
-# Tailwind "app.css" Template.
+# create a new project in my-app
+npx sv create my-app
 ```
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-.fluid-audio {
-    @apply m-2 p-2
-}
 
-.fluid-button {
-    @apply m-2 p-2 disabled:bg-opacity-25
-}
+## Developing
 
-.fluid-container {
-    @apply m-2 p-2
-}
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-.fluid-form {
-    @apply m-2 p-2
-}
+```bash
+npm run dev
 
-.fluid-image {
-    @apply m-2 p-2
-}
-
-.fluid-color-input {
-    @apply m-2 p-2
-}
-
-.fluid-date-time-input {
-    @apply m-2 p-2
-}
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-.fluid-file-input {
-    @apply m-2 p-2
-}
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
 
-.fluid-color-input {
-    @apply m-2 p-2
-}
+## Building
 
-.fluid-color-input {
-    @apply m-2 p-2
-}
+To build your library:
 
-.fluid-label {
-    @apply m-2 p-2
-}
+```bash
+npm run package
+```
 
-.fluid-link {
-    @apply m-2 p-2
-}
+To create a production version of your showcase app:
 
-.fluid-select {
-    @apply m-2 p-2
-}
+```bash
+npm run build
+```
 
-.fluid-option {
-    @apply m-2 p-2
-}
+You can preview the production build with `npm run preview`.
 
-.fluid-table {
-    @apply m-2 p-2
-}
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
 
-.fluid-text {
-    @apply m-2 p-2
-}
+## Publishing
 
-.fluid-video {
-    @apply m-2 p-2
-}
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
 
-.fluid-avatar {
-    @apply m-2 p-2 rounded-full w-full h-full aspect-square
-}
+To publish your library to [npm](https://www.npmjs.com):
 
-.fluid-toggle {
-    @apply bg-gray after:bg-graylight after:border-graylight w-11 h-6 rounded-full after:absolute after:top-[2px] after:left-[2px] after:border after:rounded-full after:h-5 after:w-5 after:transition-all
-}
-```
+```bash
+npm publish
+```

package/dist/community/components/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/community/components/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/community/prebuilt/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/community/prebuilt/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Accordion.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/Accordion.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Accordion;
+type Accordion = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Breadcrumb.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/Breadcrumb.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Breadcrumb;
+type Breadcrumb = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Drawer.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { onMount, type Snippet } from "svelte";
+	import Container from "../primitives/Container.svelte";
+	import { fade, slide } from "svelte/transition";
+	import { cubicInOut } from "svelte/easing";
+	import Button from "../primitives/Button.svelte";
+	let {
+		class: className,
+		isOpen = $bindable(false),
+		alignment = "right",
+		children,
+		overrideDefaultStyling = false,
+	}: {
+		class?: string;
+		isOpen?: boolean;
+		alignment: "left" | "right" | "top" | "bottom";
+		overrideDefaultStyling?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<Container overrideDefaultStyling={true} class={(overrideDefaultStyling ? "" : "fluid-drawer") + (isOpen ? "" : " hidden")}>
+	<Container
+		class={"fluid-drawer-body" + (alignment == "left" || alignment == "right" ? ` ${alignment}-0 h-full` : "") + (alignment == "top" || alignment == "bottom" ? ` ${alignment}-0 w-full` : "")}
+	>
+		{@render children()}
+	</Container>
+	<Container
+		class="fluid-drawer-backdrop"
+		onclick={(e: MouseEvent) => {
+			console.log(isOpen);
+			isOpen = false;
+		}}
+	></Container>
+</Container>

package/dist/components/Drawer.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+declare const Drawer: import("svelte").Component<{
+    class?: string;
+    isOpen?: boolean;
+    alignment: "left" | "right" | "top" | "bottom";
+    overrideDefaultStyling?: boolean;
+    children: Snippet;
+}, {}, "isOpen">;
+export default Drawer;

package/dist/components/Dropdown.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Container from "../primitives/Container.svelte";
+	import Button from "../primitives/Button.svelte";
+	import { type Snippet } from "svelte";
+	const {
+		class: className,
+		overrideDefaultStyling = false,
+		matchContentWidthToTrigger = false,
+		trigger,
+		children,
+		...restProps
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		matchContentWidthToTrigger?: boolean;
+		trigger: Snippet<[isOpen: boolean]>;
+		children: Snippet;
+	} = $props();
+
+	let isOpen = $state(false);
+</script>
+
+<Container class={(overrideDefaultStyling ? "" : "fluid-dropdown") + (className ? ` ${className}` : "")} overrideDefaultStyling={true}>
+	<Button
+		onclick={(e: Event) => {
+			isOpen = !isOpen;
+		}}
+	>
+		{@render trigger(isOpen)}
+	</Button>
+	<Container class={"fluid-dropdown-content" + (isOpen ? "" : " hidden") + (matchContentWidthToTrigger ? " w-full" : "")}>
+		{@render children()}
+	</Container>
+</Container>

package/dist/components/Dropdown.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+declare const Dropdown: import("svelte").Component<{
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    matchContentWidthToTrigger?: boolean;
+    trigger: Snippet<[isOpen: boolean]>;
+    children: Snippet;
+}, {}, "">;
+export default Dropdown;

package/dist/components/NotificationArea.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/NotificationArea.svelte.d.ts

@@ -0,0 +1,26 @@
+export default NotificationArea;
+type NotificationArea = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const NotificationArea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Pagination.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/Pagination.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Pagination;
+type Pagination = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Progress.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/Progress.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Progress;
+type Progress = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Progress: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Switch.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Label from "../primitives/Label.svelte";
+	import Input from "../primitives/Input.svelte";
+	import Button from "../primitives/Button.svelte";
+	import Container from "../primitives/Container.svelte";
+
+	let {
+		class: className,
+		checked = $bindable(false),
+		overrideDefaultStyling = false,
+	}: {
+		class?: string;
+		checked?: boolean;
+		overrideDefaultStyling?: boolean;
+	} = $props();
+</script>
+
+<Button
+	onclick={() => {
+		checked = !checked;
+	}}
+	overrideDefaultStyling={true}
+	class="w-full h-full cursor-pointer"
+>
+	<Container
+		overrideDefaultStyling={true}
+		class={(overrideDefaultStyling ? "" : "fluid-switch" + (checked ? " fluid-switch-checked" : "")) + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}
+	>
+		<Input bind:checked type="checkbox" class="sr-only peer"></Input>
+		<div class="fluid-switch-slider"></div>
+	</Container>
+</Button>

package/dist/components/Switch.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Switch: import("svelte").Component<{
+    class?: string;
+    checked?: boolean;
+    overrideDefaultStyling?: boolean;
+}, {}, "checked">;
+export default Switch;

package/dist/components/Tabs.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/Tabs.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Tabs;
+type Tabs = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Tooltip.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Tooltip;
+type Tooltip = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/UploadZone.svelte

@@ -0,0 +1 @@
+<!-- TODO -->

package/dist/components/UploadZone.svelte.d.ts

@@ -0,0 +1,26 @@
+export default UploadZone;
+type UploadZone = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const UploadZone: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/index.d.ts

@@ -1,29 +1,32 @@
-export { default as Audio } from "./primitives/Audio/Audio.svelte";
-export { default as Button } from "./primitives/Button/Button.svelte";
-export { default as Container } from "./primitives/Container/Container.svelte";
-export { default as Form } from "./primitives/Form/Form.svelte";
-export { default as Image } from "./primitives/Image/Image.svelte";
-export { default as ColorInput } from "./primitives/Input/ColorInput.svelte";
-export { default as DateTimeInput } from "./primitives/Input/DateTimeInput.svelte";
-export { default as FileInput } from "./primitives/Input/FileInput.svelte";
-export { default as TextInput } from "./primitives/Input/TextInput.svelte";
-export { default as PasswordInput } from "./primitives/Input/PasswordInput.svelte";
-export { default as ToggleInput } from "./primitives/Input/ToggleInput.svelte";
-export { default as Label } from "./primitives/Label/Label.svelte";
-export { default as Link } from "./primitives/Link/Link.svelte";
-export { default as Option } from "./primitives/Select/Option.svelte";
-export { default as Select } from "./primitives/Select/Select.svelte";
-export { default as Table } from "./primitives/Table/Table.svelte";
-export { default as TableBody } from "./primitives/Table/TableBody.svelte";
-export { default as TableDataCell } from "./primitives/Table/TableDataCell.svelte";
-export { default as TableFoot } from "./primitives/Table/TableFoot.svelte";
-export { default as TableHead } from "./primitives/Table/TableHead.svelte";
-export { default as TableHeader } from "./primitives/Table/TableHeader.svelte";
-export { default as TableRow } from "./primitives/Table/TableRow.svelte";
-export { default as Text } from "./primitives/Text/Text.svelte";
-export { default as Video } from "./primitives/Video/Video.svelte";
-export { default as AccordionWrapper } from "./components/Accordion/AccordionWrapper.svelte";
-export { default as AccordionContent } from "./components/Accordion/AccordionContent.svelte";
-export { default as AccordionHeader } from "./components/Accordion/AccordionHeader.svelte";
-export { default as Avatar } from "./components/Avatar/Avatar.svelte";
-export { default as ModalContainer } from "./components/Modal/ModalContainer.svelte";
+export { default as Anchor } from "./primitives/Anchor.svelte";
+export { default as Button } from "./primitives/Button.svelte";
+export { default as Container } from "./primitives/Container.svelte";
+export { default as Dialog } from "./primitives/Dialog.svelte";
+export { default as Form } from "./primitives/Form.svelte";
+export { default as Image } from "./primitives/Image.svelte";
+export { default as Input } from "./primitives/Input.svelte";
+export { default as Label } from "./primitives/Label.svelte";
+export { default as Table } from "./primitives/Table.svelte";
+export { default as TableBody } from "./primitives/TableBody.svelte";
+export { default as TableData } from "./primitives/TableData.svelte";
+export { default as TableFooter } from "./primitives/TableFooter.svelte";
+export { default as TableHead } from "./primitives/TableHead.svelte";
+export { default as TableHeader } from "./primitives/TableHeader.svelte";
+export { default as TableRow } from "./primitives/TableRow.svelte";
+export { default as Text } from "./primitives/Text.svelte";
+export { default as TextArea } from "./primitives/TextArea.svelte";
+export { default as Accordion } from "./components/Accordion.svelte";
+export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
+export { default as Drawer } from "./components/Drawer.svelte";
+export { default as Dropdown } from "./components/Dropdown.svelte";
+export { default as NotificationArea } from "./components/NotificationArea.svelte";
+export { default as Pagination } from "./components/Pagination.svelte";
+export { default as Progress } from "./components/Progress.svelte";
+export { default as Switch } from "./components/Switch.svelte";
+export { default as Tabs } from "./components/Tabs.svelte";
+export { default as UploadZone } from "./components/UploadZone.svelte";
+export { default as FormBuilder } from "./prebuilt/FormBuilder.svelte";
+export { default as InteractiveScrollArea } from "./prebuilt/InteractiveScrollArea.svelte";
+export { default as Document } from "./prebuilt/document/Document.svelte";
+export { default as DocumentBlock } from "./prebuilt/document/DocumentBlock.svelte";
+export { default as DocumentPage } from "./prebuilt/document/DocumentPage.svelte";