@superminimalui/table 0.0.3 → 0.0.4
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.
- package/dist/{index.js → index.cjs.js} +25 -43
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.mts +6 -11
- package/dist/index.d.ts +6 -11
- package/dist/index.esm.js +37 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +7 -5
- package/dist/index.css +0 -8
- package/dist/index.mjs +0 -52
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
"use strict";
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -25,54 +24,37 @@ __export(index_exports, {
|
|
|
25
24
|
});
|
|
26
25
|
module.exports = __toCommonJS(index_exports);
|
|
27
26
|
|
|
28
|
-
// ../../core/src/utils/cn.ts
|
|
29
|
-
var cn = (...classes) => classes.filter(Boolean).join(" ");
|
|
30
|
-
|
|
31
|
-
// src/table.styles.ts
|
|
32
|
-
var borderColorMap = {
|
|
33
|
-
primary: "border-[var(--ui-primary)]",
|
|
34
|
-
neutral: "border-white/20",
|
|
35
|
-
danger: "border-red-500"
|
|
36
|
-
};
|
|
37
|
-
var borderWidthMap = {
|
|
38
|
-
sm: "border",
|
|
39
|
-
md: "border-2",
|
|
40
|
-
lg: "border-4"
|
|
41
|
-
};
|
|
42
|
-
var borderVariantMap = {
|
|
43
|
-
soft: "rounded-md",
|
|
44
|
-
hard: "rounded-none"
|
|
45
|
-
};
|
|
46
|
-
|
|
47
27
|
// src/Table.tsx
|
|
28
|
+
var import_core = require("@superminimalui/core");
|
|
48
29
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
49
|
-
|
|
50
|
-
columns,
|
|
30
|
+
var Table = ({
|
|
51
31
|
rows,
|
|
32
|
+
columns,
|
|
52
33
|
bordered = true,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
borderWidth = "sm",
|
|
34
|
+
borderColor = "black",
|
|
35
|
+
borderWidth = "1px",
|
|
56
36
|
className
|
|
57
|
-
}) {
|
|
37
|
+
}) => {
|
|
38
|
+
const borderStyle = bordered ? `${borderWidth} solid ${borderColor}` : "none";
|
|
58
39
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
-
"
|
|
40
|
+
"table",
|
|
60
41
|
{
|
|
61
|
-
className: cn(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
42
|
+
className: (0, import_core.cn)("table-auto", className),
|
|
43
|
+
style: { border: borderStyle },
|
|
44
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
45
|
+
"td",
|
|
46
|
+
{
|
|
47
|
+
style: { border: borderStyle, padding: "0.5rem" },
|
|
48
|
+
children: [
|
|
49
|
+
"Cell ",
|
|
50
|
+
rowIdx + 1,
|
|
51
|
+
"-",
|
|
52
|
+
colIdx + 1
|
|
53
|
+
]
|
|
54
|
+
},
|
|
55
|
+
colIdx
|
|
56
|
+
)) }, rowIdx)) })
|
|
72
57
|
}
|
|
73
58
|
);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
0 && (module.exports = {
|
|
77
|
-
Table
|
|
78
|
-
});
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Table.tsx"],"sourcesContent":["export { Table } from \"./Table\";\r\n","import React from \"react\";\r\nimport { cn } from \"@superminimalui/core\";\r\n\r\nexport interface TableProps {\r\n rows: number;\r\n columns: number;\r\n bordered?: boolean;\r\n borderColor?: string;\r\n borderWidth?: string;\r\n className?: string;\r\n}\r\n\r\nexport const Table: React.FC<TableProps> = ({\r\n rows,\r\n columns,\r\n bordered = true,\r\n borderColor = \"black\",\r\n borderWidth = \"1px\",\r\n className,\r\n}) => {\r\n const borderStyle = bordered ? `${borderWidth} solid ${borderColor}` : \"none\";\r\n return (\r\n <table\r\n className={cn(\"table-auto\", className)}\r\n style={{ border: borderStyle }}\r\n >\r\n <tbody>\r\n {Array.from({ length: rows }).map((_, rowIdx) => (\r\n <tr key={rowIdx}>\r\n {Array.from({ length: columns }).map((_, colIdx) => (\r\n <td\r\n key={colIdx}\r\n style={{ border: borderStyle, padding: \"0.5rem\" }}\r\n >\r\n Cell {rowIdx + 1}-{colIdx + 1}\r\n </td>\r\n ))}\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,kBAAmB;AA2BT;AAhBH,IAAM,QAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AACF,MAAM;AACJ,QAAM,cAAc,WAAW,GAAG,WAAW,UAAU,WAAW,KAAK;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAG,cAAc,SAAS;AAAA,MACrC,OAAO,EAAE,QAAQ,YAAY;AAAA,MAE7B,sDAAC,WACE,gBAAM,KAAK,EAAE,QAAQ,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,WACpC,4CAAC,QACE,gBAAM,KAAK,EAAE,QAAQ,QAAQ,CAAC,EAAE,IAAI,CAACA,IAAG,WACvC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,EAAE,QAAQ,aAAa,SAAS,SAAS;AAAA,UACjD;AAAA;AAAA,YACO,SAAS;AAAA,YAAE;AAAA,YAAE,SAAS;AAAA;AAAA;AAAA,QAHvB;AAAA,MAIP,CACD,KARM,MAST,CACD,GACH;AAAA;AAAA,EACF;AAEJ;","names":["_"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
|
|
3
|
-
type TableBorderVariant = "soft" | "hard";
|
|
4
|
-
type TableBorderColor = "primary" | "neutral" | "danger";
|
|
5
|
-
type TableBorderWidth = "sm" | "md" | "lg";
|
|
6
3
|
interface TableProps {
|
|
7
|
-
columns: number;
|
|
8
4
|
rows: number;
|
|
5
|
+
columns: number;
|
|
9
6
|
bordered?: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
borderWidth?: TableBorderWidth;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
borderWidth?: string;
|
|
13
9
|
className?: string;
|
|
14
10
|
}
|
|
11
|
+
declare const Table: React.FC<TableProps>;
|
|
15
12
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
export { Table, type TableProps };
|
|
13
|
+
export { Table };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
|
|
3
|
-
type TableBorderVariant = "soft" | "hard";
|
|
4
|
-
type TableBorderColor = "primary" | "neutral" | "danger";
|
|
5
|
-
type TableBorderWidth = "sm" | "md" | "lg";
|
|
6
3
|
interface TableProps {
|
|
7
|
-
columns: number;
|
|
8
4
|
rows: number;
|
|
5
|
+
columns: number;
|
|
9
6
|
bordered?: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
borderWidth?: TableBorderWidth;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
borderWidth?: string;
|
|
13
9
|
className?: string;
|
|
14
10
|
}
|
|
11
|
+
declare const Table: React.FC<TableProps>;
|
|
15
12
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
export { Table, type TableProps };
|
|
13
|
+
export { Table };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
// src/Table.tsx
|
|
2
|
+
import { cn } from "@superminimalui/core";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
var Table = ({
|
|
5
|
+
rows,
|
|
6
|
+
columns,
|
|
7
|
+
bordered = true,
|
|
8
|
+
borderColor = "black",
|
|
9
|
+
borderWidth = "1px",
|
|
10
|
+
className
|
|
11
|
+
}) => {
|
|
12
|
+
const borderStyle = bordered ? `${borderWidth} solid ${borderColor}` : "none";
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
14
|
+
"table",
|
|
15
|
+
{
|
|
16
|
+
className: cn("table-auto", className),
|
|
17
|
+
style: { border: borderStyle },
|
|
18
|
+
children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsxs(
|
|
19
|
+
"td",
|
|
20
|
+
{
|
|
21
|
+
style: { border: borderStyle, padding: "0.5rem" },
|
|
22
|
+
children: [
|
|
23
|
+
"Cell ",
|
|
24
|
+
rowIdx + 1,
|
|
25
|
+
"-",
|
|
26
|
+
colIdx + 1
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
colIdx
|
|
30
|
+
)) }, rowIdx)) })
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
export {
|
|
35
|
+
Table
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Table.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { cn } from \"@superminimalui/core\";\r\n\r\nexport interface TableProps {\r\n rows: number;\r\n columns: number;\r\n bordered?: boolean;\r\n borderColor?: string;\r\n borderWidth?: string;\r\n className?: string;\r\n}\r\n\r\nexport const Table: React.FC<TableProps> = ({\r\n rows,\r\n columns,\r\n bordered = true,\r\n borderColor = \"black\",\r\n borderWidth = \"1px\",\r\n className,\r\n}) => {\r\n const borderStyle = bordered ? `${borderWidth} solid ${borderColor}` : \"none\";\r\n return (\r\n <table\r\n className={cn(\"table-auto\", className)}\r\n style={{ border: borderStyle }}\r\n >\r\n <tbody>\r\n {Array.from({ length: rows }).map((_, rowIdx) => (\r\n <tr key={rowIdx}>\r\n {Array.from({ length: columns }).map((_, colIdx) => (\r\n <td\r\n key={colIdx}\r\n style={{ border: borderStyle, padding: \"0.5rem\" }}\r\n >\r\n Cell {rowIdx + 1}-{colIdx + 1}\r\n </td>\r\n ))}\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n );\r\n};\r\n"],"mappings":";AACA,SAAS,UAAU;AA2BT,cAEI,YAFJ;AAhBH,IAAM,QAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AACF,MAAM;AACJ,QAAM,cAAc,WAAW,GAAG,WAAW,UAAU,WAAW,KAAK;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO,EAAE,QAAQ,YAAY;AAAA,MAE7B,8BAAC,WACE,gBAAM,KAAK,EAAE,QAAQ,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,WACpC,oBAAC,QACE,gBAAM,KAAK,EAAE,QAAQ,QAAQ,CAAC,EAAE,IAAI,CAACA,IAAG,WACvC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,EAAE,QAAQ,aAAa,SAAS,SAAS;AAAA,UACjD;AAAA;AAAA,YACO,SAAS;AAAA,YAAE;AAAA,YAAE,SAAS;AAAA;AAAA;AAAA,QAHvB;AAAA,MAIP,CACD,KARM,MAST,CACD,GACH;AAAA;AAAA,EACF;AAEJ;","names":["_"]}
|
package/package.json
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@superminimalui/table",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"main": "dist/index.cjs.js",
|
|
5
5
|
"module": "dist/index.esm.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist"
|
|
9
9
|
],
|
|
10
|
-
"sideEffects": false,
|
|
11
10
|
"scripts": {
|
|
12
11
|
"build": "tsup"
|
|
13
12
|
},
|
|
14
|
-
"
|
|
13
|
+
"peerDependencies": {
|
|
14
|
+
"react": ">=18",
|
|
15
15
|
"@superminimalui/core": "^0.0.1"
|
|
16
16
|
},
|
|
17
|
-
"
|
|
18
|
-
"
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"tsup": "^8.5.1",
|
|
19
|
+
"typescript": "^5.9.3",
|
|
20
|
+
"@types/react": "^19.2.7"
|
|
19
21
|
}
|
|
20
22
|
}
|
package/dist/index.css
DELETED
package/dist/index.mjs
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
// ../../core/src/utils/cn.ts
|
|
4
|
-
var cn = (...classes) => classes.filter(Boolean).join(" ");
|
|
5
|
-
|
|
6
|
-
// src/table.styles.ts
|
|
7
|
-
var borderColorMap = {
|
|
8
|
-
primary: "border-[var(--ui-primary)]",
|
|
9
|
-
neutral: "border-white/20",
|
|
10
|
-
danger: "border-red-500"
|
|
11
|
-
};
|
|
12
|
-
var borderWidthMap = {
|
|
13
|
-
sm: "border",
|
|
14
|
-
md: "border-2",
|
|
15
|
-
lg: "border-4"
|
|
16
|
-
};
|
|
17
|
-
var borderVariantMap = {
|
|
18
|
-
soft: "rounded-md",
|
|
19
|
-
hard: "rounded-none"
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
// src/Table.tsx
|
|
23
|
-
import { jsx } from "react/jsx-runtime";
|
|
24
|
-
function Table({
|
|
25
|
-
columns,
|
|
26
|
-
rows,
|
|
27
|
-
bordered = true,
|
|
28
|
-
borderVariant = "soft",
|
|
29
|
-
borderColor = "neutral",
|
|
30
|
-
borderWidth = "sm",
|
|
31
|
-
className
|
|
32
|
-
}) {
|
|
33
|
-
return /* @__PURE__ */ jsx(
|
|
34
|
-
"div",
|
|
35
|
-
{
|
|
36
|
-
className: cn(
|
|
37
|
-
"grid text-sm",
|
|
38
|
-
bordered && borderWidthMap[borderWidth],
|
|
39
|
-
bordered && borderColorMap[borderColor],
|
|
40
|
-
bordered && borderVariantMap[borderVariant],
|
|
41
|
-
className
|
|
42
|
-
),
|
|
43
|
-
style: {
|
|
44
|
-
gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
|
|
45
|
-
},
|
|
46
|
-
children: Array.from({ length: rows * columns }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "p-2", children: "Cell" }, i))
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
export {
|
|
51
|
-
Table
|
|
52
|
-
};
|