@makolabs/ripple 0.0.1-dev.52 → 0.0.1-dev.54

package/dist/elements/accordion/accordion.js

@@ -69,8 +69,8 @@ export const accordion = tv({
                 header: 'hover:bg-default-50'
             },
             false: {
-                base: 'hover:shadow-none cursor-default',
-                header: ''
+                base: 'hover:shadow-none',
+                header: 'cursor-default'
             }
         },
         iconPosition: {

package/dist/index.d.ts

@@ -331,6 +331,42 @@ export { default as Select } from './elements/dropdown/Select.svelte';
 export { default as Card } from './layout/card/Card.svelte';
 export { default as StatsCard } from './layout/card/StatsCard.svelte';
 export { default as Alert } from './elements/alert/Alert.svelte';
+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;
+    variant?: 'line' | 'pill';
+    onclick?: (event: Event) => void;
+};
+export type TabsGroupProps = {
+    tabs: TabItem[];
+    selected?: string;
+    color?: VariantColors;
+    size?: VariantSizes;
+    variant?: 'line' | 'pill';
+    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 { default as Tab } from './layout/tabs/Tab.svelte';
 export { default as TabContent } from './layout/tabs/TabContent.svelte';
 export { default as TabGroup } from './layout/tabs/TabGroup.svelte';

package/dist/index.js

@@ -30,7 +30,6 @@ export { default as Card } from './layout/card/Card.svelte';
 export { default as StatsCard } from './layout/card/StatsCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';
-// Elements - Tabs
 export { default as Tab } from './layout/tabs/Tab.svelte';
 export { default as TabContent } from './layout/tabs/TabContent.svelte';
 export { default as TabGroup } from './layout/tabs/TabGroup.svelte';

package/dist/layout/tabs/Tab.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { tabs, type TabProps } from './tabs.js';
-
+	import { tabs } from './tabs.js';
+	import type { VariantColors, VariantSizes } from '../../index.js';
+	import type { TabProps } from '../../index.js';
 	let {
 		value = '',
 		label = '',
 		icon: Icon = undefined,
 		selected = false,
 		disabled = false,
-		color = 'primary',
-		size = 'base',
+		color = 'primary' as VariantColors,
+		size = 'base' as VariantSizes,
 		onclick = () => {}
 	}: TabProps = $props();
 

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,14 +1,17 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import Tab from './Tab.svelte';
-	import { tabs, type TabsGroupProps } 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 = '',
@@ -19,7 +22,8 @@
 	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 TabsGroupProps } from './tabs.js';
+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 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]>;
-};
+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;
         };
     };

package/dist/layout/tabs/tabs.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color, Size } from '../../index.js';
 export const tabs = tv({
     slots: {
         base: 'w-full',
@@ -8,34 +9,41 @@ export const tabs = tv({
     },
     variants: {
         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: 'px-2 py-1 text-xs'
             },
-            sm: {
+            [Size.SM]: {
                 trigger: 'px-2 py-1 text-xs'
             },
-            base: {
+            [Size.BASE]: {
                 trigger: 'px-3 py-2 text-sm'
             },
-            lg: {
+            [Size.LG]: {
                 trigger: 'px-4 py-2.5 text-base'
             },
-            xl: {
+            [Size.XL]: {
                 trigger: 'px-5 py-3 text-lg'
             },
-            '2xl': {
+            [Size.XXL]: {
                 trigger: 'px-6 py-4 text-xl'
             }
         },
+        variant: {
+            line: {},
+            pill: {
+                list: 'flex border-none gap-2 p-1',
+                trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
+            }
+        },
         selected: {
             true: {},
             false: {}
@@ -44,14 +52,16 @@ export const tabs = tv({
     compoundVariants: [
         // LINE VARIANT - PRIMARY
         {
-            color: 'primary',
+            variant: 'line',
+            color: Color.PRIMARY,
             selected: true,
             class: {
                 trigger: 'text-primary-600 border-b-2 border-primary-500'
             }
         },
         {
-            color: 'primary',
+            variant: 'line',
+            color: Color.PRIMARY,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-primary-500'
@@ -59,14 +69,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - SECONDARY
         {
-            color: 'secondary',
+            variant: 'line',
+            color: Color.SECONDARY,
             selected: true,
             class: {
                 trigger: 'text-secondary-600 border-b-2 border-secondary-500'
             }
         },
         {
-            color: 'secondary',
+            variant: 'line',
+            color: Color.SECONDARY,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-secondary-500'
@@ -74,14 +86,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - SUCCESS
         {
-            color: 'success',
+            variant: 'line',
+            color: Color.SUCCESS,
             selected: true,
             class: {
                 trigger: 'text-success-600 border-b-2 border-success-500'
             }
         },
         {
-            color: 'success',
+            variant: 'line',
+            color: Color.SUCCESS,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-success-500'
@@ -89,14 +103,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - WARNING
         {
-            color: 'warning',
+            variant: 'line',
+            color: Color.WARNING,
             selected: true,
             class: {
                 trigger: 'text-warning-600 border-b-2 border-warning-500'
             }
         },
         {
-            color: 'warning',
+            variant: 'line',
+            color: Color.WARNING,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-warning-500'
@@ -104,14 +120,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - DANGER
         {
-            color: 'danger',
+            variant: 'line',
+            color: Color.DANGER,
             selected: true,
             class: {
                 trigger: 'text-danger-600 border-b-2 border-danger-500'
             }
         },
         {
-            color: 'danger',
+            variant: 'line',
+            color: Color.DANGER,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-danger-500'
@@ -119,14 +137,16 @@ export const tabs = tv({
         },
         // LINE VARIANT - INFO
         {
-            color: 'info',
+            variant: 'line',
+            color: Color.INFO,
             selected: true,
             class: {
                 trigger: 'text-info-600 border-b-2 border-info-500'
             }
         },
         {
-            color: 'info',
+            variant: 'line',
+            color: Color.INFO,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-info-500'
@@ -134,23 +154,145 @@ export const tabs = tv({
         },
         // LINE VARIANT - DEFAULT
         {
-            color: 'default',
+            variant: 'line',
+            color: Color.DEFAULT,
             selected: true,
             class: {
                 trigger: 'text-default-600 border-b-2 border-default-500'
             }
         },
         {
-            color: 'default',
+            variant: 'line',
+            color: Color.DEFAULT,
             selected: false,
             class: {
                 trigger: 'text-default-500 hover:text-default-700'
             }
+        },
+        // PILL VARIANT - PRIMARY
+        {
+            variant: 'pill',
+            color: Color.PRIMARY,
+            selected: true,
+            class: {
+                trigger: 'bg-primary-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.PRIMARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - SECONDARY
+        {
+            variant: 'pill',
+            color: Color.SECONDARY,
+            selected: true,
+            class: {
+                trigger: 'bg-secondary-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.SECONDARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - SUCCESS
+        {
+            variant: 'pill',
+            color: Color.SUCCESS,
+            selected: true,
+            class: {
+                trigger: 'bg-success-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.SUCCESS,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - WARNING
+        {
+            variant: 'pill',
+            color: Color.WARNING,
+            selected: true,
+            class: {
+                trigger: 'bg-warning-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.WARNING,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - DANGER
+        {
+            variant: 'pill',
+            color: Color.DANGER,
+            selected: true,
+            class: {
+                trigger: 'bg-danger-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.DANGER,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - INFO
+        {
+            variant: 'pill',
+            color: Color.INFO,
+            selected: true,
+            class: {
+                trigger: 'bg-info-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.INFO,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - DEFAULT
+        {
+            variant: 'pill',
+            color: Color.DEFAULT,
+            selected: true,
+            class: {
+                trigger: 'bg-default-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.DEFAULT,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
         }
     ],
     defaultVariants: {
-        color: 'primary',
+        color: Color.PRIMARY,
         size: 'base',
+        variant: 'line',
         selected: false
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.52",
+	"version": "0.0.1-dev.54",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",