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

package/dist/elements/dropdown/select.d.ts

@@ -0,0 +1,220 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../types/variants.js';
+import type { Component, Snippet } from 'svelte';
+export declare const selectTV: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        sm: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        base: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        lg: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        xl: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        '2xl': {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+            container: string;
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    triggerIcon: string;
+    container: string;
+    searchInput: string;
+    list: string;
+    item: string;
+    emptyMessage: string;
+}, undefined, {
+    size: {
+        xs: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        sm: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        base: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        lg: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        xl: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        '2xl': {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+            container: string;
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    triggerIcon: string;
+    container: string;
+    searchInput: string;
+    list: string;
+    item: string;
+    emptyMessage: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        sm: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        base: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        lg: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        xl: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        '2xl': {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+            container: string;
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    triggerIcon: string;
+    container: string;
+    searchInput: string;
+    list: string;
+    item: string;
+    emptyMessage: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SelectItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    icon?: Component;
+};
+export type SelectProps = {
+    items: SelectItem[];
+    value?: string;
+    placeholder?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+    size?: VariantSizes;
+    class?: ClassValue;
+    triggerClass?: ClassValue;
+    containerClass?: ClassValue;
+    listClass?: ClassValue;
+    itemClass?: ClassValue;
+    searchInputClass?: ClassValue;
+    emptyMessageText?: string;
+    clearable?: boolean;
+    icon?: Component;
+    iconClass?: ClassValue;
+    triggerContent?: Snippet<[{
+        selectedItem?: SelectItem;
+        open: boolean;
+    }]>;
+    onselect?: ({ value }: {
+        value?: string;
+    }) => void;
+    onopen?: () => void;
+    onclose?: () => void;
+};

package/dist/elements/dropdown/select.js

@@ -0,0 +1,74 @@
+import { tv } from 'tailwind-variants';
+export const selectTV = tv({
+    slots: {
+        base: 'relative inline-block',
+        trigger: `flex items-center justify-between w-full text-left focus:outline-none bg-white border
+			border-default-200 text-default-700 hover:border-default-300 rounded-md cursor-pointer`,
+        triggerIcon: 'transition-transform duration-200 text-default-500',
+        container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-md',
+        searchInput: 'w-full outline-none px-2 py-1.5 text-sm h-10 border-b border-b-default-200',
+        list: 'py-1 max-h-60 overflow-auto h-full',
+        item: `w-full px-3 py-2 text-sm text-left hover:bg-default-100 focus:bg-default-100
+		data-[selected=true]:bg-info-100 data-[selected=true]:text-info-500 truncate
+		data-[selected=true]:font-medium cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
+		data-[highlighted=true]:bg-default-100 data-[highlighted=true]:text-default-700`,
+        emptyMessage: 'px-3 py-2 text-sm text-default-500'
+    },
+    variants: {
+        size: {
+            xs: {
+                trigger: 'h-6 px-2 py-1 text-xs gap-1',
+                triggerIcon: 'h-3 w-3',
+                container: 'max-h-40',
+                item: 'px-2 py-1 text-xs',
+                base: 'w-24'
+            },
+            sm: {
+                trigger: 'h-8 px-2.5 py-1.5 text-xs gap-1.5',
+                triggerIcon: 'h-3.5 w-3.5',
+                container: 'max-h-48',
+                item: 'px-2.5 py-1.5 text-xs',
+                base: 'w-32'
+            },
+            base: {
+                trigger: 'h-10 px-3 py-2 text-sm gap-2',
+                triggerIcon: 'h-4 w-4',
+                container: 'max-h-60',
+                item: 'px-3 py-2 text-sm',
+                base: 'w-40'
+            },
+            lg: {
+                trigger: 'h-11 px-4 py-2.5 text-base gap-2.5',
+                triggerIcon: 'h-5 w-5',
+                container: 'max-h-72',
+                item: 'px-4 py-2.5 text-base',
+                base: 'w-48'
+            },
+            xl: {
+                trigger: 'h-12 px-5 py-3 text-lg gap-3',
+                triggerIcon: 'h-6 w-6',
+                container: 'max-h-80',
+                item: 'px-5 py-3 text-lg',
+                base: 'w-56'
+            },
+            '2xl': {
+                trigger: 'h-14 px-6 py-3.5 text-xl gap-4',
+                triggerIcon: 'h-7 w-7',
+                container: 'max-h-96',
+                item: 'px-6 py-3.5 text-xl',
+                base: 'w-64'
+            }
+        },
+        disabled: {
+            true: {
+                trigger: 'opacity-50 cursor-not-allowed hover:border-default-200',
+                container: 'pointer-events-none',
+                item: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'base',
+        disabled: false
+    }
+});

package/dist/header/Breadcrumbs.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { breadcrumbs, type BreadcrumbsProps } from './breadcrumbs.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 './breadcrumbs.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 './pageheaders.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="min-w-0 flex-1">
+		{#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 './pageheaders.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,220 @@
+import type { Component } from 'svelte';
+export type BreadcrumbItem = {
+    label: string;
+    href: string;
+    current?: boolean;
+};
+export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    weight: {
+        normal: {
+            item: string;
+        };
+        medium: {
+            item: string;
+        };
+        semibold: {
+            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: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    weight: {
+        normal: {
+            item: string;
+        };
+        medium: {
+            item: string;
+        };
+        semibold: {
+            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: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    weight: {
+        normal: {
+            item: string;
+        };
+        medium: {
+            item: string;
+        };
+        semibold: {
+            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 BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    size?: keyof typeof breadcrumbs.variants.size;
+    weight?: keyof typeof breadcrumbs.variants.weight;
+    color?: keyof typeof breadcrumbs.variants.color;
+    icon?: Component;
+    class?: string;
+    listclass?: string;
+    itemclass?: string;
+    separatorclass?: string;
+    wrapperclass?: string;
+};

package/dist/header/breadcrumbs.js

@@ -0,0 +1,81 @@
+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: {
+            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'
+            }
+        },
+        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/header/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PageHeader } from './PageHeader.svelte';
+export type { PageHeaderProps } from './pageheaders.js';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export type { BreadcrumbsProps } from './breadcrumbs.js';