@bootswind/core 0.1.0-alpha.1 → 0.1.0-alpha.2
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/esm/index.d.ts.map +1 -1
- package/esm/index.js +75 -5
- package/package.json +2 -2
- package/script/index.d.ts.map +1 -1
- package/script/index.js +75 -5
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AA6FA,QAAA,MAAM,eAAe,EAAE,GAQrB,CAAC;AAEH,eAAe,eAAe,CAAC"}
|
package/esm/index.js
CHANGED
|
@@ -1,10 +1,80 @@
|
|
|
1
|
-
import plugin from "tailwindcss/plugin
|
|
2
|
-
const
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
const buttonColors = [
|
|
3
|
+
{
|
|
4
|
+
name: "primary",
|
|
5
|
+
main: "blue-600",
|
|
6
|
+
active: "blue-700",
|
|
7
|
+
hover: { bg: "blue-700", border: "blue-700" },
|
|
8
|
+
shadow: "rgba(49,132,253,.5)",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: "secondary",
|
|
12
|
+
main: "gray-500",
|
|
13
|
+
active: "gray-600",
|
|
14
|
+
hover: { bg: "gray-600", border: "gray-600" },
|
|
15
|
+
shadow: "rgba(130,138,145,.5)",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: "warning",
|
|
19
|
+
main: "amber-400",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
name: "danger",
|
|
23
|
+
main: "rose-600",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
name: "success",
|
|
27
|
+
main: "green-700",
|
|
28
|
+
active: "green-800",
|
|
29
|
+
hover: { bg: "emerald-700", border: "green-800" },
|
|
30
|
+
shadow: "rgba(60,153,110,.5)",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: "info",
|
|
34
|
+
main: "cyan-400",
|
|
35
|
+
active: "cyan-500",
|
|
36
|
+
hover: { bg: "cyan-500", border: "cyan-500" },
|
|
37
|
+
shadow: "rgba(11,172,204,.5)",
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
name: "light",
|
|
41
|
+
main: "gray-50",
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: "dark",
|
|
45
|
+
main: "zinc-800",
|
|
46
|
+
},
|
|
47
|
+
];
|
|
48
|
+
const btnVariants = Object.fromEntries(buttonColors.map((color) => {
|
|
49
|
+
const applyClasses = [
|
|
50
|
+
`bg-${color.main}`,
|
|
51
|
+
"text-white",
|
|
52
|
+
`border-${color.main}`,
|
|
53
|
+
];
|
|
54
|
+
if (color.active) {
|
|
55
|
+
applyClasses.push(`active:bg-${color.active}`, `active:border-${color.active}`);
|
|
56
|
+
}
|
|
57
|
+
if (color.hover?.bg) {
|
|
58
|
+
applyClasses.push(`hover:bg-${color.hover.bg}`);
|
|
59
|
+
}
|
|
60
|
+
if (color.hover?.border) {
|
|
61
|
+
applyClasses.push(`hover:border-${color.hover.border}`);
|
|
62
|
+
}
|
|
63
|
+
if (color.shadow) {
|
|
64
|
+
applyClasses.push(`focus:shadow-[0_0_0_0.25rem_${color.shadow}]`);
|
|
65
|
+
}
|
|
66
|
+
return [
|
|
67
|
+
`&.btn-${color.name}`,
|
|
68
|
+
{
|
|
69
|
+
[`@apply ${applyClasses.join(" ")}`]: {},
|
|
70
|
+
},
|
|
71
|
+
];
|
|
72
|
+
}));
|
|
73
|
+
const bootswindPlugin = plugin(({ addComponents }) => {
|
|
3
74
|
addComponents({
|
|
4
75
|
".btn": {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
borderRadius: theme("borderRadius.md"),
|
|
76
|
+
"@apply text-base font-normal text-zinc-800 dark:text-white inline-block px-3 py-2 rounded-md bg-transparent cursor-pointer border border-transparent active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.125)] disabled:opacity-65 disabled:pointer-events-none": {},
|
|
77
|
+
...btnVariants,
|
|
8
78
|
},
|
|
9
79
|
});
|
|
10
80
|
});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bootswind/core",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
4
|
-
"description": "Bootstrap components built with
|
|
3
|
+
"version": "0.1.0-alpha.2",
|
|
4
|
+
"description": "Bootstrap components built with TailwindCSS and Alpine.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./script/index.js",
|
|
7
7
|
"module": "./esm/index.js",
|
package/script/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AA6FA,QAAA,MAAM,eAAe,EAAE,GAQrB,CAAC;AAEH,eAAe,eAAe,CAAC"}
|
package/script/index.js
CHANGED
|
@@ -3,13 +3,83 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const
|
|
7
|
-
const
|
|
6
|
+
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
|
|
7
|
+
const buttonColors = [
|
|
8
|
+
{
|
|
9
|
+
name: "primary",
|
|
10
|
+
main: "blue-600",
|
|
11
|
+
active: "blue-700",
|
|
12
|
+
hover: { bg: "blue-700", border: "blue-700" },
|
|
13
|
+
shadow: "rgba(49,132,253,.5)",
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
name: "secondary",
|
|
17
|
+
main: "gray-500",
|
|
18
|
+
active: "gray-600",
|
|
19
|
+
hover: { bg: "gray-600", border: "gray-600" },
|
|
20
|
+
shadow: "rgba(130,138,145,.5)",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
name: "warning",
|
|
24
|
+
main: "amber-400",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: "danger",
|
|
28
|
+
main: "rose-600",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: "success",
|
|
32
|
+
main: "green-700",
|
|
33
|
+
active: "green-800",
|
|
34
|
+
hover: { bg: "emerald-700", border: "green-800" },
|
|
35
|
+
shadow: "rgba(60,153,110,.5)",
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: "info",
|
|
39
|
+
main: "cyan-400",
|
|
40
|
+
active: "cyan-500",
|
|
41
|
+
hover: { bg: "cyan-500", border: "cyan-500" },
|
|
42
|
+
shadow: "rgba(11,172,204,.5)",
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: "light",
|
|
46
|
+
main: "gray-50",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
name: "dark",
|
|
50
|
+
main: "zinc-800",
|
|
51
|
+
},
|
|
52
|
+
];
|
|
53
|
+
const btnVariants = Object.fromEntries(buttonColors.map((color) => {
|
|
54
|
+
const applyClasses = [
|
|
55
|
+
`bg-${color.main}`,
|
|
56
|
+
"text-white",
|
|
57
|
+
`border-${color.main}`,
|
|
58
|
+
];
|
|
59
|
+
if (color.active) {
|
|
60
|
+
applyClasses.push(`active:bg-${color.active}`, `active:border-${color.active}`);
|
|
61
|
+
}
|
|
62
|
+
if (color.hover?.bg) {
|
|
63
|
+
applyClasses.push(`hover:bg-${color.hover.bg}`);
|
|
64
|
+
}
|
|
65
|
+
if (color.hover?.border) {
|
|
66
|
+
applyClasses.push(`hover:border-${color.hover.border}`);
|
|
67
|
+
}
|
|
68
|
+
if (color.shadow) {
|
|
69
|
+
applyClasses.push(`focus:shadow-[0_0_0_0.25rem_${color.shadow}]`);
|
|
70
|
+
}
|
|
71
|
+
return [
|
|
72
|
+
`&.btn-${color.name}`,
|
|
73
|
+
{
|
|
74
|
+
[`@apply ${applyClasses.join(" ")}`]: {},
|
|
75
|
+
},
|
|
76
|
+
];
|
|
77
|
+
}));
|
|
78
|
+
const bootswindPlugin = (0, plugin_1.default)(({ addComponents }) => {
|
|
8
79
|
addComponents({
|
|
9
80
|
".btn": {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
borderRadius: theme("borderRadius.md"),
|
|
81
|
+
"@apply text-base font-normal text-zinc-800 dark:text-white inline-block px-3 py-2 rounded-md bg-transparent cursor-pointer border border-transparent active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.125)] disabled:opacity-65 disabled:pointer-events-none": {},
|
|
82
|
+
...btnVariants,
|
|
13
83
|
},
|
|
14
84
|
});
|
|
15
85
|
});
|