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

package/dist/elements/dropdown/dropdown.d.ts

@@ -1,6 +1,4 @@
-import type { Component, Snippet } from 'svelte';
-import type { ClassValue } from 'tailwind-variants';
-import { type VariantSizes } from '../../types/variants.js';
+import { Size } from '../../variants.js';
 export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     position: {
         'top-left': {
@@ -17,7 +15,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -25,7 +23,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -33,7 +31,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -41,7 +39,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -49,7 +47,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -57,7 +55,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        "2xl": {
+        [Size.XXL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -69,6 +67,11 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     isOpen: {
         true: {};
     };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -95,7 +98,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -103,7 +106,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -111,7 +114,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -119,7 +122,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -127,7 +130,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -135,7 +138,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        "2xl": {
+        [Size.XXL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -147,6 +150,11 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     isOpen: {
         true: {};
     };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -173,7 +181,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -181,7 +189,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -189,7 +197,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -197,7 +205,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -205,7 +213,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -213,7 +221,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        "2xl": {
+        [Size.XXL]: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -225,6 +233,11 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     isOpen: {
         true: {};
     };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -236,39 +249,3 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     item: string;
     itemIcon: string;
 }, undefined, unknown, unknown, undefined>>;
-export type DropdownItem = {
-    label: string;
-    href?: string;
-    icon?: Component;
-    onclick?: () => void;
-    active?: boolean;
-    disabled?: boolean;
-};
-export type DropSection = {
-    items: DropdownItem[];
-};
-export type DropHeaderConfig = {
-    title?: string;
-    subtitle?: string;
-    content?: Snippet<[]>;
-    class?: ClassValue;
-    titleClass?: ClassValue;
-    subtitleClass?: ClassValue;
-    onclick?: () => void;
-};
-export type DropdownMenuProps = {
-    open?: boolean;
-    sections: DropSection[];
-    label?: string;
-    icon?: Component;
-    triggerContent?: Snippet<[]>;
-    triggerClass?: ClassValue;
-    containerClass?: ClassValue;
-    itemClass?: ClassValue;
-    class?: ClassValue;
-    size?: VariantSizes;
-    disabled?: boolean;
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    width?: string;
-    header?: DropHeaderConfig;
-};

package/dist/elements/dropdown/dropdown.js

@@ -1,15 +1,15 @@
 import { tv } from '../../helper/cls.js';
-import { Size } from '../../types/variants.js';
+import { Size } from '../../variants.js';
 export const dropdownMenu = tv({
     slots: {
         base: 'relative inline-block text-left',
-        trigger: 'inline-flex w-full justify-center items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-default-900 shadow-xs ring-1 ring-inset ring-default-300 hover:bg-default-50',
+        trigger: 'inline-flex w-full justify-center items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-default-900 shadow-xs ring-1 ring-inset ring-default-300 hover:bg-default-50 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
         container: 'absolute z-50 mt-2 origin-top-right divide-y divide-default-100 rounded-md bg-white ring-1 ring-black/5 shadow-lg focus:outline-none',
         section: 'py-1',
         header: 'flex flex-col px-4 py-2 w-full items-start',
         headerTitle: 'text-sm font-medium text-default-900',
         headerSubtitle: 'text-sm text-default-500',
-        item: 'w-full group flex items-center px-4 py-2 text-sm text-default-700 hover:bg-default-100 hover:text-default-900 data-[active=true]:bg-default-100 data-[active=true]:text-default-900',
+        item: 'w-full group flex items-center px-4 py-2 text-sm text-default-700 hover:bg-default-100 hover:text-default-900 data-[active=true]:bg-default-100 data-[active=true]:text-default-900 disabled:opacity-50 disabled:cursor-not-allowed',
         itemIcon: 'mr-3 size-5 text-default-400 group-hover:text-default-500 group-data-[active=true]:text-default-500'
     },
     variants: {
@@ -79,11 +79,17 @@ export const dropdownMenu = tv({
         },
         isOpen: {
             true: {}
+        },
+        iconOnly: {
+            true: {
+                trigger: 'inline-flex justify-center items-center cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed bg-transparent shadow-none ring-0 hover:bg-transparent'
+            }
         }
     },
     defaultVariants: {
         position: 'bottom-right',
         size: Size.BASE,
-        isOpen: false
+        isOpen: false,
+        iconOnly: false
     }
 });

package/dist/elements/dropdown/select.d.ts

@@ -1,44 +1,42 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { VariantSizes } from '../../types/variants.js';
-import type { Component, Snippet } from 'svelte';
+import { Size } from '../../variants.js';
 export declare const selectTV: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        '2xl': {
+        [Size.XXL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -53,6 +51,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -64,42 +67,42 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, undefined, {
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        '2xl': {
+        [Size.XXL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -114,6 +117,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -125,42 +133,42 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [Size.XS]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        sm: {
+        [Size.SM]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        base: {
+        [Size.BASE]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        lg: {
+        [Size.LG]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        xl: {
+        [Size.XL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        '2xl': {
+        [Size.XXL]: {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -175,6 +183,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
 }, {
     base: string;
     trigger: string;
@@ -185,36 +198,3 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     item: string;
     emptyMessage: string;
 }, undefined, unknown, unknown, undefined>>;
-export type SelectItem = {
-    label: string;
-    value: string;
-    disabled?: boolean;
-    icon?: Component;
-};
-export type SelectProps = {
-    items: SelectItem[];
-    value?: string;
-    placeholder?: string;
-    searchable?: boolean;
-    disabled?: boolean;
-    size?: VariantSizes;
-    class?: ClassValue;
-    triggerClass?: ClassValue;
-    containerClass?: ClassValue;
-    listClass?: ClassValue;
-    itemClass?: ClassValue;
-    searchInputClass?: ClassValue;
-    emptyMessageText?: string;
-    clearable?: boolean;
-    icon?: Component;
-    iconClass?: ClassValue;
-    triggerContent?: Snippet<[{
-        selectedItem?: SelectItem;
-        open: boolean;
-    }]>;
-    onselect?: ({ value }: {
-        value?: string;
-    }) => void;
-    onopen?: () => void;
-    onclose?: () => void;
-};

package/dist/elements/dropdown/select.js

@@ -1,57 +1,59 @@
 import { tv } from 'tailwind-variants';
+import { Size } from '../../variants.js';
 export const selectTV = tv({
     slots: {
         base: 'relative inline-block',
-        trigger: `flex items-center justify-between w-full text-left focus:outline-none bg-white border
+        trigger: `flex items-center justify-between w-full text-left bg-white border
 			border-default-200 text-default-700 hover:border-default-300 rounded-md cursor-pointer`,
         triggerIcon: 'transition-transform duration-200 text-default-500',
         container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-md',
-        searchInput: 'w-full outline-none px-2 py-1.5 text-sm h-10 border-b border-b-default-200',
-        list: 'py-1 max-h-60 overflow-auto h-full',
-        item: `w-full px-3 py-2 text-sm text-left hover:bg-default-100 focus:bg-default-100
-		data-[selected=true]:bg-info-100 data-[selected=true]:text-info-500 truncate
-		data-[selected=true]:font-medium cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-		data-[highlighted=true]:bg-default-100 data-[highlighted=true]:text-default-700`,
+        searchInput: 'flex items-center gap-x-3 w-full outline-none px-2 h-10 border-b border-b-default-200',
+        list: 'py-1 max-h-60 overflow-x-clip overflow-y-auto h-full',
+        item: `w-full px-3 py-2 text-sm text-left
+		data-[highlighted=true]:bg-default-100 data-[highlighted=true]:text-default-700
+		data-[selected=true]:bg-info-100 data-[selected=true]:text-info-500 data-[selected=true]:font-medium
+		data-[selected=true]:data-[highlighted=true]:bg-info-200 data-[selected=true]:data-[highlighted=true]:text-info-500
+		cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`,
         emptyMessage: 'px-3 py-2 text-sm text-default-500'
     },
     variants: {
         size: {
-            xs: {
+            [Size.XS]: {
                 trigger: 'h-6 px-2 py-1 text-xs gap-1',
                 triggerIcon: 'h-3 w-3',
                 container: 'max-h-40',
                 item: 'px-2 py-1 text-xs',
                 base: 'w-24'
             },
-            sm: {
+            [Size.SM]: {
                 trigger: 'h-8 px-2.5 py-1.5 text-xs gap-1.5',
                 triggerIcon: 'h-3.5 w-3.5',
                 container: 'max-h-48',
                 item: 'px-2.5 py-1.5 text-xs',
                 base: 'w-32'
             },
-            base: {
+            [Size.BASE]: {
                 trigger: 'h-10 px-3 py-2 text-sm gap-2',
                 triggerIcon: 'h-4 w-4',
                 container: 'max-h-60',
                 item: 'px-3 py-2 text-sm',
                 base: 'w-40'
             },
-            lg: {
+            [Size.LG]: {
                 trigger: 'h-11 px-4 py-2.5 text-base gap-2.5',
                 triggerIcon: 'h-5 w-5',
                 container: 'max-h-72',
                 item: 'px-4 py-2.5 text-base',
                 base: 'w-48'
             },
-            xl: {
+            [Size.XL]: {
                 trigger: 'h-12 px-5 py-3 text-lg gap-3',
                 triggerIcon: 'h-6 w-6',
                 container: 'max-h-80',
                 item: 'px-5 py-3 text-lg',
                 base: 'w-56'
             },
-            '2xl': {
+            [Size.XXL]: {
                 trigger: 'h-14 px-6 py-3.5 text-xl gap-4',
                 triggerIcon: 'h-7 w-7',
                 container: 'max-h-96',
@@ -65,10 +67,16 @@ export const selectTV = tv({
                 container: 'pointer-events-none',
                 item: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
             }
+        },
+        multiple: {
+            true: {
+                trigger: 'flex-wrap min-h-[2.5rem]'
+            }
         }
     },
     defaultVariants: {
         size: 'base',
-        disabled: false
+        disabled: false,
+        multiple: false
     }
 });