fluid-ui-svelte 0.3.0 → 0.3.2

package/dist/base/Button.svelte

@@ -11,7 +11,7 @@
 		children,
 		...rest
 	}: {
-		onclick: (event: Event, buttonState: { inProgress: boolean }) => Promise<void>;
+		onclick: (event: Event, buttonState: { inProgress: boolean }) => Promise<unknown>;
 		class?: string;
 		overrideDefaultStyling?: boolean;
 		loadingPlaceholder?: Snippet;

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

@@ -3,7 +3,7 @@ import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     onclick: (event: Event, buttonState: {
         inProgress: boolean;
-    }) => Promise<void>;
+    }) => Promise<unknown>;
     class?: string;
     overrideDefaultStyling?: boolean;
     loadingPlaceholder?: Snippet;

package/dist/components/Accordion.svelte

@@ -1,9 +1,8 @@
 <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 { Container, Button } from '../base/index.js';
 	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { slide, type TransitionConfig } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
 
 	const {
 		variation = '',
@@ -14,7 +13,7 @@
 		transitionDuration = 250
 	}: {
 		variation?: string;
-		componentId: string;
+		componentId?: string;
 		header: Snippet<[options: { isExpanded: boolean }]>;
 		body: Snippet;
 		transitionFunction?: (node: Element, params?: any) => TransitionConfig;

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

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

package/dist/components/Calendar.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import Container from '../base/Container.svelte';
-	import Button from '../base/Button.svelte';
-	import Text from '../base/Text.svelte';
+	import { Container, Button, Text } from '../base/index.js';
 	import {
 		applyDate,
 		generateCalendarCellStyles,
@@ -11,23 +9,24 @@
 
 	let {
 		variant = '',
+		componentId,
 		currentDate = new Date().toISOString(),
 		startDate = $bindable(),
 		endDate = $bindable(),
+		weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		calendarDays = generateDaysOfTheMonthFromDate(new Date().toISOString()),
 		hideRollingDays = false
 	}: {
 		variant?: string;
+		componentId?: string;
 		currentDate?: string;
 		startDate?: string;
 		endDate?: string;
+		weekDays?: Array<string>;
+		calendarDays?: Array<string>;
 		hideRollingDays?: boolean;
 	} = $props();
 
-	const componentState = $state({
-		weekDays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-		calendarDays: generateDaysOfTheMonthFromDate(new Date().toISOString())
-	});
-
 	function dateSelectionHandler(selectedDate: string) {
 		const result = applyDate({ startDate, endDate: endDate }, selectedDate);
 		startDate = result.startDate;
@@ -35,20 +34,20 @@
 	}
 
 	$effect(() => {
-		componentState.calendarDays = generateDaysOfTheMonthFromDate(currentDate);
+		calendarDays = generateDaysOfTheMonthFromDate(currentDate);
 	});
 </script>
 
-<Container class={mergeClasses('fluid-calendar-wrapper', variant)}>
+<Container id={componentId} class={mergeClasses('fluid-calendar-wrapper', variant)}>
 	<Container class={mergeClasses('fluid-calendar-header', variant)}>
 		<Text>{new Date(currentDate).toLocaleString('default', { month: 'long' })}</Text>
 	</Container>
 	<Container class={mergeClasses('fluid-calendar-body', variant)}>
-		{#each componentState.weekDays as day}
+		{#each weekDays as day}
 			<Text>{day}</Text>
 		{/each}
 
-		{#each componentState.calendarDays as cellDay}
+		{#each calendarDays as cellDay}
 			<Button
 				onclick={async () => dateSelectionHandler(cellDay)}
 				class={mergeClasses(

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

@@ -1,8 +1,11 @@
 type $$ComponentProps = {
     variant?: string;
+    componentId?: string;
     currentDate?: string;
     startDate?: string;
     endDate?: string;
+    weekDays?: Array<string>;
+    calendarDays?: Array<string>;
     hideRollingDays?: boolean;
 };
 declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "startDate" | "endDate">;

package/dist/components/Carousel.svelte

@@ -0,0 +1,114 @@
+<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 type { Snippet } from 'svelte';
+
+	let {
+		componentId = crypto.randomUUID(),
+		variant = '',
+		orientation = 'horizontal',
+		activeIndex = $bindable(0),
+		autoplay = false,
+		autoplayDuration = 1000,
+		items,
+		itemTemplate
+	}: {
+		componentId?: string;
+		variant?: string;
+		orientation?: 'horizontal' | 'vertical';
+		activeIndex?: number;
+		autoplay?: boolean;
+		autoplayDuration?: number;
+		items: Array<T>;
+		itemTemplate: Snippet<[{ item: T; index: number }]>;
+	} = $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);
+		}
+	}
+
+	$effect(() => {
+		if (autoplay && items.length > 0) {
+			const interval = setInterval(() => {
+				activeIndex = (activeIndex + 1) % items.length;
+			}, autoplayDuration);
+			return () => clearInterval(interval);
+		}
+	});
+
+	$effect(() => {
+		if (componentId && items.length > 1) {
+			scrollToIndex(componentId, activeIndex, items.length, orientation);
+		}
+	});
+</script>
+
+<Container
+	id={componentId}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+	class={mergeClasses(
+		`fluid-carousel-container ${orientation === 'vertical' ? 'h-full snap-y flex-col overflow-y-auto' : 'flex snap-x overflow-x-auto'}`,
+		variant
+	)}
+>
+	{#each items as item, index}
+		<Container class={mergeClasses('fluid-carousel-item', variant)} overrideDefaultStyling>
+			{@render itemTemplate({ item, index })}
+		</Container>
+	{/each}
+</Container>

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

@@ -1,26 +1,37 @@
-export default Carousel;
-type Carousel = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Carousel: $$__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;
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        componentId?: string;
+        variant?: string;
+        orientation?: "horizontal" | "vertical";
+        activeIndex?: number;
+        autoplay?: boolean;
+        autoplayDuration?: number;
+        items: Array<T>;
+        itemTemplate: Snippet<[{
+            item: T;
+            index: number;
+        }]>;
     };
-    z_$$bindings?: Bindings;
+    exports: {};
+    bindings: "activeIndex";
+    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(): "activeIndex";
+    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 Carousel: $$IsomorphicComponent;
+type Carousel<T> = InstanceType<typeof Carousel<T>>;
+export default Carousel;

package/dist/components/CodeBlock.svelte

@@ -5,18 +5,24 @@
 	const {
 		variation,
 		code = '',
-		language = ''
+		language = '',
+		showLineNumbers = true
 	}: {
 		variation?: string;
 		code?: string;
 		language?: string;
+		showLineNumbers?: boolean;
 	} = $props();
 </script>
 
 <Container class="fluid-code-block-container">
 	{#each code.split('\n') as line, index}
 		<Container class="fluid-code-block-row">
-			<Container class="fluid-code-block-index"><Text class="select-none">{index}</Text></Container>
+			{#if showLineNumbers}
+				<Container class="fluid-code-block-index"
+					><Text class="select-none">{index}</Text></Container
+				>
+			{/if}
 			<Container class="fluid-code-block-content">
 				<Text type="pre">
 					<Text type="code" class={'language-' + language}>{line}</Text>

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

@@ -2,6 +2,7 @@ type $$ComponentProps = {
     variation?: string;
     code?: string;
     language?: string;
+    showLineNumbers?: boolean;
 };
 declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;

package/dist/components/Drawer.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { Container } from '../base/index.js';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { fade, fly, type TransitionConfig } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+
+	let {
+		variation = '',
+		componentId,
+		isOpen = $bindable(false),
+		position = 'left',
+		closeOnBackdropClick = true,
+		scrollLock = true,
+		transitionFn = (node: Element, params?: any) => {
+			return {};
+		},
+		transitionParams = {},
+		backdropTransitionFn = (node: Element, params?: any) => {
+			return {};
+		},
+		backdropTransitionParams,
+		children
+	}: {
+		isOpen?: boolean;
+		position?: 'left' | 'right' | 'top' | 'bottom';
+		closeOnBackdropClick?: boolean;
+		scrollLock?: boolean;
+		variation?: string;
+		componentId?: string;
+		transitionFn?: (node: Element, params?: any) => TransitionConfig;
+		transitionParams?: TransitionConfig & { x?: number; y?: number };
+		backdropTransitionFn?: (node: Element, params?: any) => TransitionConfig;
+		backdropTransitionParams?: TransitionConfig & { x?: number; y?: number };
+		children: Snippet;
+	} = $props();
+
+	// Programmatic anchoring mapping to avoid repetitive CSS classes
+	const positionClasses: Record<string, string> = {
+		left: 'left-0 top-0 bottom-0 h-full border-r',
+		right: 'right-0 top-0 bottom-0 h-full border-l',
+		top: 'top-0 right-0 left-0 w-full border-b',
+		bottom: 'bottom-0 right-0 left-0 w-full border-t'
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && isOpen) {
+			isOpen = false;
+		}
+	};
+
+	$effect(() => {
+		if (isOpen) {
+			const originalStyle = window.getComputedStyle(document.body).overflow;
+			if (scrollLock) document.body.style.overflow = 'hidden';
+			window.addEventListener('keydown', handleKeyDown);
+
+			return () => {
+				if (scrollLock) document.body.style.overflow = originalStyle;
+				window.removeEventListener('keydown', handleKeyDown);
+			};
+		}
+	});
+</script>
+
+{#if isOpen}
+	<Container
+		id={componentId}
+		class={mergeClasses(variation, 'fluid-drawer-container')}
+		transitionFn={backdropTransitionFn}
+		transitionParams={backdropTransitionParams}
+		onclick={async () => {
+			if (closeOnBackdropClick) isOpen = false;
+		}}
+		overrideDefaultStyling
+	>
+		<Container
+			role="dialog"
+			aria-modal="true"
+			onclick={(event) => event.stopPropagation()}
+			class={mergeClasses(variation, `fluid-drawer-panel ${positionClasses[position]}`)}
+			{transitionFn}
+			{transitionParams}
+			overrideDefaultStyling
+		>
+			{@render children()}
+		</Container>
+	</Container>
+{/if}

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

@@ -0,0 +1,24 @@
+import { type TransitionConfig } from 'svelte/transition';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    isOpen?: boolean;
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    closeOnBackdropClick?: boolean;
+    scrollLock?: boolean;
+    variation?: string;
+    componentId?: string;
+    transitionFn?: (node: Element, params?: any) => TransitionConfig;
+    transitionParams?: TransitionConfig & {
+        x?: number;
+        y?: number;
+    };
+    backdropTransitionFn?: (node: Element, params?: any) => TransitionConfig;
+    backdropTransitionParams?: TransitionConfig & {
+        x?: number;
+        y?: number;
+    };
+    children: Snippet;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/ImageCrop.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import Container from '../base/Container.svelte';
-	import { onMount } from 'svelte';
-	import { Text } from '../base/index.js';
-	import {
-		draw,
-		generateCropAreaState,
-		handleMouseDown,
-		handleMouseMove,
-		handleMouseUp
-	} from '../utilities/imageCrop.js';
-	const {
-		imageFile,
-		cropAreaShape = 'rectangle'
-	}: { imageFile: File; cropAreaShape?: 'rectangle' | 'circle' } = $props();
-
-	let canvasElement: HTMLCanvasElement;
-	let image: HTMLImageElement | undefined = $state();
-
-	const cropAreaState = $state(generateCropAreaState(cropAreaShape));
-
-	onMount(() => {
-		const fileReader = new FileReader();
-		fileReader.readAsDataURL(imageFile);
-		fileReader.onload = () => {
-			const loadedImage = new Image();
-			loadedImage.src = fileReader.result as string;
-			loadedImage.onload = () => {
-				// Set the reactive image state once it's fully loaded
-				image = loadedImage;
-			};
-		};
-	});
-
-	$effect(() => {
-		// Only run if the canvas and image are ready
-		if (canvasElement && image) {
-			// This block performs the ONE-TIME setup when the image first loads.
-			if (canvasElement.width !== image.naturalWidth) {
-				canvasElement.width = image.naturalWidth;
-				canvasElement.height = image.naturalHeight;
-				cropAreaState.cropArea.width = canvasElement.width / 2;
-				cropAreaState.cropArea.height = canvasElement.height / 2;
-				cropAreaState.cropArea.x = (canvasElement.width - cropAreaState.cropArea.width) / 2;
-				cropAreaState.cropArea.y = (canvasElement.height - cropAreaState.cropArea.height) / 2;
-			}
-
-			// This will now run on the initial setup AND any time cropAreaState changes.
-			draw(canvasElement, image, cropAreaState);
-		}
-	});
-</script>
-
-<Container>
-	<Text>Canvas to Draw On</Text>
-	<canvas
-		class="size-full"
-		bind:this={canvasElement}
-		onpointerdown={(event) => handleMouseDown(event, cropAreaState, canvasElement)}
-		onpointermove={(event) => handleMouseMove(event, cropAreaState, canvasElement)}
-		onpointerup={() => handleMouseUp(cropAreaState)}
-		onpointercancel={() => handleMouseUp(cropAreaState)}
-		onpointerleave={() => handleMouseUp(cropAreaState)}
-	></canvas>
-</Container>

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

@@ -1,7 +1,26 @@
-type $$ComponentProps = {
-    imageFile: File;
-    cropAreaShape?: 'rectangle' | 'circle';
-};
-declare const ImageCrop: import("svelte").Component<$$ComponentProps, {}, "">;
-type ImageCrop = ReturnType<typeof ImageCrop>;
 export default ImageCrop;
+type ImageCrop = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ImageCrop: $$__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/Page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { Container } from '../base/index.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
-	import Container from '../base/Container.svelte';
 
 	const {
 		title = '',

package/dist/components/Switch.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { Button } from '../base/index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		onswitch,

package/dist/components/index.d.ts

@@ -1,6 +1,8 @@
 export { default as Accordion } from './Accordion.svelte';
 export { default as Calendar } from './Calendar.svelte';
+export { default as Carousel } from './Carousel.svelte';
 export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Drawer } from './Drawer.svelte';
 export { default as ImageCrop } from './ImageCrop.svelte';
 export { default as Page } from './Page.svelte';
 export { default as Switch } from './Switch.svelte';

package/dist/components/index.js

@@ -1,6 +1,8 @@
 export { default as Accordion } from './Accordion.svelte';
 export { default as Calendar } from './Calendar.svelte';
+export { default as Carousel } from './Carousel.svelte';
 export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Drawer } from './Drawer.svelte';
 export { default as ImageCrop } from './ImageCrop.svelte';
 export { default as Page } from './Page.svelte';
 export { default as Switch } from './Switch.svelte';

package/dist/utilities/accesibility.d.ts

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

package/dist/utilities/accesibility.js

@@ -0,0 +1,2 @@
+"use strict";
+// TODO

package/dist/utilities/carousel.d.ts

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

package/dist/utilities/carousel.js

@@ -0,0 +1,27 @@
+export function scrollToIndex(componentId, activeIndex, totalItems, orientation = 'horizontal') {
+    const element = document.getElementById(componentId);
+    if (!element || totalItems <= 0)
+        return;
+    const scrollWidth = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+    const itemWidth = scrollWidth / totalItems;
+    const targetPosition = activeIndex * itemWidth;
+    element.scrollTo({
+        left: orientation === 'horizontal' ? targetPosition : 0,
+        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';
+        }
+    }
+    else {
+        if (Math.abs(diffY) > threshold) {
+            return diffY > 0 ? 'next' : 'prev';
+        }
+    }
+    return null;
+}

package/dist/utilities/codeBlockContents.d.ts

@@ -0,0 +1,15 @@
+export declare const codeBlockContents: {
+    gettingStartedAppCss: string;
+    gettingStartedUsage: string;
+    drawerBasicUsage: string;
+    drawerPositions: string;
+    drawerAnimated: string;
+    drawerFlyAnimation: string;
+    calendarSingle: string;
+    calendarDual: string;
+    calendarSixMonth: string;
+    calendarRange: string;
+    calendarMulti: string;
+    carouselSlide: string;
+    carouselFade: string;
+};

package/dist/utilities/codeBlockContents.js

@@ -0,0 +1,298 @@
+// Parsing errors happen in code editor when imports and script tags used inside code block component's contents.
+// To prevent this we import usage examples from here.
+const gettingStartedAppCss = `// src/routes/+layout.svelte
+import '../app.css';`;
+const gettingStartedUsage = `<script>
+  // Import a base element for custom implementation
+  import { Button } from 'fluid-ui-svelte/base';
+
+  // Import a pre-built component
+  import { Accordion } from 'fluid-ui-svelte/components';
+</script>
+
+<Button onclick={handleClick}>Submit</Button>
+
+<Accordion>
+  <!-- Accordion content -->
+</Accordion>`;
+const drawerBasicUsage = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  import { Button, Text } from 'fluid-ui-svelte/base';
+
+  let isBasicDrawerOpen = $state(false);
+</script>
+
+<Button onclick={async () => isBasicDrawerOpen = true}>Open Drawer</Button>
+
+<Drawer bind:isOpen={isBasicDrawerOpen} position="left">
+  <div class="flex flex-col gap-4">
+    <Text type="h2">Drawer Content</Text>
+    <Text>This is some content inside the drawer.</Text>
+    <Button onclick={async () => isBasicDrawerOpen = false}>Close</Button>
+  </div>
+</Drawer>`;
+const drawerPositions = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  let left = $state(false);
+  let right = $state(false);
+  let top = $state(false);
+  let bottom = $state(false);
+</script>
+
+<Button onclick={async () => left = true}>Left</Button>
+<Button onclick={async () => right = true}>Right</Button>
+<Button onclick={async () => top = true}>Top</Button>
+<Button onclick={async () => bottom = true}>Bottom</Button>
+
+<Drawer bind:isOpen={left} position="left">Left Drawer</Drawer>
+<Drawer bind:isOpen={right} position="right">Right Drawer</Drawer>
+<Drawer bind:isOpen={top} position="top">Top Drawer</Drawer>
+<Drawer bind:isOpen={bottom} position="bottom">Bottom Drawer</Drawer>`;
+const drawerAnimated = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  import { fly, fade } from 'svelte/transition';
+  
+  let isAnimatedDrawerOpen = $state(false);
+</script>
+
+<Button onclick={async () => isAnimatedDrawerOpen = true}>Open Animated</Button>
+
+<Drawer 
+  bind:isOpen={isAnimatedDrawerOpen}
+  position="right"
+  transitionFn={fly} 
+  transitionParams={{ x: 500, duration: 500 }}
+  backdropTransitionFn={fade}
+>
+  Animated Content
+</Drawer>`;
+const drawerFlyAnimation = `<script>
+  import { Drawer } from 'fluid-ui-svelte/components';
+  import { fly } from 'svelte/transition';
+  
+  let isFlyDrawerOpen = $state(false);
+</script>
+
+<Button onclick={async () => isFlyDrawerOpen = true}>Open Fly Drawer</Button>
+
+<Drawer 
+  bind:isOpen={isFlyDrawerOpen}
+  position="bottom"
+  transitionFn={fly} 
+  transitionParams={{ y: 200, duration: 800 }}
+>
+  Fly Content
+</Drawer>`;
+const calendarSingle = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  let currentDate = $state(new Date().toISOString());
+
+  const changeMonth = (increment: number) => {
+    const date = new Date(currentDate);
+    date.setMonth(date.getMonth() + increment);
+    currentDate = date.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonth(-1)}>Prev</Button>
+    <Button onclick={() => changeMonth(1)}>Next</Button>
+  </Container>
+  <Calendar bind:currentDate componentId="calendar-single" />
+</Container>`;
+const calendarDual = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  let baseDate = $state(new Date().toISOString());
+  
+  // Helper to get next month relative to base
+  const getOffsetDate = (offset: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + offset);
+    return d.toISOString();
+  };
+
+  const changeMonth = (increment: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + increment);
+    baseDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonth(-1)}>Prev</Button>
+    <Button onclick={() => changeMonth(1)}>Next</Button>
+  </Container>
+  <Container class="flex gap-8 flex-wrap">
+    <Calendar currentDate={baseDate} componentId="cal-1" />
+    <Calendar currentDate={getOffsetDate(1)} componentId="cal-2" />
+  </Container>
+</Container>`;
+const calendarSixMonth = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  let baseDate = $state(new Date().toISOString());
+  
+  const getOffsetDate = (offset: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + offset);
+    return d.toISOString();
+  };
+
+  const changeMonth = (increment: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + increment);
+    baseDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonth(-1)}>Prev</Button>
+    <Button onclick={() => changeMonth(1)}>Next</Button>
+  </Container>
+  <Container class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    {#each Array(6) as _, i}
+      <Calendar currentDate={getOffsetDate(i)} componentId="cal-{i}" />
+    {/each}
+  </Container>
+</Container>`;
+const calendarRange = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container, Text } from 'fluid-ui-svelte/base';
+
+  let baseDate = $state(new Date().toISOString());
+  let startDate = $state<string>();
+  let endDate = $state<string>();
+
+  const getOffsetDate = (offset: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + offset);
+    return d.toISOString();
+  };
+
+  const changeMonth = (inc: number) => {
+    const d = new Date(baseDate);
+    d.setMonth(d.getMonth() + inc);
+    baseDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex justify-between items-center">
+    <Container class="flex gap-2">
+      <Button onclick={() => changeMonth(-1)}>Prev</Button>
+      <Button onclick={() => changeMonth(1)}>Next</Button>
+    </Container>
+    <Text class="text-sm font-mono">
+      {startDate || '...'} to {endDate || '...'}
+    </Text>
+  </Container>
+
+  <Container class="flex gap-8 flex-wrap">
+    <Calendar 
+      currentDate={baseDate} 
+      bind:startDate 
+      bind:endDate 
+      componentId="cal-range-1" 
+    />
+    <Calendar 
+      currentDate={getOffsetDate(1)} 
+      bind:startDate 
+      bind:endDate 
+      componentId="cal-range-2" 
+    />
+  </Container>
+</Container>`;
+const calendarMulti = `<script>
+  import { Calendar } from 'fluid-ui-svelte/components';
+  import { Button, Container } from 'fluid-ui-svelte/base';
+
+  const multiCalendarState = $state({
+    currentDate: new Date().toISOString(),
+    startDate: '',
+    endDate: ''
+  });
+
+  const changeMonthMulti = (inc: number) => {
+    const d = new Date(multiCalendarState.currentDate);
+    d.setMonth(d.getMonth() + inc);
+    multiCalendarState.currentDate = d.toISOString();
+  };
+</script>
+
+<Container class="flex flex-col gap-4">
+  <Container class="flex gap-2">
+    <Button onclick={() => changeMonthMulti(-1)}>Prev</Button>
+    <Button onclick={() => changeMonthMulti(1)}>Next</Button>
+  </Container>
+
+  <Container class="flex gap-8 flex-wrap">
+    <Calendar 
+      bind:currentDate={multiCalendarState.currentDate} 
+      bind:startDate={multiCalendarState.startDate} 
+      bind:endDate={multiCalendarState.endDate} 
+    />
+    <Calendar 
+      currentDate={new Date(new Date(multiCalendarState.currentDate).setMonth(new Date(multiCalendarState.currentDate).getMonth() + 1)).toISOString()} 
+      bind:startDate={multiCalendarState.startDate} 
+      bind:endDate={multiCalendarState.endDate} 
+    />
+  </Container>
+</Container>`;
+const carouselSlide = `<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' }
+  ];
+</script>
+
+<Carousel {items} type="slide" loop>
+  {#snippet children(item)}
+    <Image src={item.src} alt={item.alt} class="w-full h-64 object-cover" />
+  {/snippet}
+</Carousel>`;
+const carouselFade = `<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" }
+  ];
+</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>
+    </div>
+  {/snippet}
+</Carousel>`;
+export const codeBlockContents = {
+    gettingStartedAppCss,
+    gettingStartedUsage,
+    drawerBasicUsage,
+    drawerPositions,
+    drawerAnimated,
+    drawerFlyAnimation,
+    calendarSingle,
+    calendarDual,
+    calendarSixMonth,
+    calendarRange,
+    calendarMulti,
+    carouselSlide,
+    carouselFade
+};

package/package.json

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