@makolabs/ripple 0.0.1 → 0.0.3

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

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

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

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

package/dist/layout/table/table.js

@@ -0,0 +1,141 @@
+import { tv } from 'tailwind-variants';
+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,60 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { tabs } from './tabs.js';
+	import { Color, Size } from '../../index.js';
+	import type { TabProps } from '../../index.js';
+	let {
+		value = '',
+		label = '',
+		icon: Icon = undefined,
+		selected = false,
+		disabled = false,
+		color = Color.PRIMARY,
+		size = Size.BASE,
+		onclick = () => {},
+		variant = 'line'
+	}: TabProps = $props();
+
+	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
+		event.preventDefault();
+		if (!disabled) {
+			onclick(event);
+		}
+	}
+
+	const { trigger } = $derived(
+		tabs({
+			selected,
+			color,
+			size,
+			variant
+		})
+	);
+
+	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 '../../index.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,30 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { getContext } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { TabContentProps } from '../../index.js';
+	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 '../../index.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,62 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import Tab from './Tab.svelte';
+	import { tabs } from './tabs.js';
+	import type { TabsGroupProps } from '../../index.js';
+	import { setContext } from 'svelte';
+	import type { VariantColors, VariantSizes } from '../../index.js';
+
+	let {
+		tabs: tabItems = [],
+		selected = $bindable(''),
+		color = 'primary' as VariantColors,
+		size = 'base' as VariantSizes,
+		variant = 'line',
+		class: className = '',
+		listClass = '',
+		panelClass = '',
+		onchange = () => {},
+		children
+	}: TabsGroupProps = $props();
+
+	const { base, list, panel } = $derived(
+		tabs({
+			color,
+			size,
+			variant
+		})
+	);
+
+	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}
+				{variant}
+				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 { TabsGroupProps } from '../../index.js';
+declare const TabGroup: import("svelte").Component<TabsGroupProps, {}, "selected">;
+type TabGroup = ReturnType<typeof TabGroup>;
+export default TabGroup;

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

@@ -0,0 +1,140 @@
+import { Color, Size } from '../../index.js';
+export declare const tabs: import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.PRIMARY]: {};
+        [Color.SECONDARY]: {};
+        [Color.SUCCESS]: {};
+        [Color.WARNING]: {};
+        [Color.DANGER]: {};
+        [Color.INFO]: {};
+        [Color.DEFAULT]: {};
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+        };
+    };
+    variant: {
+        line: {};
+        pill: {
+            list: string;
+            trigger: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    list: string;
+    trigger: string;
+    panel: string;
+}, undefined, {
+    color: {
+        [Color.PRIMARY]: {};
+        [Color.SECONDARY]: {};
+        [Color.SUCCESS]: {};
+        [Color.WARNING]: {};
+        [Color.DANGER]: {};
+        [Color.INFO]: {};
+        [Color.DEFAULT]: {};
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+        };
+    };
+    variant: {
+        line: {};
+        pill: {
+            list: string;
+            trigger: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    list: string;
+    trigger: string;
+    panel: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.PRIMARY]: {};
+        [Color.SECONDARY]: {};
+        [Color.SUCCESS]: {};
+        [Color.WARNING]: {};
+        [Color.DANGER]: {};
+        [Color.INFO]: {};
+        [Color.DEFAULT]: {};
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+        };
+    };
+    variant: {
+        line: {};
+        pill: {
+            list: string;
+            trigger: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    list: string;
+    trigger: string;
+    panel: string;
+}, undefined, unknown, unknown, undefined>>;