@manhphi1309/table 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +29 -0
  2. package/dist/index.cjs +76 -0
  3. package/dist/index.d.cts +37 -0
  4. package/dist/index.d.mts +37 -0
  5. package/dist/index.mjs +67 -0
  6. package/package.json +32 -0
package/README.md ADDED
@@ -0,0 +1,29 @@
1
+ # @manhphi1309/table
2
+
3
+ A custom table component for the shadcn-custom monorepo.
4
+
5
+ ## Subcomponents
6
+ - `Table`
7
+
8
+ ## Dependencies
9
+ - `@manhphi1309/utils`
10
+
11
+ ## Installation
12
+
13
+ ```bash
14
+ npm install @manhphi1309/table
15
+ ```
16
+
17
+ ## Usage Example
18
+
19
+ ```tsx
20
+ import { Table } from "@manhphi1309/table";
21
+
22
+ export default function App() {
23
+ return (
24
+ <Table>
25
+ Hello World
26
+ </Table>
27
+ );
28
+ }
29
+ ```
package/dist/index.cjs ADDED
@@ -0,0 +1,76 @@
1
+ "use client";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ //#endregion
4
+ require("react");
5
+ let _manhphi1309_utils = require("@manhphi1309/utils");
6
+ let react_jsx_runtime = require("react/jsx-runtime");
7
+ //#region index.tsx
8
+ function Table({ className, ...props }) {
9
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
10
+ "data-slot": "table-container",
11
+ className: "relative w-full overflow-x-auto",
12
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
13
+ "data-slot": "table",
14
+ className: (0, _manhphi1309_utils.cn)("w-full caption-bottom text-sm", className),
15
+ ...props
16
+ })
17
+ });
18
+ }
19
+ function TableHeader({ className, ...props }) {
20
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
21
+ "data-slot": "table-header",
22
+ className: (0, _manhphi1309_utils.cn)("[&_tr]:border-b", className),
23
+ ...props
24
+ });
25
+ }
26
+ function TableBody({ className, ...props }) {
27
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
28
+ "data-slot": "table-body",
29
+ className: (0, _manhphi1309_utils.cn)("[&_tr:last-child]:border-0", className),
30
+ ...props
31
+ });
32
+ }
33
+ function TableFooter({ className, ...props }) {
34
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tfoot", {
35
+ "data-slot": "table-footer",
36
+ className: (0, _manhphi1309_utils.cn)("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
37
+ ...props
38
+ });
39
+ }
40
+ function TableRow({ className, ...props }) {
41
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
42
+ "data-slot": "table-row",
43
+ className: (0, _manhphi1309_utils.cn)("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
44
+ ...props
45
+ });
46
+ }
47
+ function TableHead({ className, ...props }) {
48
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
49
+ "data-slot": "table-head",
50
+ className: (0, _manhphi1309_utils.cn)("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
51
+ ...props
52
+ });
53
+ }
54
+ function TableCell({ className, ...props }) {
55
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
56
+ "data-slot": "table-cell",
57
+ className: (0, _manhphi1309_utils.cn)("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
58
+ ...props
59
+ });
60
+ }
61
+ function TableCaption({ className, ...props }) {
62
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("caption", {
63
+ "data-slot": "table-caption",
64
+ className: (0, _manhphi1309_utils.cn)("mt-4 text-sm text-muted-foreground", className),
65
+ ...props
66
+ });
67
+ }
68
+ //#endregion
69
+ exports.Table = Table;
70
+ exports.TableBody = TableBody;
71
+ exports.TableCaption = TableCaption;
72
+ exports.TableCell = TableCell;
73
+ exports.TableFooter = TableFooter;
74
+ exports.TableHead = TableHead;
75
+ exports.TableHeader = TableHeader;
76
+ exports.TableRow = TableRow;
package/dist/index.d.cts ADDED
@@ -0,0 +1,37 @@
1
+ import * as React from "react";
2
+
3
+ //#region index.d.ts
4
+ declare function Table({
5
+ className,
6
+ ...props
7
+ }: React.ComponentProps<"table">): React.JSX.Element;
8
+ declare function TableHeader({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<"thead">): React.JSX.Element;
12
+ declare function TableBody({
13
+ className,
14
+ ...props
15
+ }: React.ComponentProps<"tbody">): React.JSX.Element;
16
+ declare function TableFooter({
17
+ className,
18
+ ...props
19
+ }: React.ComponentProps<"tfoot">): React.JSX.Element;
20
+ declare function TableRow({
21
+ className,
22
+ ...props
23
+ }: React.ComponentProps<"tr">): React.JSX.Element;
24
+ declare function TableHead({
25
+ className,
26
+ ...props
27
+ }: React.ComponentProps<"th">): React.JSX.Element;
28
+ declare function TableCell({
29
+ className,
30
+ ...props
31
+ }: React.ComponentProps<"td">): React.JSX.Element;
32
+ declare function TableCaption({
33
+ className,
34
+ ...props
35
+ }: React.ComponentProps<"caption">): React.JSX.Element;
36
+ //#endregion
37
+ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
package/dist/index.d.mts ADDED
@@ -0,0 +1,37 @@
1
+ import * as React from "react";
2
+
3
+ //#region index.d.ts
4
+ declare function Table({
5
+ className,
6
+ ...props
7
+ }: React.ComponentProps<"table">): React.JSX.Element;
8
+ declare function TableHeader({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<"thead">): React.JSX.Element;
12
+ declare function TableBody({
13
+ className,
14
+ ...props
15
+ }: React.ComponentProps<"tbody">): React.JSX.Element;
16
+ declare function TableFooter({
17
+ className,
18
+ ...props
19
+ }: React.ComponentProps<"tfoot">): React.JSX.Element;
20
+ declare function TableRow({
21
+ className,
22
+ ...props
23
+ }: React.ComponentProps<"tr">): React.JSX.Element;
24
+ declare function TableHead({
25
+ className,
26
+ ...props
27
+ }: React.ComponentProps<"th">): React.JSX.Element;
28
+ declare function TableCell({
29
+ className,
30
+ ...props
31
+ }: React.ComponentProps<"td">): React.JSX.Element;
32
+ declare function TableCaption({
33
+ className,
34
+ ...props
35
+ }: React.ComponentProps<"caption">): React.JSX.Element;
36
+ //#endregion
37
+ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
package/dist/index.mjs ADDED
@@ -0,0 +1,67 @@
1
+ "use client";
2
+ import "react";
3
+ import { cn } from "@manhphi1309/utils";
4
+ import { jsx } from "react/jsx-runtime";
5
+ //#region index.tsx
6
+ function Table({ className, ...props }) {
7
+ return /* @__PURE__ */ jsx("div", {
8
+ "data-slot": "table-container",
9
+ className: "relative w-full overflow-x-auto",
10
+ children: /* @__PURE__ */ jsx("table", {
11
+ "data-slot": "table",
12
+ className: cn("w-full caption-bottom text-sm", className),
13
+ ...props
14
+ })
15
+ });
16
+ }
17
+ function TableHeader({ className, ...props }) {
18
+ return /* @__PURE__ */ jsx("thead", {
19
+ "data-slot": "table-header",
20
+ className: cn("[&_tr]:border-b", className),
21
+ ...props
22
+ });
23
+ }
24
+ function TableBody({ className, ...props }) {
25
+ return /* @__PURE__ */ jsx("tbody", {
26
+ "data-slot": "table-body",
27
+ className: cn("[&_tr:last-child]:border-0", className),
28
+ ...props
29
+ });
30
+ }
31
+ function TableFooter({ className, ...props }) {
32
+ return /* @__PURE__ */ jsx("tfoot", {
33
+ "data-slot": "table-footer",
34
+ className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
35
+ ...props
36
+ });
37
+ }
38
+ function TableRow({ className, ...props }) {
39
+ return /* @__PURE__ */ jsx("tr", {
40
+ "data-slot": "table-row",
41
+ className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
42
+ ...props
43
+ });
44
+ }
45
+ function TableHead({ className, ...props }) {
46
+ return /* @__PURE__ */ jsx("th", {
47
+ "data-slot": "table-head",
48
+ className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
49
+ ...props
50
+ });
51
+ }
52
+ function TableCell({ className, ...props }) {
53
+ return /* @__PURE__ */ jsx("td", {
54
+ "data-slot": "table-cell",
55
+ className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
56
+ ...props
57
+ });
58
+ }
59
+ function TableCaption({ className, ...props }) {
60
+ return /* @__PURE__ */ jsx("caption", {
61
+ "data-slot": "table-caption",
62
+ className: cn("mt-4 text-sm text-muted-foreground", className),
63
+ ...props
64
+ });
65
+ }
66
+ //#endregion
67
+ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@manhphi1309/table",
3
+ "version": "0.1.1",
4
+ "main": "./dist/index.cjs",
5
+ "module": "./dist/index.mjs",
6
+ "types": "./dist/index.d.cts",
7
+ "exports": {
8
+ ".": {
9
+ "import": {
10
+ "types": "./dist/index.d.mts",
11
+ "default": "./dist/index.mjs"
12
+ },
13
+ "require": {
14
+ "types": "./dist/index.d.cts",
15
+ "default": "./dist/index.cjs"
16
+ }
17
+ }
18
+ },
19
+ "files": [
20
+ "dist"
21
+ ],
22
+ "scripts": {
23
+ "build": "tsdown"
24
+ },
25
+ "peerDependencies": {
26
+ "react": "^19.0.0",
27
+ "react-dom": "^19.0.0"
28
+ },
29
+ "dependencies": {
30
+ "@manhphi1309/utils": "*"
31
+ }
32
+ }