@makolabs/ripple 0.0.1-dev.3 → 0.0.1-dev.30

package/dist/forms/slider.d.ts

@@ -0,0 +1,143 @@
+import { Size } from '../variants.js';
+export declare const slider: import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, undefined, {
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.SM]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.BASE]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        [Size.LG]: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    hasError: {
+        true: {
+            track: string;
+            range: string;
+            thumb: string;
+            label: string;
+            value: string;
+        };
+    };
+}, {
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    mark: string;
+    label: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/slider.js

@@ -0,0 +1,62 @@
+import { tv } from 'tailwind-variants';
+import { Color, Size } from '../variants.js';
+export const slider = tv({
+    slots: {
+        base: 'relative w-full',
+        track: 'absolute h-2 w-full rounded-full bg-default-200 cursor-pointer',
+        range: 'absolute h-full rounded-full bg-primary-500',
+        thumb: [
+            'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
+            'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+            'hover:scale-110 transition-transform cursor-pointer'
+        ],
+        mark: 'absolute text-sm text-default-500 -translate-x-1/2',
+        label: 'mb-2 block text-sm font-medium text-default-700',
+        value: 'mt-1 text-sm text-default-500'
+    },
+    variants: {
+        size: {
+            [Size.SM]: {
+                track: 'h-1',
+                thumb: 'w-3 h-3',
+                mark: 'text-xs top-4',
+                label: 'text-xs',
+                value: 'text-xs'
+            },
+            [Size.BASE]: {
+                track: 'h-2',
+                thumb: 'w-4 h-4',
+                mark: 'text-sm top-6',
+                label: 'text-sm',
+                value: 'text-sm'
+            },
+            [Size.LG]: {
+                track: 'h-3',
+                thumb: 'w-5 h-5',
+                mark: 'text-base top-7',
+                label: 'text-base',
+                value: 'text-base'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed',
+                thumb: 'cursor-not-allowed hover:scale-100 active:scale-100'
+            }
+        },
+        hasError: {
+            true: {
+                track: 'bg-danger-200',
+                range: 'bg-danger-500',
+                thumb: 'border-danger-500 focus:ring-danger-500',
+                label: 'text-danger-600',
+                value: 'text-danger-600'
+            }
+        }
+    },
+    defaultVariants: {
+        size: Size.BASE,
+        disabled: false,
+        hasError: false
+    }
+});

package/dist/header/Breadcrumbs.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { breadcrumbs } from './breadcrumbs.js';
+	import type { BreadcrumbsProps } from '../index.js';
+
+	let {
+		items = [],
+		size = 'sm',
+		color = 'default',
+		weight = 'medium',
+		icon: Icon,
+		class: className = '',
+		listclass: listClassName = '',
+		itemclass: itemClassName = '',
+		separatorclass: separatorClassName = '',
+		wrapperclass: wrapperClassName = ''
+	}: BreadcrumbsProps = $props();
+
+	// Get the slots from the breadcrumbs
+	const { base, list, item, separator, wrapper } = $derived(
+		breadcrumbs({
+			size,
+			weight,
+			color
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+	const listClass = $derived(cn(list(), listClassName));
+	const itemClasses = $derived(cn(item(), itemClassName));
+	const separatorClasses = $derived(cn(separator(), separatorClassName));
+	const wrapperClasses = $derived(cn(wrapper(), wrapperClassName));
+</script>
+
+<nav class={baseClass} aria-label="Breadcrumb">
+	<ol role="list" class={listClass}>
+		{#each items as breadcrumbItem, index (index)}
+			<li>
+				<div class={wrapperClasses}>
+					{#if index > 0}
+						<span class={separatorClasses}>
+							{#if Icon}
+								<Icon />
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="0.8em"
+									height="0.8em"
+									viewBox="0 0 16 16"
+								>
+									<path
+										fill="currentColor"
+										d="M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04"
+									/>
+								</svg>
+							{/if}
+						</span>
+					{/if}
+					<a
+						href={breadcrumbItem.href}
+						class={cn(
+							itemClasses,
+							breadcrumbItem.current ? breadcrumbs({ active: true }).item() : ''
+						)}
+						aria-current={breadcrumbItem.current ? 'page' : undefined}
+					>
+						{breadcrumbItem.label}
+					</a>
+				</div>
+			</li>
+		{/each}
+	</ol>
+</nav>

package/dist/header/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbsProps } from '../index.js';
+declare const Breadcrumbs: import("svelte").Component<BreadcrumbsProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/header/PageHeader.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { PageHeaderProps } from '../index.js';
+	import Breadcrumbs from './Breadcrumbs.svelte';
+
+	let {
+		title,
+		breadcrumbs = [],
+		children,
+		class: className = '',
+		titleclass: titleClassName = ''
+	}: PageHeaderProps = $props();
+
+	const defaultTitleClasses =
+		'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl mt-1';
+	const headerClasses = $derived(cn('space-y-3', className));
+	const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
+	const titleClasses = $derived(cn(defaultTitleClasses, titleClassName));
+</script>
+
+<div class={headerClasses}>
+	<div class="flex-1 min-w-0">
+		{#if hasBreadcrumbs}
+			<Breadcrumbs items={breadcrumbs} />
+		{/if}
+		<h2 class={titleClasses}>{title}</h2>
+	</div>
+
+	{@render children?.()}
+</div>

package/dist/header/PageHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PageHeaderProps } from '../index.js';
+declare const PageHeader: import("svelte").Component<PageHeaderProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/header/breadcrumbs.d.ts

@@ -0,0 +1,226 @@
+type BreadcrumbItem = {
+    label: string;
+    href: string;
+    current?: boolean;
+};
+export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    weight: {
+        normal: {
+            item: string;
+        };
+        medium: {
+            item: string;
+        };
+        semibold: {
+            item: string;
+        };
+        bold: {
+            item: string;
+        };
+    };
+    color: {
+        default: {
+            item: string;
+            wrapper: string;
+        };
+        primary: {
+            item: string;
+            wrapper: string;
+        };
+        secondary: {
+            item: string;
+            wrapper: string;
+        };
+        info: {
+            item: string;
+            wrapper: string;
+        };
+        success: {
+            item: string;
+            wrapper: string;
+        };
+        warning: {
+            item: string;
+            wrapper: string;
+        };
+        danger: {
+            item: string;
+            wrapper: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    separator: string;
+    wrapper: string;
+}, undefined, {
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    weight: {
+        normal: {
+            item: string;
+        };
+        medium: {
+            item: string;
+        };
+        semibold: {
+            item: string;
+        };
+        bold: {
+            item: string;
+        };
+    };
+    color: {
+        default: {
+            item: string;
+            wrapper: string;
+        };
+        primary: {
+            item: string;
+            wrapper: string;
+        };
+        secondary: {
+            item: string;
+            wrapper: string;
+        };
+        info: {
+            item: string;
+            wrapper: string;
+        };
+        success: {
+            item: string;
+            wrapper: string;
+        };
+        warning: {
+            item: string;
+            wrapper: string;
+        };
+        danger: {
+            item: string;
+            wrapper: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    separator: string;
+    wrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    weight: {
+        normal: {
+            item: string;
+        };
+        medium: {
+            item: string;
+        };
+        semibold: {
+            item: string;
+        };
+        bold: {
+            item: string;
+        };
+    };
+    color: {
+        default: {
+            item: string;
+            wrapper: string;
+        };
+        primary: {
+            item: string;
+            wrapper: string;
+        };
+        secondary: {
+            item: string;
+            wrapper: string;
+        };
+        info: {
+            item: string;
+            wrapper: string;
+        };
+        success: {
+            item: string;
+            wrapper: string;
+        };
+        warning: {
+            item: string;
+            wrapper: string;
+        };
+        danger: {
+            item: string;
+            wrapper: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    separator: string;
+    wrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type { BreadcrumbItem };

package/dist/header/breadcrumbs.js

@@ -0,0 +1,87 @@
+import { tv } from 'tailwind-variants';
+export const breadcrumbs = tv({
+    slots: {
+        base: 'flex',
+        list: 'flex flex-wrap items-center space-x-2.5',
+        item: 'flex items-center whitespace-nowrap',
+        separator: 'flex items-center',
+        wrapper: 'flex items-center gap-2.5'
+    },
+    variants: {
+        size: {
+            xs: {
+                base: 'items-center text-xs'
+            },
+            sm: {
+                base: 'items-center text-sm'
+            },
+            base: {
+                base: 'items-center text-base'
+            },
+            lg: {
+                base: 'items-center text-lg'
+            }
+        },
+        weight: {
+            normal: {
+                item: 'font-normal'
+            },
+            medium: {
+                item: 'font-medium'
+            },
+            semibold: {
+                item: 'font-semibold'
+            },
+            bold: {
+                item: 'font-bold'
+            }
+        },
+        color: {
+            default: {
+                item: 'hover:text-default-700',
+                wrapper: 'text-default-500'
+            },
+            primary: {
+                item: 'hover:text-primary-700',
+                wrapper: 'text-primary-500'
+            },
+            secondary: {
+                item: 'hover:text-secondary-700',
+                wrapper: 'text-secondary-500'
+            },
+            info: {
+                item: 'hover:text-info-700',
+                wrapper: 'text-info-500'
+            },
+            success: {
+                item: 'hover:text-success-700',
+                wrapper: 'text-success-500'
+            },
+            warning: {
+                item: 'hover:text-warning-700',
+                wrapper: 'text-warning-500'
+            },
+            danger: {
+                item: 'hover:text-danger-700',
+                wrapper: 'text-danger-500'
+            }
+        },
+        active: {
+            true: {
+                item: 'text-current font-semibold'
+            },
+            false: {
+                item: ''
+            }
+        }
+    },
+    compoundVariants: [
+    // Additional compound variants can be added here if needed
+    ],
+    defaultVariants: {
+        size: 'sm',
+        weight: 'medium',
+        color: 'default',
+        active: false
+    }
+});

package/dist/helper/cls.d.ts

@@ -1,2 +1,3 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+export declare const tv: import("tailwind-variants").CreateTV;

package/dist/helper/cls.js

@@ -1,5 +1,9 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { createTV } from 'tailwind-variants';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export const tv = createTV({
+    twMerge: true
+});

package/dist/helper/date.d.ts

@@ -0,0 +1,7 @@
+export declare const DATE_FORMAT: {
+    ISO: string;
+    READABLE: string;
+    SHORT: string;
+};
+export declare function formatDateTime(time: Date | string, format?: string): string;
+export declare function getRelativeTime(time: Date | string): string;

package/dist/helper/date.js

@@ -0,0 +1,15 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+dayjs.extend(relativeTime);
+export const DATE_FORMAT = {
+    ISO: 'YYYY-MM-DDTHH:mm:ssZ',
+    READABLE: 'MMM D, YYYY h:mm A',
+    SHORT: 'MM/DD/YYYY HH:mm'
+};
+export function formatDateTime(time, format = DATE_FORMAT.READABLE) {
+    return dayjs(time).format(format);
+}
+export function getRelativeTime(time) {
+    const date = dayjs(time);
+    return date.fromNow();
+}

package/dist/helper/nav.svelte.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if a URL matches the current route
+ * @param href - The URL to check
+ * @param exact - Whether to require an exact match
+ */
+export declare function isRouteActive(href: string, exact?: boolean): boolean;

package/dist/helper/nav.svelte.js

@@ -0,0 +1,23 @@
+import { page } from '$app/state';
+/**
+ * Check if a URL matches the current route
+ * @param href - The URL to check
+ * @param exact - Whether to require an exact match
+ */
+export function isRouteActive(href, exact = false) {
+    const currentPath = page.url.pathname;
+    if (exact) {
+        return currentPath === href;
+    }
+    // Home page special case
+    if (href === '/' && currentPath === '/') {
+        return true;
+    }
+    // Check if the current path starts with href, but ensure it's a complete segment
+    if (href !== '/' && currentPath.startsWith(href)) {
+        // Check if the next character after href is a slash or the end of the string
+        const nextChar = currentPath.charAt(href.length);
+        return nextChar === '' || nextChar === '/';
+    }
+    return false;
+}