@makolabs/ripple 0.0.1-dev.1 → 0.0.1-dev.10

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 TabsGroupProps } from './tabs.js';
+	import { setContext } from 'svelte';
+
+	let {
+		tabs: tabItems = [],
+		selected = $bindable(''),
+		color = 'primary',
+		size = 'base',
+		class: className = '',
+		listClass = '',
+		panelClass = '',
+		onchange = () => {},
+		children
+	}: TabsGroupProps = $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 TabsGroupProps } from './tabs.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,155 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Component, Snippet } from 'svelte';
+import type { VariantColors, VariantSizes } from '../../index.js';
+export type TabItem = {
+    value: string;
+    label: string;
+    icon?: Component;
+    disabled?: boolean;
+};
+export type TabProps = {
+    value: string;
+    label: string;
+    icon?: Component;
+    selected?: boolean;
+    disabled?: boolean;
+    color?: VariantColors;
+    size?: VariantSizes;
+    onclick?: (event: Event) => void;
+};
+export type TabsGroupProps = {
+    tabs: TabItem[];
+    selected?: string;
+    color?: VariantColors;
+    size?: VariantSizes;
+    class?: ClassValue;
+    listClass?: ClassValue;
+    triggerClass?: ClassValue;
+    panelClass?: ClassValue;
+    children?: Snippet<[active: string]>;
+    onchange?: (value: string) => void;
+};
+export type TabContentProps = {
+    value: string;
+    persisted?: boolean;
+    panelClass?: ClassValue;
+    children?: Snippet<[value: string]>;
+};
+export declare const tabs: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
+    };
+    size: {
+        xs: {
+            trigger: string;
+        };
+        sm: {
+            trigger: string;
+        };
+        base: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+        xl: {
+            trigger: string;
+        };
+        '2xl': {
+            trigger: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    list: string;
+    trigger: string;
+    panel: string;
+}, undefined, {
+    color: {
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
+    };
+    size: {
+        xs: {
+            trigger: string;
+        };
+        sm: {
+            trigger: string;
+        };
+        base: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+        xl: {
+            trigger: string;
+        };
+        '2xl': {
+            trigger: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    list: string;
+    trigger: string;
+    panel: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
+    };
+    size: {
+        xs: {
+            trigger: string;
+        };
+        sm: {
+            trigger: string;
+        };
+        base: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+        xl: {
+            trigger: string;
+        };
+        '2xl': {
+            trigger: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    list: string;
+    trigger: string;
+    panel: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/layout/tabs/tabs.js

@@ -0,0 +1,156 @@
+import { tv } from 'tailwind-variants';
+export const tabs = tv({
+    slots: {
+        base: 'w-full',
+        list: 'flex border-b border-default-200',
+        trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer -mb-px border-b-2 border-transparent',
+        panel: 'mt-4 px-3'
+    },
+    variants: {
+        color: {
+            primary: {},
+            secondary: {},
+            success: {},
+            warning: {},
+            danger: {},
+            info: {},
+            default: {}
+        },
+        size: {
+            xs: {
+                trigger: 'px-2 py-1 text-xs'
+            },
+            sm: {
+                trigger: 'px-2 py-1 text-xs'
+            },
+            base: {
+                trigger: 'px-3 py-2 text-sm'
+            },
+            lg: {
+                trigger: 'px-4 py-2.5 text-base'
+            },
+            xl: {
+                trigger: 'px-5 py-3 text-lg'
+            },
+            '2xl': {
+                trigger: 'px-6 py-4 text-xl'
+            }
+        },
+        selected: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        // LINE VARIANT - PRIMARY
+        {
+            color: 'primary',
+            selected: true,
+            class: {
+                trigger: 'text-primary-600 border-b-2 border-primary-500'
+            }
+        },
+        {
+            color: 'primary',
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-primary-500'
+            }
+        },
+        // LINE VARIANT - SECONDARY
+        {
+            color: 'secondary',
+            selected: true,
+            class: {
+                trigger: 'text-secondary-600 border-b-2 border-secondary-500'
+            }
+        },
+        {
+            color: 'secondary',
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-secondary-500'
+            }
+        },
+        // LINE VARIANT - SUCCESS
+        {
+            color: 'success',
+            selected: true,
+            class: {
+                trigger: 'text-success-600 border-b-2 border-success-500'
+            }
+        },
+        {
+            color: 'success',
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-success-500'
+            }
+        },
+        // LINE VARIANT - WARNING
+        {
+            color: 'warning',
+            selected: true,
+            class: {
+                trigger: 'text-warning-600 border-b-2 border-warning-500'
+            }
+        },
+        {
+            color: 'warning',
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-warning-500'
+            }
+        },
+        // LINE VARIANT - DANGER
+        {
+            color: 'danger',
+            selected: true,
+            class: {
+                trigger: 'text-danger-600 border-b-2 border-danger-500'
+            }
+        },
+        {
+            color: 'danger',
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-danger-500'
+            }
+        },
+        // LINE VARIANT - INFO
+        {
+            color: 'info',
+            selected: true,
+            class: {
+                trigger: 'text-info-600 border-b-2 border-info-500'
+            }
+        },
+        {
+            color: 'info',
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-info-500'
+            }
+        },
+        // LINE VARIANT - DEFAULT
+        {
+            color: 'default',
+            selected: true,
+            class: {
+                trigger: 'text-default-600 border-b-2 border-default-500'
+            }
+        },
+        {
+            color: 'default',
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-default-700'
+            }
+        }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        size: 'base',
+        selected: false
+    }
+});