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/src/components/Column.astro CHANGED
@@ -22,49 +22,51 @@ const { space = 'auto', align = 'start', ...rest } = Astro.props
22
22
  </Root>
23
23
 
24
24
  <style is:global lang="scss">
25
- .column {
26
- display: flex;
27
- position: relative;
28
- flex-direction: column;
25
+ @layer fulldev {
26
+ .column {
27
+ display: flex;
28
+ position: relative;
29
+ flex-direction: column;
29
30
 
30
- &.align-start {
31
- align-items: flex-start;
32
- text-align: left;
33
- }
34
-
35
- &.align-center {
36
- align-items: center;
37
- text-align: center;
38
-
39
- & > *:not(.align-center) > *:not(.align-center) {
31
+ &.align-start {
32
+ align-items: flex-start;
40
33
  text-align: left;
41
34
  }
42
- }
43
35
 
44
- &.align-end {
45
- align-items: flex-end;
46
- }
36
+ &.align-center {
37
+ align-items: center;
38
+ text-align: center;
47
39
 
48
- &.justify-start {
49
- justify-content: center;
50
- }
40
+ & > *:not(.align-center) > *:not(.align-center) {
41
+ text-align: left;
42
+ }
43
+ }
51
44
 
52
- &.justify-center {
53
- justify-content: center;
54
- }
45
+ &.align-end {
46
+ align-items: flex-end;
47
+ }
55
48
 
56
- &.justify-end {
57
- justify-content: flex-end;
58
- }
49
+ &.justify-start {
50
+ justify-content: center;
51
+ }
59
52
 
60
- &.space-auto {
61
- > * + * {
62
- margin-top: var(--space-auto);
53
+ &.justify-center {
54
+ justify-content: center;
63
55
  }
64
56
 
65
- > * + .carousel {
66
- margin-top: 0;
67
- padding-top: var(--space-auto);
57
+ &.justify-end {
58
+ justify-content: flex-end;
59
+ }
60
+
61
+ &.space-auto {
62
+ > * + * {
63
+ margin-top: var(--space-auto);
64
+ }
65
+
66
+ > * + .carousel {
67
+ margin-top: 0;
68
+ padding-top: var(--space-auto);
69
+ }
68
70
  }
69
71
  }
70
72
  }
package/src/components/Dialog.astro CHANGED
@@ -41,25 +41,27 @@ const {
41
41
  </dialog>
42
42
 
43
43
  <style lang="scss" is:global>
44
- .dialog {
45
- margin: auto !important;
46
- outline: 0;
47
- border: 0;
48
- background: none;
49
- padding: var(--space-7) var(--gutter);
50
- max-width: 768px;
51
- max-height: 80vh;
52
- overflow: hidden;
44
+ @layer fulldev {
45
+ .dialog {
46
+ margin: auto !important;
47
+ outline: 0;
48
+ border: 0;
49
+ background: none;
50
+ padding: var(--space-7) var(--gutter);
51
+ max-width: 768px;
52
+ max-height: 80vh;
53
+ overflow: hidden;
53
54
 
54
- &::backdrop {
55
- background: rgba(0, 0, 0, 0.5);
56
- }
55
+ &::backdrop {
56
+ background: rgba(0, 0, 0, 0.5);
57
+ }
57
58
 
58
- .card {
59
- width: 100%;
60
- height: 100%;
61
- max-height: 80vh !important;
62
- overflow: auto !important;
59
+ .card {
60
+ width: 100%;
61
+ height: 100%;
62
+ max-height: 80vh !important;
63
+ overflow: auto !important;
64
+ }
63
65
  }
64
66
  }
65
67
  </style>
package/src/components/Drawer.astro CHANGED
@@ -48,51 +48,53 @@ const {
48
48
  </Root>
49
49
 
50
50
  <style lang="scss" is:global>
51
- .drawer {
52
- flex-shrink: 0;
53
- align-items: stretch;
54
- box-sizing: border-box;
55
- margin: 0 !important;
56
- outline: 0;
57
- border: 0;
58
- background: var(--color-2);
59
- padding: 0;
60
- padding: var(--space-7) var(--space-7) var(--space-7) var(--gutter);
61
- max-width: 360px;
62
- height: 100vh;
63
- max-height: 100vh;
64
-
65
- &::backdrop {
66
- background: rgba(0, 0, 0, 0.5);
67
- }
68
-
69
- &.position-left {
70
- margin-right: 0;
71
- }
72
-
73
- &.position-right {
74
- right: 0;
75
- }
76
-
77
- .box {
78
- padding: calc(var(--space-5) * 2) calc(var(--space-7) * 3);
79
- min-width: calc(var(--space-7) * 14);
51
+ @layer fulldev {
52
+ .drawer {
53
+ flex-shrink: 0;
54
+ align-items: stretch;
55
+ box-sizing: border-box;
56
+ margin: 0 !important;
57
+ outline: 0;
58
+ border: 0;
59
+ background: var(--color-2);
60
+ padding: 0;
61
+ padding: var(--space-7) var(--space-7) var(--space-7) var(--gutter);
62
+ max-width: 360px;
80
63
  height: 100vh;
81
- overflow-x: hidden;
82
- overflow-y: auto;
64
+ max-height: 100vh;
65
+
66
+ &::backdrop {
67
+ background: rgba(0, 0, 0, 0.5);
68
+ }
83
69
 
84
70
  &.position-left {
85
- border-right: 1px solid var(--color-a6);
86
- padding-left: var(--gutter);
71
+ margin-right: 0;
87
72
  }
88
73
 
89
74
  &.position-right {
90
- border-left: 1px solid var(--color-a6);
91
- padding-right: var(--gutter);
75
+ right: 0;
92
76
  }
93
77
 
94
- &.frame-fill {
95
- background-color: var(--color-2);
78
+ .box {
79
+ padding: calc(var(--space-5) * 2) calc(var(--space-7) * 3);
80
+ min-width: calc(var(--space-7) * 14);
81
+ height: 100vh;
82
+ overflow-x: hidden;
83
+ overflow-y: auto;
84
+
85
+ &.position-left {
86
+ border-right: 1px solid var(--color-a6);
87
+ padding-left: var(--gutter);
88
+ }
89
+
90
+ &.position-right {
91
+ border-left: 1px solid var(--color-a6);
92
+ padding-right: var(--gutter);
93
+ }
94
+
95
+ &.frame-fill {
96
+ background-color: var(--color-2);
97
+ }
96
98
  }
97
99
  }
98
100
  }
package/src/components/Footer.astro CHANGED
@@ -93,52 +93,54 @@ const {
93
93
  </Root>
94
94
 
95
95
  <style is:global lang="scss">
96
- .footer {
97
- --inset-top: var(--space-7);
98
- --inset-left: var(--gutter-left);
99
- --inset-right: var(--gutter-right);
100
- --inset-bottom: var(--space-7);
96
+ @layer fulldev {
97
+ .footer {
98
+ --inset-top: var(--space-7);
99
+ --inset-left: var(--gutter-left);
100
+ --inset-right: var(--gutter-right);
101
+ --inset-bottom: var(--space-7);
101
102
 
102
- margin-top: auto;
103
- width: 100%;
103
+ margin-top: auto;
104
+ width: 100%;
104
105
 
105
- &.frame-none {
106
- border-top: 1px solid var(--base-a6);
107
- padding: var(--space-7) var(--gutter);
108
- }
106
+ &.frame-none {
107
+ border-top: 1px solid var(--base-a6);
108
+ padding: var(--space-7) var(--gutter);
109
+ }
109
110
 
110
- &.frame-fill {
111
- border-top: 1px solid var(--base-a6);
112
- background-color: var(--color-2);
113
- padding: var(--space-7) var(--gutter);
114
- }
111
+ &.frame-fill {
112
+ border-top: 1px solid var(--base-a6);
113
+ background-color: var(--color-2);
114
+ padding: var(--space-7) var(--gutter);
115
+ }
115
116
 
116
- &.frame-panel {
117
- margin: var(--space-7) var(--gutter);
118
- border: 1px solid var(--base-a6);
119
- border-radius: var(--radius-2);
120
- background-color: var(--color-2);
121
- padding: var(--space-6) min(var(--gutter), var(--space-7));
122
- max-width: calc(100vw - 2 * var(--gutter));
123
- overflow: hidden;
117
+ &.frame-panel {
118
+ margin: var(--space-7) var(--gutter);
119
+ border: 1px solid var(--base-a6);
120
+ border-radius: var(--radius-2);
121
+ background-color: var(--color-2);
122
+ padding: var(--space-6) min(var(--gutter), var(--space-7));
123
+ max-width: calc(100vw - 2 * var(--gutter));
124
+ overflow: hidden;
124
125
 
125
- @media (min-width: 1024px) {
126
- padding-top: var(--space-7);
127
- padding-bottom: var(--space-7);
126
+ @media (min-width: 1024px) {
127
+ padding-top: var(--space-7);
128
+ padding-bottom: var(--space-7);
129
+ }
128
130
  }
129
- }
130
131
 
131
- &.align-start {
132
- align-items: flex-start;
133
- text-align: left;
134
- }
132
+ &.align-start {
133
+ align-items: flex-start;
134
+ text-align: left;
135
+ }
135
136
 
136
- &.align-center {
137
- align-items: center;
138
- }
137
+ &.align-center {
138
+ align-items: center;
139
+ }
139
140
 
140
- &.align-end {
141
- align-items: flex-end;
141
+ &.align-end {
142
+ align-items: flex-end;
143
+ }
142
144
  }
143
145
  }
144
146
  </style>
package/src/components/Grid.astro CHANGED
@@ -18,13 +18,15 @@ const { ...rest } = Astro.props
18
18
  </Root>
19
19
 
20
20
  <style is:global lang="scss">
21
- .grid {
22
- --column-width: calc(21 * var(--space-4));
21
+ @layer fulldev {
22
+ .grid {
23
+ --column-width: calc(21 * var(--space-4));
23
24
 
24
- display: grid;
25
- position: relative;
26
- grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
27
- gap: var(--space-4);
28
- width: 100%;
25
+ display: grid;
26
+ position: relative;
27
+ grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
28
+ gap: var(--space-4);
29
+ width: 100%;
30
+ }
29
31
  }
30
32
  </style>
package/src/components/Head.astro CHANGED
@@ -11,9 +11,8 @@ const { title, description, image, seo, code } = data || {}
11
11
  const renderTitle = render && (await render()).headings[0]?.text
12
12
  const mergedTitle = seo?.title || title || renderTitle
13
13
  const mergedDescription = seo?.description || description
14
- const mergedImage = (seo?.image || image)?.startsWith('/')
15
- ? (Astro.url.origin ?? '' + (seo?.image || image) ?? '')
16
- : seo?.image || image
14
+ const mergedImage =
15
+ seo?.image || image ? Astro.url.origin + (seo?.image || image) : undefined
17
16
  ---
18
17
 
19
18
  <head>
package/src/components/Header.astro CHANGED
@@ -104,7 +104,11 @@ const url = Astro.url.href
104
104
  <Link
105
105
  {...link}
106
106
  class="sidebar-link"
107
- color={url.endsWith(link.href) ? 'brand' : undefined}
107
+ color={
108
+ url.replace(/\/$/, '').endsWith(link.href)
109
+ ? 'brand'
110
+ : undefined
111
+ }
108
112
  />
109
113
  ))}
110
114
  {item.folder &&
@@ -138,66 +142,68 @@ const url = Astro.url.href
138
142
  );
139
143
  }
140
144
 
141
- .header {
142
- --screen: 1536px;
143
- --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
144
-
145
- display: flex;
146
- position: relative;
147
- top: 0;
148
- right: 0;
149
- left: 0;
150
- align-items: center;
151
- z-index: 10;
152
- border-bottom: 1px solid var(--color-a6);
153
- width: 100%;
154
- // TODO: fix this
155
- max-width: calc(100% - (2 * var(--outer-x)));
156
- height: var(--header-height);
157
-
158
- &.frame-fill {
159
- background-color: var(--color-2);
160
- padding: 0 var(--gutter);
161
- }
145
+ @layer fulldev {
146
+ .header {
147
+ --screen: 1536px;
148
+ --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
149
+
150
+ display: flex;
151
+ position: relative;
152
+ top: 0;
153
+ right: 0;
154
+ left: 0;
155
+ align-items: center;
156
+ z-index: 10;
157
+ border-bottom: 1px solid var(--color-a6);
158
+ width: 100%;
159
+ // TODO: fix this
160
+ max-width: calc(100% - (2 * var(--outer-x)));
161
+ height: var(--header-height);
162
+
163
+ &.frame-fill {
164
+ background-color: var(--color-2);
165
+ padding: 0 var(--gutter);
166
+ }
162
167
 
163
- &.frame-panel {
164
- margin: var(--space-3) var(--gutter);
165
- border: 1px solid var(--color-a6);
166
- border-radius: var(--radius-2);
167
- padding: var(--space-4) min(var(--gutter), var(--space-4));
168
- width: auto;
169
- overflow: hidden;
170
- }
168
+ &.frame-panel {
169
+ margin: var(--space-3) var(--gutter);
170
+ border: 1px solid var(--color-a6);
171
+ border-radius: var(--radius-2);
172
+ padding: var(--space-4) min(var(--gutter), var(--space-4));
173
+ width: auto;
174
+ overflow: hidden;
175
+ }
171
176
 
172
- &.position-fixed {
173
- position: fixed;
174
- }
177
+ &.position-fixed {
178
+ position: fixed;
179
+ }
175
180
 
176
- &.position-absolute {
177
- position: absolute;
178
- }
181
+ &.position-absolute {
182
+ position: absolute;
183
+ }
179
184
 
180
- &.position-sticky {
181
- position: sticky;
182
- top: -1px;
183
- }
185
+ &.position-sticky {
186
+ position: sticky;
187
+ top: -1px;
188
+ }
184
189
 
185
- .header-link {
186
- display: none;
187
- font-size: var(--text-2);
190
+ .header-link {
191
+ display: none;
192
+ font-size: var(--text-2);
188
193
 
189
- @media (min-width: 1024px) {
190
- display: flex;
194
+ @media (min-width: 1024px) {
195
+ display: flex;
196
+ }
191
197
  }
192
- }
193
198
 
194
- .drawer-link {
195
- font-size: var(--text-2);
196
- }
199
+ .drawer-link {
200
+ font-size: var(--text-2);
201
+ }
197
202
 
198
- .drawer-button {
199
- @media (min-width: 1024px) {
200
- display: none !important;
203
+ .drawer-button {
204
+ @media (min-width: 1024px) {
205
+ display: none !important;
206
+ }
201
207
  }
202
208
  }
203
209
  }
package/src/components/Heading.astro CHANGED
@@ -40,40 +40,42 @@ const {
40
40
  </Root>
41
41
 
42
42
  <style is:global lang="scss">
43
- .heading {
44
- margin: 0;
45
- max-width: calc(var(--space-4) * 44);
46
- scroll-margin: var(--space-5);
47
- color: var(--color-11);
48
- font-weight: var(--heading-font-weight);
49
- font-weight: 700;
50
- line-height: 1.1;
51
- font-family: var(--heading-font-family);
52
- letter-spacing: -0.025em;
53
- text-decoration: none;
43
+ @layer fulldev {
44
+ .heading {
45
+ margin: 0;
46
+ max-width: calc(var(--space-4) * 44);
47
+ scroll-margin: var(--space-5);
48
+ color: var(--color-11);
49
+ font-weight: var(--heading-font-weight);
50
+ font-weight: 700;
51
+ line-height: 1.1;
52
+ font-family: var(--heading-font-family);
53
+ letter-spacing: -0.025em;
54
+ text-decoration: none;
54
55
 
55
- &.level-1 {
56
- font-size: var(--text-8);
57
- }
56
+ &.level-1 {
57
+ font-size: var(--text-8);
58
+ }
58
59
 
59
- &.level-2 {
60
- font-size: var(--text-7);
61
- }
60
+ &.level-2 {
61
+ font-size: var(--text-7);
62
+ }
62
63
 
63
- &.level-3 {
64
- font-size: var(--text-6);
65
- }
64
+ &.level-3 {
65
+ font-size: var(--text-6);
66
+ }
66
67
 
67
- &.level-4 {
68
- font-size: var(--text-5);
69
- }
68
+ &.level-4 {
69
+ font-size: var(--text-5);
70
+ }
70
71
 
71
- &.level-5 {
72
- font-size: var(--text-4);
73
- }
72
+ &.level-5 {
73
+ font-size: var(--text-4);
74
+ }
74
75
 
75
- &.level-6 {
76
- font-size: var(--text-3);
76
+ &.level-6 {
77
+ font-size: var(--text-3);
78
+ }
77
79
  }
78
80
  }
79
81
  </style>
package/src/components/Icon.astro CHANGED
@@ -34,20 +34,22 @@ const icon = trimmedName
34
34
  </Root>
35
35
 
36
36
  <style is:global lang="scss">
37
- .icon {
38
- display: inline-flex;
39
- position: relative;
40
- justify-content: center;
41
- align-items: center;
42
- width: 1em;
43
- height: 1em;
44
- color: var(--color-11);
45
- font-size: inherit;
37
+ @layer fulldev {
38
+ .icon {
39
+ display: inline-flex;
40
+ position: relative;
41
+ justify-content: center;
42
+ align-items: center;
43
+ width: 1em;
44
+ height: 1em;
45
+ color: var(--color-11);
46
+ font-size: inherit;
46
47
 
47
- svg {
48
- position: absolute;
49
- width: 120%;
50
- height: 120%;
48
+ svg {
49
+ position: absolute;
50
+ width: 120%;
51
+ height: 120%;
52
+ }
51
53
  }
52
54
  }
53
55
  </style>