fluid-ui-svelte 0.2.4 → 0.3.1

package/dist/components/Drawer.svelte

@@ -1,33 +1,88 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
-	import Container from "../primitives/Container.svelte";
-	import Button from "../primitives/Button.svelte";
+	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 {
-		class: className,
-		contentClass,
+		variation = '',
+		componentId,
 		isOpen = $bindable(false),
-		children,
-		overrideDefaultStyling = false,
+		position = 'left',
+		closeOnBackdropClick = true,
+		scrollLock = true,
+		transitionFn = (node: Element, params?: any) => {
+			return {};
+		},
+		transitionParams = {},
+		backdropTransitionFn = (node: Element, params?: any) => {
+			return {};
+		},
+		backdropTransitionParams,
+		children
 	}: {
-		class?: string;
-		contentClass?: string;
 		isOpen?: boolean;
-		overrideDefaultStyling?: 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();
-</script>
 
-<Container overrideDefaultStyling={true} class={overrideDefaultStyling ? "" + (className ? className : "") : "fluid-drawer" + (className ? ` ${className}` : "")}>
-	<Container class={overrideDefaultStyling ? "" + (contentClass ? `${contentClass}` : "") : "fluid-drawer-body" + (contentClass ? ` ${contentClass}` : "")}>
-		{@render children()}
-	</Container>
-	<Button
-		overrideDefaultStyling
-		class="fluid-drawer-backdrop"
-		onclick={(e: Event) => {
+	// 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></Container>
-	</Button>
-</Container>
+		<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

@@ -1,9 +1,24 @@
-import type { Snippet } from "svelte";
-declare const Drawer: import("svelte").Component<{
-    class?: string;
-    contentClass?: string;
+import { type TransitionConfig } from 'svelte/transition';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
     isOpen?: boolean;
-    overrideDefaultStyling?: 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;
-}, {}, "isOpen">;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
+type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/{Badge.svelte.d.ts → ImageCrop.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default Badge;
-type Badge = SvelteComponent<{
+export default ImageCrop;
+type ImageCrop = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const Badge: $$__sveltets_2_IsomorphicComponent<{
+declare const ImageCrop: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/Page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Container } from '../base/index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	const {
+		title = '',
+		description = '',
+		children,
+		...rest
+	}: {
+		class?: string;
+		title: string;
+		description: string;
+		children?: Snippet;
+	} & HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+</svelte:head>
+
+<Container class="fluid-page" type="section">
+	{@render children?.()}
+</Container>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    class?: string;
+    title: string;
+    description: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const Page: import("svelte").Component<$$ComponentProps, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/components/Switch.svelte

@@ -1,32 +1,34 @@
 <script lang="ts">
-	import Label from "../primitives/Label.svelte";
-	import Input from "../primitives/Input.svelte";
-	import Button from "../primitives/Button.svelte";
-	import Container from "../primitives/Container.svelte";
+	import { Button } from '../base/index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
-		class: className,
+		onswitch,
 		checked = $bindable(false),
-		overrideDefaultStyling = false,
+		disabled = false,
+		class: className = '',
+		...rest
 	}: {
-		class?: string;
+		onswitch: (event: Event, checked: boolean) => Promise<void>;
 		checked?: boolean;
-		overrideDefaultStyling?: boolean;
-	} = $props();
+		disabled?: boolean;
+		class?: string;
+		id?: string;
+	} & Omit<HTMLAttributes<HTMLButtonElement>, 'onclick'> = $props();
 </script>
 
 <Button
-	onclick={() => {
-		checked = !checked;
+	role="switch"
+	aria-checked={checked}
+	class={'fluid-switch-button' + (checked ? ' checked' : '')}
+	onclick={async (event) => {
+		if (!disabled) {
+			await onswitch(event, checked);
+			checked = !checked;
+		}
 	}}
-	overrideDefaultStyling={true}
-	class="w-full h-full cursor-pointer"
+	{...rest}
+	overrideDefaultStyling
 >
-	<Container
-		overrideDefaultStyling={true}
-		class={(overrideDefaultStyling ? "" : "fluid-switch" + (checked ? " fluid-switch-checked" : "")) + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}
-	>
-		<Input bind:checked type="checkbox" class="sr-only peer"></Input>
-		<div class="fluid-switch-slider"></div>
-	</Container>
+	<span class="fluid-switch-circle"></span>
 </Button>

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

@@ -1,6 +1,11 @@
-declare const Switch: import("svelte").Component<{
-    class?: string;
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    onswitch: (event: Event, checked: boolean) => Promise<void>;
     checked?: boolean;
-    overrideDefaultStyling?: boolean;
-}, {}, "checked">;
+    disabled?: boolean;
+    class?: string;
+    id?: string;
+} & Omit<HTMLAttributes<HTMLButtonElement>, 'onclick'>;
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/index.d.ts

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

@@ -0,0 +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/index.d.ts

@@ -1,33 +1,2 @@
-export type { DropdownOptions as DropdownOptions } from "./types.ts";
-export { default as Link } from "./primitives/Link.svelte";
-export { default as Button } from "./primitives/Button.svelte";
-export { default as Container } from "./primitives/Container.svelte";
-export { default as Dialog } from "./primitives/Dialog.svelte";
-export { default as Form } from "./primitives/Form.svelte";
-export { default as Image } from "./primitives/Image.svelte";
-export { default as Input } from "./primitives/Input.svelte";
-export { default as Label } from "./primitives/Label.svelte";
-export { default as Table } from "./primitives/Table.svelte";
-export { default as TableBody } from "./primitives/TableBody.svelte";
-export { default as TableData } from "./primitives/TableData.svelte";
-export { default as TableFooter } from "./primitives/TableFooter.svelte";
-export { default as TableHead } from "./primitives/TableHead.svelte";
-export { default as TableHeader } from "./primitives/TableHeader.svelte";
-export { default as TableRow } from "./primitives/TableRow.svelte";
-export { default as Text } from "./primitives/Text.svelte";
-export { default as TextArea } from "./primitives/TextArea.svelte";
-export { default as Accordion } from "./components/Accordion.svelte";
-export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
-export { default as Drawer } from "./components/Drawer.svelte";
-export { default as Dropdown } from "./components/Dropdown.svelte";
-export { default as NotificationArea } from "./components/notification/NotificationArea.svelte";
-export { default as Pagination } from "./components/Pagination.svelte";
-export { default as Progress } from "./components/Progress.svelte";
-export { default as Switch } from "./components/Switch.svelte";
-export { default as Tabs } from "./components/Tabs.svelte";
-export { default as Dropzone } from "./components/Dropzone.svelte";
-export { default as FormBuilder } from "./prebuilt/FormBuilder.svelte";
-export { default as InteractiveScrollArea } from "./components/InteractiveScrollArea.svelte";
-export { default as Document } from "./prebuilt/document/Document.svelte";
-export { default as DocumentBlock } from "./prebuilt/document/DocumentBlock.svelte";
-export { default as DocumentPage } from "./prebuilt/document/DocumentPage.svelte";
+export * from './base/index.js';
+export * from './components/index.js';

package/dist/index.js

@@ -1,36 +1,2 @@
-//Types
-// Primitives 
-export { default as Link } from "./primitives/Link.svelte";
-export { default as Button } from "./primitives/Button.svelte";
-export { default as Container } from "./primitives/Container.svelte";
-export { default as Dialog } from "./primitives/Dialog.svelte";
-export { default as Form } from "./primitives/Form.svelte";
-export { default as Image } from "./primitives/Image.svelte";
-export { default as Input } from "./primitives/Input.svelte";
-export { default as Label } from "./primitives/Label.svelte";
-export { default as Table } from "./primitives/Table.svelte";
-export { default as TableBody } from "./primitives/TableBody.svelte";
-export { default as TableData } from "./primitives/TableData.svelte";
-export { default as TableFooter } from "./primitives/TableFooter.svelte";
-export { default as TableHead } from "./primitives/TableHead.svelte";
-export { default as TableHeader } from "./primitives/TableHeader.svelte";
-export { default as TableRow } from "./primitives/TableRow.svelte";
-export { default as Text } from "./primitives/Text.svelte";
-export { default as TextArea } from "./primitives/TextArea.svelte";
-// Components
-export { default as Accordion } from "./components/Accordion.svelte";
-export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
-export { default as Drawer } from "./components/Drawer.svelte";
-export { default as Dropdown } from "./components/Dropdown.svelte";
-export { default as NotificationArea } from "./components/notification/NotificationArea.svelte";
-export { default as Pagination } from "./components/Pagination.svelte";
-export { default as Progress } from "./components/Progress.svelte";
-export { default as Switch } from "./components/Switch.svelte";
-export { default as Tabs } from "./components/Tabs.svelte";
-export { default as Dropzone } from "./components/Dropzone.svelte";
-// Prebuilt
-export { default as FormBuilder } from "./prebuilt/FormBuilder.svelte";
-export { default as InteractiveScrollArea } from "./components/InteractiveScrollArea.svelte";
-export { default as Document } from "./prebuilt/document/Document.svelte";
-export { default as DocumentBlock } from "./prebuilt/document/DocumentBlock.svelte";
-export { default as DocumentPage } from "./prebuilt/document/DocumentPage.svelte";
+export * from './base/index.js';
+export * from './components/index.js';

package/dist/{community/components/index.js → utilities/accesibility.js}

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

package/dist/utilities/applyCharacterFilter.d.ts

@@ -0,0 +1 @@
+export declare function applyCharacterFilter(keys: Array<string>, value: string): string;

package/dist/utilities/applyCharacterFilter.js

@@ -0,0 +1,6 @@
+export function applyCharacterFilter(keys, value) {
+    return value
+        .split('')
+        .filter((char) => keys.includes(char))
+        .join('');
+}

package/dist/utilities/calendar.d.ts

@@ -0,0 +1,10 @@
+export declare function applyDate(currentDates: {
+    startDate?: string;
+    endDate?: string;
+}, selectedDate: string): {
+    startDate?: string;
+    endDate?: string;
+};
+export declare function generateDaysOfTheMonthFromDate(date: string): string[];
+export declare function isBetweenDateRange(selectedDate: string, startDate?: string, endDate?: string): boolean;
+export declare function generateCalendarCellStyles(currentDate: string, cellDate: string, startDate?: string, endDate?: string, hideRollingDays?: boolean): string;

package/dist/utilities/calendar.js

@@ -0,0 +1,112 @@
+export function applyDate(currentDates, selectedDate) {
+    // If selected already, second click action is to remove selection.
+    if (currentDates.endDate && currentDates.endDate === selectedDate) {
+        currentDates.endDate = undefined;
+        return currentDates;
+    }
+    // If selected already, second click action is to remove selection.
+    if (currentDates.startDate && currentDates.startDate === selectedDate) {
+        currentDates.startDate = undefined;
+        return currentDates;
+    }
+    // Nothing is selected, set start date.
+    if (!currentDates.startDate) {
+        currentDates.startDate = selectedDate;
+    }
+    // If start date is already there, apply range by setting end date.
+    else if (!currentDates.endDate) {
+        // If newly selected date earlier swap with start date..
+        if (selectedDate < currentDates.startDate) {
+            currentDates.endDate = currentDates.startDate;
+            currentDates.startDate = selectedDate;
+        }
+        else {
+            currentDates.endDate = selectedDate;
+        }
+    }
+    // If both exists, rearrange the range based on the selected date.
+    else {
+        // If newly selected date is smaller than start date, reset start date to selected date.
+        if (selectedDate < currentDates.startDate) {
+            currentDates.startDate = selectedDate;
+        }
+        // If newly selected date is bigger than start date, extend the range.
+        else {
+            currentDates.endDate = selectedDate;
+        }
+    }
+    return currentDates;
+}
+export function generateDaysOfTheMonthFromDate(date) {
+    const dateInstance = new Date(date);
+    // Get year and month for active date.
+    const year = dateInstance.getFullYear();
+    const month = dateInstance.getMonth();
+    // Get first day, last day and total number of days of active month.
+    const firstDayOfMonth = new Date(year, month, 1);
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    // Get day of the week for first day of the month and remove 1 for 0 indexed array.
+    let startDayOfWeek = firstDayOfMonth.getDay() - 1;
+    // If day of the week is Sunday index will be -1 because Sunday's index is 0.
+    // Our array has 6 as Sunday so we "roll over".
+    if (startDayOfWeek === -1) {
+        startDayOfWeek = 6; // Sunday
+    }
+    const days = [];
+    // Get last day of the previous month.
+    // Date constructors 'date' parameter starts from 1 so if we give 0 we go last day of previous month.
+    const prevMonthLastDay = new Date(year, month, 0).getDate();
+    // Go to previous month's first day.
+    const prevMonth = new Date(year, month - 1, 1);
+    // Add rolling over days of the last month to current array which will be used to render the current month's grid.
+    // This is reversed because it adds rollover days by subtracting it one by one.
+    // If start day of the week is Wednesday then it is equal to 4, basically adding 28th, 29th, 30th and 31st to first row as rolling over days.
+    for (let i = startDayOfWeek; i > 0; i--) {
+        const day = prevMonthLastDay - i + 1;
+        days.push(new Date(prevMonth.getFullYear(), prevMonth.getMonth(), day).toISOString());
+    }
+    // Adding days of the current month on top of rolled over days from last month.
+    for (let i = 1; i <= daysInMonth; i++) {
+        days.push(new Date(year, month, i).toISOString());
+    }
+    // Adding rolling back days of the next month to current grid if month is not ending at Sunday.
+    const remainingDays = (startDayOfWeek + daysInMonth > 35 ? 42 : 35) - days.length; // 42 cells for a 6x7 grid
+    const nextMonth = new Date(year, month + 1, 1);
+    for (let i = 1; i <= remainingDays; i++) {
+        days.push(new Date(nextMonth.getFullYear(), nextMonth.getMonth(), i).toISOString());
+    }
+    return days;
+}
+export function isBetweenDateRange(selectedDate, startDate, endDate) {
+    if (!startDate || !endDate) {
+        return false;
+    }
+    const startDateObj = new Date(startDate);
+    const endDateObj = new Date(endDate);
+    const selectedDateObj = new Date(selectedDate);
+    // Normalize all dates to midnight to compare only the date part.
+    const start = new Date(startDateObj.getFullYear(), startDateObj.getMonth(), startDateObj.getDate());
+    const end = new Date(endDateObj.getFullYear(), endDateObj.getMonth(), endDateObj.getDate());
+    const current = new Date(selectedDateObj.getFullYear(), selectedDateObj.getMonth(), selectedDateObj.getDate());
+    // Determine the actual earlier and later dates to handle incorrect order.
+    const earlierDate = start < end ? start : end;
+    const laterDate = start < end ? end : start;
+    // Perform the check to see if the current date is within the range .
+    return current > earlierDate && current < laterDate;
+}
+export function generateCalendarCellStyles(currentDate, cellDate, startDate, endDate, hideRollingDays = false) {
+    const styles = ['fluid-calendar-cell'];
+    if (new Date(currentDate).getMonth() !== new Date(cellDate).getMonth()) {
+        styles.push('fluid-calendar-cell-rolling-day');
+        if (hideRollingDays) {
+            styles.push('invisible');
+        }
+    }
+    if (startDate === cellDate || endDate === cellDate) {
+        styles.push('fluid-calendar-cell-selected');
+    }
+    if (isBetweenDateRange(cellDate, startDate, endDate)) {
+        styles.push('fluid-calendar-cell-in-range');
+    }
+    return styles.join(' ');
+}

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