frutjam 0.4.0-alpha.1 → 0.5.0-alpha.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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0-alpha.1",
|
|
4
4
|
"description": "A utility-first CSS framework UI Library",
|
|
5
5
|
"main": "./dist/frutjam.css",
|
|
6
6
|
"browser": "dist/frutjam.css",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"url": "https://github.com/nezanuha/frutjam/issues"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tailwindcss/postcss": "^4.0.
|
|
41
|
-
"tailwindcss": "^4.0.
|
|
40
|
+
"@tailwindcss/postcss": "^4.0.17",
|
|
41
|
+
"tailwindcss": "^4.0.17"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"css-loader": "^7.1.2",
|
|
@@ -49,8 +49,9 @@
|
|
|
49
49
|
"postcss-loader": "^8.1.1",
|
|
50
50
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
51
51
|
"string-replace-loader": "^3.1.0",
|
|
52
|
+
"style-loader": "^4.0.0",
|
|
52
53
|
"webpack": "^5.98.0",
|
|
53
54
|
"webpack-cli": "^6.0.1",
|
|
54
|
-
"webpack-dev-server": "^5.2.
|
|
55
|
+
"webpack-dev-server": "^5.2.1"
|
|
55
56
|
}
|
|
56
57
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
@utility btn-* {
|
|
6
6
|
@layer components {
|
|
7
|
-
@apply relative inline-flex shrink-0 flex-nowrap items-center justify-center gap-1.5 text-center align-middle font-medium
|
|
7
|
+
@apply relative inline-flex self-start shrink-0 flex-nowrap items-center justify-center gap-1.5 text-center align-middle font-medium overflow-hidden text-xs transition duration-300 leading-4;
|
|
8
8
|
@apply rounded-[var(--radius-size)];
|
|
9
9
|
&:is(.btn-default, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
|
|
10
10
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
/* disabled
|
|
33
|
+
/* disabled button */
|
|
34
34
|
&:is(:disabled, [disabled], .btn-disabled) {
|
|
35
35
|
@apply bg-[--value(--color-*)]/10 text-[--value(--color-*)]/30 pointer-events-none;
|
|
36
36
|
}
|
|
@@ -93,6 +93,11 @@
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
+
/* If no btn size class is present, apply the default size as btn-md */
|
|
97
|
+
&:not(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
|
|
98
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
99
|
+
}
|
|
100
|
+
|
|
96
101
|
/* button sizes */
|
|
97
102
|
&:is(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
|
|
98
103
|
&:is(.btn-xs) {
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@utility divider-* {
|
|
2
|
+
@layer components {
|
|
3
|
+
@apply flex flex-row items-center self-stretch whitespace-nowrap h-4;
|
|
4
|
+
|
|
5
|
+
&::before,
|
|
6
|
+
&::after {
|
|
7
|
+
@apply content-[''] bg-[--value(--color-*)] h-0.5 w-full grow;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@media print {
|
|
11
|
+
&::before,
|
|
12
|
+
&::after {
|
|
13
|
+
border: 0.5px solid;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&:not(:empty) {
|
|
18
|
+
@apply gap-2;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.divider-start::before, .divider-end::after {
|
|
22
|
+
@apply hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:is(.divider-x, .divider-y) {
|
|
26
|
+
&:is(.divider-x) {
|
|
27
|
+
@apply h-4 w-auto flex-row my-2;
|
|
28
|
+
&::before, &::after {
|
|
29
|
+
@apply h-0.5 w-full;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
&:is(.divider-y) {
|
|
33
|
+
@apply h-auto w-4 flex-col mx-2;
|
|
34
|
+
&::before, &::after {
|
|
35
|
+
@apply h-full w-0.5;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
@import "../themes/styles/base.css";
|
|
2
|
+
@import "../themes/placement.css";
|
|
3
|
+
|
|
4
|
+
@utility dropdown {
|
|
5
|
+
@layer components {
|
|
6
|
+
@apply relative inline-block;
|
|
7
|
+
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
|
|
8
|
+
|
|
9
|
+
& > *:not(summary):focus {
|
|
10
|
+
@apply outline-hidden;
|
|
11
|
+
}
|
|
12
|
+
.dropdown-body {
|
|
13
|
+
@apply absolute;
|
|
14
|
+
}
|
|
15
|
+
&:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) {
|
|
16
|
+
.dropdown-body {
|
|
17
|
+
@apply hidden origin-top opacity-0 scale-9;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[popover],
|
|
22
|
+
.dropdown-body {
|
|
23
|
+
@apply starting:[scale:95%] starting:[opacity:0] z-999 w-max transition-discrete duration-200 transition-[opacity,_scale,_display] ease-in-out;
|
|
24
|
+
/* animation: dropdown 0.2s; */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.dropdown-open,
|
|
28
|
+
&:not(.dropdown-hover):focus,
|
|
29
|
+
&:focus-within {
|
|
30
|
+
> [tabindex]:first-child {
|
|
31
|
+
@apply pointer-events-none;
|
|
32
|
+
}
|
|
33
|
+
.dropdown-body {
|
|
34
|
+
@apply opacity-100;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&.dropdown-hover:hover {
|
|
39
|
+
.dropdown-body {
|
|
40
|
+
@apply opacity-100 scale-100;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:is(details) {
|
|
45
|
+
summary {
|
|
46
|
+
&::-webkit-details-marker {
|
|
47
|
+
@apply hidden;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&.dropdown-open,
|
|
53
|
+
&:focus,
|
|
54
|
+
&:focus-within {
|
|
55
|
+
.dropdown-body {
|
|
56
|
+
@apply scale-100;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* experimental */
|
|
61
|
+
&:where([popover]) {
|
|
62
|
+
background: #0000;
|
|
63
|
+
}
|
|
64
|
+
&[popover] {
|
|
65
|
+
@apply fixed text-inherit;
|
|
66
|
+
|
|
67
|
+
@supports not (position-area: bottom) {
|
|
68
|
+
@apply m-auto;
|
|
69
|
+
|
|
70
|
+
&.dropdown-open:not(:popover-open) {
|
|
71
|
+
@apply hidden origin-top opacity-0 scale-95;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&::backdrop {
|
|
75
|
+
background-color: color-mix(in oklab, #000 30%, #0000);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&:not(.dropdown-open, :popover-open) {
|
|
80
|
+
@apply hidden origin-top opacity-0 scale-95;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@utility dropdown-body {
|
|
87
|
+
@layer components {
|
|
88
|
+
@apply bg-surface text-surface-fore rounded-[var(--radius-size)] border border-black/30 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen p-3 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* placements */
|
|
93
|
+
/* Positioning Classes */
|
|
94
|
+
.dropdown-x-start {
|
|
95
|
+
left: 0; /* Aligns dropdown to start horizontally */
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.dropdown-x-end {
|
|
99
|
+
right: 0; /* Aligns dropdown to end horizontally */
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.dropdown-y-top {
|
|
103
|
+
bottom: calc(100% + 10px); /* Positions above the button */
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.dropdown-y-bottom {
|
|
107
|
+
top: calc(100% + 10px); /* Positions below the button */
|
|
108
|
+
}
|
package/src/components/input.css
CHANGED
|
@@ -2,14 +2,56 @@
|
|
|
2
2
|
|
|
3
3
|
@utility input-* {
|
|
4
4
|
@layer components {
|
|
5
|
-
@apply
|
|
5
|
+
@apply outline outline-[--value(--color-*)]/20 rounded-[var(--radius-size)] transition duration-300 px-2.5 font-medium;
|
|
6
|
+
@apply relative inline-flex self-start shrink-0 appearance-none items-center gap-2 align-middle whitespace-nowrap leading-4;
|
|
6
7
|
&:focus, &:focus-within {
|
|
7
|
-
@apply
|
|
8
|
+
@apply outline-[--value(--color-*)] ring-2 ring-[--value(--color-*)]/10 isolate;
|
|
8
9
|
}
|
|
9
10
|
@media (hover: hover) {
|
|
10
11
|
&:hover {
|
|
11
12
|
@apply border-[--value(--color-*-fore)]/40
|
|
12
13
|
}
|
|
13
14
|
}
|
|
15
|
+
|
|
16
|
+
&:is(.input-ghost) {
|
|
17
|
+
@apply outline-0;
|
|
18
|
+
@media (hover: hover) {
|
|
19
|
+
&:hover {
|
|
20
|
+
@apply outline;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* disabled input */
|
|
26
|
+
&:is(:disabled, [disabled], .input-disabled) {
|
|
27
|
+
@apply bg-[--value(--color-*)]/10 text-[--value(--color-*)]/30 pointer-events-none cursor-not-allowed;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* If no input size class is present, apply the default size as input-md */
|
|
31
|
+
&:not(.input-xs, .input-sm, .input-md, .input-lg, .input-xl, .input-2xl) {
|
|
32
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* input sizes */
|
|
36
|
+
&:is(.input-xs, .input-sm, .input-md, .input-lg, .input-xl, .input-2xl) {
|
|
37
|
+
&:is(.input-xs) {
|
|
38
|
+
@apply px-2.5 py-1.5 text-xs;
|
|
39
|
+
}
|
|
40
|
+
&:is(.input-sm) {
|
|
41
|
+
@apply px-3 py-2 text-xs;
|
|
42
|
+
}
|
|
43
|
+
&:is(.input-md) {
|
|
44
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
45
|
+
}
|
|
46
|
+
&:is(.input-lg) {
|
|
47
|
+
@apply px-4 py-3 text-base;
|
|
48
|
+
}
|
|
49
|
+
&:is(.input-xl) {
|
|
50
|
+
@apply px-4.5 py-3.5 text-base;
|
|
51
|
+
}
|
|
52
|
+
&:is(.input-2xl) {
|
|
53
|
+
@apply px-5 py-4 text-base;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
14
56
|
}
|
|
15
57
|
}
|
package/src/main.css
CHANGED