@makolabs/ripple 0.0.1 → 0.0.3

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

@@ -0,0 +1,251 @@
+import { Size } from '../../variants.js';
+export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
+    position: {
+        'top-left': {
+            container: string;
+        };
+        'top-right': {
+            container: string;
+        };
+        'bottom-left': {
+            container: string;
+        };
+        'bottom-right': {
+            container: string;
+        };
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    container: string;
+    section: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    item: string;
+    itemIcon: string;
+}, undefined, {
+    position: {
+        'top-left': {
+            container: string;
+        };
+        'top-right': {
+            container: string;
+        };
+        'bottom-left': {
+            container: string;
+        };
+        'bottom-right': {
+            container: string;
+        };
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    container: string;
+    section: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    item: string;
+    itemIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        'top-left': {
+            container: string;
+        };
+        'top-right': {
+            container: string;
+        };
+        'bottom-left': {
+            container: string;
+        };
+        'bottom-right': {
+            container: string;
+        };
+    };
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            item: string;
+            itemIcon: string;
+            header: string;
+            headerTitle: string;
+            headerSubtitle: string;
+        };
+    };
+    isOpen: {
+        true: {};
+    };
+    iconOnly: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    container: string;
+    section: string;
+    header: string;
+    headerTitle: string;
+    headerSubtitle: string;
+    item: string;
+    itemIcon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/elements/dropdown/dropdown.js

@@ -0,0 +1,95 @@
+import { tv } from '../../helper/cls.js';
+import { Size } from '../../variants.js';
+export const dropdownMenu = tv({
+    slots: {
+        base: '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 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 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: {
+        position: {
+            'top-left': {
+                container: 'origin-bottom-left bottom-full left-0 mb-2'
+            },
+            'top-right': {
+                container: 'origin-bottom-right bottom-full right-0 mb-2'
+            },
+            'bottom-left': {
+                container: 'origin-top-left top-full left-0 mt-2'
+            },
+            'bottom-right': {
+                container: 'origin-top-right top-full right-0 mt-2'
+            }
+        },
+        size: {
+            [Size.XS]: {
+                trigger: 'px-2 py-1 text-xs',
+                item: 'px-2.5 py-1 text-xs',
+                itemIcon: 'mr-1.5 size-3.5',
+                header: 'px-2.5 py-1.5',
+                headerTitle: 'text-xs',
+                headerSubtitle: 'text-xs'
+            },
+            [Size.SM]: {
+                trigger: 'px-2.5 py-1.5 text-xs',
+                item: 'px-3 py-1.5 text-xs',
+                itemIcon: 'mr-2 size-4',
+                header: 'px-3 py-2',
+                headerTitle: 'text-xs',
+                headerSubtitle: 'text-xs'
+            },
+            [Size.BASE]: {
+                trigger: 'px-3 py-2 text-sm',
+                item: 'px-4 py-2 text-sm',
+                itemIcon: 'mr-3 size-5',
+                header: 'px-4 py-3',
+                headerTitle: 'text-sm',
+                headerSubtitle: 'text-sm'
+            },
+            [Size.LG]: {
+                trigger: 'px-4 py-2.5 text-base',
+                item: 'px-5 py-2.5 text-base',
+                itemIcon: 'mr-3 size-6',
+                header: 'px-5 py-3.5',
+                headerTitle: 'text-base',
+                headerSubtitle: 'text-sm'
+            },
+            [Size.XL]: {
+                trigger: 'px-5 py-3 text-lg',
+                item: 'px-6 py-3 text-lg',
+                itemIcon: 'mr-3.5 size-7',
+                header: 'px-6 py-4',
+                headerTitle: 'text-lg',
+                headerSubtitle: 'text-base'
+            },
+            [Size.XXL]: {
+                trigger: 'px-6 py-3.5 text-xl',
+                item: 'px-7 py-3.5 text-xl',
+                itemIcon: 'mr-4 size-8',
+                header: 'px-7 py-5',
+                headerTitle: 'text-xl',
+                headerSubtitle: 'text-lg'
+            }
+        },
+        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,
+        iconOnly: false
+    }
+});

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

@@ -0,0 +1,200 @@
+import { Size } from '../../variants.js';
+export declare const selectTV: import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+            container: string;
+            item: string;
+        };
+    };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    triggerIcon: string;
+    container: string;
+    searchInput: string;
+    list: string;
+    item: string;
+    emptyMessage: string;
+}, undefined, {
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+            container: string;
+            item: string;
+        };
+    };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    triggerIcon: string;
+    container: string;
+    searchInput: string;
+    list: string;
+    item: string;
+    emptyMessage: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        [Size.XS]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.SM]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.BASE]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.LG]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.XL]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+        [Size.XXL]: {
+            trigger: string;
+            triggerIcon: string;
+            container: string;
+            item: string;
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+            container: string;
+            item: string;
+        };
+    };
+    multiple: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    base: string;
+    trigger: string;
+    triggerIcon: string;
+    container: string;
+    searchInput: string;
+    list: string;
+    item: string;
+    emptyMessage: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/elements/dropdown/select.js

@@ -0,0 +1,82 @@
+import { tv } from 'tailwind-variants';
+import { Size } from '../../variants.js';
+export const selectTV = tv({
+    slots: {
+        base: '',
+        trigger: `relative flex items-center justify-between w-full text-left bg-white border
+			border-default-300 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:border-primary-500 focus-within:ring-primary-500 rounded-lg shadow-xs cursor-pointer transition-colors hover:border-default-400`,
+        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-sm origin-top-left top-full left-0 mt-2',
+        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: {
+            [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'
+            },
+            [Size.SM]: {
+                trigger: 'h-8 px-3 py-2 text-sm 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'
+            },
+            [Size.BASE]: {
+                trigger: 'h-10 px-3 py-2 text-base gap-2',
+                triggerIcon: 'h-4 w-4',
+                container: 'max-h-60',
+                item: 'px-3 py-2 text-sm',
+                base: 'w-40'
+            },
+            [Size.LG]: {
+                trigger: 'h-12 px-3 py-2 text-lg gap-2.5',
+                triggerIcon: 'h-5 w-5',
+                container: 'max-h-72',
+                item: 'px-4 py-2.5 text-base',
+                base: 'w-48'
+            },
+            [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'
+            },
+            [Size.XXL]: {
+                trigger: 'h-14 px-6 py-3.5 text-xl gap-4',
+                triggerIcon: 'h-7 w-7',
+                container: 'max-h-96',
+                item: 'px-6 py-3.5 text-xl',
+                base: 'w-64'
+            }
+        },
+        disabled: {
+            true: {
+                trigger: 'opacity-50 cursor-not-allowed hover:border-default-300',
+                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,
+        multiple: false
+    }
+});