fluid-ui-svelte 0.2.3 → 0.3.0

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2025 Emre Ayaz
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,11 +1,22 @@
-# Fluid UI Svelte Library
+# Fluid UI
 
-TODO 
+[![npm version](https://img.shields.io/npm/v/fluid-ui-svelte.svg)](https://www.npmjs.com/package/fluid-ui-svelte)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## Getting Started
-
-TODO 
+A modern, lightweight, and accessible Svelte UI component library designed for building beautiful and responsive web applications with ease.
 
 ## Documentation
 
+For full documentation and a list of all available components, visit **[fluidui.io](https://fluidui.io)**.
+
+## Installation
+
+You can install `fluid-ui-svelte` with the command below.
+
+```bash
+npm install fluid-ui-svelte
+```
+
+## License
 
+This project is licensed under the MIT License - see the LICENSE file for details.

package/dist/base/Button.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { type Snippet } from 'svelte';
+
+	const {
+		onclick,
+		class: className = '',
+		overrideDefaultStyling = false,
+		loadingPlaceholder,
+		children,
+		...rest
+	}: {
+		onclick: (event: Event, buttonState: { inProgress: boolean }) => Promise<void>;
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		loadingPlaceholder?: Snippet;
+		children: Snippet;
+	} & Omit<HTMLButtonAttributes, 'onclick'> = $props();
+
+	let buttonState = $state({ inProgress: false });
+</script>
+
+<button
+	type="button"
+	onclick={async (event: Event) => onclick(event, buttonState)}
+	{...rest}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-button')}
+>
+	{#if buttonState.inProgress && loadingPlaceholder}
+		{@render loadingPlaceholder()}
+	{:else}
+		{@render children()}
+	{/if}
+</button>

package/dist/base/Button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    onclick: (event: Event, buttonState: {
+        inProgress: boolean;
+    }) => Promise<void>;
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    loadingPlaceholder?: Snippet;
+    children: Snippet;
+} & Omit<HTMLButtonAttributes, 'onclick'>;
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/base/Container.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import type { Snippet } from 'svelte';
+	import type { TransitionConfig } from 'svelte/transition';
+
+	const {
+		type = 'div',
+		class: className = '',
+		transitionFn = (node: Element, params?: any) => {
+			return {};
+		},
+		transitionParams,
+		overrideDefaultStyling = false,
+		children,
+		...rest
+	}: {
+		type?: 'div' | 'nav' | 'section' | 'main' | 'header' | 'footer' | 'aside' | 'article';
+		class?: string;
+		transitionFn?: (node: Element, params?: any) => TransitionConfig;
+		transitionParams?: TransitionConfig;
+		overrideDefaultStyling?: boolean;
+		children?: Snippet;
+	} & HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<svelte:element
+	this={type}
+	{...rest}
+	transition:transitionFn={transitionParams}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-container')}
+>
+	{@render children?.()}
+</svelte:element>

package/dist/base/Container.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { TransitionConfig } from 'svelte/transition';
+type $$ComponentProps = {
+    type?: 'div' | 'nav' | 'section' | 'main' | 'header' | 'footer' | 'aside' | 'article';
+    class?: string;
+    transitionFn?: (node: Element, params?: any) => TransitionConfig;
+    transitionParams?: TransitionConfig;
+    overrideDefaultStyling?: boolean;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/base/Image.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+
+	const {
+		class: className = '',
+		overrideDefaultStyling = false,
+		...rest
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+	} & HTMLImgAttributes = $props();
+	let isLoaded = $state(false);
+</script>
+
+<img
+	onload={() => (isLoaded = true)}
+	{...rest}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-image') +
+		(isLoaded ? '' : ' fluid-image-loading')}
+/>

package/dist/base/Image.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    class?: string;
+    overrideDefaultStyling?: boolean;
+} & HTMLImgAttributes;
+declare const Image: import("svelte").Component<$$ComponentProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/base/InputField.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { applyCharacterFilter } from '../utilities/applyCharacterFilter.js';
+
+	let {
+		type = 'text',
+		value = $bindable(''),
+		class: className = '',
+		characterFilter,
+		overrideDefaultStyling = false,
+		oninput,
+		...rest
+	}: {
+		class?: string;
+		type?: 'text' | 'password';
+		characterFilter?: Array<string>;
+		overrideDefaultStyling?: boolean;
+	} & HTMLInputAttributes = $props();
+</script>
+
+<input
+	bind:value
+	{type}
+	oninput={(e) => {
+		if (characterFilter) {
+			value = applyCharacterFilter(characterFilter, value);
+		}
+		oninput?.(e as any);
+	}}
+	{...rest}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-input-field')}
+/>

package/dist/base/InputField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    class?: string;
+    type?: 'text' | 'password';
+    characterFilter?: Array<string>;
+    overrideDefaultStyling?: boolean;
+} & HTMLInputAttributes;
+declare const InputField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputField = ReturnType<typeof InputField>;
+export default InputField;

package/dist/base/Link.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className = '',
+		overrideDefaultStyling = false,
+		children,
+		...rest
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		children: Snippet;
+	} & HTMLAnchorAttributes = $props();
+</script>
+
+<a
+	{...rest}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-link')}
+>
+	{@render children()}</a
+>

package/dist/base/Link.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    children: Snippet;
+} & HTMLAnchorAttributes;
+declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/base/List.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" generics="T">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import type { Snippet } from 'svelte';
+
+	const {
+		type = 'ul',
+		items = [],
+		itemTemplate,
+		class: className = '',
+		itemClass = '',
+		overrideDefaultStyling = false,
+		...rest
+	}: {
+		type?: 'ol' | 'ul';
+		items: Array<T>;
+		itemTemplate: Snippet<[T]>;
+		class?: string;
+		itemClass?: string;
+		overrideDefaultStyling?: boolean;
+	} & HTMLAttributes<HTMLUListElement | HTMLOListElement> = $props();
+
+	const classes = {
+		ol: 'fluid-ordered-list',
+		ul: 'fluid-unordered-list'
+	};
+</script>
+
+<svelte:element
+	this={type}
+	{...rest}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : classes[type])}
+>
+	{#each items as item}
+		<li class={mergeClasses(itemClass, overrideDefaultStyling ? '' : classes[type] + '-item')}>
+			{@render itemTemplate(item)}
+		</li>
+	{/each}
+</svelte:element>

package/dist/base/List.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        type?: "ol" | "ul";
+        items: Array<T>;
+        itemTemplate: Snippet<[T]>;
+        class?: string;
+        itemClass?: string;
+        overrideDefaultStyling?: boolean;
+    } & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const List: $$IsomorphicComponent;
+type List<T> = InstanceType<typeof List<T>>;
+export default List;

package/dist/base/Table.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" generics="T,U,V">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import type { Snippet } from 'svelte';
+
+	const {
+		caption = '',
+		tableHeadItems,
+		tableRowItems,
+		tableFooterItems,
+		headTemplate,
+		bodyTemplate,
+		footerTemplate,
+		class: className = '',
+		captionClass = '',
+		headClass = '',
+		bodyClass = '',
+		rowClass = '',
+		cellClass = '',
+		footerClass = '',
+		overrideDefaultStyling = false,
+		...rest
+	}: {
+		caption?: string;
+		tableHeadItems: Array<T>;
+		tableRowItems: Array<Array<U>>;
+		tableFooterItems: Array<V>;
+		headTemplate: Snippet<[T]>;
+		bodyTemplate: Snippet<[U]>;
+		footerTemplate: Snippet<[V]>;
+		class?: string;
+		captionClass?: string;
+		headClass?: string;
+		bodyClass?: string;
+		rowClass?: string;
+		cellClass?: string;
+		footerClass?: string;
+		overrideDefaultStyling?: boolean;
+	} & HTMLAttributes<HTMLTableElement> = $props();
+</script>
+
+<table
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-table')}
+	{...rest}
+>
+	{#if caption}
+		<caption class={mergeClasses(captionClass, overrideDefaultStyling ? '' : 'fluid-table-caption')}>
+			{caption}
+		</caption>
+	{/if}
+	<thead class={mergeClasses(headClass, overrideDefaultStyling ? '' : 'fluid-table-head')}>
+		<tr class={mergeClasses(rowClass, overrideDefaultStyling ? '' : 'fluid-table-row')}>
+			{#each tableHeadItems as item}
+				<th class={mergeClasses(cellClass, overrideDefaultStyling ? '' : 'fluid-table-cell')}
+					>{@render headTemplate(item)}
+				</th>
+			{/each}
+		</tr>
+	</thead>
+	<tbody class={mergeClasses(bodyClass, overrideDefaultStyling ? '' : 'fluid-table-body')}>
+		{#each tableRowItems as items}
+			<tr class={mergeClasses(rowClass, overrideDefaultStyling ? '' : 'fluid-table-row')}>
+				{#each items as item}
+					<td class={mergeClasses(cellClass, overrideDefaultStyling ? '' : 'fluid-table-cell')}
+						>{@render bodyTemplate(item)}</td
+					>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+	<tfoot class={mergeClasses(footerClass, overrideDefaultStyling ? '' : 'fluid-table-footer')}>
+		<tr class={mergeClasses(rowClass, overrideDefaultStyling ? '' : 'fluid-table-row')}>
+			{#each tableFooterItems as item}
+				<td class={mergeClasses(cellClass, overrideDefaultStyling ? '' : 'fluid-table-cell')}>
+					{@render footerTemplate(item)}
+				</td>
+			{/each}
+		</tr>
+	</tfoot>
+</table>

package/dist/base/Table.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+declare function $$render<T, U, V>(): {
+    props: {
+        caption?: string;
+        tableHeadItems: Array<T>;
+        tableRowItems: Array<Array<U>>;
+        tableFooterItems: Array<V>;
+        headTemplate: Snippet<[T]>;
+        bodyTemplate: Snippet<[U]>;
+        footerTemplate: Snippet<[V]>;
+        class?: string;
+        captionClass?: string;
+        headClass?: string;
+        bodyClass?: string;
+        rowClass?: string;
+        cellClass?: string;
+        footerClass?: string;
+        overrideDefaultStyling?: boolean;
+    } & HTMLAttributes<HTMLTableElement>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, U, V> {
+    props(): ReturnType<typeof $$render<T, U, V>>['props'];
+    events(): ReturnType<typeof $$render<T, U, V>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, V>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, U, V>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, V>['props']>, ReturnType<__sveltets_Render<T, U, V>['events']>, ReturnType<__sveltets_Render<T, U, V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, V>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, V>['exports']>;
+    <T, U, V>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, V>['props']> & {}): ReturnType<__sveltets_Render<T, U, V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T, U, V> = InstanceType<typeof Table<T, U, V>>;
+export default Table;

package/dist/base/Text.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import type { Snippet } from 'svelte';
+
+	const {
+		type = 'p',
+		class: className = '',
+		overrideDefaultStyling = false,
+		children,
+		...rest
+	}: {
+		type?:
+			| 'p'
+			| 'h1'
+			| 'h2'
+			| 'h3'
+			| 'h4'
+			| 'h5'
+			| 'h6'
+			| 'span'
+			| 'pre'
+			| 'code'
+			| 'b'
+			| 'strong'
+			| 'i'
+			| 'em'
+			| 'mark'
+			| 'small'
+			| 'del'
+			| 'ins'
+			| 'sub'
+			| 'sup';
+		children?: Snippet;
+		class?: string;
+		overrideDefaultStyling?: boolean;
+	} & HTMLAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLSpanElement> = $props();
+</script>
+
+<svelte:element
+	this={type}
+	{...rest}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-text')}
+	>{@render children?.()}
+</svelte:element>

package/dist/base/Text.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    type?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'pre' | 'code' | 'b' | 'strong' | 'i' | 'em' | 'mark' | 'small' | 'del' | 'ins' | 'sub' | 'sup';
+    children?: Snippet;
+    class?: string;
+    overrideDefaultStyling?: boolean;
+} & HTMLAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLSpanElement>;
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/base/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Button } from './Button.svelte';
+export { default as Container } from './Container.svelte';
+export { default as Image } from './Image.svelte';
+export { default as InputField } from './InputField.svelte';
+export { default as Link } from './Link.svelte';
+export { default as List } from './List.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Text } from './Text.svelte';

package/dist/base/index.js

@@ -0,0 +1,8 @@
+export { default as Button } from './Button.svelte';
+export { default as Container } from './Container.svelte';
+export { default as Image } from './Image.svelte';
+export { default as InputField } from './InputField.svelte';
+export { default as Link } from './Link.svelte';
+export { default as List } from './List.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Text } from './Text.svelte';

package/dist/components/Accordion.svelte

@@ -1 +1,45 @@
-<!-- TODO -->
+<script lang="ts">
+	import Container from '../base/Container.svelte';
+	import type { Snippet } from 'svelte';
+	import { slide, type TransitionConfig } from 'svelte/transition';
+	import Button from '../base/Button.svelte';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+
+	const {
+		variation = '',
+		componentId,
+		header,
+		body,
+		transitionFunction = slide,
+		transitionDuration = 250
+	}: {
+		variation?: string;
+		componentId: string;
+		header: Snippet<[options: { isExpanded: boolean }]>;
+		body: Snippet;
+		transitionFunction?: (node: Element, params?: any) => TransitionConfig;
+		transitionDuration?: number;
+	} = $props();
+	const componentState = $state({ isExpanded: false });
+</script>
+
+<Container id={componentId} class={mergeClasses(variation, 'fluid-accordion-wrapper')}>
+	<Button
+		onclick={async () => {
+			componentState.isExpanded = !componentState.isExpanded;
+		}}
+		class={mergeClasses(variation, 'fluid-accordion-header')}
+		overrideDefaultStyling
+	>
+		{@render header(componentState)}
+	</Button>
+	{#if componentState.isExpanded}
+		<Container
+			transitionFn={transitionFunction}
+			transitionParams={{ duration: transitionDuration }}
+			class={mergeClasses(variation, 'fluid-accordion-body')}
+		>
+			{@render body()}
+		</Container>
+	{/if}
+</Container>

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

@@ -1,26 +1,15 @@
-export default Accordion;
-type Accordion = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+import { type TransitionConfig } from 'svelte/transition';
+type $$ComponentProps = {
+    variation?: string;
+    componentId: string;
+    header: Snippet<[options: {
+        isExpanded: boolean;
+    }]>;
+    body: Snippet;
+    transitionFunction?: (node: Element, params?: any) => TransitionConfig;
+    transitionDuration?: number;
 };
-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;
-}
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;