@gridui/grid 2.1.3 → 2.2.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.
Files changed (50) hide show
  1. package/README.md +13 -13
  2. package/dist/{primitives/container → container}/container.d.ts +2 -2
  3. package/dist/{primitives/container → container}/style.d.ts +2 -2
  4. package/dist/dashboard-frame/dashboard-frame.d.ts +21 -0
  5. package/dist/dashboard-frame/style.d.ts +12 -0
  6. package/dist/frame-boundary/frame-boundary.d.ts +15 -0
  7. package/dist/frame-boundary/style.d.ts +9 -0
  8. package/dist/frame-footer/frame-footer.d.ts +20 -0
  9. package/dist/{frame/chrome → frame-footer}/style.d.ts +1 -2
  10. package/dist/frame-header/frame-header.d.ts +15 -0
  11. package/dist/frame-rail/frame-rail.d.ts +11 -0
  12. package/dist/{frame/rail → frame-rail}/style.d.ts +1 -1
  13. package/dist/{frame/rail/rail.d.ts → frame-rail-group/frame-rail-group.d.ts} +3 -7
  14. package/dist/frame-region/frame-region.d.ts +12 -0
  15. package/dist/frame-region-row/frame-region-row.d.ts +12 -0
  16. package/dist/{frame/section.d.ts → frame-section/frame-section.d.ts} +7 -7
  17. package/dist/frame-sections/frame-sections.d.ts +9 -0
  18. package/dist/{frame/texture/texture.d.ts → frame-texture/frame-texture.d.ts} +3 -3
  19. package/dist/{primitives/grid → grid}/grid.d.ts +5 -5
  20. package/dist/grid/responsive.d.ts +9 -0
  21. package/dist/{primitives/grid → grid}/style.d.ts +1 -2
  22. package/dist/{primitives/grid → grid}/tracks.d.ts +2 -2
  23. package/dist/{primitives/grid → grid-item}/grid-item.d.ts +4 -4
  24. package/dist/grid-item/responsive.d.ts +8 -0
  25. package/dist/grid-item/style.d.ts +7 -0
  26. package/dist/index.d.ts +44 -2
  27. package/dist/index.js +484 -294
  28. package/dist/index.js.map +4 -4
  29. package/dist/page-frame/page-frame.d.ts +18 -0
  30. package/dist/{frame/page → page-frame}/style.d.ts +2 -2
  31. package/dist/{primitives/row → row}/row.d.ts +2 -2
  32. package/dist/{primitives/row → row}/style.d.ts +1 -1
  33. package/dist/shared/chrome-style.d.ts +7 -0
  34. package/dist/shared/chrome.d.ts +16 -0
  35. package/dist/{frame/decoration → shared}/decoration.d.ts +3 -2
  36. package/dist/{frame/style.d.ts → shared/frame-style.d.ts} +2 -2
  37. package/dist/shared/responsive-types.d.ts +8 -0
  38. package/dist/shared/texture-types.d.ts +7 -0
  39. package/dist/{primitives → shared}/types.d.ts +1 -1
  40. package/dist/{primitives/split → split}/split.d.ts +4 -3
  41. package/dist/{primitives/stack → stack}/stack.d.ts +3 -3
  42. package/dist/{primitives/stack → stack}/style.d.ts +1 -1
  43. package/dist/styles.css +243 -32
  44. package/package.json +6 -11
  45. package/dist/frame/boundary/boundary.d.ts +0 -12
  46. package/dist/frame/chrome/chrome.d.ts +0 -29
  47. package/dist/frame/export.d.ts +0 -19
  48. package/dist/frame/page/page.d.ts +0 -20
  49. package/dist/primitives/export.d.ts +0 -19
  50. package/dist/primitives/responsive.d.ts +0 -11
package/dist/styles.css CHANGED
@@ -110,6 +110,66 @@
110
110
  .text-muted {
111
111
  color: var(--gridui-muted);
112
112
  }
113
+ .\[--gridui-dashboard-compact-end-minimum\:0px\] {
114
+ --gridui-dashboard-compact-end-minimum: 0px;
115
+ }
116
+ .\[--gridui-dashboard-compact-end\:0px\] {
117
+ --gridui-dashboard-compact-end: 0px;
118
+ }
119
+ .\[--gridui-dashboard-compact-end\:var\(--gridui-space-8\)\] {
120
+ --gridui-dashboard-compact-end: var(--gridui-space-8);
121
+ }
122
+ .\[--gridui-dashboard-compact-end\:var\(--gridui-space-16\)\] {
123
+ --gridui-dashboard-compact-end: var(--gridui-space-16);
124
+ }
125
+ .\[--gridui-dashboard-compact-end\:var\(--gridui-space-24\)\] {
126
+ --gridui-dashboard-compact-end: var(--gridui-space-24);
127
+ }
128
+ .\[--gridui-dashboard-compact-start-minimum\:0px\] {
129
+ --gridui-dashboard-compact-start-minimum: 0px;
130
+ }
131
+ .\[--gridui-dashboard-compact-start\:0px\] {
132
+ --gridui-dashboard-compact-start: 0px;
133
+ }
134
+ .\[--gridui-dashboard-compact-start\:var\(--gridui-space-8\)\] {
135
+ --gridui-dashboard-compact-start: var(--gridui-space-8);
136
+ }
137
+ .\[--gridui-dashboard-compact-start\:var\(--gridui-space-16\)\] {
138
+ --gridui-dashboard-compact-start: var(--gridui-space-16);
139
+ }
140
+ .\[--gridui-dashboard-compact-start\:var\(--gridui-space-24\)\] {
141
+ --gridui-dashboard-compact-start: var(--gridui-space-24);
142
+ }
143
+ .\[--gridui-dashboard-end-minimum\:0px\] {
144
+ --gridui-dashboard-end-minimum: 0px;
145
+ }
146
+ .\[--gridui-dashboard-end\:0px\] {
147
+ --gridui-dashboard-end: 0px;
148
+ }
149
+ .\[--gridui-dashboard-end\:var\(--gridui-space-8\)\] {
150
+ --gridui-dashboard-end: var(--gridui-space-8);
151
+ }
152
+ .\[--gridui-dashboard-end\:var\(--gridui-space-16\)\] {
153
+ --gridui-dashboard-end: var(--gridui-space-16);
154
+ }
155
+ .\[--gridui-dashboard-end\:var\(--gridui-space-24\)\] {
156
+ --gridui-dashboard-end: var(--gridui-space-24);
157
+ }
158
+ .\[--gridui-dashboard-start-minimum\:0px\] {
159
+ --gridui-dashboard-start-minimum: 0px;
160
+ }
161
+ .\[--gridui-dashboard-start\:0px\] {
162
+ --gridui-dashboard-start: 0px;
163
+ }
164
+ .\[--gridui-dashboard-start\:var\(--gridui-space-8\)\] {
165
+ --gridui-dashboard-start: var(--gridui-space-8);
166
+ }
167
+ .\[--gridui-dashboard-start\:var\(--gridui-space-16\)\] {
168
+ --gridui-dashboard-start: var(--gridui-space-16);
169
+ }
170
+ .\[--gridui-dashboard-start\:var\(--gridui-space-24\)\] {
171
+ --gridui-dashboard-start: var(--gridui-space-24);
172
+ }
113
173
  .\[\&\>\.gridui-frame-rail-content\]\:sticky > .gridui-frame-rail-content {
114
174
  position: sticky;
115
175
  }
@@ -140,6 +200,65 @@
140
200
  }
141
201
  }
142
202
  @layer components {
203
+ .gridui-dashboard-frame {
204
+ --gridui-dashboard-outline-clearance: max(calc(var(--gridui-hover-width) + var(--gridui-hover-offset)), calc(var(--gridui-focus-width) + var(--gridui-focus-offset)));
205
+ --gridui-dashboard-start-minimum: var(--gridui-dashboard-outline-clearance);
206
+ --gridui-dashboard-end-minimum: var(--gridui-dashboard-outline-clearance);
207
+ --gridui-dashboard-compact-start-minimum: var(--gridui-dashboard-outline-clearance);
208
+ --gridui-dashboard-compact-end-minimum: var(--gridui-dashboard-outline-clearance);
209
+ --gridui-dashboard-start-gutter: var(--gridui-dashboard-compact-start);
210
+ --gridui-dashboard-end-gutter: var(--gridui-dashboard-compact-end);
211
+ --gridui-dashboard-start-floor: var(--gridui-dashboard-compact-start-minimum);
212
+ --gridui-dashboard-end-floor: var(--gridui-dashboard-compact-end-minimum);
213
+ --gridui-dashboard-effective-start: max(var(--gridui-dashboard-start-gutter), var(--gridui-dashboard-start-floor));
214
+ --gridui-dashboard-effective-end: max(var(--gridui-dashboard-end-gutter), var(--gridui-dashboard-end-floor));
215
+ --gridui-frame-outset-left: var(--gridui-dashboard-effective-start);
216
+ --gridui-frame-outset-right: var(--gridui-dashboard-effective-end);
217
+ display: flex;
218
+ min-width: 0;
219
+ min-height: 0;
220
+ height: 100%;
221
+ padding-inline: var(--gridui-dashboard-effective-start) var(--gridui-dashboard-effective-end);
222
+ color: var(--gridui-foreground);
223
+ background: var(--gridui-background);
224
+ isolation: isolate;
225
+ }
226
+ .gridui-dashboard-frame:dir(rtl) {
227
+ --gridui-frame-outset-left: var(--gridui-dashboard-effective-end);
228
+ --gridui-frame-outset-right: var(--gridui-dashboard-effective-start);
229
+ }
230
+ .gridui-dashboard-frame-body {
231
+ --gridui-frame-bleed-left: calc(var(--gridui-frame-outset-left) + 1px);
232
+ --gridui-frame-bleed-right: calc(var(--gridui-frame-outset-right) + 1px);
233
+ --gridui-frame-decoration-left-clearance: max(0px, calc(var(--gridui-frame-outset-left) - 1px));
234
+ --gridui-frame-decoration-right-clearance: max(0px, calc(var(--gridui-frame-outset-right) - 1px));
235
+ --gridui-frame-decoration-block-clearance: 0px;
236
+ position: relative;
237
+ display: flex;
238
+ flex: 1;
239
+ min-width: 0;
240
+ min-height: 0;
241
+ border-inline: 1px solid var(--gridui-border);
242
+ }
243
+ .gridui-dashboard-frame-body > * {
244
+ flex: 1;
245
+ min-width: 0;
246
+ min-height: 0;
247
+ }
248
+ .gridui-dashboard-frame > .gridui-dashboard-frame-body > .gridui-frame-decoration {
249
+ display: none;
250
+ }
251
+ @media (min-width: 40rem) {
252
+ .gridui-dashboard-frame {
253
+ --gridui-dashboard-start-gutter: var(--gridui-dashboard-start);
254
+ --gridui-dashboard-start-floor: var(--gridui-dashboard-start-minimum);
255
+ --gridui-dashboard-end-floor: var(--gridui-dashboard-end-minimum);
256
+ --gridui-dashboard-end-gutter: var(--gridui-dashboard-end);
257
+ }
258
+ .gridui-dashboard-frame > .gridui-dashboard-frame-body > .gridui-frame-decoration {
259
+ display: block;
260
+ }
261
+ }
143
262
  .gridui-frame-rail-body, .gridui-frame-page-header, .gridui-frame-page-footer, .gridui-frame-main, .gridui-frame-sections {
144
263
  display: grid;
145
264
  min-width: 0;
@@ -250,6 +369,31 @@
250
369
  --gridui-frame-rail-display: var(--gridui-rail-display-lg);
251
370
  }
252
371
  }
372
+ .gridui-frame-boundary {
373
+ position: relative;
374
+ flex-shrink: 0;
375
+ min-width: 0;
376
+ z-index: var(--gridui-z-boundary);
377
+ border-top: 1px solid var(--gridui-frame-previous-border, var(--gridui-border));
378
+ pointer-events: none;
379
+ }
380
+ .gridui-frame-divider {
381
+ box-sizing: border-box;
382
+ height: var(--gridui-band-size);
383
+ border-bottom: 1px solid var(--gridui-border);
384
+ background: var(--gridui-brand-tint);
385
+ pointer-events: none;
386
+ }
387
+ .gridui-frame-stripe {
388
+ background: repeating-linear-gradient( 135deg, var(--gridui-brand-art) 0 2px, var(--gridui-brand-tint) 2px 8px );
389
+ }
390
+ .gridui-frame-space {
391
+ height: var(--gridui-boundary-space-size);
392
+ border: 0;
393
+ }
394
+ .gridui-frame-boundary[data-boundary-extent="frame"] {
395
+ grid-column: 1 / -1;
396
+ }
253
397
  :where(.gridui-frame-section, .gridui-frame-footer, .gridui-frame-fill, .gridui-frame-sections) {
254
398
  --gridui-frame-previous-border: initial;
255
399
  }
@@ -266,26 +410,7 @@
266
410
  --gridui-frame-previous-border: var(--gridui-danger-border);
267
411
  }
268
412
  .gridui-container > .gridui-frame-boundary {
269
- position: relative;
270
- z-index: var(--gridui-z-boundary);
271
413
  grid-column: full-start / full-end;
272
- border-top: 1px solid var(--gridui-frame-previous-border, var(--gridui-border));
273
- pointer-events: none;
274
- }
275
- .gridui-container > .gridui-frame-divider {
276
- box-sizing: border-box;
277
- grid-column: full-start / full-end;
278
- height: var(--gridui-band-size);
279
- border-bottom: 1px solid var(--gridui-border);
280
- background: var(--gridui-brand-tint);
281
- pointer-events: none;
282
- }
283
- .gridui-container > .gridui-frame-stripe {
284
- background: repeating-linear-gradient( 135deg, var(--gridui-brand-art) 0 2px, var(--gridui-brand-tint) 2px 8px );
285
- }
286
- .gridui-container > .gridui-frame-space {
287
- height: var(--gridui-boundary-space-size);
288
- border: 0;
289
414
  }
290
415
  .gridui-frame-surface {
291
416
  position: relative;
@@ -295,39 +420,54 @@
295
420
  z-index: var(--gridui-z-interaction);
296
421
  }
297
422
  .gridui-frame-decoration {
423
+ --gridui-frame-decoration-width: 0px;
424
+ --gridui-frame-decoration-outset: 0px;
298
425
  position: absolute;
299
426
  z-index: var(--gridui-z-content);
300
427
  display: none;
301
- inset: 0 0 0 calc(0px - var(--gridui-frame-rail-width, 0px));
428
+ inset-block: 0;
429
+ width: min(var(--gridui-frame-decoration-width), var(--gridui-frame-decoration-clearance));
302
430
  pointer-events: none;
303
431
  }
432
+ .gridui-frame-decoration[data-side="start"]:dir(ltr), .gridui-frame-decoration[data-side="end"]:dir(rtl) {
433
+ --gridui-frame-decoration-clearance: var(--gridui-frame-decoration-left-clearance, max(var(--gridui-frame-decoration-width), var(--gridui-frame-decoration-outset)));
434
+ --gridui-frame-decoration-anchor: left;
435
+ left: calc(0px - var(--gridui-frame-rail-width, 0px) - min(var(--gridui-frame-decoration-outset), var(--gridui-frame-decoration-clearance)));
436
+ }
437
+ .gridui-frame-decoration[data-side="end"]:dir(ltr), .gridui-frame-decoration[data-side="start"]:dir(rtl) {
438
+ --gridui-frame-decoration-clearance: var(--gridui-frame-decoration-right-clearance, max(var(--gridui-frame-decoration-width), var(--gridui-frame-decoration-outset)));
439
+ --gridui-frame-decoration-anchor: right;
440
+ right: calc(0px - min(var(--gridui-frame-decoration-outset), var(--gridui-frame-decoration-clearance)));
441
+ }
304
442
  .gridui-frame-decoration[data-decoration="nodes"] {
443
+ --gridui-frame-decoration-width: 5px;
444
+ --gridui-frame-decoration-outset: 3px;
305
445
  display: block;
306
- inset-block: -3px auto;
446
+ inset-block: calc(0px - min(3px, var(--gridui-frame-decoration-block-clearance, 3px))) auto;
307
447
  height: 5px;
308
- margin-inline: -3px;
309
- background: linear-gradient(var(--gridui-border), var(--gridui-border)) left / 5px 5px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) right / 5px 5px no-repeat;
448
+ background: linear-gradient(var(--gridui-border), var(--gridui-border));
310
449
  }
311
450
  @media (min-width: 40rem) {
312
451
  .gridui-frame-decoration {
313
452
  display: block;
314
453
  }
315
454
  .gridui-frame-decoration[data-decoration="marks"] {
455
+ --gridui-frame-decoration-width: 11px;
456
+ --gridui-frame-decoration-outset: 12px;
316
457
  inset-block: 24px auto;
317
458
  height: 36px;
318
- margin-inline: -12px;
319
- background: linear-gradient(var(--gridui-border), var(--gridui-border)) top left / 11px 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom left / 11px 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) top right / 11px 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom right / 11px 1px no-repeat;
459
+ background: linear-gradient(var(--gridui-border), var(--gridui-border)) top / 100% 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom / 100% 1px no-repeat;
320
460
  }
321
461
  .gridui-frame-decoration[data-decoration="corners"] {
322
- margin: -4px;
323
- background: linear-gradient(var(--gridui-border), var(--gridui-border)) top left / 9px 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) top left / 1px 9px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) top right / 9px 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) top right / 1px 9px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom left / 9px 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom left / 1px 9px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom right / 9px 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom right / 1px 9px no-repeat;
462
+ --gridui-frame-decoration-width: 9px;
463
+ --gridui-frame-decoration-outset: 4px;
464
+ inset-block: calc(0px - min(4px, var(--gridui-frame-decoration-block-clearance, 4px)));
465
+ background: linear-gradient(var(--gridui-border), var(--gridui-border)) top / 100% 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) top var(--gridui-frame-decoration-anchor) / 1px 9px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom / 100% 1px no-repeat, linear-gradient(var(--gridui-border), var(--gridui-border)) bottom var(--gridui-frame-decoration-anchor) / 1px 9px no-repeat;
324
466
  }
325
467
  .gridui-frame-decoration[data-decoration="ticks"] {
326
- margin-inline: -13px;
327
- background-image: linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--gridui-decoration) calc(50% - 0.5px), var(--gridui-decoration) calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--gridui-decoration) calc(50% - 0.5px), var(--gridui-decoration) calc(50% + 0.5px), transparent calc(50% + 0.5px));
328
- background-position: left center, right center;
329
- background-size: 12px 12px;
330
- background-repeat: no-repeat round;
468
+ --gridui-frame-decoration-width: 12px;
469
+ --gridui-frame-decoration-outset: 13px;
470
+ background: linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--gridui-decoration) calc(50% - 0.5px), var(--gridui-decoration) calc(50% + 0.5px), transparent calc(50% + 0.5px)) center / 100% 12px no-repeat round;
331
471
  }
332
472
  }
333
473
  .gridui-frame-texture {
@@ -549,6 +689,20 @@
549
689
  .gridui-split[data-direction="column-reverse"][data-seam="line"] > :where(:not([hidden]) ~ :not([hidden])) {
550
690
  border-block-end-width: 1px;
551
691
  }
692
+ .gridui-split[data-direction="row"]:where([data-order="physical"]:dir(rtl)) {
693
+ flex-direction: row-reverse;
694
+ }
695
+ .gridui-split[data-direction="row"]:where([data-order="physical"]:dir(rtl))[data-seam="line"] > :where(:not([hidden]) ~ :not([hidden])) {
696
+ border: 0 solid var(--gridui-border);
697
+ border-left-width: 1px;
698
+ }
699
+ .gridui-split[data-direction="row-reverse"]:where([data-order="physical"]:dir(rtl)) {
700
+ flex-direction: row;
701
+ }
702
+ .gridui-split[data-direction="row-reverse"]:where([data-order="physical"]:dir(rtl))[data-seam="line"] > :where(:not([hidden]) ~ :not([hidden])) {
703
+ border: 0 solid var(--gridui-border);
704
+ border-right-width: 1px;
705
+ }
552
706
  @media (min-width: 40rem) {
553
707
  .gridui-split[data-direction-md="row"] {
554
708
  flex-direction: row;
@@ -577,6 +731,20 @@
577
731
  .gridui-split[data-direction-md="column-reverse"][data-seam-md="line"] > :where(:not([hidden]) ~ :not([hidden])) {
578
732
  border-block-end-width: 1px;
579
733
  }
734
+ .gridui-split[data-direction-md="row"]:where([data-order="physical"]:dir(rtl)) {
735
+ flex-direction: row-reverse;
736
+ }
737
+ .gridui-split[data-direction-md="row"]:where([data-order="physical"]:dir(rtl))[data-seam-md="line"] > :where(:not([hidden]) ~ :not([hidden])) {
738
+ border: 0 solid var(--gridui-border);
739
+ border-left-width: 1px;
740
+ }
741
+ .gridui-split[data-direction-md="row-reverse"]:where([data-order="physical"]:dir(rtl)) {
742
+ flex-direction: row;
743
+ }
744
+ .gridui-split[data-direction-md="row-reverse"]:where([data-order="physical"]:dir(rtl))[data-seam-md="line"] > :where(:not([hidden]) ~ :not([hidden])) {
745
+ border: 0 solid var(--gridui-border);
746
+ border-right-width: 1px;
747
+ }
580
748
  }
581
749
  @media (min-width: 64rem) {
582
750
  .gridui-split[data-direction-lg="row"] {
@@ -606,6 +774,49 @@
606
774
  .gridui-split[data-direction-lg="column-reverse"][data-seam-lg="line"] > :where(:not([hidden]) ~ :not([hidden])) {
607
775
  border-block-end-width: 1px;
608
776
  }
777
+ .gridui-split[data-direction-lg="row"]:where([data-order="physical"]:dir(rtl)) {
778
+ flex-direction: row-reverse;
779
+ }
780
+ .gridui-split[data-direction-lg="row"]:where([data-order="physical"]:dir(rtl))[data-seam-lg="line"] > :where(:not([hidden]) ~ :not([hidden])) {
781
+ border: 0 solid var(--gridui-border);
782
+ border-left-width: 1px;
783
+ }
784
+ .gridui-split[data-direction-lg="row-reverse"]:where([data-order="physical"]:dir(rtl)) {
785
+ flex-direction: row;
786
+ }
787
+ .gridui-split[data-direction-lg="row-reverse"]:where([data-order="physical"]:dir(rtl))[data-seam-lg="line"] > :where(:not([hidden]) ~ :not([hidden])) {
788
+ border: 0 solid var(--gridui-border);
789
+ border-right-width: 1px;
790
+ }
791
+ }
792
+ .gridui-frame-region {
793
+ --gridui-frame-region-left: 0px;
794
+ --gridui-frame-region-right: 0px;
795
+ }
796
+ .gridui-frame-region[data-frame-edge="left"], .gridui-frame-region[data-frame-edge="both"] {
797
+ --gridui-frame-region-left: var(--gridui-frame-bleed-left, 0px);
798
+ }
799
+ .gridui-frame-region[data-frame-edge="right"], .gridui-frame-region[data-frame-edge="both"] {
800
+ --gridui-frame-region-right: var(--gridui-frame-bleed-right, 0px);
801
+ }
802
+ :where(.gridui-frame-region) > :where(*) {
803
+ --gridui-frame-bleed-left: 0px;
804
+ --gridui-frame-bleed-right: 0px;
805
+ }
806
+ .gridui-frame-region-row {
807
+ --gridui-frame-region-leading-inset: max(0px, calc(var(--gridui-frame-region-inset) - var(--gridui-frame-region-left, 0px)));
808
+ display: grid;
809
+ grid-template-columns: [frame-left] var(--gridui-frame-region-left, 0px) [surface-left] var(--gridui-frame-region-leading-inset) [content-left] minmax(0, 1fr) [content-right] var(--gridui-frame-region-inset) [accessory-left] auto [surface-right] var(--gridui-frame-region-right, 0px) [frame-right];
810
+ margin-left: calc(0px - var(--gridui-frame-region-left, 0px));
811
+ margin-right: calc(0px - var(--gridui-frame-region-right, 0px));
812
+ min-width: 0;
813
+ }
814
+ .gridui-frame-region-row:dir(rtl) {
815
+ grid-template-columns: [frame-right] var(--gridui-frame-region-right, 0px) [surface-right] auto [accessory-left] var(--gridui-frame-region-inset) [content-right] minmax(0, 1fr) [content-left] var(--gridui-frame-region-leading-inset) [surface-left] var(--gridui-frame-region-left, 0px) [frame-left];
816
+ }
817
+ :where(.gridui-frame-region-row) > :where(*) {
818
+ grid-column: content-left / content-right;
819
+ min-width: 0;
609
820
  }
610
821
  }
611
822
  @property --tw-border-style {
package/package.json CHANGED
@@ -1,14 +1,9 @@
1
1
  {
2
2
  "name": "@gridui/grid",
3
- "version": "2.1.3",
3
+ "version": "2.2.1",
4
4
  "description": "GridUI React grid",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
7
- "repository": {
8
- "type": "git",
9
- "url": "git+https://github.com/sudo-ui/GridUI-React-Monorepo.git",
10
- "directory": "packages/grid"
11
- },
12
7
  "files": [
13
8
  "dist",
14
9
  "README.md"
@@ -27,17 +22,17 @@
27
22
  "access": "public"
28
23
  },
29
24
  "dependencies": {
30
- "@gridui/style-utils": "^2.1.1",
31
- "@gridui/theme": "^2.1.1",
25
+ "@gridui/style-utils": "^2.1.3",
26
+ "@gridui/theme": "^2.2.1",
32
27
  "@radix-ui/react-slot": "1.5.0",
33
28
  "class-variance-authority": "0.7.1"
34
29
  },
35
30
  "devDependencies": {
36
- "@gridui-internal/configuration": "0.0.0",
31
+ "@gridui-internal/configuration": "0.0.0-internal",
37
32
  "@jest/globals": "30.5.2",
38
- "@storybook/react-vite": "10.6.4",
33
+ "@storybook/react-vite": "10.6.5",
39
34
  "@types/jest": "30.0.0",
40
- "@types/node": "26.6.5",
35
+ "@types/node": "26.6.6",
41
36
  "@types/react": "19.3.0",
42
37
  "@types/react-dom": "19.3.0",
43
38
  "jest": "30.5.2",
@@ -1,12 +0,0 @@
1
- /**
2
- * @author WMXPY
3
- * @package Grid
4
- * @namespace Frame_Boundary
5
- * @description Boundary
6
- */
7
- import type { FC } from "react";
8
- export type FrameBoundaryStyle = "none" | "line" | "band" | "stripe" | "space";
9
- export type FrameBoundaryProps = {
10
- readonly boundary: FrameBoundaryStyle;
11
- };
12
- export declare const FrameBoundary: FC<FrameBoundaryProps>;
@@ -1,29 +0,0 @@
1
- /**
2
- * @author WMXPY
3
- * @package Grid
4
- * @namespace Frame_Chrome
5
- * @description Chrome
6
- */
7
- import type { FrameBoundaryStyle } from "../boundary/boundary";
8
- import type { FrameDecorationStyle } from "../decoration/decoration";
9
- import type { FrameTone } from "../style";
10
- import type { Responsive, Space } from "@gridui/style-utils/responsive";
11
- import type { ComponentPropsWithRef, FC, ReactNode } from "react";
12
- export type ChromeProps = {
13
- readonly padding?: Responsive<Space>;
14
- };
15
- export type FrameHeaderProps = ComponentPropsWithRef<"header"> & ChromeProps & {
16
- readonly wrap?: boolean;
17
- readonly gap?: Space;
18
- readonly justify?: "start" | "between";
19
- };
20
- export declare const FrameHeader: FC<FrameHeaderProps>;
21
- export type FrameFooterProps = ComponentPropsWithRef<"footer"> & ChromeProps & {
22
- readonly contentLayout?: "flex" | "block";
23
- readonly tone?: FrameTone;
24
- readonly boundary?: FrameBoundaryStyle;
25
- readonly decoration?: FrameDecorationStyle;
26
- readonly signature?: ReactNode;
27
- readonly signatureAppearance?: "standard" | "cropped";
28
- };
29
- export declare const FrameFooter: FC<FrameFooterProps>;
@@ -1,19 +0,0 @@
1
- /**
2
- * @author WMXPY
3
- * @package Grid
4
- * @namespace Frame
5
- * @description Export
6
- */
7
- export type { FrameBoundaryStyle } from "./boundary/boundary";
8
- export type { FrameFooterProps, FrameHeaderProps } from "./chrome/chrome";
9
- export { FrameFooter, FrameHeader } from "./chrome/chrome";
10
- export type { FrameDecorationStyle } from "./decoration/decoration";
11
- export type { FrameSectionsProps, PageFrameProps } from "./page/page";
12
- export { FrameSections, PageFrame } from "./page/page";
13
- export type { FrameRailGroupProps, FrameRailProps } from "./rail/rail";
14
- export { FrameRail, FrameRailGroup } from "./rail/rail";
15
- export type { FrameSectionProps } from "./section";
16
- export { FrameSection } from "./section";
17
- export type { FrameTone } from "./style";
18
- export type { FrameTextureProps, FrameTextureStyle } from "./texture/texture";
19
- export { FrameTexture } from "./texture/texture";
@@ -1,20 +0,0 @@
1
- /**
2
- * @author WMXPY
3
- * @package Grid
4
- * @namespace Frame_Page
5
- * @description Page
6
- */
7
- import type { ContainerProps } from "../../primitives/container/container";
8
- import type { FrameRailGroupProps } from "../rail/rail";
9
- import type { Responsive, Space } from "@gridui/style-utils/responsive";
10
- import type { ComponentPropsWithRef, FC, ReactNode } from "react";
11
- export type PageFrameProps = FrameRailGroupProps & {
12
- readonly width?: ContainerProps["width"];
13
- readonly header?: ReactNode;
14
- readonly footer?: ReactNode;
15
- readonly railScope?: "page" | "main";
16
- readonly mainGutterStart?: Responsive<Space>;
17
- };
18
- export type FrameSectionsProps = ComponentPropsWithRef<"div">;
19
- export declare const FrameSections: FC<FrameSectionsProps>;
20
- export declare const PageFrame: FC<PageFrameProps>;
@@ -1,19 +0,0 @@
1
- /**
2
- * @author WMXPY
3
- * @package Grid
4
- * @namespace Primitives
5
- * @description Export
6
- */
7
- export type { ContainerProps } from "./container/container";
8
- export { Container } from "./container/container";
9
- export type { GridProps } from "./grid/grid";
10
- export { Grid } from "./grid/grid";
11
- export type { GridItemProps } from "./grid/grid-item";
12
- export { GridItem } from "./grid/grid-item";
13
- export type { Columns, GridColumns, GridTrack, Span } from "./responsive";
14
- export type { RowProps } from "./row/row";
15
- export { Row } from "./row/row";
16
- export type { SplitDirection, SplitProps } from "./split/split";
17
- export { Split } from "./split/split";
18
- export type { StackProps } from "./stack/stack";
19
- export { Stack } from "./stack/stack";
@@ -1,11 +0,0 @@
1
- /**
2
- * @author WMXPY
3
- * @package Grid
4
- * @namespace Primitives
5
- * @description Responsive
6
- */
7
- export type Columns = 1 | 2 | 3 | 4 | 6 | 12;
8
- export type GridTrack = "1fr" | "auto";
9
- export type GridColumns = Columns | readonly [GridTrack, ...GridTrack[]];
10
- export type Span = Columns | 5 | 7 | 8 | 9 | 10 | 11 | "full";
11
- export declare const spanValue: (value: Span) => string;