@heymantle/litho 0.0.1

package/dist/esm/styles/Table.js

@@ -0,0 +1,581 @@
+import { tv } from "tailwind-variants";
+var containerStyles = tv({
+    base: "Litho-Table-Container",
+    variants: {
+        bordered: {
+            true: "rounded-md border border-edge-default"
+        },
+        topBorder: {
+            true: "border-t border-edge-default"
+        }
+    }
+});
+var tableStyles = tv({
+    base: "Litho-Table table-auto w-full border-collapse bg-surface-highest",
+    variants: {
+        verticalAlign: {
+            top: "align-top",
+            middle: "align-middle",
+            bottom: "align-bottom"
+        }
+    }
+});
+var headingStyles = tv({
+    base: "Litho-Table-Heading py-0 px-2 @md:first:pl-3 whitespace-nowrap font-semibold! text-high text-sm dark:text-normal",
+    variants: {
+        hidden: {
+            true: "hidden opacity-0 pointer-events-none @md:block @md:opacity-100 @md:pointer-events-auto"
+        },
+        verticalAlign: {
+            top: "align-top",
+            middle: "align-middle",
+            bottom: "align-bottom"
+        },
+        tableIsSelectable: {
+            true: "first-cell-after-selection-cell"
+        },
+        headingStyle: {
+            default: "",
+            subdued: "bg-surface-higher"
+        }
+    },
+    defaultVariants: {
+        headingStyle: "default"
+    }
+});
+var headingLabelContainerStyles = tv({
+    base: "h-full min-h-9 flex items-center",
+    variants: {
+        alignment: {
+            left: "text-left justify-start",
+            center: "text-center justify-center",
+            right: "text-right justify-end",
+            start: "text-left justify-start",
+            end: "text-right justify-end"
+        }
+    }
+});
+var headingLabelStyles = tv({
+    base: "group flex py-1 items-center justify-start gap-0.5",
+    variants: {
+        interactive: {
+            true: "rounded-md cursor-pointer hover-dark",
+            false: ""
+        },
+        sortable: {
+            true: "",
+            false: ""
+        },
+        alignment: {
+            start: "",
+            left: "",
+            right: "",
+            end: "",
+            center: ""
+        }
+    },
+    compoundVariants: [
+        {
+            alignment: "start",
+            sortable: true,
+            class: "pl-2 pr-0.5"
+        },
+        {
+            alignment: "start",
+            sortable: false,
+            interactive: true,
+            class: "px-2"
+        },
+        {
+            alignment: "left",
+            sortable: true,
+            class: "pl-2 pr-0.5"
+        },
+        {
+            alignment: "left",
+            sortable: false,
+            interactive: true,
+            class: "px-2"
+        },
+        {
+            alignment: "right",
+            sortable: true,
+            class: "pr-2 pl-0.5"
+        },
+        {
+            alignment: "right",
+            sortable: false,
+            interactive: true,
+            class: "px-2"
+        },
+        {
+            alignment: "end",
+            sortable: true,
+            class: "pr-2 pl-0.5"
+        },
+        {
+            alignment: "end",
+            sortable: false,
+            interactive: true,
+            class: "px-2"
+        },
+        {
+            alignment: "end",
+            interactive: false,
+            class: "pr-2"
+        },
+        {
+            alignment: "center",
+            sortable: true,
+            class: "pl-2 pr-0.5"
+        },
+        {
+            alignment: "start",
+            sortable: false,
+            interactive: true,
+            class: "px-2"
+        },
+        {
+            sortable: false,
+            interactive: false,
+            class: "px-2"
+        }
+    ],
+    defaultVariants: {
+        alignment: "start",
+        sortable: false,
+        interactive: false
+    }
+});
+var stickyHeaderContainerStyles = tv({
+    base: "Litho-Table-StickyHeaderContainer min-h-9",
+    variants: {
+        fullWidth: {
+            true: "right-0",
+            false: ""
+        },
+        sticky: {
+            true: "fixed top-[var(--litho-table-header-sticky-at)] left-4 @md:left-[calc(var(--litho-nav-width)+var(--spacing)*5)] bg-surface-normal",
+            false: "absolute top-0 left-0 bg-surface-highest"
+        },
+        checked: {
+            true: "right-0",
+            false: ""
+        }
+    }
+});
+var headingContainerStyles = tv({
+    base: "Litho-Table-Header",
+    variants: {
+        hidden: {
+            true: "opacity-0 pointer-events-none",
+            false: ""
+        },
+        sticky: {
+            true: "",
+            false: ""
+        },
+        fixed: {
+            true: "",
+            false: ""
+        },
+        reverseColumns: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            hidden: false,
+            sticky: false,
+            className: "absolute top-0 left-0 overflow-hidden"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: false,
+            className: "Litho-Table-Header--Sticky fixed top-[var(--litho-table-header-sticky-at)] left-4 @md:left-[var(--litho-nav-width)] right-4 @md:right-5 min-h-9 bg-surface-normal overflow-hidden border-b border-edge-default"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: true,
+            className: "Litho-Table-Header--Sticky--Fixed fixed top-[var(--litho-table-header-sticky-at)] right-5 min-h-9 overflow-hidden"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: false,
+            className: "Litho-Table-Header--Sticky--Fixed fixed top-[var(--litho-table-header-sticky-at)] left-4 @md:left-[var(--litho-nav-width)] min-h-9 overflow-hidden"
+        }
+    ],
+    defaultVariants: {
+        hidden: false,
+        sticky: false,
+        fixed: false,
+        reverseColumns: false
+    }
+});
+var headingInnerContainerStyles = tv({
+    base: "Litho-Table-Header__Inner",
+    variants: {
+        hidden: {
+            true: "",
+            false: ""
+        },
+        sticky: {
+            true: "",
+            false: ""
+        },
+        fixed: {
+            true: "",
+            false: ""
+        },
+        reverseColumns: {
+            true: "",
+            false: ""
+        },
+        canScrollRight: {
+            true: "",
+            false: ""
+        },
+        canScrollLeft: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            hidden: false,
+            sticky: false,
+            className: "flex justify-start items-stretch bg-surface-highest"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: false,
+            className: "relative flex justify-start items-stretch"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: true,
+            className: "flex items-center bg-surface-normal border-b border-edge-default ml-4"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: true,
+            canScrollRight: true,
+            className: "shadow-table-scroll"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: true,
+            canScrollRight: false,
+            className: "shadow-table-scroll-hidden"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: false,
+            className: "flex items-center bg-surface-normal border-b border-edge-default mr-4"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: false,
+            canScrollLeft: true,
+            className: "shadow-table-scroll"
+        },
+        {
+            hidden: false,
+            sticky: true,
+            fixed: true,
+            reverseColumns: false,
+            canScrollLeft: false,
+            className: "shadow-table-scroll-hidden"
+        }
+    ],
+    defaultVariants: {
+        hidden: false,
+        sticky: false,
+        fixed: false,
+        reverseColumns: false,
+        canScrollRight: false,
+        canScrollLeft: false
+    }
+});
+var selectBarStyles = tv({
+    base: "Litho-Table-SelectBar absolute left-0 top-0 bottom-0",
+    variants: {
+        showSelectActions: {
+            true: "right-0",
+            false: "inline-block"
+        },
+        sticky: {
+            true: "bg-surface-normal",
+            false: "bg-surface-highest"
+        },
+        headingStyle: {
+            default: "",
+            subdued: "bg-surface-higher"
+        }
+    },
+    defaultVariants: {
+        headingStyle: "default"
+    }
+});
+var selectBarInnerStyles = tv({
+    base: "relative flex items-center gap-2 h-full min-h-9",
+    variants: {
+        sticky: {
+            true: "@md:pl-4",
+            false: "pl-4"
+        }
+    }
+});
+var rowStyles = tv({
+    base: "Litho-Table-Row border-t border-edge-default",
+    variants: {
+        selected: {
+            true: "bg-surface-selected!",
+            false: "bg-surface-highest"
+        },
+        interactive: {
+            true: "cursor-pointer",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        selected: false,
+        interactive: false
+    }
+});
+var cellStyles = tv({
+    base: "Litho-Table-Cell whitespace-nowrap text-highest",
+    variants: {
+        alignment: {
+            left: "text-left",
+            center: "text-center",
+            right: "text-right",
+            start: "text-left",
+            end: "text-right"
+        },
+        verticalAlign: {
+            top: "align-top",
+            middle: "align-middle",
+            bottom: "align-bottom"
+        },
+        increasedTableDensity: {
+            true: "h-9 min-h-9",
+            false: "h-12 min-h-12"
+        },
+        selectionCell: {
+            true: "whitespace-nowrap w-13 min-w-13 max-w-13 overflow-hidden",
+            false: ""
+        },
+        hidden: {
+            true: "hidden opacity-0 pointer-events-none @md:table-cell @md:opacity-100 @md:pointer-events-auto"
+        }
+    },
+    compoundVariants: [
+        {
+            noBodyCellPadding: false,
+            selectionCell: false,
+            className: "py-2 px-4"
+        },
+        {
+            noBodyCellPadding: false,
+            selectionCell: true,
+            className: "py-2 pl-4 pr-0"
+        },
+        {
+            noBodyCellPadding: false,
+            tableIsSelectable: true,
+            className: "first-cell-after-selection-cell"
+        },
+        {
+            noBodyCellPadding: false,
+            tableIsSelectable: false,
+            className: "@md:first:pl-5"
+        },
+        {
+            noBodyCellPadding: true,
+            selectionCell: true,
+            className: "py-2 pl-4 pr-0"
+        }
+    ],
+    defaultVariants: {
+        tableIsSelectable: true,
+        noBodyCellPadding: false,
+        selectionCell: false
+    }
+});
+var cellContentStyles = tv({
+    base: "Litho-Table-Cell__Content flex items-center w-full h-full",
+    variants: {
+        alignment: {
+            left: "text-left justify-start",
+            center: "text-center justify-center",
+            right: "text-right justify-end",
+            start: "text-left justify-start",
+            end: "text-right justify-end"
+        }
+    }
+});
+var footerCellStyles = tv({
+    base: "Litho-Table-FooterCell px-4 py-2 bg-surface-higher whitespace-nowrap font-semibold! text-high text-sm h-9 min-h-9",
+    variants: {
+        alignment: {
+            left: "text-left",
+            center: "text-center",
+            right: "text-right",
+            start: "text-left",
+            end: "text-right"
+        },
+        verticalAlign: {
+            top: "align-top",
+            middle: "align-middle",
+            bottom: "align-bottom"
+        }
+    }
+});
+var bulkActionStyles = tv({
+    base: "Litho-Table-BulkActions sticky left-4 @md:left-[var(--litho-nav-width)] right-5 bottom-0 flex items-center gap-2 p-4 border-t border-edge-default bg-surface-highest"
+});
+var fixedColumnsStyles = tv({
+    base: "Litho-Table__FixedColumns transition-shadow duration-300 absolute top-0 bottom-0",
+    variants: {
+        fixed: {
+            true: "",
+            false: ""
+        },
+        sticky: {
+            true: "",
+            false: ""
+        },
+        firstColumns: {
+            true: "left-0",
+            false: "right-0 hidden @md:block"
+        },
+        selectable: {
+            true: "",
+            false: ""
+        },
+        canScrollLeft: {
+            true: "",
+            false: ""
+        },
+        canScrollRight: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            firstColumns: true,
+            selectable: false,
+            className: "hidden @md:block"
+        },
+        {
+            firstColumns: true,
+            canScrollLeft: true,
+            className: "shadow-table-scroll"
+        },
+        {
+            firstColumns: true,
+            canScrollLeft: false,
+            className: "shadow-table-scroll-hidden"
+        },
+        {
+            firstColumns: false,
+            canScrollRight: true,
+            className: "shadow-table-scroll"
+        },
+        {
+            firstColumns: false,
+            canScrollRight: false,
+            className: "shadow-table-scroll-hidden"
+        }
+    ],
+    defaultVariants: {
+        fixed: false,
+        firstColumns: true,
+        sticky: false,
+        selectable: false,
+        canScrollLeft: false,
+        canScrollRight: false
+    }
+});
+var overflowShadowStyles = tv({
+    base: "absolute top-0 bottom-0 w-5 transition-shadow duration-300 pointer-events-none",
+    variants: {
+        firstColumns: {
+            true: "-left-5",
+            false: "-right-5"
+        },
+        canScrollLeft: {
+            true: "",
+            false: ""
+        },
+        canScrollRight: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            firstColumns: true,
+            canScrollLeft: true,
+            className: "shadow-table-scroll"
+        },
+        {
+            firstColumns: true,
+            canScrollLeft: false,
+            className: "shadow-table-scroll-hidden"
+        },
+        {
+            firstColumns: false,
+            canScrollRight: true,
+            className: "shadow-table-scroll"
+        },
+        {
+            firstColumns: false,
+            canScrollRight: false,
+            className: "shadow-table-scroll-hidden"
+        }
+    ],
+    defaultVariants: {
+        firstColumns: true,
+        canScrollLeft: false,
+        canScrollRight: false
+    }
+});
+export var styles = {
+    containerStyles: containerStyles,
+    tableStyles: tableStyles,
+    headingStyles: headingStyles,
+    headingLabelContainerStyles: headingLabelContainerStyles,
+    headingLabelStyles: headingLabelStyles,
+    headingContainerStyles: headingContainerStyles,
+    headingInnerContainerStyles: headingInnerContainerStyles,
+    stickyHeaderContainerStyles: stickyHeaderContainerStyles,
+    selectBarStyles: selectBarStyles,
+    selectBarInnerStyles: selectBarInnerStyles,
+    rowStyles: rowStyles,
+    cellStyles: cellStyles,
+    cellContentStyles: cellContentStyles,
+    footerCellStyles: footerCellStyles,
+    bulkActionStyles: bulkActionStyles,
+    fixedColumnsStyles: fixedColumnsStyles,
+    overflowShadowStyles: overflowShadowStyles
+};