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

package/dist/layout/table/table.d.ts

@@ -0,0 +1,303 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors, VariantSizes } from '../../types/variants.js';
+export type DataRow = Record<string, any>;
+export type KeyType = keyof DataRow;
+export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
+export type TableColumn<T extends DataRow = any> = {
+    key: KeyType;
+    header: string;
+    cell?: Snippet<[row: T, key: KeyType, index?: number]>;
+    sortable?: boolean;
+    sortKey?: string;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    class?: ClassValue;
+};
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortState = {
+    column: string | null;
+    direction: SortDirection;
+};
+export declare const table: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            th: string;
+            td: string;
+        };
+        sm: {
+            th: string;
+            td: string;
+        };
+        base: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+        xl: {
+            th: string;
+            td: string;
+        };
+        '2xl': {
+            th: string;
+            td: string;
+        };
+    };
+    color: {
+        default: {
+            th: string;
+        };
+        primary: {
+            th: string;
+            tr: string;
+        };
+        secondary: {
+            th: string;
+            tr: string;
+        };
+        info: {
+            th: string;
+            tr: string;
+        };
+        success: {
+            th: string;
+            tr: string;
+        };
+        warning: {
+            th: string;
+            tr: string;
+        };
+        danger: {
+            th: string;
+            tr: string;
+        };
+    };
+    bordered: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    td: string;
+    footer: string;
+    pagination: string;
+    emptyState: string;
+    sortButton: string;
+    sortIcon: string;
+}, undefined, {
+    size: {
+        xs: {
+            th: string;
+            td: string;
+        };
+        sm: {
+            th: string;
+            td: string;
+        };
+        base: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+        xl: {
+            th: string;
+            td: string;
+        };
+        '2xl': {
+            th: string;
+            td: string;
+        };
+    };
+    color: {
+        default: {
+            th: string;
+        };
+        primary: {
+            th: string;
+            tr: string;
+        };
+        secondary: {
+            th: string;
+            tr: string;
+        };
+        info: {
+            th: string;
+            tr: string;
+        };
+        success: {
+            th: string;
+            tr: string;
+        };
+        warning: {
+            th: string;
+            tr: string;
+        };
+        danger: {
+            th: string;
+            tr: string;
+        };
+    };
+    bordered: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    td: string;
+    footer: string;
+    pagination: string;
+    emptyState: string;
+    sortButton: string;
+    sortIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            th: string;
+            td: string;
+        };
+        sm: {
+            th: string;
+            td: string;
+        };
+        base: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+        xl: {
+            th: string;
+            td: string;
+        };
+        '2xl': {
+            th: string;
+            td: string;
+        };
+    };
+    color: {
+        default: {
+            th: string;
+        };
+        primary: {
+            th: string;
+            tr: string;
+        };
+        secondary: {
+            th: string;
+            tr: string;
+        };
+        info: {
+            th: string;
+            tr: string;
+        };
+        success: {
+            th: string;
+            tr: string;
+        };
+        warning: {
+            th: string;
+            tr: string;
+        };
+        danger: {
+            th: string;
+            tr: string;
+        };
+    };
+    bordered: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    td: string;
+    footer: string;
+    pagination: string;
+    emptyState: string;
+    sortButton: string;
+    sortIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableProps<T extends DataRow = any> = {
+    data: T[];
+    columns: TableColumn<T>[];
+    color?: VariantColors;
+    size?: VariantSizes;
+    bordered?: boolean;
+    striped?: boolean;
+    emptyStateText?: string;
+    pageSize?: number;
+    selectable?: boolean;
+    selected?: T[];
+    class?: ClassValue;
+    wrapperclass?: ClassValue;
+    tableclass?: ClassValue;
+    theadclass?: ClassValue;
+    tbodyclass?: ClassValue;
+    trclass?: ClassValue;
+    thclass?: ClassValue;
+    tdclass?: ClassValue;
+    footerclass?: ClassValue;
+    onrowclick?: (row: T, index: number) => void;
+    onsort?: (sortState: SortState) => void;
+    onselect?: (selected: T[]) => void;
+    rowclass?: (row: T, index: number) => ClassValue;
+    loading?: boolean;
+};

package/dist/layout/table/table.js

@@ -0,0 +1,149 @@
+import { tv } from 'tailwind-variants';
+// Prebuild Cell rendering options
+// Snippet 1 - Date
+// Snippet 2 - Currency
+// Snippet 3 - Percentage
+// Snippet 4 - Phone Number
+// Snippet 5 - Email
+// Snippet 6 - Status
+// Snippet 7 - Time
+export const table = tv({
+    slots: {
+        base: 'w-full',
+        wrapper: 'overflow-x-auto',
+        table: 'min-w-full divide-y divide-default-200',
+        thead: '',
+        tbody: 'divide-y divide-default-200',
+        tr: 'transition-colors hover:bg-default-50',
+        th: 'font-semibold whitespace-nowrap',
+        td: 'whitespace-nowrap',
+        footer: 'p-4',
+        pagination: 'flex items-center justify-between',
+        emptyState: 'p-8 text-center text-default-500',
+        sortButton: 'inline-flex gap-1 items-center cursor-pointer focus:outline-none',
+        sortIcon: 'h-4 w-4'
+    },
+    variants: {
+        size: {
+            xs: {
+                th: 'px-2 py-1.5 text-xs',
+                td: 'px-2 py-1.5 text-xs'
+            },
+            sm: {
+                th: 'px-3 py-2 text-xs',
+                td: 'px-3 py-2 text-sm'
+            },
+            base: {
+                th: 'px-4 py-3 text-sm',
+                td: 'px-4 py-3 text-sm'
+            },
+            lg: {
+                th: 'px-6 py-4 text-sm',
+                td: 'px-6 py-4 text-base'
+            },
+            xl: {
+                th: 'px-8 py-5 text-base',
+                td: 'px-8 py-5 text-base'
+            },
+            '2xl': {
+                th: 'px-10 py-6 text-lg',
+                td: 'px-10 py-6 text-lg'
+            }
+        },
+        color: {
+            default: {
+                th: 'text-default-700 bg-default-50'
+            },
+            primary: {
+                th: 'text-primary-700 bg-primary-50',
+                tr: 'hover:bg-primary-50'
+            },
+            secondary: {
+                th: 'text-secondary-700 bg-secondary-50',
+                tr: 'hover:bg-secondary-50'
+            },
+            info: {
+                th: 'text-info-700 bg-info-50',
+                tr: 'hover:bg-info-50'
+            },
+            success: {
+                th: 'text-success-700 bg-success-50',
+                tr: 'hover:bg-success-50'
+            },
+            warning: {
+                th: 'text-warning-700 bg-warning-50',
+                tr: 'hover:bg-warning-50'
+            },
+            danger: {
+                th: 'text-danger-700 bg-danger-50',
+                tr: 'hover:bg-danger-50'
+            }
+        },
+        bordered: {
+            true: {
+                table: 'border-separate border-spacing-0 border border-default-200 rounded-md overflow-hidden',
+                th: 'border-b border-default-200',
+                td: 'border-b border-default-200'
+            },
+            false: {
+                table: 'border-none'
+            }
+        },
+        striped: {
+            true: {
+                tr: 'even:bg-default-50'
+            }
+        }
+    },
+    compoundVariants: [
+        // Add compound variants for striped + color combinations
+        {
+            striped: true,
+            color: 'primary',
+            class: {
+                tr: 'even:bg-primary-50'
+            }
+        },
+        {
+            striped: true,
+            color: 'secondary',
+            class: {
+                tr: 'even:bg-secondary-50'
+            }
+        },
+        {
+            striped: true,
+            color: 'info',
+            class: {
+                tr: 'even:bg-info-50'
+            }
+        },
+        {
+            striped: true,
+            color: 'success',
+            class: {
+                tr: 'even:bg-success-50'
+            }
+        },
+        {
+            striped: true,
+            color: 'warning',
+            class: {
+                tr: 'even:bg-warning-50'
+            }
+        },
+        {
+            striped: true,
+            color: 'danger',
+            class: {
+                tr: 'even:bg-danger-50'
+            }
+        }
+    ],
+    defaultVariants: {
+        size: 'base',
+        color: 'default',
+        bordered: true,
+        striped: false
+    }
+});

package/dist/layout/tabs/Tab.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { tabs, type TabProps } from './tabs.js';
+
+	let {
+		value = '',
+		label = '',
+		icon: Icon = undefined,
+		selected = false,
+		disabled = false,
+		color = 'primary',
+		size = 'base',
+		onclick = () => {}
+	}: TabProps = $props();
+
+	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
+		event.preventDefault();
+		if (!disabled) {
+			onclick(event);
+		}
+	}
+
+	const { trigger } = $derived(
+		tabs({
+			selected,
+			color,
+			size
+		})
+	);
+
+	const triggerClass = $derived(cn(trigger()));
+</script>
+
+<button
+	class={triggerClass}
+	aria-current={selected ? 'page' : undefined}
+	aria-disabled={disabled ? 'true' : undefined}
+	tabindex={disabled ? -1 : 0}
+	role="tab"
+	id={`tab-${value}`}
+	aria-controls={`panel-${value}`}
+	aria-selected={selected ? 'true' : 'false'}
+	onclick={handleClick}
+	onkeydown={(e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			handleClick(e);
+		}
+	}}
+>
+	{#if Icon}
+		<span class="mr-2">
+			<Icon aria-hidden="true" class="size-5" />
+		</span>
+	{/if}
+	<span>{label}</span>
+</button>

package/dist/layout/tabs/Tab.svelte.d.ts

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

package/dist/layout/tabs/TabContent.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import type { TabContentProps } from './tabs.js';
+	import { getContext } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { value = '', persisted = false, panelClass = '', children }: TabContentProps = $props();
+
+	const getSelected = getContext('getSelected') as () => string;
+	const selected = $derived(getSelected());
+	const tabPanelClass = $derived(cn(panelClass));
+	const active = $derived(selected === value);
+
+	let divProps: HTMLAttributes<HTMLDivElement> = $derived({
+		id: `panel-${value}`,
+		role: 'tabpanel',
+		class: tabPanelClass,
+		'aria-labelledby': `tab-${value}`,
+		tabindex: 0
+	});
+</script>
+
+{#if persisted}
+	<div {...divProps} style={active ? 'display: block' : 'display: none'}>
+		{@render children?.(value)}
+	</div>
+{:else if active}
+	<div {...divProps}>
+		{@render children?.(value)}
+	</div>
+{/if}

package/dist/layout/tabs/TabContent.svelte.d.ts

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

package/dist/layout/tabs/TabGroup.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import Tab from './Tab.svelte';
+	import { tabs, type TabsProps } from './tabs.js';
+	import { setContext } from 'svelte';
+
+	let {
+		tabs: tabItems = [],
+		selected = $bindable(''),
+		color = 'primary',
+		size = 'base',
+		class: className = '',
+		listClass = '',
+		panelClass = '',
+		onchange = () => {},
+		children
+	}: TabsProps = $props();
+
+	const { base, list, panel } = $derived(
+		tabs({
+			color,
+			size
+		})
+	);
+
+	const baseClass = $derived(cn(base(), className));
+	const listClass_ = $derived(cn(list(), listClass));
+	const panelClass_ = $derived(cn(panel(), panelClass));
+
+	function handleTabClick(value: string) {
+		selected = value;
+		onchange(value);
+	}
+
+	setContext('getSelected', () => selected);
+</script>
+
+<div class={baseClass}>
+	<div class={listClass_} role="tablist">
+		{#each tabItems as tab (tab.value)}
+			<Tab
+				value={tab.value}
+				label={tab.label}
+				icon={tab.icon}
+				selected={tab.value === selected}
+				disabled={tab.disabled}
+				{color}
+				{size}
+				onclick={() => handleTabClick(tab.value)}
+			/>
+		{/each}
+	</div>
+
+	<div class={panelClass_}>
+		{@render children?.(selected)}
+	</div>
+</div>

package/dist/layout/tabs/TabGroup.svelte.d.ts

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

package/dist/layout/tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Tab } from './Tab.svelte';
+export { default as TabContent } from './TabContent.svelte';
+export { default as TabGroup } from './TabGroup.svelte';

package/dist/layout/tabs/index.js

@@ -0,0 +1,3 @@
+export { default as Tab } from './Tab.svelte';
+export { default as TabContent } from './TabContent.svelte';
+export { default as TabGroup } from './TabGroup.svelte';