@kopexa/theme 1.7.6 → 1.7.7

package/dist/chunk-45KIKY4A.mjs

@@ -0,0 +1,140 @@
+// src/components/data-grid.ts
+import { tv } from "tailwind-variants";
+var datagrid = tv({
+  slots: {
+    container: "grid w-full",
+    table: "w-full align-middle caption-bottom text-left rtl:text-right text-foreground font-normal text-sm",
+    head: "",
+    headerRow: "",
+    headerRowCell: "relative h-10 text-left rtl:text-right align-middle font-normal text-secondary-foreground/80 [&:has([role=checkbox])]:pe-0",
+    headRowCellResize: "absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -end-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px",
+    rowSpacer: "h-2",
+    body: "[&_tr:last-child]:border-0",
+    bodyRowSkeleton: "hover:bg-muted/40 data-[state=selected]:bg-muted/50",
+    bodyRowSkeletonCell: "align-middle",
+    bodyRow: "hover:bg-muted/40 data-[state=selected]:bg-muted/50",
+    bodyRowCell: "align-middle",
+    bodyRowExpanded: "",
+    empty: "text-center text-muted-foreground py-6"
+  },
+  variants: {
+    border: {
+      true: {
+        container: "border border-border rounded-lg"
+      }
+    },
+    headerBorder: {
+      true: {
+        headerRow: "[&>th]:border-b"
+      }
+    },
+    cellBorder: {
+      true: {
+        headerRow: "[&_>:last-child]:border-e-0",
+        headerRowCell: "border-e",
+        bodyRowSkeleton: "[&_>:last-child]:border-e-0",
+        bodyRowSkeletonCell: "border-e",
+        bodyRow: "[&_>:last-child]:border-e-0",
+        bodyRowCell: "border-e"
+      }
+    },
+    rowBorder: {
+      true: {
+        bodyRowExpanded: "[&:not(:last-child)>td]:border-b"
+      }
+    },
+    rowRounded: {
+      true: {
+        body: "[&_td:first-child]:rounded-s-lg [&_td:last-child]:rounded-e-lg"
+      }
+    },
+    columnsResizable: {
+      true: {
+        headerRowCell: "truncate"
+      }
+    },
+    columnsDraggable: {
+      true: {
+        table: "border-separate border-spacing-0"
+      }
+    },
+    headerBackground: {
+      false: {
+        headerRow: "bg-transparent"
+      },
+      true: {
+        headerRow: "bg-muted/40"
+      }
+    },
+    stripped: {
+      true: {
+        headerRow: "bg-transparent",
+        bodyRowSkeleton: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted",
+        bodyRow: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted"
+      }
+    },
+    width: {
+      fixed: {
+        table: "table-fixed",
+        headerRowCell: "w-[var(--size)]"
+      },
+      auto: {
+        table: "table-auto"
+      }
+    },
+    dense: {
+      true: {
+        headerRowCell: "px-2.5 h-8",
+        bodyRowSkeletonCell: "px-2.5 py-2",
+        bodyRowCell: "px-2.5 py-2"
+      },
+      false: {
+        headerRowCell: "px-4",
+        bodyRowSkeletonCell: "px-4 py-3",
+        bodyRowCell: "px-4 py-3"
+      }
+    },
+    columnsPinnable: {
+      true: {
+        headerRowCell: "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs"
+      },
+      false: {}
+    },
+    headerSticky: {
+      true: {
+        head: "sticky top-0 z-10 bg-background/90 backdrop-blur-xs"
+      }
+    },
+    loadingMode: {
+      skeleton: {}
+    }
+  },
+  compoundVariants: [
+    {
+      stripped: false,
+      rowBorder: true,
+      className: {
+        bodyRowSkeleton: "border-b border-border [&:not(:last-child)>td]:border-b",
+        bodyRow: "border-b border-border [&:not(:last-child)>td]:border-b"
+      }
+    }
+  ],
+  defaultVariants: {
+    border: true,
+    dense: false,
+    width: "fixed",
+    headerSticky: false,
+    headerBorder: true,
+    headerBackground: true,
+    cellBorder: false,
+    stripped: false,
+    columnsPinnable: false,
+    columnsResizable: false,
+    loadingMode: "skeleton",
+    rowBorder: true
+  }
+});
+
+export {
+  datagrid
+};

package/dist/components/data-grid.d.mts

@@ -0,0 +1,325 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const datagrid: tailwind_variants.TVReturnType<{
+    border: {
+        true: {
+            container: string;
+        };
+    };
+    headerBorder: {
+        true: {
+            headerRow: string;
+        };
+    };
+    cellBorder: {
+        true: {
+            headerRow: string;
+            headerRowCell: string;
+            bodyRowSkeleton: string;
+            bodyRowSkeletonCell: string;
+            bodyRow: string;
+            bodyRowCell: string;
+        };
+    };
+    rowBorder: {
+        true: {
+            bodyRowExpanded: string;
+        };
+    };
+    rowRounded: {
+        true: {
+            body: string;
+        };
+    };
+    columnsResizable: {
+        true: {
+            headerRowCell: string;
+        };
+    };
+    columnsDraggable: {
+        true: {
+            table: string;
+        };
+    };
+    headerBackground: {
+        false: {
+            headerRow: string;
+        };
+        true: {
+            headerRow: string;
+        };
+    };
+    stripped: {
+        true: {
+            headerRow: string;
+            bodyRowSkeleton: string;
+            bodyRow: string;
+        };
+    };
+    width: {
+        fixed: {
+            table: string;
+            headerRowCell: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+    dense: {
+        true: {
+            headerRowCell: string;
+            bodyRowSkeletonCell: string;
+            bodyRowCell: string;
+        };
+        false: {
+            headerRowCell: string;
+            bodyRowSkeletonCell: string;
+            bodyRowCell: string;
+        };
+    };
+    columnsPinnable: {
+        true: {
+            headerRowCell: string;
+        };
+        false: {};
+    };
+    headerSticky: {
+        true: {
+            head: string;
+        };
+    };
+    loadingMode: {
+        skeleton: {};
+    };
+}, {
+    container: string;
+    table: string;
+    head: string;
+    headerRow: string;
+    headerRowCell: string;
+    headRowCellResize: string;
+    rowSpacer: string;
+    body: string;
+    bodyRowSkeleton: string;
+    bodyRowSkeletonCell: string;
+    bodyRow: string;
+    bodyRowCell: string;
+    bodyRowExpanded: string;
+    empty: string;
+}, undefined, {
+    border: {
+        true: {
+            container: string;
+        };
+    };
+    headerBorder: {
+        true: {
+            headerRow: string;
+        };
+    };
+    cellBorder: {
+        true: {
+            headerRow: string;
+            headerRowCell: string;
+            bodyRowSkeleton: string;
+            bodyRowSkeletonCell: string;
+            bodyRow: string;
+            bodyRowCell: string;
+        };
+    };
+    rowBorder: {
+        true: {
+            bodyRowExpanded: string;
+        };
+    };
+    rowRounded: {
+        true: {
+            body: string;
+        };
+    };
+    columnsResizable: {
+        true: {
+            headerRowCell: string;
+        };
+    };
+    columnsDraggable: {
+        true: {
+            table: string;
+        };
+    };
+    headerBackground: {
+        false: {
+            headerRow: string;
+        };
+        true: {
+            headerRow: string;
+        };
+    };
+    stripped: {
+        true: {
+            headerRow: string;
+            bodyRowSkeleton: string;
+            bodyRow: string;
+        };
+    };
+    width: {
+        fixed: {
+            table: string;
+            headerRowCell: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+    dense: {
+        true: {
+            headerRowCell: string;
+            bodyRowSkeletonCell: string;
+            bodyRowCell: string;
+        };
+        false: {
+            headerRowCell: string;
+            bodyRowSkeletonCell: string;
+            bodyRowCell: string;
+        };
+    };
+    columnsPinnable: {
+        true: {
+            headerRowCell: string;
+        };
+        false: {};
+    };
+    headerSticky: {
+        true: {
+            head: string;
+        };
+    };
+    loadingMode: {
+        skeleton: {};
+    };
+}, {
+    container: string;
+    table: string;
+    head: string;
+    headerRow: string;
+    headerRowCell: string;
+    headRowCellResize: string;
+    rowSpacer: string;
+    body: string;
+    bodyRowSkeleton: string;
+    bodyRowSkeletonCell: string;
+    bodyRow: string;
+    bodyRowCell: string;
+    bodyRowExpanded: string;
+    empty: string;
+}, tailwind_variants.TVReturnType<{
+    border: {
+        true: {
+            container: string;
+        };
+    };
+    headerBorder: {
+        true: {
+            headerRow: string;
+        };
+    };
+    cellBorder: {
+        true: {
+            headerRow: string;
+            headerRowCell: string;
+            bodyRowSkeleton: string;
+            bodyRowSkeletonCell: string;
+            bodyRow: string;
+            bodyRowCell: string;
+        };
+    };
+    rowBorder: {
+        true: {
+            bodyRowExpanded: string;
+        };
+    };
+    rowRounded: {
+        true: {
+            body: string;
+        };
+    };
+    columnsResizable: {
+        true: {
+            headerRowCell: string;
+        };
+    };
+    columnsDraggable: {
+        true: {
+            table: string;
+        };
+    };
+    headerBackground: {
+        false: {
+            headerRow: string;
+        };
+        true: {
+            headerRow: string;
+        };
+    };
+    stripped: {
+        true: {
+            headerRow: string;
+            bodyRowSkeleton: string;
+            bodyRow: string;
+        };
+    };
+    width: {
+        fixed: {
+            table: string;
+            headerRowCell: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+    dense: {
+        true: {
+            headerRowCell: string;
+            bodyRowSkeletonCell: string;
+            bodyRowCell: string;
+        };
+        false: {
+            headerRowCell: string;
+            bodyRowSkeletonCell: string;
+            bodyRowCell: string;
+        };
+    };
+    columnsPinnable: {
+        true: {
+            headerRowCell: string;
+        };
+        false: {};
+    };
+    headerSticky: {
+        true: {
+            head: string;
+        };
+    };
+    loadingMode: {
+        skeleton: {};
+    };
+}, {
+    container: string;
+    table: string;
+    head: string;
+    headerRow: string;
+    headerRowCell: string;
+    headRowCellResize: string;
+    rowSpacer: string;
+    body: string;
+    bodyRowSkeleton: string;
+    bodyRowSkeletonCell: string;
+    bodyRow: string;
+    bodyRowCell: string;
+    bodyRowExpanded: string;
+    empty: string;
+}, undefined, unknown, unknown, undefined>>;
+type DataGridVariants = VariantProps<typeof datagrid>;
+
+export { type DataGridVariants, datagrid };