@fringeworks/react-layouts 0.8.0

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 (220) hide show
  1. package/LICENSE +21 -0
  2. package/README.ja.md +234 -0
  3. package/README.md +236 -0
  4. package/_internal/_constants.cjs +27 -0
  5. package/_internal/_constants.d.cts +7 -0
  6. package/_internal/_constants.d.mts +7 -0
  7. package/_internal/_constants.mjs +25 -0
  8. package/_internal/applyLayout/applyLayout.cjs +26 -0
  9. package/_internal/applyLayout/applyLayout.d.cts +13 -0
  10. package/_internal/applyLayout/applyLayout.d.mts +14 -0
  11. package/_internal/applyLayout/applyLayout.mjs +24 -0
  12. package/_internal/applyLayout/index.cjs +3 -0
  13. package/_internal/applyLayout/index.d.cts +3 -0
  14. package/_internal/applyLayout/index.d.mts +3 -0
  15. package/_internal/applyLayout/index.mjs +3 -0
  16. package/_internal/applyLayout/types.cjs +0 -0
  17. package/_internal/applyLayout/types.d.cts +37 -0
  18. package/_internal/applyLayout/types.d.mts +37 -0
  19. package/_internal/applyLayout/types.mjs +1 -0
  20. package/_internal/withLayoutBase/index.cjs +3 -0
  21. package/_internal/withLayoutBase/index.d.cts +3 -0
  22. package/_internal/withLayoutBase/index.d.mts +3 -0
  23. package/_internal/withLayoutBase/index.mjs +3 -0
  24. package/_internal/withLayoutBase/types.cjs +0 -0
  25. package/_internal/withLayoutBase/types.d.cts +43 -0
  26. package/_internal/withLayoutBase/types.d.mts +43 -0
  27. package/_internal/withLayoutBase/types.mjs +1 -0
  28. package/_internal/withLayoutBase/withLayoutBase.cjs +50 -0
  29. package/_internal/withLayoutBase/withLayoutBase.d.cts +13 -0
  30. package/_internal/withLayoutBase/withLayoutBase.d.mts +14 -0
  31. package/_internal/withLayoutBase/withLayoutBase.mjs +47 -0
  32. package/_virtual/_rolldown/runtime.cjs +43 -0
  33. package/_virtual/_rolldown/runtime.mjs +18 -0
  34. package/constants.cjs +57 -0
  35. package/constants.d.cts +20 -0
  36. package/constants.d.mts +20 -0
  37. package/constants.mjs +20 -0
  38. package/css/balance.css +171 -0
  39. package/css/center.css +189 -0
  40. package/css/flow.css +205 -0
  41. package/css/layer.css +72 -0
  42. package/css/matrix.css +184 -0
  43. package/css/pack.css +42 -0
  44. package/css/pin.css +23 -0
  45. package/css/stack.css +216 -0
  46. package/css/styles.css +1346 -0
  47. package/css/tile.css +236 -0
  48. package/index.cjs +61 -0
  49. package/index.d.cts +22 -0
  50. package/index.d.mts +22 -0
  51. package/index.mjs +13 -0
  52. package/package.json +56 -0
  53. package/with-css/index.cjs +68 -0
  54. package/with-css/index.d.cts +23 -0
  55. package/with-css/index.d.mts +23 -0
  56. package/with-css/index.mjs +14 -0
  57. package/with-css/styles.cjs +14 -0
  58. package/with-css/styles.d.cts +2 -0
  59. package/with-css/styles.d.mts +2 -0
  60. package/with-css/styles.mjs +8 -0
  61. package/with-css/withBalanceLayout/index.cjs +4 -0
  62. package/with-css/withBalanceLayout/index.d.cts +3 -0
  63. package/with-css/withBalanceLayout/index.d.mts +3 -0
  64. package/with-css/withBalanceLayout/index.mjs +4 -0
  65. package/with-css/withCenterLayout/index.cjs +4 -0
  66. package/with-css/withCenterLayout/index.d.cts +3 -0
  67. package/with-css/withCenterLayout/index.d.mts +3 -0
  68. package/with-css/withCenterLayout/index.mjs +4 -0
  69. package/with-css/withFlowLayout/index.cjs +4 -0
  70. package/with-css/withFlowLayout/index.d.cts +3 -0
  71. package/with-css/withFlowLayout/index.d.mts +3 -0
  72. package/with-css/withFlowLayout/index.mjs +4 -0
  73. package/with-css/withLayerLayout/index.cjs +4 -0
  74. package/with-css/withLayerLayout/index.d.cts +3 -0
  75. package/with-css/withLayerLayout/index.d.mts +3 -0
  76. package/with-css/withLayerLayout/index.mjs +4 -0
  77. package/with-css/withLayout/index.cjs +4 -0
  78. package/with-css/withLayout/index.d.cts +3 -0
  79. package/with-css/withLayout/index.d.mts +3 -0
  80. package/with-css/withLayout/index.mjs +4 -0
  81. package/with-css/withMatrixLayout/index.cjs +4 -0
  82. package/with-css/withMatrixLayout/index.d.cts +3 -0
  83. package/with-css/withMatrixLayout/index.d.mts +3 -0
  84. package/with-css/withMatrixLayout/index.mjs +4 -0
  85. package/with-css/withPackLayout/index.cjs +4 -0
  86. package/with-css/withPackLayout/index.d.cts +3 -0
  87. package/with-css/withPackLayout/index.d.mts +3 -0
  88. package/with-css/withPackLayout/index.mjs +4 -0
  89. package/with-css/withPinLayout/index.cjs +4 -0
  90. package/with-css/withPinLayout/index.d.cts +3 -0
  91. package/with-css/withPinLayout/index.d.mts +3 -0
  92. package/with-css/withPinLayout/index.mjs +4 -0
  93. package/with-css/withStackLayout/index.cjs +4 -0
  94. package/with-css/withStackLayout/index.d.cts +3 -0
  95. package/with-css/withStackLayout/index.d.mts +3 -0
  96. package/with-css/withStackLayout/index.mjs +4 -0
  97. package/with-css/withTileLayout/index.cjs +4 -0
  98. package/with-css/withTileLayout/index.d.cts +3 -0
  99. package/with-css/withTileLayout/index.d.mts +3 -0
  100. package/with-css/withTileLayout/index.mjs +4 -0
  101. package/withBalanceLayout/index.cjs +3 -0
  102. package/withBalanceLayout/index.d.cts +3 -0
  103. package/withBalanceLayout/index.d.mts +3 -0
  104. package/withBalanceLayout/index.mjs +3 -0
  105. package/withBalanceLayout/types.cjs +0 -0
  106. package/withBalanceLayout/types.d.cts +10 -0
  107. package/withBalanceLayout/types.d.mts +10 -0
  108. package/withBalanceLayout/types.mjs +1 -0
  109. package/withBalanceLayout/withBalanceLayout.cjs +18 -0
  110. package/withBalanceLayout/withBalanceLayout.d.cts +12 -0
  111. package/withBalanceLayout/withBalanceLayout.d.mts +13 -0
  112. package/withBalanceLayout/withBalanceLayout.mjs +16 -0
  113. package/withCenterLayout/index.cjs +3 -0
  114. package/withCenterLayout/index.d.cts +3 -0
  115. package/withCenterLayout/index.d.mts +3 -0
  116. package/withCenterLayout/index.mjs +3 -0
  117. package/withCenterLayout/types.cjs +0 -0
  118. package/withCenterLayout/types.d.cts +10 -0
  119. package/withCenterLayout/types.d.mts +10 -0
  120. package/withCenterLayout/types.mjs +1 -0
  121. package/withCenterLayout/withCenterLayout.cjs +18 -0
  122. package/withCenterLayout/withCenterLayout.d.cts +12 -0
  123. package/withCenterLayout/withCenterLayout.d.mts +13 -0
  124. package/withCenterLayout/withCenterLayout.mjs +16 -0
  125. package/withFlowLayout/index.cjs +3 -0
  126. package/withFlowLayout/index.d.cts +3 -0
  127. package/withFlowLayout/index.d.mts +3 -0
  128. package/withFlowLayout/index.mjs +3 -0
  129. package/withFlowLayout/types.cjs +0 -0
  130. package/withFlowLayout/types.d.cts +10 -0
  131. package/withFlowLayout/types.d.mts +10 -0
  132. package/withFlowLayout/types.mjs +1 -0
  133. package/withFlowLayout/withFlowLayout.cjs +18 -0
  134. package/withFlowLayout/withFlowLayout.d.cts +12 -0
  135. package/withFlowLayout/withFlowLayout.d.mts +13 -0
  136. package/withFlowLayout/withFlowLayout.mjs +16 -0
  137. package/withLayerLayout/index.cjs +3 -0
  138. package/withLayerLayout/index.d.cts +3 -0
  139. package/withLayerLayout/index.d.mts +3 -0
  140. package/withLayerLayout/index.mjs +3 -0
  141. package/withLayerLayout/types.cjs +0 -0
  142. package/withLayerLayout/types.d.cts +10 -0
  143. package/withLayerLayout/types.d.mts +10 -0
  144. package/withLayerLayout/types.mjs +1 -0
  145. package/withLayerLayout/withLayerLayout.cjs +18 -0
  146. package/withLayerLayout/withLayerLayout.d.cts +12 -0
  147. package/withLayerLayout/withLayerLayout.d.mts +13 -0
  148. package/withLayerLayout/withLayerLayout.mjs +16 -0
  149. package/withLayout/index.cjs +3 -0
  150. package/withLayout/index.d.cts +3 -0
  151. package/withLayout/index.d.mts +3 -0
  152. package/withLayout/index.mjs +3 -0
  153. package/withLayout/types.cjs +0 -0
  154. package/withLayout/types.d.cts +37 -0
  155. package/withLayout/types.d.mts +37 -0
  156. package/withLayout/types.mjs +1 -0
  157. package/withLayout/withLayout.cjs +48 -0
  158. package/withLayout/withLayout.d.cts +14 -0
  159. package/withLayout/withLayout.d.mts +15 -0
  160. package/withLayout/withLayout.mjs +38 -0
  161. package/withMatrixLayout/index.cjs +3 -0
  162. package/withMatrixLayout/index.d.cts +3 -0
  163. package/withMatrixLayout/index.d.mts +3 -0
  164. package/withMatrixLayout/index.mjs +3 -0
  165. package/withMatrixLayout/types.cjs +0 -0
  166. package/withMatrixLayout/types.d.cts +10 -0
  167. package/withMatrixLayout/types.d.mts +10 -0
  168. package/withMatrixLayout/types.mjs +1 -0
  169. package/withMatrixLayout/withMatrixLayout.cjs +18 -0
  170. package/withMatrixLayout/withMatrixLayout.d.cts +12 -0
  171. package/withMatrixLayout/withMatrixLayout.d.mts +13 -0
  172. package/withMatrixLayout/withMatrixLayout.mjs +16 -0
  173. package/withPackLayout/index.cjs +3 -0
  174. package/withPackLayout/index.d.cts +3 -0
  175. package/withPackLayout/index.d.mts +3 -0
  176. package/withPackLayout/index.mjs +3 -0
  177. package/withPackLayout/types.cjs +0 -0
  178. package/withPackLayout/types.d.cts +10 -0
  179. package/withPackLayout/types.d.mts +10 -0
  180. package/withPackLayout/types.mjs +1 -0
  181. package/withPackLayout/withPackLayout.cjs +18 -0
  182. package/withPackLayout/withPackLayout.d.cts +12 -0
  183. package/withPackLayout/withPackLayout.d.mts +13 -0
  184. package/withPackLayout/withPackLayout.mjs +16 -0
  185. package/withPinLayout/index.cjs +3 -0
  186. package/withPinLayout/index.d.cts +3 -0
  187. package/withPinLayout/index.d.mts +3 -0
  188. package/withPinLayout/index.mjs +3 -0
  189. package/withPinLayout/types.cjs +0 -0
  190. package/withPinLayout/types.d.cts +10 -0
  191. package/withPinLayout/types.d.mts +10 -0
  192. package/withPinLayout/types.mjs +1 -0
  193. package/withPinLayout/withPinLayout.cjs +18 -0
  194. package/withPinLayout/withPinLayout.d.cts +12 -0
  195. package/withPinLayout/withPinLayout.d.mts +13 -0
  196. package/withPinLayout/withPinLayout.mjs +16 -0
  197. package/withStackLayout/index.cjs +3 -0
  198. package/withStackLayout/index.d.cts +3 -0
  199. package/withStackLayout/index.d.mts +3 -0
  200. package/withStackLayout/index.mjs +3 -0
  201. package/withStackLayout/types.cjs +0 -0
  202. package/withStackLayout/types.d.cts +10 -0
  203. package/withStackLayout/types.d.mts +10 -0
  204. package/withStackLayout/types.mjs +1 -0
  205. package/withStackLayout/withStackLayout.cjs +18 -0
  206. package/withStackLayout/withStackLayout.d.cts +12 -0
  207. package/withStackLayout/withStackLayout.d.mts +13 -0
  208. package/withStackLayout/withStackLayout.mjs +16 -0
  209. package/withTileLayout/index.cjs +3 -0
  210. package/withTileLayout/index.d.cts +3 -0
  211. package/withTileLayout/index.d.mts +3 -0
  212. package/withTileLayout/index.mjs +3 -0
  213. package/withTileLayout/types.cjs +0 -0
  214. package/withTileLayout/types.d.cts +10 -0
  215. package/withTileLayout/types.d.mts +10 -0
  216. package/withTileLayout/types.mjs +1 -0
  217. package/withTileLayout/withTileLayout.cjs +18 -0
  218. package/withTileLayout/withTileLayout.d.cts +12 -0
  219. package/withTileLayout/withTileLayout.d.mts +13 -0
  220. package/withTileLayout/withTileLayout.mjs +16 -0
package/css/stack.css ADDED
@@ -0,0 +1,216 @@
1
+ .lx-layout-stack {
2
+ --lx-layout-gapX: 0px;
3
+ --lx-layout-gapY: 0px;
4
+ --lx-layout-itemSizeX: auto;
5
+ --lx-layout-itemSizeY: auto;
6
+ --lx-layout-itemRatio: auto;
7
+ display: flex;
8
+ }
9
+
10
+ .lx-layout-stack.lx-layout-direction-x {
11
+ flex-direction: row;
12
+ }
13
+
14
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-left {
15
+ justify-content: flex-start;
16
+ }
17
+
18
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-center {
19
+ justify-content: center;
20
+ }
21
+
22
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-right {
23
+ justify-content: flex-end;
24
+ }
25
+
26
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceBetween {
27
+ justify-content: space-between;
28
+ }
29
+
30
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceAround {
31
+ justify-content: space-around;
32
+ }
33
+
34
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignX-spaceEvenly {
35
+ justify-content: space-evenly;
36
+ }
37
+
38
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-top {
39
+ align-items: flex-start;
40
+ }
41
+
42
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-middle {
43
+ align-items: center;
44
+ }
45
+
46
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-alignY-bottom {
47
+ align-items: flex-end;
48
+ }
49
+
50
+ .lx-layout-stack.lx-layout-direction-x > * {
51
+ flex-grow: 0;
52
+ flex-shrink: 0;
53
+ min-width: 0;
54
+ min-height: 0;
55
+ }
56
+
57
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-itemSizeX > * {
58
+ flex-basis: var(--lx-layout-itemSizeX);
59
+ }
60
+
61
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit {
62
+ justify-content: flex-start;
63
+ }
64
+
65
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit > * {
66
+ flex-grow: 1;
67
+ flex-shrink: 1;
68
+ flex-basis: auto;
69
+ }
70
+
71
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
72
+ flex-basis: var(--lx-layout-itemSizeX);
73
+ }
74
+
75
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-grow > * {
76
+ flex-grow: 1;
77
+ }
78
+
79
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
80
+ flex-shrink: 1;
81
+ }
82
+
83
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-itemSizeY > * {
84
+ height: var(--lx-layout-itemSizeY);
85
+ }
86
+
87
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit {
88
+ align-items: stretch;
89
+ }
90
+
91
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit > * {
92
+ min-height: 100%;
93
+ max-height: 100%;
94
+ }
95
+
96
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
97
+ height: auto;
98
+ }
99
+
100
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-grow > * {
101
+ min-height: 100%;
102
+ }
103
+
104
+ .lx-layout-stack.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
105
+ max-height: 100%;
106
+ }
107
+
108
+ .lx-layout-stack.lx-layout-direction-y {
109
+ flex-direction: column;
110
+ }
111
+
112
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-left {
113
+ align-items: flex-start;
114
+ }
115
+
116
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-center {
117
+ align-items: center;
118
+ }
119
+
120
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignX-right {
121
+ align-items: flex-end;
122
+ }
123
+
124
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-top {
125
+ justify-content: flex-start;
126
+ }
127
+
128
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-middle {
129
+ justify-content: center;
130
+ }
131
+
132
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-bottom {
133
+ justify-content: flex-end;
134
+ }
135
+
136
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceBetween {
137
+ justify-content: space-between;
138
+ }
139
+
140
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceAround {
141
+ justify-content: space-around;
142
+ }
143
+
144
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-alignY-spaceEvenly {
145
+ justify-content: space-evenly;
146
+ }
147
+
148
+ .lx-layout-stack.lx-layout-direction-y > * {
149
+ flex-grow: 0;
150
+ flex-shrink: 0;
151
+ min-width: 0;
152
+ min-height: 0;
153
+ }
154
+
155
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-itemSizeX > * {
156
+ width: var(--lx-layout-itemSizeX);
157
+ }
158
+
159
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit {
160
+ align-items: stretch;
161
+ }
162
+
163
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit > * {
164
+ min-width: 100%;
165
+ max-width: 100%;
166
+ }
167
+
168
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
169
+ width: auto;
170
+ }
171
+
172
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-grow > * {
173
+ min-width: 100%;
174
+ }
175
+
176
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
177
+ max-width: 100%;
178
+ }
179
+
180
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-itemSizeY > * {
181
+ flex-basis: var(--lx-layout-itemSizeY);
182
+ }
183
+
184
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit {
185
+ justify-content: flex-start;
186
+ }
187
+
188
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit > * {
189
+ flex-grow: 1;
190
+ flex-shrink: 1;
191
+ flex-basis: auto;
192
+ }
193
+
194
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
195
+ flex-basis: var(--lx-layout-itemSizeY);
196
+ }
197
+
198
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-grow > * {
199
+ flex-grow: 1;
200
+ }
201
+
202
+ .lx-layout-stack.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
203
+ flex-shrink: 1;
204
+ }
205
+
206
+ .lx-layout-stack.lx-layout-itemRatio > * {
207
+ aspect-ratio: var(--lx-layout-itemRatio);
208
+ }
209
+
210
+ .lx-layout-stack.lx-layout-gapX {
211
+ column-gap: var(--lx-layout-gapX);
212
+ }
213
+
214
+ .lx-layout-stack.lx-layout-gapY {
215
+ row-gap: var(--lx-layout-gapY);
216
+ }