fulldev-ui 0.4.0-beta.1 → 0.4.11

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 (53) hide show
  1. package/package.json +3 -2
  2. package/pnpm-lock.yaml +3640 -2909
  3. package/public/images/og-image.png +0 -0
  4. package/src/blocks/Contact.astro +6 -4
  5. package/src/blocks/Intro.astro +5 -3
  6. package/src/blocks/Prices.astro +6 -4
  7. package/src/components/Avatar.astro +18 -16
  8. package/src/components/Badge.astro +33 -31
  9. package/src/components/Bento.astro +16 -14
  10. package/src/components/Button.astro +77 -75
  11. package/src/components/Card.astro +47 -45
  12. package/src/components/Carousel.astro +27 -25
  13. package/src/components/Checkbox.astro +12 -10
  14. package/src/components/Column.astro +35 -33
  15. package/src/components/Dialog.astro +19 -17
  16. package/src/components/Drawer.astro +39 -37
  17. package/src/components/Footer.astro +39 -37
  18. package/src/components/Grid.astro +9 -7
  19. package/src/components/Head.astro +2 -3
  20. package/src/components/Header.astro +58 -52
  21. package/src/components/Heading.astro +30 -28
  22. package/src/components/Icon.astro +15 -13
  23. package/src/components/Image.astro +93 -91
  24. package/src/components/Input.astro +51 -49
  25. package/src/components/Label.astro +11 -9
  26. package/src/components/Link.astro +34 -32
  27. package/src/components/List.astro +14 -12
  28. package/src/components/Masonry.astro +17 -15
  29. package/src/components/Rating.astro +15 -13
  30. package/src/components/Root.astro +8 -3
  31. package/src/components/Row.astro +17 -15
  32. package/src/components/Search.astro +1 -1
  33. package/src/components/Section.astro +62 -60
  34. package/src/components/Select.astro +59 -57
  35. package/src/components/Sidebar.astro +16 -13
  36. package/src/components/Split.astro +26 -24
  37. package/src/components/Spread.astro +18 -16
  38. package/src/components/Switch.astro +50 -48
  39. package/src/components/Table.astro +92 -81
  40. package/src/components/Tagline.astro +8 -6
  41. package/src/components/Text.astro +11 -9
  42. package/src/components/Textarea.astro +44 -42
  43. package/src/components/Toc.astro +16 -13
  44. package/src/components/Wrap.astro +16 -14
  45. package/src/components/docs/PropsTable.astro +7 -0
  46. package/src/components/experimental/Price.astro +11 -9
  47. package/src/components/experimental/Prose.astro +114 -112
  48. package/src/components/experimental/Window.astro +58 -56
  49. package/src/content/pages/index.mdx +3 -2
  50. package/src/content/pages/overview/frameworks.mdx +8 -17
  51. package/src/content/pages/overview/introduction.mdx +1 -1
  52. package/src/content/settings/base.yml +3 -0
  53. package/src/css/custom.css +0 -5
package/public/images/og-image.png ADDED
Binary file
package/src/blocks/Contact.astro CHANGED
@@ -143,10 +143,12 @@ const {
143
143
  />
144
144
  </Section>
145
145
 
146
- <style is:global>
147
- .contact {
148
- .channel + .channel {
149
- margin-top: var(--space-3) !important;
146
+ <style is:global lang="scss">
147
+ @layer fulldev {
148
+ .contact {
149
+ .channel + .channel {
150
+ margin-top: var(--space-3) !important;
151
+ }
150
152
  }
151
153
  }
152
154
  </style>
package/src/blocks/Intro.astro CHANGED
@@ -12,8 +12,10 @@ const { image, ...rest } = Astro.props
12
12
  {...rest}
13
13
  />
14
14
 
15
- <style is:global>
16
- .intro {
17
- border-bottom: 1px solid var(--base-6);
15
+ <style is:global lang="scss">
16
+ @layer fulldev {
17
+ .intro {
18
+ border-bottom: 1px solid var(--base-6);
19
+ }
18
20
  }
19
21
  </style>
package/src/blocks/Prices.astro CHANGED
@@ -12,10 +12,12 @@ const { ...rest } = Astro.props
12
12
  />
13
13
 
14
14
  <style is:global lang="scss">
15
- .prices {
16
- .card {
17
- .wrap {
18
- margin-top: auto;
15
+ @layer fulldev {
16
+ .prices {
17
+ .card {
18
+ .wrap {
19
+ margin-top: auto;
20
+ }
19
21
  }
20
22
  }
21
23
  }
package/src/components/Avatar.astro CHANGED
@@ -17,25 +17,27 @@ const { radius = 'auto', ...rest } = Astro.props
17
17
  />
18
18
 
19
19
  <style is:global lang="scss">
20
- .avatar {
21
- display: block;
22
- border: 1px solid var(--border);
23
- border: 1px solid var(--base-a6);
24
- border-radius: var(--radius-3);
25
- width: calc(2.8 * var(--space-4));
26
- height: calc(2.8 * var(--space-4));
27
- object-fit: cover;
20
+ @layer fulldev {
21
+ .avatar {
22
+ display: block;
23
+ border: 1px solid var(--border);
24
+ border: 1px solid var(--base-a6);
25
+ border-radius: var(--radius-3);
26
+ width: calc(2.8 * var(--space-4));
27
+ height: calc(2.8 * var(--space-4));
28
+ object-fit: cover;
28
29
 
29
- &.radius-none {
30
- border-radius: 0;
31
- }
30
+ &.radius-none {
31
+ border-radius: 0;
32
+ }
32
33
 
33
- &.radius-auto {
34
- border-radius: var(--radius-1);
35
- }
34
+ &.radius-auto {
35
+ border-radius: var(--radius-1);
36
+ }
36
37
 
37
- &.radius-full {
38
- border-radius: 9999px;
38
+ &.radius-full {
39
+ border-radius: 9999px;
40
+ }
39
41
  }
40
42
  }
41
43
  </style>
package/src/components/Badge.astro CHANGED
@@ -39,43 +39,45 @@ const {
39
39
  </Root>
40
40
 
41
41
  <style is:global lang="scss">
42
- .badge {
43
- display: inline-flex;
44
- flex-shrink: 0;
45
- justify-content: center;
46
- align-items: center;
47
- vertical-align: top;
48
- gap: var(--space-2);
49
- transition: var(--transition);
50
- border: 1px solid var(--color-a6);
51
- padding: 0 var(--space-3);
52
- height: calc(var(--text-1) + 2 * var(--space-2));
53
- color: var(--color-11);
54
- font-weight: 500;
55
- font-size: var(--text-1);
56
- line-height: 1;
57
- text-align: center;
58
- text-decoration: none;
59
- white-space: nowrap;
42
+ @layer fulldev {
43
+ .badge {
44
+ display: inline-flex;
45
+ flex-shrink: 0;
46
+ justify-content: center;
47
+ align-items: center;
48
+ vertical-align: top;
49
+ gap: var(--space-2);
50
+ transition: var(--transition);
51
+ border: 1px solid var(--color-a6);
52
+ padding: 0 var(--space-3);
53
+ height: calc(var(--text-1) + 2 * var(--space-2));
54
+ color: var(--color-11);
55
+ font-weight: 500;
56
+ font-size: var(--text-1);
57
+ line-height: 1;
58
+ text-align: center;
59
+ text-decoration: none;
60
+ white-space: nowrap;
60
61
 
61
- &[href] {
62
- border-color: var(--color-7);
62
+ &[href] {
63
+ border-color: var(--color-7);
63
64
 
64
- &:hover {
65
- border-color: var(--color-8);
65
+ &:hover {
66
+ border-color: var(--color-8);
67
+ }
66
68
  }
67
- }
68
69
 
69
- &.radius-none {
70
- border-radius: 0;
71
- }
70
+ &.radius-none {
71
+ border-radius: 0;
72
+ }
72
73
 
73
- &.radius-auto {
74
- border-radius: var(--radius-1);
75
- }
74
+ &.radius-auto {
75
+ border-radius: var(--radius-1);
76
+ }
76
77
 
77
- &.radius-full {
78
- border-radius: 9999px;
78
+ &.radius-full {
79
+ border-radius: 9999px;
80
+ }
79
81
  }
80
82
  }
81
83
  </style>
package/src/components/Bento.astro CHANGED
@@ -18,23 +18,25 @@ const { ...rest } = Astro.props
18
18
  </Root>
19
19
 
20
20
  <style is:global lang="scss">
21
- .bento {
22
- display: grid;
23
- position: relative;
24
- grid-template-columns: 1fr;
25
- gap: var(--space-4);
26
- width: 100%;
21
+ @layer fulldev {
22
+ .bento {
23
+ display: grid;
24
+ position: relative;
25
+ grid-template-columns: 1fr;
26
+ gap: var(--space-4);
27
+ width: 100%;
27
28
 
28
- @media (min-width: 1024px) {
29
- grid-template-columns: repeat(5, 1fr);
29
+ @media (min-width: 1024px) {
30
+ grid-template-columns: repeat(5, 1fr);
30
31
 
31
- & > * {
32
- grid-column: span 2;
33
- }
32
+ & > * {
33
+ grid-column: span 2;
34
+ }
34
35
 
35
- & > *:nth-child(3n + 2),
36
- & > *:nth-child(3n + 3) {
37
- grid-column: span 3;
36
+ & > *:nth-child(3n + 2),
37
+ & > *:nth-child(3n + 3) {
38
+ grid-column: span 3;
39
+ }
38
40
  }
39
41
  }
40
42
  }
package/src/components/Button.astro CHANGED
@@ -44,96 +44,98 @@ const {
44
44
  </Root>
45
45
 
46
46
  <style is:global lang="scss">
47
- .button {
48
- display: inline-flex;
49
- flex-shrink: 0;
50
- justify-content: center;
51
- align-items: center;
52
- vertical-align: top;
53
- gap: var(--space-2);
54
- appearance: none;
55
- transition: background-color var(--transition);
56
- cursor: pointer;
57
- outline: none;
58
- box-shadow: none;
59
- border: none;
60
- background: none;
61
- padding: 0 var(--space-4);
62
- height: calc(var(--text-2) + 2 * var(--space-4));
63
- color: var(--text);
64
- font-weight: 500;
65
- font-size: var(--text-2);
66
- line-height: 1;
67
- text-align: center;
68
- text-decoration: none;
69
- white-space: nowrap;
70
-
71
- .avatar {
72
- margin-right: calc(-1 * (var(--space-4)));
73
- margin-left: var(--space-1);
74
- padding: calc(var(--space-1) / 3);
75
- width: calc(var(--text-2) + 2 * var(--space-4)) !important;
76
- height: calc(var(--text-2) + 2 * var(--space-4)) !important;
77
- }
47
+ @layer fulldev {
48
+ .button {
49
+ display: inline-flex;
50
+ flex-shrink: 0;
51
+ justify-content: center;
52
+ align-items: center;
53
+ vertical-align: top;
54
+ gap: var(--space-2);
55
+ appearance: none;
56
+ transition: background-color var(--transition);
57
+ cursor: pointer;
58
+ outline: none;
59
+ box-shadow: none;
60
+ border: none;
61
+ background: none;
62
+ padding: 0 var(--space-4);
63
+ height: calc(var(--text-2) + 2 * var(--space-4));
64
+ color: var(--text);
65
+ font-weight: 500;
66
+ font-size: var(--text-2);
67
+ line-height: 1;
68
+ text-align: center;
69
+ text-decoration: none;
70
+ white-space: nowrap;
71
+
72
+ .avatar {
73
+ margin-right: calc(-1 * (var(--space-4)));
74
+ margin-left: var(--space-1);
75
+ padding: calc(var(--space-1) / 3);
76
+ width: calc(var(--text-2) + 2 * var(--space-4)) !important;
77
+ height: calc(var(--text-2) + 2 * var(--space-4)) !important;
78
+ }
78
79
 
79
- &:focus-visible {
80
- outline: 2px solid var(--focus) !important;
81
- outline-offset: 2px;
82
- }
80
+ &:focus-visible {
81
+ outline: 2px solid var(--focus) !important;
82
+ outline-offset: 2px;
83
+ }
83
84
 
84
- &:disabled {
85
- opacity: 0.5;
86
- cursor: not-allowed;
87
- pointer-events: none;
88
- }
85
+ &:disabled {
86
+ opacity: 0.5;
87
+ cursor: not-allowed;
88
+ pointer-events: none;
89
+ }
89
90
 
90
- &.radius-none {
91
- border-radius: 0;
92
- }
91
+ &.radius-none {
92
+ border-radius: 0;
93
+ }
93
94
 
94
- &.radius-auto {
95
- border-radius: var(--radius-1);
96
- }
95
+ &.radius-auto {
96
+ border-radius: var(--radius-1);
97
+ }
97
98
 
98
- &.radius-full {
99
- border-radius: 9999px;
100
- }
99
+ &.radius-full {
100
+ border-radius: 9999px;
101
+ }
101
102
 
102
- &.variant-primary {
103
- background-color: var(--color-9);
104
- color: var(--color-contrast);
103
+ &.variant-primary {
104
+ background-color: var(--color-9);
105
+ color: var(--color-contrast);
105
106
 
106
- &:hover,
107
- &:active {
108
- background-color: var(--color-10);
107
+ &:hover,
108
+ &:active {
109
+ background-color: var(--color-10);
110
+ }
109
111
  }
110
- }
111
112
 
112
- &.variant-secondary {
113
- box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
114
- background-color: var(--color-3);
115
- color: var(--color-11);
113
+ &.variant-secondary {
114
+ box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
115
+ background-color: var(--color-3);
116
+ color: var(--color-11);
116
117
 
117
- &:hover {
118
- background-color: var(--color-4);
119
- }
118
+ &:hover {
119
+ background-color: var(--color-4);
120
+ }
120
121
 
121
- &:active {
122
- background-color: var(--color-5);
122
+ &:active {
123
+ background-color: var(--color-5);
124
+ }
123
125
  }
124
- }
125
126
 
126
- &.variant-tertiary {
127
- box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
128
- background-color: transparent;
129
- color: var(--color-11);
127
+ &.variant-tertiary {
128
+ box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
129
+ background-color: transparent;
130
+ color: var(--color-11);
130
131
 
131
- &:hover {
132
- background-color: var(--color-3);
133
- }
132
+ &:hover {
133
+ background-color: var(--color-3);
134
+ }
134
135
 
135
- &:active {
136
- background-color: var(--color-4);
136
+ &:active {
137
+ background-color: var(--color-4);
138
+ }
137
139
  }
138
140
  }
139
141
  }
package/src/components/Card.astro CHANGED
@@ -146,67 +146,69 @@ const buttonVariant = (i: number) => {
146
146
  </Root>
147
147
 
148
148
  <style is:global lang="scss">
149
- .card {
150
- --inset-top: var(--space-5);
151
- --inset-left: var(--space-5);
152
- --inset-right: var(--space-5);
153
- --inset-bottom: var(--space-5);
149
+ @layer fulldev {
150
+ .card {
151
+ --inset-top: var(--space-5);
152
+ --inset-left: var(--space-5);
153
+ --inset-right: var(--space-5);
154
+ --inset-bottom: var(--space-5);
154
155
 
155
- position: relative;
156
- text-decoration: none;
156
+ position: relative;
157
+ text-decoration: none;
157
158
 
158
- &[href] {
159
- cursor: pointer;
159
+ &[href] {
160
+ cursor: pointer;
160
161
 
161
- > .root.image {
162
- transition: var(--transition);
163
- }
164
-
165
- &:hover {
166
162
  > .root.image {
167
- opacity: 0.8;
163
+ transition: var(--transition);
164
+ }
165
+
166
+ &:hover {
167
+ > .root.image {
168
+ opacity: 0.8;
169
+ }
168
170
  }
169
171
  }
170
- }
171
172
 
172
- &.ratio-landscape {
173
- aspect-ratio: 4/3;
174
- }
173
+ &.ratio-landscape {
174
+ aspect-ratio: 4/3;
175
+ }
175
176
 
176
- &.ratio-square {
177
- aspect-ratio: 1/1;
178
- }
177
+ &.ratio-square {
178
+ aspect-ratio: 1/1;
179
+ }
179
180
 
180
- &.ratio-portrait {
181
- aspect-ratio: 3/4;
182
- }
181
+ &.ratio-portrait {
182
+ aspect-ratio: 3/4;
183
+ }
183
184
 
184
- &.frame-fill {
185
- border-radius: 0 !important;
186
- }
185
+ &.frame-fill {
186
+ border-radius: 0 !important;
187
+ }
187
188
 
188
- &.frame-panel {
189
- border: 1px solid var(--color-a6);
190
- background-color: var(--color-2);
191
- padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
192
- var(--inset-left);
193
- overflow: hidden;
189
+ &.frame-panel {
190
+ border: 1px solid var(--color-a6);
191
+ background-color: var(--color-2);
192
+ padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
193
+ var(--inset-left);
194
+ overflow: hidden;
194
195
 
195
- &[href]:hover {
196
- border: 1px solid var(--color-a7);
197
- }
196
+ &[href]:hover {
197
+ border: 1px solid var(--color-a7);
198
+ }
198
199
 
199
- &.radius-none {
200
- border-radius: 0;
201
- }
200
+ &.radius-none {
201
+ border-radius: 0;
202
+ }
202
203
 
203
- &.radius-auto {
204
- border-radius: var(--radius-2);
204
+ &.radius-auto {
205
+ border-radius: var(--radius-2);
206
+ }
205
207
  }
206
- }
207
208
 
208
- > .image + * {
209
- margin-top: var(--space-5);
209
+ > .image + * {
210
+ margin-top: var(--space-5);
211
+ }
210
212
  }
211
213
  }
212
214
  </style>
package/src/components/Carousel.astro CHANGED
@@ -19,34 +19,36 @@ const { ...rest } = Astro.props
19
19
  </Root>
20
20
 
21
21
  <style is:global lang="scss">
22
- .carousel {
23
- --column-width: calc(21 * var(--space-4));
22
+ @layer fulldev {
23
+ .carousel {
24
+ --column-width: calc(21 * var(--space-4));
24
25
 
25
- display: flex;
26
- position: relative;
27
- position: relative;
28
- flex-direction: row;
29
- align-items: flex-start;
30
- gap: var(--space-4);
31
- padding-bottom: var(--space-4);
32
- width: 100%;
33
- overflow-x: auto;
34
- scroll-behavior: smooth;
35
- scroll-snap-type: x mandatory;
26
+ display: flex;
27
+ position: relative;
28
+ position: relative;
29
+ flex-direction: row;
30
+ align-items: flex-start;
31
+ gap: var(--space-4);
32
+ padding-bottom: var(--space-4);
33
+ width: 100%;
34
+ overflow-x: auto;
35
+ scroll-behavior: smooth;
36
+ scroll-snap-type: x mandatory;
36
37
 
37
- > .root {
38
- flex-grow: 0;
39
- flex-shrink: 0;
40
- width: var(--column-width);
41
- scroll-snap-align: center;
42
- }
38
+ > .root {
39
+ flex-grow: 0;
40
+ flex-shrink: 0;
41
+ width: var(--column-width);
42
+ scroll-snap-align: center;
43
+ }
43
44
 
44
- &.position-inset {
45
- margin-right: calc(var(--inset-right) * -1);
46
- margin-left: calc(var(--inset-left) * -1);
47
- padding-right: var(--inset-right);
48
- padding-left: var(--inset-left);
49
- width: calc(100% + var(--inset-left) + var(--inset-right));
45
+ &.position-inset {
46
+ margin-right: calc(var(--inset-right) * -1);
47
+ margin-left: calc(var(--inset-left) * -1);
48
+ padding-right: var(--inset-right);
49
+ padding-left: var(--inset-left);
50
+ width: calc(100% + var(--inset-left) + var(--inset-right));
51
+ }
50
52
  }
51
53
  }
52
54
  </style>
package/src/components/Checkbox.astro CHANGED
@@ -47,17 +47,19 @@ const {
47
47
  />
48
48
  </Root>
49
49
 
50
- <style>
51
- .checkbox {
52
- align-items: center;
53
- gap: var(--space-1);
50
+ <style lang="scss" is:global>
51
+ @layer fulldev {
52
+ .checkbox {
53
+ align-items: center;
54
+ gap: var(--space-1);
54
55
 
55
- input {
56
- display: block;
57
- width: var(--text-2);
58
- height: var(--text-2);
59
- accent-color: var(--color-9);
60
- color-scheme: dark;
56
+ input {
57
+ display: block;
58
+ width: var(--text-2);
59
+ height: var(--text-2);
60
+ accent-color: var(--color-9);
61
+ color-scheme: dark;
62
+ }
61
63
  }
62
64
  }
63
65
  </style>