fluid-ui-svelte 0.3.2 → 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.2",
+	"version": "0.3.3",
 	"author": {
 		"name": "Emre Ayaz",
 		"email": "ayazthemre@gmail.com"