@particle-network/ui-react 0.7.0-beta.2 → 0.7.0-beta.20

package/dist/components/UXTable/table-theme.d.ts

@@ -0,0 +1,452 @@
+import type { VariantProps } from 'tailwind-variants';
+/**
+ * Table **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base, table, thead, tbody, tr, th, td, tfoot} = table({...})
+ *
+ * <div className={base()}>
+ *   <table className={table()}>
+ *    <thead className={thead()}>
+ *      <tr className={tr()}>
+ *        <th className={th()}>...</th>
+ *        <th className={th()}>...</th>
+ *      </tr>
+ *    </thead>
+ *    <tbody className={tbody()}>
+ *      <tr className={tr()}>
+ *        <td className={td()}>...</td>
+ *        <td className={td()}>...</td>
+ *      </tr>
+ *      <tr className={tr()}>
+ *        <td className={td()}>...</td>
+ *        <td className={td()}>...</td>
+ *     </tr>
+ *   </tbody>
+ *    <tfoot className={tfoot()}>
+ *      <tr className={tr()}>
+ *        <td className={td()}>...</td>
+ *        <td className={td()}>...</td>
+ *      </tr>
+ *    </tfoot>
+ *  </table>
+ * </div>
+ * ```
+ */
+declare const table: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            td: string;
+        };
+        primary: {
+            td: string;
+        };
+        secondary: {
+            td: string;
+        };
+        success: {
+            td: string;
+        };
+        warning: {
+            td: string;
+        };
+        danger: {
+            td: string;
+        };
+    };
+    size: {
+        md: {
+            th: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    layout: {
+        auto: {
+            table: string;
+        };
+        fixed: {
+            table: string;
+        };
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    hideHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    isStriped: {
+        true: {
+            td: string[];
+        };
+    };
+    isCompact: {
+        true: {
+            td: string;
+        };
+        false: {};
+    };
+    isHeaderSticky: {
+        true: {
+            thead: string;
+        };
+    };
+    isSelectable: {
+        true: {
+            tr: string;
+            td: string[];
+        };
+    };
+    isMultiSelectable: {
+        true: {
+            td: string[];
+        };
+        false: {
+            td: string[];
+        };
+    };
+    radius: {
+        none: {
+            wrapper: string;
+            th: never[];
+            td: never[];
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            wrapper: string;
+            table: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string[];
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string[];
+    th: string[];
+    td: string[];
+    tfoot: string;
+    sortIcon: string[];
+    emptyWrapper: string;
+    loadingWrapper: string;
+}, undefined, {
+    color: {
+        default: {
+            td: string;
+        };
+        primary: {
+            td: string;
+        };
+        secondary: {
+            td: string;
+        };
+        success: {
+            td: string;
+        };
+        warning: {
+            td: string;
+        };
+        danger: {
+            td: string;
+        };
+    };
+    size: {
+        md: {
+            th: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    layout: {
+        auto: {
+            table: string;
+        };
+        fixed: {
+            table: string;
+        };
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    hideHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    isStriped: {
+        true: {
+            td: string[];
+        };
+    };
+    isCompact: {
+        true: {
+            td: string;
+        };
+        false: {};
+    };
+    isHeaderSticky: {
+        true: {
+            thead: string;
+        };
+    };
+    isSelectable: {
+        true: {
+            tr: string;
+            td: string[];
+        };
+    };
+    isMultiSelectable: {
+        true: {
+            td: string[];
+        };
+        false: {
+            td: string[];
+        };
+    };
+    radius: {
+        none: {
+            wrapper: string;
+            th: never[];
+            td: never[];
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            wrapper: string;
+            table: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string[];
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string[];
+    th: string[];
+    td: string[];
+    tfoot: string;
+    sortIcon: string[];
+    emptyWrapper: string;
+    loadingWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            td: string;
+        };
+        primary: {
+            td: string;
+        };
+        secondary: {
+            td: string;
+        };
+        success: {
+            td: string;
+        };
+        warning: {
+            td: string;
+        };
+        danger: {
+            td: string;
+        };
+    };
+    size: {
+        md: {
+            th: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+    };
+    layout: {
+        auto: {
+            table: string;
+        };
+        fixed: {
+            table: string;
+        };
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    hideHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    isStriped: {
+        true: {
+            td: string[];
+        };
+    };
+    isCompact: {
+        true: {
+            td: string;
+        };
+        false: {};
+    };
+    isHeaderSticky: {
+        true: {
+            thead: string;
+        };
+    };
+    isSelectable: {
+        true: {
+            tr: string;
+            td: string[];
+        };
+    };
+    isMultiSelectable: {
+        true: {
+            td: string[];
+        };
+        false: {
+            td: string[];
+        };
+    };
+    radius: {
+        none: {
+            wrapper: string;
+            th: never[];
+            td: never[];
+        };
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            wrapper: string;
+            table: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string[];
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string[];
+    th: string[];
+    td: string[];
+    tfoot: string;
+    sortIcon: string[];
+    emptyWrapper: string;
+    loadingWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableVariantProps = VariantProps<typeof table>;
+export type TableSlots = keyof ReturnType<typeof table>;
+export type TableReturnType = ReturnType<typeof table>;
+export { table };

package/dist/components/UXTable/table-theme.js

@@ -0,0 +1,282 @@
+import { tv } from "@heroui/theme";
+import { dataFocusVisibleClasses } from "../../utils/index.js";
+const table = tv({
+    slots: {
+        base: 'flex flex-col relative gap-4',
+        wrapper: [
+            'p-0',
+            'z-0',
+            'flex',
+            'flex-col',
+            'relative',
+            'justify-between',
+            'gap-5',
+            'shadow-small',
+            'bg-content1',
+            'overflow-auto'
+        ],
+        table: 'min-w-full h-auto',
+        thead: "[&>tr]:first:rounded-lg after:content-[''] after:table-row after:h-[5px] [&>tr]:first:border-b [&>tr]:first:border-divider",
+        tbody: 'after:block',
+        tr: [
+            'group/tr',
+            'outline-solid outline-transparent',
+            ...dataFocusVisibleClasses
+        ],
+        th: [
+            'group/th',
+            'px-2.5',
+            'h-auto',
+            'text-start',
+            'align-middle',
+            'bg-transparent',
+            'whitespace-nowrap',
+            'text-foreground-300',
+            'text-[11px]',
+            'font-medium',
+            'first:rounded-s-lg',
+            'last:rounded-e-lg',
+            'outline-solid outline-transparent',
+            'data-[sortable=true]:cursor-pointer',
+            'data-[hover=true]:text-foreground-400',
+            ...dataFocusVisibleClasses
+        ],
+        td: [
+            'py-2',
+            'px-2.5',
+            'relative',
+            'align-middle',
+            'whitespace-normal',
+            'text-small',
+            'font-medium',
+            'outline-solid outline-transparent',
+            '[&>*]:z-1',
+            '[&>*]:relative',
+            ...dataFocusVisibleClasses,
+            'before:pointer-events-none',
+            "before:content-['']",
+            'before:absolute',
+            'before:z-0',
+            'before:inset-0',
+            'before:opacity-0',
+            'data-[selected=true]:before:opacity-100',
+            'before:bg-default/60',
+            'data-[selected=true]:text-default-foreground',
+            'first:before:rounded-l-md last:before:rounded-r-md',
+            'group-data-[disabled=true]/tr:text-foreground-300',
+            'group-data-[disabled=true]/tr:cursor-not-allowed'
+        ],
+        tfoot: '',
+        sortIcon: [
+            'ms-2',
+            'mb-px',
+            'opacity-0',
+            'text-inherit',
+            'inline-block',
+            'transition-transform-opacity',
+            'data-[visible=true]:opacity-100',
+            'group-data-[hover=true]/th:opacity-100',
+            'data-[direction=ascending]:rotate-180'
+        ],
+        emptyWrapper: 'text-foreground-400 align-middle text-center h-40',
+        loadingWrapper: 'absolute inset-0 flex items-center justify-center'
+    },
+    variants: {
+        color: {
+            default: {
+                td: 'before:bg-default/60 data-[selected=true]:text-default-foreground'
+            },
+            primary: {
+                td: 'before:bg-primary/20 data-[selected=true]:text-primary'
+            },
+            secondary: {
+                td: 'before:bg-secondary/20 data-[selected=true]:text-secondary'
+            },
+            success: {
+                td: 'before:bg-success/20 data-[selected=true]:text-success-600 dark:data-[selected=true]:text-success'
+            },
+            warning: {
+                td: 'before:bg-warning/20 data-[selected=true]:text-warning-600 dark:data-[selected=true]:text-warning'
+            },
+            danger: {
+                td: 'before:bg-danger/20 data-[selected=true]:text-danger dark:data-[selected=true]:text-danger-500'
+            }
+        },
+        size: {
+            md: {
+                th: 'py-md'
+            },
+            lg: {
+                th: 'py-5',
+                td: 'py-lg'
+            }
+        },
+        layout: {
+            auto: {
+                table: 'table-auto'
+            },
+            fixed: {
+                table: 'table-fixed'
+            }
+        },
+        shadow: {
+            none: {
+                wrapper: 'shadow-none'
+            },
+            sm: {
+                wrapper: 'shadow-small'
+            },
+            md: {
+                wrapper: 'shadow-medium'
+            },
+            lg: {
+                wrapper: 'shadow-large'
+            }
+        },
+        hideHeader: {
+            true: {
+                thead: 'hidden'
+            }
+        },
+        isStriped: {
+            true: {
+                td: [
+                    'group-data-[odd=true]/tr:before:bg-default-100',
+                    'group-data-[odd=true]/tr:before:opacity-100',
+                    'group-data-[odd=true]/tr:before:-z-10'
+                ]
+            }
+        },
+        isCompact: {
+            true: {
+                td: 'py-1'
+            },
+            false: {}
+        },
+        isHeaderSticky: {
+            true: {
+                thead: 'sticky top-0 z-20 [&>tr]:first:shadow-small'
+            }
+        },
+        isSelectable: {
+            true: {
+                tr: 'cursor-default',
+                td: [
+                    'group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:bg-default-100',
+                    'group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:opacity-70'
+                ]
+            }
+        },
+        isMultiSelectable: {
+            true: {
+                td: [
+                    'group-data-[first=true]/tr:first:before:rounded-ss-lg',
+                    'group-data-[first=true]/tr:last:before:rounded-se-lg',
+                    'group-data-[middle=true]/tr:before:rounded-none',
+                    'group-data-[last=true]/tr:first:before:rounded-es-lg',
+                    'group-data-[last=true]/tr:last:before:rounded-ee-lg'
+                ]
+            },
+            false: {
+                td: [
+                    'first:before:rounded-s-lg',
+                    'last:before:rounded-e-lg'
+                ]
+            }
+        },
+        radius: {
+            none: {
+                wrapper: 'rounded-none',
+                th: [],
+                td: []
+            },
+            sm: {
+                wrapper: 'rounded-small'
+            },
+            md: {
+                wrapper: 'rounded-medium'
+            },
+            lg: {
+                wrapper: 'rounded-large'
+            }
+        },
+        fullWidth: {
+            true: {
+                base: 'w-full',
+                wrapper: 'w-full',
+                table: 'w-full'
+            }
+        },
+        align: {
+            start: {
+                th: 'text-start',
+                td: 'text-start'
+            },
+            center: {
+                th: 'text-center',
+                td: 'text-center'
+            },
+            end: {
+                th: 'text-end',
+                td: 'text-end'
+            }
+        }
+    },
+    defaultVariants: {
+        layout: 'auto',
+        shadow: 'none',
+        radius: 'none',
+        color: 'default',
+        size: 'md',
+        isCompact: false,
+        hideHeader: false,
+        isStriped: false,
+        fullWidth: true,
+        align: 'start'
+    },
+    compoundVariants: [
+        {
+            isStriped: true,
+            color: 'default',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-default/60'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'primary',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-primary/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'secondary',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-secondary/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'success',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-success/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'warning',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-warning/20'
+            }
+        },
+        {
+            isStriped: true,
+            color: 'danger',
+            class: {
+                td: 'group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-danger/20'
+            }
+        }
+    ]
+});
+export { table };