@makolabs/ripple 0.0.1-dev.8 → 0.0.1-dev.80

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

@@ -1,4 +1,4 @@
-import { type TableProps } from './table.js';
+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

@@ -1,24 +1,3 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
-import type { VariantColors, VariantSizes } from '../../index.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: {
@@ -275,29 +254,3 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     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

@@ -1,12 +1,4 @@
 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',

package/dist/layout/tabs/Tab.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { tabs, type TabProps } from './tabs.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 = 'primary',
-		size = 'base',
-		onclick = () => {}
+		color = Color.PRIMARY,
+		size = Size.BASE,
+		onclick = () => {},
+		variant = 'line'
 	}: TabProps = $props();
 
 	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
@@ -24,7 +26,8 @@
 		tabs({
 			selected,
 			color,
-			size
+			size,
+			variant
 		})
 	);
 

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

@@ -1,4 +1,4 @@
-import { type TabProps } from './tabs.js';
+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

@@ -1,9 +1,8 @@
 <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';
-
+	import type { TabContentProps } from '../../index.js';
 	let { value = '', persisted = false, panelClass = '', children }: TabContentProps = $props();
 
 	const getSelected = getContext('getSelected') as () => string;

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

@@ -1,4 +1,4 @@
-import type { TabContentProps } from './tabs.js';
+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

@@ -1,25 +1,29 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import Tab from './Tab.svelte';
-	import { tabs, type TabsProps } from './tabs.js';
+	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',
-		size = 'base',
+		color = 'primary' as VariantColors,
+		size = 'base' as VariantSizes,
+		variant = 'line',
 		class: className = '',
 		listClass = '',
 		panelClass = '',
 		onchange = () => {},
 		children
-	}: TabsProps = $props();
+	}: TabsGroupProps = $props();
 
 	const { base, list, panel } = $derived(
 		tabs({
 			color,
-			size
+			size,
+			variant
 		})
 	);
 
@@ -46,6 +50,7 @@
 				disabled={tab.disabled}
 				{color}
 				{size}
+				{variant}
 				onclick={() => handleTabClick(tab.value)}
 			/>
 		{/each}

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

@@ -1,4 +1,4 @@
-import { type TabsProps } from './tabs.js';
-declare const TabGroup: import("svelte").Component<TabsProps, {}, "selected">;
+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

@@ -1,67 +1,38 @@
-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 TabsProps = {
-    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]>;
-};
+import { Color, Size } from '../../index.js';
 export declare const tabs: import("tailwind-variants").TVReturnType<{
     color: {
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-        info: {};
-        default: {};
+        [Color.PRIMARY]: {};
+        [Color.SECONDARY]: {};
+        [Color.SUCCESS]: {};
+        [Color.WARNING]: {};
+        [Color.DANGER]: {};
+        [Color.INFO]: {};
+        [Color.DEFAULT]: {};
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
         };
-        '2xl': {
+        [Size.XXL]: {
+            trigger: string;
+        };
+    };
+    variant: {
+        line: {};
+        pill: {
+            list: string;
             trigger: string;
         };
     };
@@ -76,31 +47,38 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     panel: string;
 }, undefined, {
     color: {
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-        info: {};
-        default: {};
+        [Color.PRIMARY]: {};
+        [Color.SECONDARY]: {};
+        [Color.SUCCESS]: {};
+        [Color.WARNING]: {};
+        [Color.DANGER]: {};
+        [Color.INFO]: {};
+        [Color.DEFAULT]: {};
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
         };
-        '2xl': {
+        [Size.XXL]: {
+            trigger: string;
+        };
+    };
+    variant: {
+        line: {};
+        pill: {
+            list: string;
             trigger: string;
         };
     };
@@ -115,31 +93,38 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     panel: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-        info: {};
-        default: {};
+        [Color.PRIMARY]: {};
+        [Color.SECONDARY]: {};
+        [Color.SUCCESS]: {};
+        [Color.WARNING]: {};
+        [Color.DANGER]: {};
+        [Color.INFO]: {};
+        [Color.DEFAULT]: {};
     };
     size: {
-        xs: {
+        [Size.XS]: {
+            trigger: string;
+        };
+        [Size.SM]: {
             trigger: string;
         };
-        sm: {
+        [Size.BASE]: {
             trigger: string;
         };
-        base: {
+        [Size.LG]: {
             trigger: string;
         };
-        lg: {
+        [Size.XL]: {
             trigger: string;
         };
-        xl: {
+        [Size.XXL]: {
             trigger: string;
         };
-        '2xl': {
+    };
+    variant: {
+        line: {};
+        pill: {
+            list: string;
             trigger: string;
         };
     };