fluid-ui-svelte 0.3.1 → 0.3.3

package/dist/base/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 	import { type Snippet } from 'svelte';
 
 	const {

package/dist/base/Container.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 	import type { Snippet } from 'svelte';
 	import type { TransitionConfig } from 'svelte/transition';
 

package/dist/base/Image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from 'svelte/elements';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 
 	const {
 		class: className = '',

package/dist/base/InputField.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
-	import { applyCharacterFilter } from '../utilities/applyCharacterFilter.js';
+	import { mergeClasses } from '../utilities/common.js';
+	import { applyCharacterFilter } from '../utilities/inputField.js';
 
 	let {
 		type = 'text',

package/dist/base/Link.svelte

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

package/dist/base/List.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 	import type { Snippet } from 'svelte';
 
 	const {
@@ -36,4 +36,4 @@
 			{@render itemTemplate(item)}
 		</li>
 	{/each}
-</svelte:element>
+</svelte:element>

package/dist/base/Table.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T,U,V">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 	import type { Snippet } from 'svelte';
 
 	const {
@@ -39,12 +39,11 @@
 	} & HTMLAttributes<HTMLTableElement> = $props();
 </script>
 
-<table
-	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-table')}
-	{...rest}
->
+<table class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-table')} {...rest}>
 	{#if caption}
-		<caption class={mergeClasses(captionClass, overrideDefaultStyling ? '' : 'fluid-table-caption')}>
+		<caption
+			class={mergeClasses(captionClass, overrideDefaultStyling ? '' : 'fluid-table-caption')}
+		>
 			{caption}
 		</caption>
 	{/if}
@@ -77,4 +76,4 @@
 			{/each}
 		</tr>
 	</tfoot>
-</table>
+</table>

package/dist/base/Text.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 	import type { Snippet } from 'svelte';
 
 	const {

package/dist/components/Accordion.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { Container, Button } from '../base/index.js';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 	import { slide, type TransitionConfig } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
 
 	const {
-		variation = '',
+		variant = '',
 		componentId,
 		header,
 		body,
 		transitionFunction = slide,
 		transitionDuration = 250
 	}: {
-		variation?: string;
+		variant?: string;
 		componentId?: string;
 		header: Snippet<[options: { isExpanded: boolean }]>;
 		body: Snippet;
@@ -22,12 +22,12 @@
 	const componentState = $state({ isExpanded: false });
 </script>
 
-<Container id={componentId} class={mergeClasses(variation, 'fluid-accordion-wrapper')}>
+<Container id={componentId} class={mergeClasses(variant, 'fluid-accordion-wrapper')}>
 	<Button
 		onclick={async () => {
 			componentState.isExpanded = !componentState.isExpanded;
 		}}
-		class={mergeClasses(variation, 'fluid-accordion-header')}
+		class={mergeClasses(variant, 'fluid-accordion-header')}
 		overrideDefaultStyling
 	>
 		{@render header(componentState)}
@@ -36,7 +36,7 @@
 		<Container
 			transitionFn={transitionFunction}
 			transitionParams={{ duration: transitionDuration }}
-			class={mergeClasses(variation, 'fluid-accordion-body')}
+			class={mergeClasses(variant, 'fluid-accordion-body')}
 		>
 			{@render body()}
 		</Container>

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

@@ -1,7 +1,7 @@
 import { type TransitionConfig } from 'svelte/transition';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
-    variation?: string;
+    variant?: string;
     componentId?: string;
     header: Snippet<[options: {
         isExpanded: boolean;

package/dist/components/Calendar.svelte

@@ -5,7 +5,7 @@
 		generateCalendarCellStyles,
 		generateDaysOfTheMonthFromDate
 	} from '../utilities/calendar.js';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 
 	let {
 		variant = '',

package/dist/components/Carousel.svelte

@@ -1,13 +1,21 @@
 <script lang="ts" generics="T">
 	import { Container } from '../base/index.js';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
-	import { scrollToIndex, getSwipeDirection } from '../utilities/carousel.js';
+	import { mergeClasses } from '../utilities/common.js';
+	import {
+		scrollToIndex,
+		handleTouchStart,
+		handleTouchMove,
+		handleTouchEnd,
+		type CarouselInternalState
+	} from '../utilities/carousel.js';
 	import type { Snippet } from 'svelte';
 
 	let {
 		componentId = crypto.randomUUID(),
 		variant = '',
 		orientation = 'horizontal',
+		snapItems = true,
+		swipeable = true,
 		activeIndex = $bindable(0),
 		autoplay = false,
 		autoplayDuration = 1000,
@@ -17,68 +25,20 @@
 		componentId?: string;
 		variant?: string;
 		orientation?: 'horizontal' | 'vertical';
+		snapItems?: boolean;
+		swipeable?: boolean;
 		activeIndex?: number;
 		autoplay?: boolean;
 		autoplayDuration?: number;
 		items: Array<T>;
-		itemTemplate: Snippet<[{ item: T; index: number }]>;
+		itemTemplate: Snippet<[{ item: T; index: number; internalState: CarouselInternalState }]>;
 	} = $props();
 
-	let touchStartX = 0;
-	let touchStartY = 0;
-
-	function handleTouchStart(e: TouchEvent) {
-		e.stopPropagation();
-		e.preventDefault();
-		touchStartX = e.changedTouches[0].screenX;
-		touchStartY = e.changedTouches[0].screenY;
-	}
-
-	function handleTouchMove(e: TouchEvent) {
-		if (!touchStartX || !touchStartY) return;
-
-		const touchCurrentX = e.changedTouches[0].screenX;
-		const touchCurrentY = e.changedTouches[0].screenY;
-
-		const diffX = Math.abs(touchCurrentX - touchStartX);
-		const diffY = Math.abs(touchCurrentY - touchStartY);
-
-		// If horizontal carousel and horizontal swipe is dominant
-		if (orientation === 'horizontal') {
-			if (diffX > diffY && diffX > 5) {
-				e.preventDefault();
-				e.stopPropagation();
-			}
-		} else {
-			// Vertical carousel
-			if (diffY > diffX && diffY > 5) {
-				e.preventDefault();
-				e.stopPropagation();
-			}
-		}
-	}
-
-	function handleTouchEnd(e: TouchEvent) {
-		e.stopPropagation();
-		e.preventDefault();
-		const touchEndX = e.changedTouches[0].screenX;
-		const touchEndY = e.changedTouches[0].screenY;
-
-		const direction = getSwipeDirection(
-			touchStartX,
-			touchStartY,
-			touchEndX,
-			touchEndY,
-			50,
-			orientation
-		);
-
-		if (direction === 'next') {
-			activeIndex = Math.min(activeIndex + 1, items.length - 1);
-		} else if (direction === 'prev') {
-			activeIndex = Math.max(activeIndex - 1, 0);
-		}
-	}
+	const internalState = $state({
+		touchStart: 0,
+		initialScroll: 0,
+		movementDelta: 0
+	});
 
 	$effect(() => {
 		if (autoplay && items.length > 0) {
@@ -98,17 +58,21 @@
 
 <Container
 	id={componentId}
-	ontouchstart={handleTouchStart}
-	ontouchmove={handleTouchMove}
-	ontouchend={handleTouchEnd}
+	ontouchstart={swipeable ? (e) => handleTouchStart(e, orientation, internalState) : undefined}
+	ontouchmove={swipeable ? (e) => handleTouchMove(e, orientation, internalState) : undefined}
+	ontouchend={swipeable
+		? () => {
+				activeIndex = handleTouchEnd(snapItems, activeIndex, items.length, internalState);
+			}
+		: undefined}
 	class={mergeClasses(
-		`fluid-carousel-container ${orientation === 'vertical' ? 'h-full snap-y flex-col overflow-y-auto' : 'flex snap-x overflow-x-auto'}`,
+		`fluid-carousel-container ${swipeable ? 'touch-none' : ''} ${orientation === 'vertical' ? 'h-full flex-col overflow-y-auto' : 'flex overflow-x-auto'}`,
 		variant
 	)}
 >
 	{#each items as item, index}
 		<Container class={mergeClasses('fluid-carousel-item', variant)} overrideDefaultStyling>
-			{@render itemTemplate({ item, index })}
+			{@render itemTemplate({ item, index, internalState })}
 		</Container>
 	{/each}
 </Container>

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

@@ -1,9 +1,12 @@
+import { type CarouselInternalState } from '../utilities/carousel.js';
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
     props: {
         componentId?: string;
         variant?: string;
         orientation?: "horizontal" | "vertical";
+        snapItems?: boolean;
+        swipeable?: boolean;
         activeIndex?: number;
         autoplay?: boolean;
         autoplayDuration?: number;
@@ -11,6 +14,7 @@ declare function $$render<T>(): {
         itemTemplate: Snippet<[{
             item: T;
             index: number;
+            internalState: CarouselInternalState;
         }]>;
     };
     exports: {};

package/dist/components/CodeBlock.svelte

@@ -1,29 +1,32 @@
 <script lang="ts">
 	import Container from '../base/Container.svelte';
 	import Text from '../base/Text.svelte';
+	import { mergeClasses } from '../utilities/common.js';
 
 	const {
-		variation,
+		variant = '',
+		componentId,
 		code = '',
 		language = '',
 		showLineNumbers = true
 	}: {
-		variation?: string;
+		variant?: string;
+		componentId?: string;
 		code?: string;
 		language?: string;
 		showLineNumbers?: boolean;
 	} = $props();
 </script>
 
-<Container class="fluid-code-block-container">
+<Container id={componentId} class={mergeClasses(variant, 'fluid-code-block-container')}>
 	{#each code.split('\n') as line, index}
-		<Container class="fluid-code-block-row">
+		<Container class={mergeClasses(variant, 'fluid-code-block-row')}>
 			{#if showLineNumbers}
-				<Container class="fluid-code-block-index"
-					><Text class="select-none">{index}</Text></Container
-				>
+				<Container class={mergeClasses(variant, 'fluid-code-block-index')}>
+					<Text class="select-none">{index}</Text>
+				</Container>
 			{/if}
-			<Container class="fluid-code-block-content">
+			<Container class={mergeClasses(variant, 'fluid-code-block-content')}>
 				<Text type="pre">
 					<Text type="code" class={'language-' + language}>{line}</Text>
 				</Text>

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

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
-    variation?: string;
+    variant?: string;
+    componentId?: string;
     code?: string;
     language?: string;
     showLineNumbers?: boolean;

package/dist/components/Drawer.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Container } from '../base/index.js';
-	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { mergeClasses } from '../utilities/common.js';
 	import { fade, fly, type TransitionConfig } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
 
 	let {
-		variation = '',
+		variant = '',
 		componentId,
 		isOpen = $bindable(false),
 		position = 'left',
@@ -25,7 +25,7 @@
 		position?: 'left' | 'right' | 'top' | 'bottom';
 		closeOnBackdropClick?: boolean;
 		scrollLock?: boolean;
-		variation?: string;
+		variant?: string;
 		componentId?: string;
 		transitionFn?: (node: Element, params?: any) => TransitionConfig;
 		transitionParams?: TransitionConfig & { x?: number; y?: number };
@@ -65,7 +65,7 @@
 {#if isOpen}
 	<Container
 		id={componentId}
-		class={mergeClasses(variation, 'fluid-drawer-container')}
+		class={mergeClasses(variant, 'fluid-drawer-container')}
 		transitionFn={backdropTransitionFn}
 		transitionParams={backdropTransitionParams}
 		onclick={async () => {
@@ -77,7 +77,7 @@
 			role="dialog"
 			aria-modal="true"
 			onclick={(event) => event.stopPropagation()}
-			class={mergeClasses(variation, `fluid-drawer-panel ${positionClasses[position]}`)}
+			class={mergeClasses(variant, `fluid-drawer-panel ${positionClasses[position]}`)}
 			{transitionFn}
 			{transitionParams}
 			overrideDefaultStyling

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

@@ -5,7 +5,7 @@ type $$ComponentProps = {
     position?: 'left' | 'right' | 'top' | 'bottom';
     closeOnBackdropClick?: boolean;
     scrollLock?: boolean;
-    variation?: string;
+    variant?: string;
     componentId?: string;
     transitionFn?: (node: Element, params?: any) => TransitionConfig;
     transitionParams?: TransitionConfig & {

package/dist/components/Page.svelte

@@ -21,6 +21,6 @@
 	<meta name="description" content={description} />
 </svelte:head>
 
-<Container class="fluid-page" type="section">
+<Container class="fluid-page" type="main" {...rest}>
 	{@render children?.()}
 </Container>

package/dist/utilities/carousel.d.ts

@@ -1,2 +1,9 @@
+export type CarouselInternalState = {
+    touchStart: number;
+    initialScroll: number;
+    movementDelta: number;
+};
 export declare function scrollToIndex(componentId: string, activeIndex: number, totalItems: number, orientation?: 'horizontal' | 'vertical'): void;
-export declare function getSwipeDirection(touchStartX: number, touchStartY: number, touchEndX: number, touchEndY: number, threshold?: number, orientation?: 'horizontal' | 'vertical'): 'next' | 'prev' | null;
+export declare function handleTouchStart(e: TouchEvent, orientation: 'horizontal' | 'vertical', internalState: CarouselInternalState): void;
+export declare function handleTouchMove(e: TouchEvent, orientation: 'horizontal' | 'vertical', internalState: CarouselInternalState): void;
+export declare function handleTouchEnd(snapItems: boolean, activeIndex: number, totalItems: number, internalState: CarouselInternalState): number;

package/dist/utilities/carousel.js

@@ -10,18 +10,35 @@ export function scrollToIndex(componentId, activeIndex, totalItems, orientation
         top: orientation === 'vertical' ? targetPosition : 0
     });
 }
-export function getSwipeDirection(touchStartX, touchStartY, touchEndX, touchEndY, threshold = 50, orientation = 'horizontal') {
-    const diffX = touchStartX - touchEndX;
-    const diffY = touchStartY - touchEndY;
-    if (orientation === 'horizontal') {
-        if (Math.abs(diffX) > threshold) {
-            return diffX > 0 ? 'next' : 'prev';
-        }
+export function handleTouchStart(e, orientation, internalState) {
+    e.stopPropagation();
+    const element = e.currentTarget;
+    internalState.touchStart =
+        orientation === 'vertical' ? e.touches[0].clientY : e.touches[0].clientX;
+    internalState.initialScroll = orientation === 'vertical' ? element.scrollTop : element.scrollLeft;
+    internalState.movementDelta = 0;
+}
+export function handleTouchMove(e, orientation, internalState) {
+    const element = e.currentTarget;
+    const currentTouch = orientation === 'vertical' ? e.touches[0].clientY : e.touches[0].clientX;
+    internalState.movementDelta = internalState.touchStart - currentTouch;
+    element.scrollTo({
+        left: orientation === 'vertical' ? 0 : internalState.initialScroll + internalState.movementDelta,
+        top: orientation === 'vertical' ? internalState.initialScroll + internalState.movementDelta : 0,
+        behavior: 'instant'
+    });
+}
+export function handleTouchEnd(snapItems, activeIndex, totalItems, internalState) {
+    if (!snapItems)
+        return activeIndex;
+    const threshold = 50;
+    let newIndex = activeIndex;
+    if (internalState.movementDelta > threshold && activeIndex < totalItems - 1) {
+        newIndex = activeIndex + 1;
     }
-    else {
-        if (Math.abs(diffY) > threshold) {
-            return diffY > 0 ? 'next' : 'prev';
-        }
+    else if (internalState.movementDelta < -threshold && activeIndex > 0) {
+        newIndex = activeIndex - 1;
     }
-    return null;
+    internalState.movementDelta = 0;
+    return newIndex;
 }

package/dist/utilities/codeBlockContents.d.ts

@@ -10,6 +10,6 @@ export declare const codeBlockContents: {
     calendarSixMonth: string;
     calendarRange: string;
     calendarMulti: string;
-    carouselSlide: string;
-    carouselFade: string;
+    carouselInteractive: string;
+    carouselUsage: string;
 };

package/dist/utilities/codeBlockContents.js

@@ -246,38 +246,30 @@ const calendarMulti = `<script>
     />
   </Container>
 </Container>`;
-const carouselSlide = `<script>
+const carouselInteractive = `<script>
   import { Carousel } from 'fluid-ui-svelte/components';
-  import { Image } from 'fluid-ui-svelte/base';
-
-  const items = [
-    { src: 'https://via.placeholder.com/800x400?text=Slide+1', alt: 'Slide 1' },
-    { src: 'https://via.placeholder.com/800x400?text=Slide+2', alt: 'Slide 2' },
-    { src: 'https://via.placeholder.com/800x400?text=Slide+3', alt: 'Slide 3' }
-  ];
+  const items = [...];
 </script>
 
-<Carousel {items} type="slide" loop>
-  {#snippet children(item)}
-    <Image src={item.src} alt={item.alt} class="w-full h-64 object-cover" />
+<Carousel {items} componentId="demo-id">
+  {#snippet itemTemplate({ item })}
+    <div class="h-64 flex items-center justify-center">
+      {item.text}
+    </div>
   {/snippet}
 </Carousel>`;
-const carouselFade = `<script>
+const carouselUsage = `<script>
   import { Carousel } from 'fluid-ui-svelte/components';
-  import { Text } from 'fluid-ui-svelte/base';
-
-  const quotes = [
-    { text: "Innovation is key.", author: "Tech CEO" },
-    { text: "Design is intelligence made visible.", author: "Designer" },
-    { text: "Simplicity is the ultimate sophistication.", author: "Da Vinci" }
-  ];
+  const items = [...];
+  let activeIndex = $state(0);
 </script>
 
-<Carousel {items: quotes} type="fade" autoplay autoplayInterval={4000}>
-  {#snippet children(quote)}
-    <div class="h-64 flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-800 p-8 text-center">
-      <Text type="h3" class="text-2xl font-bold mb-4">"{quote.text}"</Text>
-      <Text class="text-neutral-500">- {quote.author}</Text>
+<Carousel {items} bind:activeIndex>
+  {#snippet itemTemplate({ item, index, internalState })}
+    <div class="h-64">
+      {item.name}
+      <!-- Delta available for custom animations -->
+      <span>Delta: {internalState.movementDelta}</span>
     </div>
   {/snippet}
 </Carousel>`;
@@ -293,6 +285,6 @@ export const codeBlockContents = {
     calendarSixMonth,
     calendarRange,
     calendarMulti,
-    carouselSlide,
-    carouselFade
+    carouselInteractive,
+    carouselUsage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fluid-ui-svelte",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"author": {
 		"name": "Emre Ayaz",
 		"email": "ayazthemre@gmail.com"

package/dist/app.css

@@ -1,284 +0,0 @@
-@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;
-}