fluid-ui-svelte 0.2.4 → 0.3.1

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/app.css

@@ -0,0 +1,284 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+	--font-family-sans: 'Inter', sans-serif;
+	--color-*: initial;
+	--color-white: #fff;
+	--color-black: #000;
+
+	--color-neutral-50: #fafafa;
+	--color-neutral-100: #f4f4f5;
+	--color-neutral-200: #e4e4e7;
+	--color-neutral-300: #dedee1;
+	--color-neutral-400: #a1a1aa;
+	--color-neutral-500: #71717a;
+	--color-neutral-600: #52525b;
+	--color-neutral-700: #3f3f46;
+	--color-neutral-800: #27272a;
+	--color-neutral-900: #18181b;
+	--color-neutral-950: #09090b;
+
+	--color-primary-50: #eff4ff;
+	--color-primary-100: #dce6fd;
+	--color-primary-200: #c0d4fd;
+	--color-primary-300: #95bafb;
+	--color-primary-400: #6295f8;
+	--color-primary-500: #3e6ff3;
+	--color-primary-600: #284fe8;
+	--color-primary-700: #203bd5;
+	--color-primary-800: #2032ad;
+	--color-primary-900: #203088;
+	--color-primary-950: #182053;
+
+	--color-secondary-50: #f5f3ff;
+	--color-secondary-100: #ede9fe;
+	--color-secondary-200: #ddd6fe;
+	--color-secondary-300: #c4b5fd;
+	--color-secondary-400: #a78bfa;
+	--color-secondary-500: #8b5cf6;
+	--color-secondary-600: #7c3aed;
+	--color-secondary-700: #6d28d9;
+	--color-secondary-800: #5b21b6;
+	--color-secondary-900: #4c1d95;
+	--color-secondary-950: #2a1065;
+
+	--color-tetriary-50: #f5f3ff;
+	--color-tetriary-100: #ede9fe;
+	--color-tetriary-200: #ddd6fe;
+	--color-tetriary-300: #c4b5fd;
+	--color-tetriary-400: #a78bfa;
+	--color-tetriary-500: #8b5cf6;
+	--color-tetriary-600: #7c3aed;
+	--color-tetriary-700: #6d28d9;
+	--color-tetriary-800: #5b21b6;
+	--color-tetriary-900: #4c1d95;
+	--color-tetriary-950: #2a1065;
+
+	--color-success-50: #ecfdf5;
+	--color-success-100: #d1fae5;
+	--color-success-200: #a7f3d0;
+	--color-success-300: #6ee7b7;
+	--color-success-400: #34d399;
+	--color-success-500: #10b981;
+	--color-success-600: #059669;
+	--color-success-700: #0f766e;
+	--color-success-800: #065f46;
+	--color-success-900: #064e3b;
+	--color-success-950: #022c22;
+
+	--color-warning-50: #fffbeb;
+	--color-warning-100: #fef3c7;
+	--color-warning-200: #fde68a;
+	--color-warning-300: #fcd34d;
+	--color-warning-400: #fbbf24;
+	--color-warning-500: #f59e0b;
+	--color-warning-600: #d97706;
+	--color-warning-700: #b45309;
+	--color-warning-800: #92400e;
+	--color-warning-900: #78350f;
+	--color-warning-950: #451a03;
+
+	--color-info-50: #f0f9ff;
+	--color-info-100: #e0f2fe;
+	--color-info-200: #bae6fd;
+	--color-info-300: #7dd3fc;
+	--color-info-400: #38bdf8;
+	--color-info-500: #0ea5e9;
+	--color-info-600: #0284c7;
+	--color-info-700: #0369a1;
+	--color-info-800: #075985;
+	--color-info-900: #0c4a6e;
+	--color-info-950: #082f49;
+
+	--color-error-50: #fef2f2;
+	--color-error-100: #fee2e2;
+	--color-error-200: #fecaca;
+	--color-error-300: #fca5a5;
+	--color-error-400: #f87171;
+	--color-error-500: #ef4444;
+	--color-error-600: #dc2626;
+	--color-error-700: #b91c1c;
+	--color-error-800: #991b1b;
+	--color-error-900: #7f1d1d;
+	--color-error-950: #450a0a;
+}
+
+/* ==========================================================================
+   BASE LAYER STYLES
+   Fundamental building blocks and semantic wrappers.
+   ========================================================================== */
+
+/* Button -------------------------- */
+.fluid-button {
+	@apply flex cursor-pointer items-center gap-1 rounded-md p-2 transition-all duration-500;
+}
+.fluid-button-primary {
+	@apply bg-primary-500 text-neutral-50 hover:bg-primary-400;
+}
+.fluid-button-secondary {
+	@apply bg-secondary-500 text-neutral-50 hover:bg-secondary-400;
+}
+.fluid-button-outline {
+	@apply text-primary-500 outline-2 outline-primary-500 hover:bg-primary-500 hover:text-neutral-50;
+}
+.fluid-button-transparent {
+	@apply text-primary-500 hover:text-primary-700 dark:hover:text-neutral-50;
+}
+
+/* Container ----------------------- */
+.fluid-container {
+	@apply transition-all duration-500;
+}
+
+section,
+main.fluid-container {
+	@apply min-w-0 bg-neutral-50 transition-all duration-500 dark:bg-neutral-900;
+}
+
+/* Image --------------------------- */
+.fluid-image {
+	@apply object-contain;
+}
+.fluid-image-loading {
+	@apply animate-pulse bg-primary-500;
+}
+
+/* Input Field --------------------- */
+.fluid-input-field {
+	@apply rounded-md bg-neutral-50 p-1 outline-1 outline-primary-500 transition-all focus:outline-2 focus:outline-primary-500 dark:bg-neutral-800 dark:text-neutral-50;
+}
+.fluid-input-field-error {
+	@apply outline-2 outline-error-500;
+}
+
+/* Link ---------------------------- */
+.fluid-link {
+	@apply text-neutral-950 transition-all visited:text-primary-300 hover:text-neutral-500 dark:text-neutral-50 dark:hover:text-neutral-300;
+}
+
+/* List ---------------------------- */
+.fluid-unordered-list {
+	@apply list-disc text-neutral-950 dark:text-neutral-50;
+}
+.fluid-ordered-list {
+	@apply list-decimal text-neutral-950 dark:text-neutral-50;
+}
+
+/* Table --------------------------- */
+.fluid-table {
+	@apply w-full border-separate border-spacing-0 overflow-hidden rounded-md border dark:border-neutral-300;
+}
+.fluid-table-head {
+	@apply bg-neutral-200 dark:bg-neutral-800;
+}
+.fluid-table-row {
+	@apply even:bg-neutral-200 dark:even:bg-neutral-800;
+}
+.fluid-table-cell {
+	@apply border-collapse bg-clip-padding text-center;
+}
+.fluid-table-body {
+}
+.fluid-table-footer {
+	@apply bg-clip-padding p-2 odd:bg-neutral-100 dark:odd:bg-neutral-800;
+}
+
+/* Text ---------------------------- */
+.fluid-text {
+	@apply text-neutral-950 transition-all duration-500 dark:text-neutral-50;
+}
+
+/* ==========================================================================
+   COMPONENT LAYER STYLES
+   Complex UI elements composed from the Base Layer.
+   ========================================================================== */
+
+/* Accordion ----------------------- */
+.fluid-accordion-wrapper {
+	@apply flex-col;
+}
+.fluid-accordion-header {
+	@apply flex w-full cursor-pointer flex-nowrap items-center justify-between rounded-md p-2 transition-all hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-800;
+}
+.fluid-accordion-body {
+	@apply flex w-full flex-col gap-1 p-2;
+}
+
+/* Calendar ------------------------ */
+.fluid-calendar {
+}
+.fluid-calendar-container {
+	@apply flex flex-wrap;
+}
+.fluid-calendar-wrapper {
+	@apply flex flex-col items-center gap-1 p-2;
+}
+.fluid-calendar-header {
+	@apply flex w-full justify-center;
+}
+.fluid-calendar-body {
+	@apply grid grid-cols-7 justify-items-center gap-4;
+}
+.fluid-calendar-cell {
+	@apply dark:text-neutral-50;
+}
+.fluid-calendar-cell-selected {
+	@apply bg-primary-600 text-neutral-50;
+}
+.fluid-calendar-cell-in-range {
+	@apply bg-primary-400 text-neutral-50;
+}
+.fluid-calendar-cell-rolling-day {
+	@apply opacity-25;
+}
+
+/* Carousel ------------------------ */
+.fluid-carousel-container {
+	@apply flex snap-mandatory overflow-hidden scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+}
+.fluid-carousel-item {
+	@apply size-full shrink-0 snap-center;
+}
+
+/* Code Block ---------------------- */
+.fluid-code-block-container {
+	@apply flex flex-col overflow-scroll rounded-md bg-neutral-200 p-4 font-mono dark:bg-neutral-800;
+}
+.fluid-code-block-row {
+	@apply flex items-center gap-1;
+}
+.fluid-code-block-index {
+	@apply min-w-8 gap-1 border-r dark:border-neutral-50;
+}
+.fluid-code-block-content {
+	@apply flex flex-col gap-1 px-2;
+}
+
+/* Drawer -------------------------- */
+.fluid-drawer-container {
+	@apply fixed inset-0 z-10 bg-black/30 backdrop-blur-sm;
+}
+.fluid-drawer-panel {
+	@apply fixed z-20 bg-white p-6 shadow-xl transition-all dark:bg-neutral-900;
+}
+
+/* Page ---------------------------- */
+.fluid-page {
+	@apply flex w-full flex-1 flex-col p-8 md:p-16;
+}
+
+/* Switch -------------------------- */
+.fluid-switch-button {
+	@apply relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-neutral-200 transition-colors duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed disabled:opacity-50;
+}
+.fluid-switch-circle {
+	@apply pointer-events-none inline-block h-4 w-4 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out checked:translate-x-4;
+}
+.fluid-switch-button.checked {
+	@apply bg-primary-600;
+}
+.fluid-switch-button.checked .fluid-switch-circle {
+	@apply translate-x-4;
+}

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<unknown>;
+		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<unknown>;
+    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;