@fringeworks/style-layouts 0.0.0-stage → 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 (267) hide show
  1. package/LICENSE +21 -0
  2. package/README.ja.md +331 -0
  3. package/README.md +331 -3
  4. package/_constants.cjs +327 -0
  5. package/_constants.d.cts +237 -0
  6. package/_constants.d.mts +237 -0
  7. package/_constants.mjs +275 -0
  8. package/_internal/applyGap.cjs +30 -0
  9. package/_internal/applyGap.d.cts +12 -0
  10. package/_internal/applyGap.d.mts +13 -0
  11. package/_internal/applyGap.mjs +30 -0
  12. package/_internal/applyItemCount.cjs +20 -0
  13. package/_internal/applyItemCount.d.cts +5 -0
  14. package/_internal/applyItemCount.d.mts +6 -0
  15. package/_internal/applyItemCount.mjs +20 -0
  16. package/_internal/applyItemRatio.cjs +21 -0
  17. package/_internal/applyItemRatio.d.cts +11 -0
  18. package/_internal/applyItemRatio.d.mts +12 -0
  19. package/_internal/applyItemRatio.mjs +21 -0
  20. package/_internal/applyItemSize.cjs +21 -0
  21. package/_internal/applyItemSize.d.cts +5 -0
  22. package/_internal/applyItemSize.d.mts +6 -0
  23. package/_internal/applyItemSize.mjs +21 -0
  24. package/_internal/hasValue.cjs +15 -0
  25. package/_internal/hasValue.d.cts +8 -0
  26. package/_internal/hasValue.d.mts +9 -0
  27. package/_internal/hasValue.mjs +14 -0
  28. package/_internal/mergeClassName.cjs +11 -0
  29. package/_internal/mergeClassName.d.cts +3 -0
  30. package/_internal/mergeClassName.d.mts +4 -0
  31. package/_internal/mergeClassName.mjs +10 -0
  32. package/_internal/mergeLayoutResults.cjs +16 -0
  33. package/_internal/mergeLayoutResults.d.cts +5 -0
  34. package/_internal/mergeLayoutResults.d.mts +6 -0
  35. package/_internal/mergeLayoutResults.mjs +16 -0
  36. package/_internal/unit.cjs +9 -0
  37. package/_internal/unit.d.cts +11 -0
  38. package/_internal/unit.d.mts +12 -0
  39. package/_internal/unit.mjs +8 -0
  40. package/_styles.scss.cjs +1 -0
  41. package/_styles.scss.d.cts +1 -0
  42. package/_styles.scss.d.mts +1 -0
  43. package/_styles.scss.mjs +3 -0
  44. package/_types.cjs +0 -0
  45. package/_types.d.cts +115 -0
  46. package/_types.d.mts +115 -0
  47. package/_types.mjs +1 -0
  48. package/_virtual/_rolldown/runtime.cjs +29 -0
  49. package/balance/balance.cjs +37 -0
  50. package/balance/balance.d.cts +13 -0
  51. package/balance/balance.d.mts +14 -0
  52. package/balance/balance.mjs +35 -0
  53. package/balance/index.cjs +3 -0
  54. package/balance/index.d.cts +3 -0
  55. package/balance/index.d.mts +3 -0
  56. package/balance/index.mjs +3 -0
  57. package/balance/styles.css +131 -0
  58. package/balance/types.cjs +0 -0
  59. package/balance/types.d.cts +21 -0
  60. package/balance/types.d.mts +21 -0
  61. package/balance/types.mjs +1 -0
  62. package/center/center.cjs +34 -0
  63. package/center/center.d.cts +12 -0
  64. package/center/center.d.mts +13 -0
  65. package/center/center.mjs +32 -0
  66. package/center/index.cjs +3 -0
  67. package/center/index.d.cts +3 -0
  68. package/center/index.d.mts +3 -0
  69. package/center/index.mjs +3 -0
  70. package/center/styles.css +157 -0
  71. package/center/types.cjs +0 -0
  72. package/center/types.d.cts +9 -0
  73. package/center/types.d.mts +9 -0
  74. package/center/types.mjs +1 -0
  75. package/constants.cjs +109 -0
  76. package/constants.d.cts +112 -0
  77. package/constants.d.mts +112 -0
  78. package/constants.mjs +101 -0
  79. package/flow/flow.cjs +71 -0
  80. package/flow/flow.d.cts +12 -0
  81. package/flow/flow.d.mts +13 -0
  82. package/flow/flow.mjs +69 -0
  83. package/flow/index.cjs +3 -0
  84. package/flow/index.d.cts +3 -0
  85. package/flow/index.d.mts +3 -0
  86. package/flow/index.mjs +3 -0
  87. package/flow/styles.css +160 -0
  88. package/flow/types.cjs +0 -0
  89. package/flow/types.d.cts +21 -0
  90. package/flow/types.d.mts +21 -0
  91. package/flow/types.mjs +1 -0
  92. package/helpers/_internal/constants.cjs +25 -0
  93. package/helpers/_internal/constants.d.cts +13 -0
  94. package/helpers/_internal/constants.d.mts +13 -0
  95. package/helpers/_internal/constants.mjs +16 -0
  96. package/helpers/_internal/createExtractLayoutOptions.cjs +25 -0
  97. package/helpers/_internal/createExtractLayoutOptions.d.cts +8 -0
  98. package/helpers/_internal/createExtractLayoutOptions.d.mts +9 -0
  99. package/helpers/_internal/createExtractLayoutOptions.mjs +24 -0
  100. package/helpers/extractBalanceOptions.cjs +15 -0
  101. package/helpers/extractBalanceOptions.d.cts +5 -0
  102. package/helpers/extractBalanceOptions.d.mts +6 -0
  103. package/helpers/extractBalanceOptions.mjs +15 -0
  104. package/helpers/extractCenterOptions.cjs +14 -0
  105. package/helpers/extractCenterOptions.d.cts +6 -0
  106. package/helpers/extractCenterOptions.d.mts +7 -0
  107. package/helpers/extractCenterOptions.mjs +14 -0
  108. package/helpers/extractFlowOptions.cjs +15 -0
  109. package/helpers/extractFlowOptions.d.cts +6 -0
  110. package/helpers/extractFlowOptions.d.mts +7 -0
  111. package/helpers/extractFlowOptions.mjs +15 -0
  112. package/helpers/extractLayerOptions.cjs +13 -0
  113. package/helpers/extractLayerOptions.d.cts +6 -0
  114. package/helpers/extractLayerOptions.d.mts +7 -0
  115. package/helpers/extractLayerOptions.mjs +13 -0
  116. package/helpers/extractMatrixOptions.cjs +17 -0
  117. package/helpers/extractMatrixOptions.d.cts +5 -0
  118. package/helpers/extractMatrixOptions.d.mts +6 -0
  119. package/helpers/extractMatrixOptions.mjs +17 -0
  120. package/helpers/extractPackOptions.cjs +8 -0
  121. package/helpers/extractPackOptions.d.cts +6 -0
  122. package/helpers/extractPackOptions.d.mts +7 -0
  123. package/helpers/extractPackOptions.mjs +8 -0
  124. package/helpers/extractPinOptions.cjs +8 -0
  125. package/helpers/extractPinOptions.d.cts +6 -0
  126. package/helpers/extractPinOptions.d.mts +7 -0
  127. package/helpers/extractPinOptions.mjs +8 -0
  128. package/helpers/extractStackOptions.cjs +15 -0
  129. package/helpers/extractStackOptions.d.cts +6 -0
  130. package/helpers/extractStackOptions.d.mts +7 -0
  131. package/helpers/extractStackOptions.mjs +15 -0
  132. package/helpers/extractTileOptions.cjs +15 -0
  133. package/helpers/extractTileOptions.d.cts +6 -0
  134. package/helpers/extractTileOptions.d.mts +7 -0
  135. package/helpers/extractTileOptions.mjs +15 -0
  136. package/helpers/index.cjs +20 -0
  137. package/helpers/index.d.cts +10 -0
  138. package/helpers/index.d.mts +10 -0
  139. package/helpers/index.mjs +11 -0
  140. package/index.cjs +20 -0
  141. package/index.d.cts +20 -0
  142. package/index.d.mts +20 -0
  143. package/index.mjs +11 -0
  144. package/layer/index.cjs +3 -0
  145. package/layer/index.d.cts +3 -0
  146. package/layer/index.d.mts +3 -0
  147. package/layer/index.mjs +3 -0
  148. package/layer/layer.cjs +34 -0
  149. package/layer/layer.d.cts +13 -0
  150. package/layer/layer.d.mts +14 -0
  151. package/layer/layer.mjs +32 -0
  152. package/layer/styles.css +56 -0
  153. package/layer/types.cjs +0 -0
  154. package/layer/types.d.cts +13 -0
  155. package/layer/types.d.mts +13 -0
  156. package/layer/types.mjs +1 -0
  157. package/matrix/index.cjs +3 -0
  158. package/matrix/index.d.cts +3 -0
  159. package/matrix/index.d.mts +3 -0
  160. package/matrix/index.mjs +3 -0
  161. package/matrix/matrix.cjs +110 -0
  162. package/matrix/matrix.d.cts +12 -0
  163. package/matrix/matrix.d.mts +13 -0
  164. package/matrix/matrix.mjs +108 -0
  165. package/matrix/styles.css +141 -0
  166. package/matrix/types.cjs +0 -0
  167. package/matrix/types.d.cts +46 -0
  168. package/matrix/types.d.mts +46 -0
  169. package/matrix/types.mjs +1 -0
  170. package/pack/index.cjs +3 -0
  171. package/pack/index.d.cts +3 -0
  172. package/pack/index.d.mts +3 -0
  173. package/pack/index.mjs +3 -0
  174. package/pack/pack.cjs +25 -0
  175. package/pack/pack.d.cts +11 -0
  176. package/pack/pack.d.mts +12 -0
  177. package/pack/pack.mjs +23 -0
  178. package/pack/styles.css +35 -0
  179. package/pack/types.cjs +0 -0
  180. package/pack/types.d.cts +6 -0
  181. package/pack/types.d.mts +6 -0
  182. package/pack/types.mjs +1 -0
  183. package/package.json +52 -4
  184. package/pin/index.cjs +3 -0
  185. package/pin/index.d.cts +3 -0
  186. package/pin/index.d.mts +3 -0
  187. package/pin/index.mjs +3 -0
  188. package/pin/pin.cjs +23 -0
  189. package/pin/pin.d.cts +11 -0
  190. package/pin/pin.d.mts +12 -0
  191. package/pin/pin.mjs +23 -0
  192. package/pin/styles.css +19 -0
  193. package/pin/types.cjs +0 -0
  194. package/pin/types.d.cts +6 -0
  195. package/pin/types.d.mts +6 -0
  196. package/pin/types.mjs +1 -0
  197. package/stack/index.cjs +3 -0
  198. package/stack/index.d.cts +3 -0
  199. package/stack/index.d.mts +3 -0
  200. package/stack/index.mjs +3 -0
  201. package/stack/stack.cjs +96 -0
  202. package/stack/stack.d.cts +11 -0
  203. package/stack/stack.d.mts +12 -0
  204. package/stack/stack.mjs +94 -0
  205. package/stack/styles.css +167 -0
  206. package/stack/types.cjs +0 -0
  207. package/stack/types.d.cts +21 -0
  208. package/stack/types.d.mts +21 -0
  209. package/stack/types.mjs +1 -0
  210. package/styles.css +1055 -0
  211. package/tile/index.cjs +3 -0
  212. package/tile/index.d.cts +3 -0
  213. package/tile/index.d.mts +3 -0
  214. package/tile/index.mjs +3 -0
  215. package/tile/styles.css +181 -0
  216. package/tile/tile.cjs +36 -0
  217. package/tile/tile.d.cts +12 -0
  218. package/tile/tile.d.mts +13 -0
  219. package/tile/tile.mjs +34 -0
  220. package/tile/types.cjs +0 -0
  221. package/tile/types.d.cts +9 -0
  222. package/tile/types.d.mts +9 -0
  223. package/tile/types.mjs +1 -0
  224. package/types.cjs +0 -0
  225. package/types.d.cts +14 -0
  226. package/types.d.mts +14 -0
  227. package/types.mjs +1 -0
  228. package/with-css/balance/index.cjs +8 -0
  229. package/with-css/balance/index.d.cts +3 -0
  230. package/with-css/balance/index.d.mts +3 -0
  231. package/with-css/balance/index.mjs +8 -0
  232. package/with-css/center/index.cjs +8 -0
  233. package/with-css/center/index.d.cts +3 -0
  234. package/with-css/center/index.d.mts +3 -0
  235. package/with-css/center/index.mjs +8 -0
  236. package/with-css/flow/index.cjs +8 -0
  237. package/with-css/flow/index.d.cts +3 -0
  238. package/with-css/flow/index.d.mts +3 -0
  239. package/with-css/flow/index.mjs +8 -0
  240. package/with-css/index.cjs +20 -0
  241. package/with-css/index.d.cts +20 -0
  242. package/with-css/index.d.mts +20 -0
  243. package/with-css/index.mjs +11 -0
  244. package/with-css/layer/index.cjs +8 -0
  245. package/with-css/layer/index.d.cts +3 -0
  246. package/with-css/layer/index.d.mts +3 -0
  247. package/with-css/layer/index.mjs +8 -0
  248. package/with-css/matrix/index.cjs +8 -0
  249. package/with-css/matrix/index.d.cts +3 -0
  250. package/with-css/matrix/index.d.mts +3 -0
  251. package/with-css/matrix/index.mjs +8 -0
  252. package/with-css/pack/index.cjs +8 -0
  253. package/with-css/pack/index.d.cts +3 -0
  254. package/with-css/pack/index.d.mts +3 -0
  255. package/with-css/pack/index.mjs +8 -0
  256. package/with-css/pin/index.cjs +8 -0
  257. package/with-css/pin/index.d.cts +3 -0
  258. package/with-css/pin/index.d.mts +3 -0
  259. package/with-css/pin/index.mjs +8 -0
  260. package/with-css/stack/index.cjs +8 -0
  261. package/with-css/stack/index.d.cts +3 -0
  262. package/with-css/stack/index.d.mts +3 -0
  263. package/with-css/stack/index.mjs +8 -0
  264. package/with-css/tile/index.cjs +8 -0
  265. package/with-css/tile/index.d.cts +3 -0
  266. package/with-css/tile/index.d.mts +3 -0
  267. package/with-css/tile/index.mjs +8 -0
package/tile/index.cjs ADDED
@@ -0,0 +1,3 @@
1
+ const require_tile_tile = require('./tile.cjs');
2
+
3
+ module.exports = require_tile_tile;
@@ -0,0 +1,3 @@
1
+ import { TileLayoutOptions } from "./types.cjs";
2
+ import tile from "./tile.cjs";
3
+ export { type TileLayoutOptions, tile as default };
@@ -0,0 +1,3 @@
1
+ import { TileLayoutOptions } from "./types.mjs";
2
+ import tile from "./tile.mjs";
3
+ export { type TileLayoutOptions, tile as default };
package/tile/index.mjs ADDED
@@ -0,0 +1,3 @@
1
+ import tile from "./tile.mjs";
2
+
3
+ export { tile as default };
@@ -0,0 +1,181 @@
1
+ .lx-layout-tile {
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: grid;
8
+ }
9
+ .lx-layout-tile > * {
10
+ min-width: 0;
11
+ min-height: 0;
12
+ }
13
+ .lx-layout-tile.lx-layout-direction-x {
14
+ grid-auto-flow: row;
15
+ grid-template-columns: repeat(auto-fit, minmax(max-content, 100%));
16
+ }
17
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-itemSizeX {
18
+ grid-template-columns: repeat(auto-fit, var(--lx-layout-itemSizeX));
19
+ }
20
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink {
21
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
22
+ }
23
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
24
+ width: auto;
25
+ }
26
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX {
27
+ grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeX)), 1fr));
28
+ }
29
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-grow.lx-layout-itemSizeX {
30
+ grid-template-columns: repeat(auto-fit, minmax(var(--lx-layout-itemSizeX), 1fr));
31
+ }
32
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
33
+ grid-template-columns: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeX)));
34
+ }
35
+ .lx-layout-tile.lx-layout-direction-x {
36
+ grid-auto-rows: auto;
37
+ }
38
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit {
39
+ grid-auto-rows: minmax(0, 100%);
40
+ align-content: stretch;
41
+ }
42
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-fit > * {
43
+ height: auto;
44
+ }
45
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow {
46
+ grid-auto-rows: minmax(auto, 100%);
47
+ }
48
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow > * {
49
+ max-height: 100%;
50
+ height: 100%;
51
+ }
52
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY {
53
+ grid-auto-rows: minmax(var(--lx-layout-itemSizeY), 100%);
54
+ }
55
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
56
+ min-height: var(--lx-layout-itemSizeY);
57
+ }
58
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink {
59
+ grid-auto-rows: minmax(0, auto);
60
+ }
61
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
62
+ min-height: 100%;
63
+ height: 100%;
64
+ }
65
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
66
+ grid-auto-rows: minmax(0, var(--lx-layout-itemSizeY));
67
+ }
68
+ .lx-layout-tile.lx-layout-direction-x.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
69
+ max-height: var(--lx-layout-itemSizeY);
70
+ }
71
+ .lx-layout-tile.lx-layout-direction-y {
72
+ grid-auto-flow: column;
73
+ grid-auto-columns: auto;
74
+ }
75
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow > *, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
76
+ width: auto;
77
+ }
78
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-fit {
79
+ grid-auto-columns: minmax(0, 100%);
80
+ }
81
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow {
82
+ grid-auto-columns: minmax(auto, 100%);
83
+ }
84
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-grow.lx-layout-itemSizeX {
85
+ grid-auto-columns: minmax(var(--lx-layout-itemSizeX), 100%);
86
+ }
87
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink {
88
+ grid-auto-columns: minmax(0, auto);
89
+ }
90
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
91
+ grid-auto-columns: minmax(0, var(--lx-layout-itemSizeX));
92
+ }
93
+ .lx-layout-tile.lx-layout-direction-y {
94
+ grid-template-rows: repeat(auto-fit, minmax(max-content, 100%));
95
+ }
96
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-itemSizeY {
97
+ grid-template-rows: repeat(auto-fit, var(--lx-layout-itemSizeY));
98
+ }
99
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow, .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink {
100
+ grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
101
+ }
102
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit {
103
+ align-content: stretch;
104
+ }
105
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit > * {
106
+ height: auto;
107
+ }
108
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY {
109
+ grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeY)), 1fr));
110
+ }
111
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow > * {
112
+ max-height: 100%;
113
+ height: 100%;
114
+ }
115
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY {
116
+ grid-template-rows: repeat(auto-fit, minmax(var(--lx-layout-itemSizeY), 1fr));
117
+ }
118
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
119
+ min-height: var(--lx-layout-itemSizeY);
120
+ }
121
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
122
+ min-height: 100%;
123
+ height: 100%;
124
+ }
125
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
126
+ grid-template-rows: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeY)));
127
+ }
128
+ .lx-layout-tile.lx-layout-direction-y.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
129
+ max-height: var(--lx-layout-itemSizeY);
130
+ }
131
+ .lx-layout-tile.lx-layout-alignX-left {
132
+ justify-content: flex-start;
133
+ }
134
+ .lx-layout-tile.lx-layout-alignX-center {
135
+ justify-content: center;
136
+ }
137
+ .lx-layout-tile.lx-layout-alignX-right {
138
+ justify-content: flex-end;
139
+ }
140
+ .lx-layout-tile.lx-layout-alignX-spaceBetween {
141
+ justify-content: space-between;
142
+ }
143
+ .lx-layout-tile.lx-layout-alignX-spaceAround {
144
+ justify-content: space-around;
145
+ }
146
+ .lx-layout-tile.lx-layout-alignX-spaceEvenly {
147
+ justify-content: space-evenly;
148
+ }
149
+ .lx-layout-tile.lx-layout-alignY-top {
150
+ align-content: flex-start;
151
+ }
152
+ .lx-layout-tile.lx-layout-alignY-middle {
153
+ align-content: center;
154
+ }
155
+ .lx-layout-tile.lx-layout-alignY-bottom {
156
+ align-content: flex-end;
157
+ }
158
+ .lx-layout-tile.lx-layout-alignY-spaceBetween {
159
+ align-content: space-between;
160
+ }
161
+ .lx-layout-tile.lx-layout-alignY-spaceAround {
162
+ align-content: space-around;
163
+ }
164
+ .lx-layout-tile.lx-layout-alignY-spaceEvenly {
165
+ align-content: space-evenly;
166
+ }
167
+ .lx-layout-tile.lx-layout-itemSizeX > * {
168
+ width: var(--lx-layout-itemSizeX);
169
+ }
170
+ .lx-layout-tile.lx-layout-itemSizeY > * {
171
+ height: var(--lx-layout-itemSizeY);
172
+ }
173
+ .lx-layout-tile.lx-layout-itemRatio > * {
174
+ aspect-ratio: var(--lx-layout-itemRatio);
175
+ }
176
+ .lx-layout-tile.lx-layout-gapX {
177
+ column-gap: var(--lx-layout-gapX);
178
+ }
179
+ .lx-layout-tile.lx-layout-gapY {
180
+ row-gap: var(--lx-layout-gapY);
181
+ }
package/tile/tile.cjs ADDED
@@ -0,0 +1,36 @@
1
+ const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
2
+ const require__constants = require('../_constants.cjs');
3
+ const require__internal_mergeClassName = require('../_internal/mergeClassName.cjs');
4
+ const require__internal_applyGap = require('../_internal/applyGap.cjs');
5
+ const require__internal_applyItemRatio = require('../_internal/applyItemRatio.cjs');
6
+ const require__internal_applyItemSize = require('../_internal/applyItemSize.cjs');
7
+ let _fringeworks_utils_object_maybeDefault = require("@fringeworks/utils/object/maybeDefault");
8
+ _fringeworks_utils_object_maybeDefault = require_runtime.__toESM(_fringeworks_utils_object_maybeDefault, 1);
9
+
10
+ //#region src/tile/tile.ts
11
+ /**
12
+ * tileレイアウト
13
+ *
14
+ * - 子要素の高さ・幅を基準にして格子状に並べる
15
+ * - 親要素のサイズが子要素に依存していないことを前提とする
16
+ */
17
+ const tile = (options = {}) => {
18
+ const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, {
19
+ direction: "x",
20
+ alignX: "left",
21
+ alignY: "top",
22
+ adjustX: "none",
23
+ adjustY: "none"
24
+ }, { overwriteNull: true });
25
+ const result = {
26
+ className: require__internal_mergeClassName(require__constants.clsLayoutTile, require__constants.clsLayout.direction[direction], require__constants.clsLayout.align.x[alignX], require__constants.clsLayout.align.y[alignY], require__constants.clsLayout.adjust.x[adjustX], require__constants.clsLayout.adjust.y[adjustY]),
27
+ style: {}
28
+ };
29
+ require__internal_applyGap(result, gap, gapX, gapY);
30
+ require__internal_applyItemSize(result, itemSizeX, itemSizeY);
31
+ require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
32
+ return result;
33
+ };
34
+
35
+ //#endregion
36
+ module.exports = tile;
@@ -0,0 +1,12 @@
1
+ import { CreateLayoutStyle } from "../types.cjs";
2
+ import { TileLayoutOptions } from "./types.cjs";
3
+
4
+ //#region src/tile/tile.d.ts
5
+ /**
6
+ * tileレイアウト
7
+ *
8
+ * - 子要素の高さ・幅を基準にして格子状に並べる
9
+ * - 親要素のサイズが子要素に依存していないことを前提とする
10
+ */
11
+ declare const tile: CreateLayoutStyle<TileLayoutOptions>;
12
+ export = tile;
@@ -0,0 +1,13 @@
1
+ import { CreateLayoutStyle } from "../types.mjs";
2
+ import { TileLayoutOptions } from "./types.mjs";
3
+
4
+ //#region src/tile/tile.d.ts
5
+ /**
6
+ * tileレイアウト
7
+ *
8
+ * - 子要素の高さ・幅を基準にして格子状に並べる
9
+ * - 親要素のサイズが子要素に依存していないことを前提とする
10
+ */
11
+ declare const tile: CreateLayoutStyle<TileLayoutOptions>;
12
+ //#endregion
13
+ export { tile as default };
package/tile/tile.mjs ADDED
@@ -0,0 +1,34 @@
1
+ import { clsLayout, clsLayoutTile } from "../_constants.mjs";
2
+ import mergeClassName from "../_internal/mergeClassName.mjs";
3
+ import applyGap from "../_internal/applyGap.mjs";
4
+ import applyItemRatio from "../_internal/applyItemRatio.mjs";
5
+ import applyItemSize from "../_internal/applyItemSize.mjs";
6
+ import maybeDefault from "@fringeworks/utils/object/maybeDefault";
7
+
8
+ //#region src/tile/tile.ts
9
+ /**
10
+ * tileレイアウト
11
+ *
12
+ * - 子要素の高さ・幅を基準にして格子状に並べる
13
+ * - 親要素のサイズが子要素に依存していないことを前提とする
14
+ */
15
+ const tile = (options = {}) => {
16
+ const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = maybeDefault(options, {
17
+ direction: "x",
18
+ alignX: "left",
19
+ alignY: "top",
20
+ adjustX: "none",
21
+ adjustY: "none"
22
+ }, { overwriteNull: true });
23
+ const result = {
24
+ className: mergeClassName(clsLayoutTile, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
25
+ style: {}
26
+ };
27
+ applyGap(result, gap, gapX, gapY);
28
+ applyItemSize(result, itemSizeX, itemSizeY);
29
+ applyItemRatio(result, itemRatioX, itemRatioY);
30
+ return result;
31
+ };
32
+
33
+ //#endregion
34
+ export { tile as default };
package/tile/types.cjs ADDED
File without changes
@@ -0,0 +1,9 @@
1
+ import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.cjs";
2
+
3
+ //#region src/tile/types.d.ts
4
+ /**
5
+ * tileのオプション
6
+ */
7
+ type TileLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions;
8
+ //#endregion
9
+ export { TileLayoutOptions };
@@ -0,0 +1,9 @@
1
+ import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.mjs";
2
+
3
+ //#region src/tile/types.d.ts
4
+ /**
5
+ * tileのオプション
6
+ */
7
+ type TileLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions;
8
+ //#endregion
9
+ export { TileLayoutOptions };
package/tile/types.mjs ADDED
@@ -0,0 +1 @@
1
+ export { };
package/types.cjs ADDED
File without changes
package/types.d.cts ADDED
@@ -0,0 +1,14 @@
1
+ import { StyleResult } from "@fringeworks/style-utils";
2
+ import { LooseDictionary } from "@fringeworks/types";
3
+
4
+ //#region src/types.d.ts
5
+ /**
6
+ * レイアウトを作る関数
7
+ */
8
+ type CreateLayoutStyle<O = LooseDictionary> = (options?: O) => LayoutStyle;
9
+ /**
10
+ * レイアウト
11
+ */
12
+ type LayoutStyle = StyleResult;
13
+ //#endregion
14
+ export { CreateLayoutStyle, LayoutStyle };
package/types.d.mts ADDED
@@ -0,0 +1,14 @@
1
+ import { StyleResult } from "@fringeworks/style-utils";
2
+ import { LooseDictionary } from "@fringeworks/types";
3
+
4
+ //#region src/types.d.ts
5
+ /**
6
+ * レイアウトを作る関数
7
+ */
8
+ type CreateLayoutStyle<O = LooseDictionary> = (options?: O) => LayoutStyle;
9
+ /**
10
+ * レイアウト
11
+ */
12
+ type LayoutStyle = StyleResult;
13
+ //#endregion
14
+ export { CreateLayoutStyle, LayoutStyle };
package/types.mjs ADDED
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1,8 @@
1
+ const require_balance_balance = require('../../balance/balance.cjs');
2
+ require('../../balance/styles.css');
3
+
4
+ //#region src/with-css/balance/index.ts
5
+ var balance_default = require_balance_balance;
6
+
7
+ //#endregion
8
+ module.exports = balance_default;
@@ -0,0 +1,3 @@
1
+ import { BalanceLayoutOptions } from "../../balance/types.cjs";
2
+ import balance from "../../balance/balance.cjs";
3
+ export { type BalanceLayoutOptions, balance as default };
@@ -0,0 +1,3 @@
1
+ import { BalanceLayoutOptions } from "../../balance/types.mjs";
2
+ import balance from "../../balance/balance.mjs";
3
+ export { type BalanceLayoutOptions, balance as default };
@@ -0,0 +1,8 @@
1
+ import balance from "../../balance/balance.mjs";
2
+ import "../../balance/styles.css";
3
+
4
+ //#region src/with-css/balance/index.ts
5
+ var balance_default = balance;
6
+
7
+ //#endregion
8
+ export { balance_default as default };
@@ -0,0 +1,8 @@
1
+ const require_center_center = require('../../center/center.cjs');
2
+ require('../../center/styles.css');
3
+
4
+ //#region src/with-css/center/index.ts
5
+ var center_default = require_center_center;
6
+
7
+ //#endregion
8
+ module.exports = center_default;
@@ -0,0 +1,3 @@
1
+ import { CenterLayoutOptions } from "../../center/types.cjs";
2
+ import center from "../../center/center.cjs";
3
+ export { type CenterLayoutOptions, center as default };
@@ -0,0 +1,3 @@
1
+ import { CenterLayoutOptions } from "../../center/types.mjs";
2
+ import center from "../../center/center.mjs";
3
+ export { type CenterLayoutOptions, center as default };
@@ -0,0 +1,8 @@
1
+ import center from "../../center/center.mjs";
2
+ import "../../center/styles.css";
3
+
4
+ //#region src/with-css/center/index.ts
5
+ var center_default = center;
6
+
7
+ //#endregion
8
+ export { center_default as default };
@@ -0,0 +1,8 @@
1
+ const require_flow_flow = require('../../flow/flow.cjs');
2
+ require('../../flow/styles.css');
3
+
4
+ //#region src/with-css/flow/index.ts
5
+ var flow_default = require_flow_flow;
6
+
7
+ //#endregion
8
+ module.exports = flow_default;
@@ -0,0 +1,3 @@
1
+ import { FlowLayoutOptions } from "../../flow/types.cjs";
2
+ import flow from "../../flow/flow.cjs";
3
+ export { type FlowLayoutOptions, flow as default };
@@ -0,0 +1,3 @@
1
+ import { FlowLayoutOptions } from "../../flow/types.mjs";
2
+ import flow from "../../flow/flow.mjs";
3
+ export { type FlowLayoutOptions, flow as default };
@@ -0,0 +1,8 @@
1
+ import flow from "../../flow/flow.mjs";
2
+ import "../../flow/styles.css";
3
+
4
+ //#region src/with-css/flow/index.ts
5
+ var flow_default = flow;
6
+
7
+ //#endregion
8
+ export { flow_default as default };
@@ -0,0 +1,20 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
+ const require_with_css_balance_index = require('./balance/index.cjs');
3
+ const require_with_css_center_index = require('./center/index.cjs');
4
+ const require_with_css_flow_index = require('./flow/index.cjs');
5
+ const require_with_css_layer_index = require('./layer/index.cjs');
6
+ const require_with_css_matrix_index = require('./matrix/index.cjs');
7
+ const require_with_css_pack_index = require('./pack/index.cjs');
8
+ const require_with_css_pin_index = require('./pin/index.cjs');
9
+ const require_with_css_stack_index = require('./stack/index.cjs');
10
+ const require_with_css_tile_index = require('./tile/index.cjs');
11
+
12
+ exports.balance = require_with_css_balance_index;
13
+ exports.center = require_with_css_center_index;
14
+ exports.flow = require_with_css_flow_index;
15
+ exports.layer = require_with_css_layer_index;
16
+ exports.matrix = require_with_css_matrix_index;
17
+ exports.pack = require_with_css_pack_index;
18
+ exports.pin = require_with_css_pin_index;
19
+ exports.stack = require_with_css_stack_index;
20
+ exports.tile = require_with_css_tile_index;
@@ -0,0 +1,20 @@
1
+ import { CreateLayoutStyle, LayoutStyle } from "../types.cjs";
2
+ import { BalanceLayoutOptions } from "../balance/types.cjs";
3
+ import balance from "../balance/balance.cjs";
4
+ import { CenterLayoutOptions } from "../center/types.cjs";
5
+ import center from "../center/center.cjs";
6
+ import { FlowLayoutOptions } from "../flow/types.cjs";
7
+ import flow from "../flow/flow.cjs";
8
+ import { LayerLayoutOptions } from "../layer/types.cjs";
9
+ import { MatrixLayoutOptions } from "../matrix/types.cjs";
10
+ import { PackLayoutOptions } from "../pack/types.cjs";
11
+ import { PinLayoutOptions } from "../pin/types.cjs";
12
+ import { StackLayoutOptions } from "../stack/types.cjs";
13
+ import { TileLayoutOptions } from "../tile/types.cjs";
14
+ import layer from "../layer/layer.cjs";
15
+ import matrix from "../matrix/matrix.cjs";
16
+ import pack from "../pack/pack.cjs";
17
+ import pin from "../pin/pin.cjs";
18
+ import stack from "../stack/stack.cjs";
19
+ import tile from "../tile/tile.cjs";
20
+ export { type BalanceLayoutOptions, type CenterLayoutOptions, type CreateLayoutStyle, type FlowLayoutOptions, type LayerLayoutOptions, type LayoutStyle, type MatrixLayoutOptions, type PackLayoutOptions, type PinLayoutOptions, type StackLayoutOptions, type TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };
@@ -0,0 +1,20 @@
1
+ import { CreateLayoutStyle, LayoutStyle } from "../types.mjs";
2
+ import { BalanceLayoutOptions } from "../balance/types.mjs";
3
+ import balance from "../balance/balance.mjs";
4
+ import { CenterLayoutOptions } from "../center/types.mjs";
5
+ import center from "../center/center.mjs";
6
+ import { FlowLayoutOptions } from "../flow/types.mjs";
7
+ import flow from "../flow/flow.mjs";
8
+ import { LayerLayoutOptions } from "../layer/types.mjs";
9
+ import { MatrixLayoutOptions } from "../matrix/types.mjs";
10
+ import { PackLayoutOptions } from "../pack/types.mjs";
11
+ import { PinLayoutOptions } from "../pin/types.mjs";
12
+ import { StackLayoutOptions } from "../stack/types.mjs";
13
+ import { TileLayoutOptions } from "../tile/types.mjs";
14
+ import layer from "../layer/layer.mjs";
15
+ import matrix from "../matrix/matrix.mjs";
16
+ import pack from "../pack/pack.mjs";
17
+ import pin from "../pin/pin.mjs";
18
+ import stack from "../stack/stack.mjs";
19
+ import tile from "../tile/tile.mjs";
20
+ export { type BalanceLayoutOptions, type CenterLayoutOptions, type CreateLayoutStyle, type FlowLayoutOptions, type LayerLayoutOptions, type LayoutStyle, type MatrixLayoutOptions, type PackLayoutOptions, type PinLayoutOptions, type StackLayoutOptions, type TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };
@@ -0,0 +1,11 @@
1
+ import balance_default from "./balance/index.mjs";
2
+ import center_default from "./center/index.mjs";
3
+ import flow_default from "./flow/index.mjs";
4
+ import layer_default from "./layer/index.mjs";
5
+ import matrix_default from "./matrix/index.mjs";
6
+ import pack_default from "./pack/index.mjs";
7
+ import pin_default from "./pin/index.mjs";
8
+ import stack_default from "./stack/index.mjs";
9
+ import tile_default from "./tile/index.mjs";
10
+
11
+ export { balance_default as balance, center_default as center, flow_default as flow, layer_default as layer, matrix_default as matrix, pack_default as pack, pin_default as pin, stack_default as stack, tile_default as tile };
@@ -0,0 +1,8 @@
1
+ const require_layer_layer = require('../../layer/layer.cjs');
2
+ require('../../layer/styles.css');
3
+
4
+ //#region src/with-css/layer/index.ts
5
+ var layer_default = require_layer_layer;
6
+
7
+ //#endregion
8
+ module.exports = layer_default;
@@ -0,0 +1,3 @@
1
+ import { LayerLayoutOptions } from "../../layer/types.cjs";
2
+ import layer from "../../layer/layer.cjs";
3
+ export { type LayerLayoutOptions, layer as default };
@@ -0,0 +1,3 @@
1
+ import { LayerLayoutOptions } from "../../layer/types.mjs";
2
+ import layer from "../../layer/layer.mjs";
3
+ export { type LayerLayoutOptions, layer as default };
@@ -0,0 +1,8 @@
1
+ import layer from "../../layer/layer.mjs";
2
+ import "../../layer/styles.css";
3
+
4
+ //#region src/with-css/layer/index.ts
5
+ var layer_default = layer;
6
+
7
+ //#endregion
8
+ export { layer_default as default };
@@ -0,0 +1,8 @@
1
+ const require_matrix_matrix = require('../../matrix/matrix.cjs');
2
+ require('../../matrix/styles.css');
3
+
4
+ //#region src/with-css/matrix/index.ts
5
+ var matrix_default = require_matrix_matrix;
6
+
7
+ //#endregion
8
+ module.exports = matrix_default;
@@ -0,0 +1,3 @@
1
+ import { MatrixLayoutOptions } from "../../matrix/types.cjs";
2
+ import matrix from "../../matrix/matrix.cjs";
3
+ export { type MatrixLayoutOptions, matrix as default };
@@ -0,0 +1,3 @@
1
+ import { MatrixLayoutOptions } from "../../matrix/types.mjs";
2
+ import matrix from "../../matrix/matrix.mjs";
3
+ export { type MatrixLayoutOptions, matrix as default };
@@ -0,0 +1,8 @@
1
+ import matrix from "../../matrix/matrix.mjs";
2
+ import "../../matrix/styles.css";
3
+
4
+ //#region src/with-css/matrix/index.ts
5
+ var matrix_default = matrix;
6
+
7
+ //#endregion
8
+ export { matrix_default as default };
@@ -0,0 +1,8 @@
1
+ const require_pack_pack = require('../../pack/pack.cjs');
2
+ require('../../pack/styles.css');
3
+
4
+ //#region src/with-css/pack/index.ts
5
+ var pack_default = require_pack_pack;
6
+
7
+ //#endregion
8
+ module.exports = pack_default;
@@ -0,0 +1,3 @@
1
+ import { PackLayoutOptions } from "../../pack/types.cjs";
2
+ import pack from "../../pack/pack.cjs";
3
+ export { type PackLayoutOptions, pack as default };
@@ -0,0 +1,3 @@
1
+ import { PackLayoutOptions } from "../../pack/types.mjs";
2
+ import pack from "../../pack/pack.mjs";
3
+ export { type PackLayoutOptions, pack as default };
@@ -0,0 +1,8 @@
1
+ import pack from "../../pack/pack.mjs";
2
+ import "../../pack/styles.css";
3
+
4
+ //#region src/with-css/pack/index.ts
5
+ var pack_default = pack;
6
+
7
+ //#endregion
8
+ export { pack_default as default };
@@ -0,0 +1,8 @@
1
+ const require_pin_pin = require('../../pin/pin.cjs');
2
+ require('../../pin/styles.css');
3
+
4
+ //#region src/with-css/pin/index.ts
5
+ var pin_default = require_pin_pin;
6
+
7
+ //#endregion
8
+ module.exports = pin_default;
@@ -0,0 +1,3 @@
1
+ import { PinLayoutOptions } from "../../pin/types.cjs";
2
+ import pin from "../../pin/pin.cjs";
3
+ export { type PinLayoutOptions, pin as default };
@@ -0,0 +1,3 @@
1
+ import { PinLayoutOptions } from "../../pin/types.mjs";
2
+ import pin from "../../pin/pin.mjs";
3
+ export { type PinLayoutOptions, pin as default };