@a4banana/react-layout-primitives 1.2.0 → 1.3.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 (11) hide show
  1. package/README.md +119 -27
  2. package/dist/{Column-CQXZX7F9.js → Column-CIsJNLGH.js} +43 -52
  3. package/dist/Column-CS66eSYd.cjs +6 -0
  4. package/dist/index.cjs +1 -1
  5. package/dist/index.d.ts +2 -7
  6. package/dist/index.js +1 -1
  7. package/dist/motion.cjs +1 -1
  8. package/dist/motion.d.ts +48 -48
  9. package/dist/motion.js +1 -1
  10. package/package.json +8 -2
  11. package/dist/Column-BQyZsRY7.cjs +0 -6
package/README.md CHANGED
@@ -1,13 +1,19 @@
1
1
  # React Layout Primitives
2
2
 
3
- Flexible and reusable React layout primitive components for modern React applications.
3
+ Flexible and type-safe React layout components inspired by Jetpack Compose's Row and Column.
4
+
5
+ ## Features
6
+
7
+ - **Type-safe** - Full TypeScript support with exported constants for arrangement and alignment
8
+ - **React 19+** - Uses modern ref-as-prop pattern
9
+ - **Motion support** - Optional integration with [Motion](https://motion.dev) for animations
10
+ - **Lightweight** - Minimal bundle size with no unnecessary dependencies
4
11
 
5
12
  ## Requirements
6
13
 
7
- - React 19 or later
8
- - Vite 6.x
9
- - Node.js 22 or later
10
- - TypeScript 5.7 or later
14
+ - React 19.0.0 or later
15
+ - Node.js 22.0.0 or later
16
+ - TypeScript 5.7 or later (recommended)
11
17
 
12
18
  ## Installation
13
19
 
@@ -15,16 +21,39 @@ Flexible and reusable React layout primitive components for modern React applica
15
21
  npm install @a4banana/react-layout-primitives
16
22
  ```
17
23
 
24
+ For animation support:
25
+
26
+ ```bash
27
+ npm install @a4banana/react-layout-primitives motion
28
+ ```
29
+
18
30
  ## Usage
19
31
 
32
+ ### Basic Usage
33
+
20
34
  ```tsx
21
- import { Row, Column } from '@a4banana/react-layout-primitives';
35
+ import {
36
+ Row,
37
+ Column,
38
+ HorizontalArrangement,
39
+ VerticalArrangement,
40
+ HorizontalAlignment,
41
+ VerticalAlignment,
42
+ } from '@a4banana/react-layout-primitives';
22
43
 
23
44
  function App() {
24
45
  return (
25
- <Column gap={20} arrangement="Center" alignment="Center">
46
+ <Column
47
+ gap={20}
48
+ arrangement={VerticalArrangement.Center}
49
+ alignment={HorizontalAlignment.Center}
50
+ >
26
51
  <h1>Title</h1>
27
- <Row gap={10} arrangement="Space Between" alignment="Center">
52
+ <Row
53
+ gap={10}
54
+ arrangement={HorizontalArrangement.SpaceBetween}
55
+ alignment={VerticalAlignment.Center}
56
+ >
28
57
  <button>Left</button>
29
58
  <button>Right</button>
30
59
  </Row>
@@ -33,30 +62,93 @@ function App() {
33
62
  }
34
63
  ```
35
64
 
65
+ ### With Motion
66
+
67
+ ```tsx
68
+ import { motion } from '@a4banana/react-layout-primitives/motion';
69
+ import { HorizontalArrangement, VerticalAlignment } from '@a4banana/react-layout-primitives';
70
+
71
+ function AnimatedLayout() {
72
+ return (
73
+ <motion.Row
74
+ initial={{ opacity: 0, y: 20 }}
75
+ animate={{ opacity: 1, y: 0 }}
76
+ transition={{ duration: 0.3 }}
77
+ gap={16}
78
+ arrangement={HorizontalArrangement.SpaceBetween}
79
+ alignment={VerticalAlignment.Center}
80
+ >
81
+ <motion.Column
82
+ initial={{ scale: 0.9 }}
83
+ animate={{ scale: 1 }}
84
+ gap={8}
85
+ >
86
+ <span>Item 1</span>
87
+ <span>Item 2</span>
88
+ </motion.Column>
89
+ </motion.Row>
90
+ );
91
+ }
92
+ ```
93
+
36
94
  ## API
37
95
 
38
- ### Row Component
39
- A component that arranges its children horizontally (in a row).
96
+ ### Row
97
+
98
+ Arranges children horizontally (flex-direction: row).
99
+
100
+ | Prop | Type | Default | Description |
101
+ |------|------|---------|-------------|
102
+ | `arrangement` | `HorizontalArrangement` | `'start'` | Main axis distribution |
103
+ | `alignment` | `VerticalAlignment` | `'stretch'` | Cross axis alignment |
104
+ | `gap` | `number` | `0` | Gap between children (px) |
105
+ | `as` | `ElementType` | `'div'` | Element to render as |
106
+ | `ref` | `Ref<HTMLElement>` | - | Ref to DOM element |
107
+
108
+ ### Column
40
109
 
41
- Props:
42
- - `arrangement`: Horizontal arrangement ('Start' | 'End' | 'Center' | 'Space Between' | 'Space Around' | 'Space Evenly' | 'Equal Weight')
43
- - `alignment`: Vertical alignment ('Top' | 'Center' | 'Bottom')
44
- - `gap`: Space between children in pixels
45
- - `as`: HTML element or component to render as (default: 'div')
46
- - `className`: CSS class names
47
- - `style`: Additional CSS styles
110
+ Arranges children vertically (flex-direction: column).
48
111
 
49
- ### Column Component
50
- A component that arranges its children vertically (in a column).
112
+ | Prop | Type | Default | Description |
113
+ |------|------|---------|-------------|
114
+ | `arrangement` | `VerticalArrangement` | `'top'` | Main axis distribution |
115
+ | `alignment` | `HorizontalAlignment` | `'stretch'` | Cross axis alignment |
116
+ | `gap` | `number` | `0` | Gap between children (px) |
117
+ | `as` | `ElementType` | `'div'` | Element to render as |
118
+ | `ref` | `Ref<HTMLElement>` | - | Ref to DOM element |
51
119
 
52
- Props:
53
- - `arrangement`: Vertical arrangement ('Top' | 'Bottom' | 'Center' | 'Space Between' | 'Space Around' | 'Space Evenly' | 'Equal Weight')
54
- - `alignment`: Horizontal alignment ('Start' | 'Center' | 'End')
55
- - `gap`: Space between children in pixels
56
- - `as`: HTML element or component to render as (default: 'div')
57
- - `className`: CSS class names
58
- - `style`: Additional CSS styles
120
+ ### Arrangement & Alignment Values
121
+
122
+ ```tsx
123
+ // Row arrangement (horizontal)
124
+ HorizontalArrangement.Start // 'start'
125
+ HorizontalArrangement.End // 'end'
126
+ HorizontalArrangement.Center // 'center'
127
+ HorizontalArrangement.SpaceBetween // 'space-between'
128
+ HorizontalArrangement.SpaceAround // 'space-around'
129
+ HorizontalArrangement.SpaceEvenly // 'space-evenly'
130
+
131
+ // Column arrangement (vertical)
132
+ VerticalArrangement.Top // 'top'
133
+ VerticalArrangement.Bottom // 'bottom'
134
+ VerticalArrangement.Center // 'center'
135
+ VerticalArrangement.SpaceBetween // 'space-between'
136
+ VerticalArrangement.SpaceAround // 'space-around'
137
+ VerticalArrangement.SpaceEvenly // 'space-evenly'
138
+
139
+ // Row alignment (vertical)
140
+ VerticalAlignment.Top // 'top'
141
+ VerticalAlignment.Center // 'center'
142
+ VerticalAlignment.Bottom // 'bottom'
143
+ VerticalAlignment.Stretch // 'stretch'
144
+
145
+ // Column alignment (horizontal)
146
+ HorizontalAlignment.Start // 'start'
147
+ HorizontalAlignment.Center // 'center'
148
+ HorizontalAlignment.End // 'end'
149
+ HorizontalAlignment.Stretch // 'stretch'
150
+ ```
59
151
 
60
152
  ## License
61
153
 
62
- MIT
154
+ MIT
package/dist/{Column-CQXZX7F9.js → Column-CIsJNLGH.js} RENAMED
@@ -24,20 +24,13 @@ const ne = {
24
24
  Bottom: "bottom",
25
25
  Stretch: "stretch"
26
26
  }, F = {
27
- start: "flex-start",
28
- end: "flex-end",
29
27
  top: "flex-start",
30
- bottom: "flex-end",
31
- center: "center",
32
- stretch: "stretch",
33
- "space-between": "space-between",
34
- "space-around": "space-around",
35
- "space-evenly": "space-evenly"
28
+ bottom: "flex-end"
36
29
  };
37
- var A = { exports: {} }, _ = {};
30
+ var A = { exports: {} }, E = {};
38
31
  var D;
39
32
  function le() {
40
- if (D) return _;
33
+ if (D) return E;
41
34
  D = 1;
42
35
  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), d = /* @__PURE__ */ Symbol.for("react.fragment");
43
36
  function i(f, o, s) {
@@ -55,9 +48,9 @@ function le() {
55
48
  props: s
56
49
  };
57
50
  }
58
- return _.Fragment = d, _.jsx = i, _.jsxs = i, _;
51
+ return E.Fragment = d, E.jsx = i, E.jsxs = i, E;
59
52
  }
60
- var b = {};
53
+ var _ = {};
61
54
  var L;
62
55
  function ce() {
63
56
  return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
@@ -67,7 +60,7 @@ function ce() {
67
60
  return e.$$typeof === Q ? null : e.displayName || e.name || null;
68
61
  if (typeof e == "string") return e;
69
62
  switch (e) {
70
- case w:
63
+ case k:
71
64
  return "Fragment";
72
65
  case z:
73
66
  return "Profiler";
@@ -95,7 +88,7 @@ function ce() {
95
88
  return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
96
89
  case X:
97
90
  return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
98
- case x:
91
+ case w:
99
92
  r = e._payload, e = e._init;
100
93
  try {
101
94
  return l(e(r));
@@ -125,8 +118,8 @@ function ce() {
125
118
  }
126
119
  }
127
120
  function f(e) {
128
- if (e === w) return "<>";
129
- if (typeof e == "object" && e !== null && e.$$typeof === x)
121
+ if (e === k) return "<>";
122
+ if (typeof e == "object" && e !== null && e.$$typeof === w)
130
123
  return "<...>";
131
124
  try {
132
125
  var r = l(e);
@@ -136,7 +129,7 @@ function ce() {
136
129
  }
137
130
  }
138
131
  function o() {
139
- var e = O.A;
132
+ var e = x.A;
140
133
  return e === null ? null : e.getOwner();
141
134
  }
142
135
  function s() {
@@ -167,10 +160,10 @@ function ce() {
167
160
  "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
168
161
  )), e = this.props.ref, e !== void 0 ? e : null;
169
162
  }
170
- function k(e, r, t, n, S, h) {
163
+ function b(e, r, t, n, S, g) {
171
164
  var a = t.ref;
172
165
  return e = {
173
- $$typeof: T,
166
+ $$typeof: h,
174
167
  type: e,
175
168
  key: r,
176
169
  props: t,
@@ -197,10 +190,10 @@ function ce() {
197
190
  configurable: !1,
198
191
  enumerable: !1,
199
192
  writable: !0,
200
- value: h
193
+ value: g
201
194
  }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
202
195
  }
203
- function E(e, r, t, n, S, h) {
196
+ function R(e, r, t, n, S, g) {
204
197
  var a = r.children;
205
198
  if (a !== void 0)
206
199
  if (n)
@@ -239,22 +232,22 @@ React keys must be passed directly to JSX without using spread:
239
232
  return a && u(
240
233
  t,
241
234
  typeof e == "function" ? e.displayName || e.name || "Unknown" : e
242
- ), k(
235
+ ), b(
243
236
  e,
244
237
  a,
245
238
  t,
246
239
  o(),
247
240
  S,
248
- h
241
+ g
249
242
  );
250
243
  }
251
244
  function v(e) {
252
- R(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === x && (e._payload.status === "fulfilled" ? R(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
245
+ T(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === w && (e._payload.status === "fulfilled" ? T(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
253
246
  }
254
- function R(e) {
255
- return typeof e == "object" && e !== null && e.$$typeof === T;
247
+ function T(e) {
248
+ return typeof e == "object" && e !== null && e.$$typeof === h;
256
249
  }
257
- var m = re, T = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), w = /* @__PURE__ */ Symbol.for("react.fragment"), U = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), x = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), O = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, K = Array.isArray, g = console.createTask ? console.createTask : function() {
250
+ var m = re, h = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), U = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), w = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), x = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, K = Array.isArray, O = console.createTask ? console.createTask : function() {
258
251
  return null;
259
252
  };
260
253
  m = {
@@ -265,29 +258,29 @@ React keys must be passed directly to JSX without using spread:
265
258
  var C, N = {}, Y = m.react_stack_bottom_frame.bind(
266
259
  m,
267
260
  s
268
- )(), $ = g(f(s)), I = {};
269
- b.Fragment = w, b.jsx = function(e, r, t) {
270
- var n = 1e4 > O.recentlyCreatedOwnerStacks++;
271
- return E(
261
+ )(), $ = O(f(s)), I = {};
262
+ _.Fragment = k, _.jsx = function(e, r, t) {
263
+ var n = 1e4 > x.recentlyCreatedOwnerStacks++;
264
+ return R(
272
265
  e,
273
266
  r,
274
267
  t,
275
268
  !1,
276
269
  n ? Error("react-stack-top-frame") : Y,
277
- n ? g(f(e)) : $
270
+ n ? O(f(e)) : $
278
271
  );
279
- }, b.jsxs = function(e, r, t) {
280
- var n = 1e4 > O.recentlyCreatedOwnerStacks++;
281
- return E(
272
+ }, _.jsxs = function(e, r, t) {
273
+ var n = 1e4 > x.recentlyCreatedOwnerStacks++;
274
+ return R(
282
275
  e,
283
276
  r,
284
277
  t,
285
278
  !0,
286
279
  n ? Error("react-stack-top-frame") : Y,
287
- n ? g(f(e)) : $
280
+ n ? O(f(e)) : $
288
281
  );
289
282
  };
290
- })()), b;
283
+ })()), _;
291
284
  }
292
285
  var M;
293
286
  function ue() {
@@ -297,30 +290,28 @@ var ie = ue();
297
290
  function V(l) {
298
291
  const { direction: d, defaultArrangement: i, defaultAlignment: f } = l;
299
292
  return ({
300
- children: s = null,
293
+ children: s,
301
294
  arrangement: c = i,
302
295
  alignment: u = f,
303
- style: y = {},
304
- className: k = "",
305
- gap: E = 0,
306
- as: v = "div",
307
- ref: R,
308
- ...m
296
+ style: y,
297
+ gap: b = 0,
298
+ as: R = "div",
299
+ ref: v,
300
+ ...T
309
301
  }) => {
310
- const T = te(() => ({
302
+ const m = te(() => ({
311
303
  display: "flex",
312
304
  flexDirection: d,
313
- gap: `${E}px`,
305
+ gap: `${b}px`,
314
306
  justifyContent: F[c] ?? c,
315
307
  alignItems: F[u] ?? u
316
- }), [E, c, u]);
308
+ }), [b, c, u]);
317
309
  return /* @__PURE__ */ ie.jsx(
318
- v,
310
+ R,
319
311
  {
320
- ref: R,
321
- style: { ...T, ...y },
322
- className: k,
323
- ...m,
312
+ ref: v,
313
+ style: { ...m, ...y },
314
+ ...T,
324
315
  children: s
325
316
  }
326
317
  );
package/dist/Column-CS66eSYd.cjs ADDED
@@ -0,0 +1,6 @@
1
+ "use strict";const M=require("react"),z={Start:"start",End:"end",Center:"center",SpaceBetween:"space-between",SpaceAround:"space-around",SpaceEvenly:"space-evenly"},W={Top:"top",Bottom:"bottom",Center:"center",SpaceBetween:"space-between",SpaceAround:"space-around",SpaceEvenly:"space-evenly"},U={Start:"start",Center:"center",End:"end",Stretch:"stretch"},q={Top:"top",Center:"center",Bottom:"bottom",Stretch:"stretch"},F={top:"flex-start",bottom:"flex-end"};var S={exports:{}},E={};var D;function ce(){if(D)return E;D=1;var l=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function i(f,o,s){var c=null;if(s!==void 0&&(c=""+s),o.key!==void 0&&(c=""+o.key),"key"in o){s={};for(var u in o)u!=="key"&&(s[u]=o[u])}else s=o;return o=s.ref,{$$typeof:l,type:f,key:c,ref:o!==void 0?o:null,props:s}}return E.Fragment=m,E.jsx=i,E.jsxs=i,E}var _={};var L;function ue(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case Z:return"Profiler";case X:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case ae:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case K:return e.displayName||"Context";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case g:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function m(e){return""+e}function i(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),m(e)}}function f(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===g)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=w.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function c(e){if(j.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function u(e,r){function t(){C||(C=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function y(){var e=l(this.type);return N[e]||(N[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,r,t,n,A,x){var a=t.ref;return e={$$typeof:h,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function b(e,r,t,n,A,x){var a=r.children;if(a!==void 0)if(n)if(se(a)){for(n=0;n<a.length;n++)v(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v(a);if(j.call(r,"key")){a=l(e);var p=Object.keys(r).filter(function(le){return le!=="key"});n=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",I[a+n]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
2
+ let props = %s;
3
+ <%s {...props} />
4
+ React keys must be passed directly to JSX without using spread:
5
+ let props = %s;
6
+ <%s key={someKey} {...props} />`,n,a,p,a),I[a+n]=!0)}if(a=null,t!==void 0&&(i(t),a=""+t),c(r)&&(i(r.key),a=""+r.key),"key"in r){t={};for(var P in r)P!=="key"&&(t[P]=r[P])}else t=r;return a&&u(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,a,t,o(),A,x)}function v(e){T(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===g&&(e._payload.status==="fulfilled"?T(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function T(e){return typeof e=="object"&&e!==null&&e.$$typeof===h}var d=M,h=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),X=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),ae=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),w=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,se=Array.isArray,O=console.createTask?console.createTask:function(){return null};d={react_stack_bottom_frame:function(e){return e()}};var C,N={},Y=d.react_stack_bottom_frame.bind(d,s)(),$=O(f(s)),I={};_.Fragment=k,_.jsx=function(e,r,t){var n=1e4>w.recentlyCreatedOwnerStacks++;return b(e,r,t,!1,n?Error("react-stack-top-frame"):Y,n?O(f(e)):$)},_.jsxs=function(e,r,t){var n=1e4>w.recentlyCreatedOwnerStacks++;return b(e,r,t,!0,n?Error("react-stack-top-frame"):Y,n?O(f(e)):$)}})()),_}var V;function ie(){return V||(V=1,process.env.NODE_ENV==="production"?S.exports=ce():S.exports=ue()),S.exports}var fe=ie();function J(l){const{direction:m,defaultArrangement:i,defaultAlignment:f}=l;return({children:s,arrangement:c=i,alignment:u=f,style:y,gap:R=0,as:b="div",ref:v,...T})=>{const d=M.useMemo(()=>({display:"flex",flexDirection:m,gap:`${R}px`,justifyContent:F[c]??c,alignItems:F[u]??u}),[R,c,u]);return fe.jsx(b,{ref:v,style:{...d,...y},...T,children:s})}}const B=J({direction:"row",defaultArrangement:z.Start,defaultAlignment:q.Stretch});B.displayName="Row";const G=J({direction:"column",defaultArrangement:W.Top,defaultAlignment:U.Stretch});G.displayName="Column";exports.Column=G;exports.HorizontalAlignment=U;exports.HorizontalArrangement=z;exports.Row=B;exports.VerticalAlignment=q;exports.VerticalArrangement=W;
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./Column-BQyZsRY7.cjs");exports.Column=n.Column;exports.HorizontalAlignment=n.HorizontalAlignment;exports.HorizontalArrangement=n.HorizontalArrangement;exports.Row=n.Row;exports.VerticalAlignment=n.VerticalAlignment;exports.VerticalArrangement=n.VerticalArrangement;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./Column-CS66eSYd.cjs");exports.Column=n.Column;exports.HorizontalAlignment=n.HorizontalAlignment;exports.HorizontalArrangement=n.HorizontalArrangement;exports.Row=n.Row;exports.VerticalAlignment=n.VerticalAlignment;exports.VerticalArrangement=n.VerticalArrangement;
package/dist/index.d.ts CHANGED
@@ -1,7 +1,5 @@
1
- import { ComponentPropsWithRef } from 'react';
2
- import { CSSProperties } from 'react';
1
+ import { ComponentPropsWithoutRef } from 'react';
3
2
  import { ElementType } from 'react';
4
- import { ReactNode } from 'react';
5
3
  import { Ref } from 'react';
6
4
 
7
5
  export declare const Column: {
@@ -58,10 +56,7 @@ export declare type HorizontalArrangement = typeof HorizontalArrangement[keyof t
58
56
  * Base props for all layout primitive components.
59
57
  * Extends React's div props while adding custom layout properties.
60
58
  */
61
- export declare interface LayoutPrimitivesProps extends Omit<ComponentPropsWithRef<'div'>, 'as' | 'ref'> {
62
- readonly children?: ReactNode;
63
- readonly style?: CSSProperties;
64
- readonly className?: string;
59
+ export declare interface LayoutPrimitivesProps extends ComponentPropsWithoutRef<'div'> {
65
60
  /** Gap between child elements in pixels */
66
61
  readonly gap?: number;
67
62
  /** The element type to render as */
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { C as r, H as e, a as t, R as o, V as l, b as i } from "./Column-CQXZX7F9.js";
1
+ import { C as r, H as e, a as t, R as o, V as l, b as i } from "./Column-CIsJNLGH.js";
2
2
  export {
3
3
  r as Column,
4
4
  e as HorizontalAlignment,
package/dist/motion.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("motion/react"),e=require("./Column-BQyZsRY7.cjs"),t={Row:o.motion.create(e.Row),Column:o.motion.create(e.Column)};exports.motion=t;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("motion/react"),e=require("./Column-CS66eSYd.cjs"),t={Row:o.motion.create(e.Row),Column:o.motion.create(e.Column)};exports.motion=t;
package/dist/motion.d.ts CHANGED
@@ -75,7 +75,6 @@ export declare const motion: {
75
75
  readonly Row: ComponentType<Omit<{
76
76
  slot?: string | undefined;
77
77
  title?: string | undefined;
78
- as?: ElementType | undefined;
79
78
  ref?: Ref<HTMLElement> | undefined;
80
79
  key?: Key | null | undefined;
81
80
  defaultChecked?: boolean | undefined;
@@ -86,16 +85,16 @@ export declare const motion: {
86
85
  autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
87
86
  autoFocus?: boolean | undefined;
88
87
  className?: string | undefined;
89
- contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
88
+ contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
90
89
  contextMenu?: string | undefined;
91
90
  dir?: string | undefined;
92
- draggable?: (boolean | "false" | "true") | undefined;
91
+ draggable?: (boolean | "true" | "false") | undefined;
93
92
  enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send" | undefined;
94
93
  hidden?: boolean | undefined;
95
94
  id?: string | undefined;
96
95
  lang?: string | undefined;
97
96
  nonce?: string | undefined;
98
- spellCheck?: (boolean | "false" | "true") | undefined;
97
+ spellCheck?: (boolean | "true" | "false") | undefined;
99
98
  tabIndex?: number | undefined;
100
99
  translate?: "no" | "yes" | undefined;
101
100
  radioGroup?: string | undefined;
@@ -123,7 +122,7 @@ export declare const motion: {
123
122
  security?: string | undefined;
124
123
  unselectable?: "off" | "on" | undefined;
125
124
  popover?: "" | "auto" | "manual" | "hint" | undefined;
126
- popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
125
+ popoverTargetAction?: "toggle" | "hide" | "show" | undefined;
127
126
  popoverTarget?: string | undefined;
128
127
  inert?: boolean | undefined;
129
128
  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
@@ -131,52 +130,52 @@ export declare const motion: {
131
130
  exportparts?: string | undefined;
132
131
  part?: string | undefined;
133
132
  "aria-activedescendant"?: string | undefined;
134
- "aria-atomic"?: (boolean | "false" | "true") | undefined;
135
- "aria-autocomplete"?: "none" | "both" | "inline" | "list" | undefined;
133
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
134
+ "aria-autocomplete"?: "inline" | "none" | "list" | "both" | undefined;
136
135
  "aria-braillelabel"?: string | undefined;
137
136
  "aria-brailleroledescription"?: string | undefined;
138
- "aria-busy"?: (boolean | "false" | "true") | undefined;
139
- "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
137
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
138
+ "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
140
139
  "aria-colcount"?: number | undefined;
141
140
  "aria-colindex"?: number | undefined;
142
141
  "aria-colindextext"?: string | undefined;
143
142
  "aria-colspan"?: number | undefined;
144
143
  "aria-controls"?: string | undefined;
145
- "aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
144
+ "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
146
145
  "aria-describedby"?: string | undefined;
147
146
  "aria-description"?: string | undefined;
148
147
  "aria-details"?: string | undefined;
149
- "aria-disabled"?: (boolean | "false" | "true") | undefined;
148
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
150
149
  "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
151
150
  "aria-errormessage"?: string | undefined;
152
- "aria-expanded"?: (boolean | "false" | "true") | undefined;
151
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
153
152
  "aria-flowto"?: string | undefined;
154
- "aria-grabbed"?: (boolean | "false" | "true") | undefined;
155
- "aria-haspopup"?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
156
- "aria-hidden"?: (boolean | "false" | "true") | undefined;
157
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
153
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
154
+ "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
155
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
156
+ "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
158
157
  "aria-keyshortcuts"?: string | undefined;
159
158
  "aria-label"?: string | undefined;
160
159
  "aria-labelledby"?: string | undefined;
161
160
  "aria-level"?: number | undefined;
162
161
  "aria-live"?: "off" | "assertive" | "polite" | undefined;
163
- "aria-modal"?: (boolean | "false" | "true") | undefined;
164
- "aria-multiline"?: (boolean | "false" | "true") | undefined;
165
- "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
162
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
163
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
164
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
166
165
  "aria-orientation"?: "horizontal" | "vertical" | undefined;
167
166
  "aria-owns"?: string | undefined;
168
167
  "aria-placeholder"?: string | undefined;
169
168
  "aria-posinset"?: number | undefined;
170
- "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
171
- "aria-readonly"?: (boolean | "false" | "true") | undefined;
169
+ "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
170
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
172
171
  "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
173
- "aria-required"?: (boolean | "false" | "true") | undefined;
172
+ "aria-required"?: (boolean | "true" | "false") | undefined;
174
173
  "aria-roledescription"?: string | undefined;
175
174
  "aria-rowcount"?: number | undefined;
176
175
  "aria-rowindex"?: number | undefined;
177
176
  "aria-rowindextext"?: string | undefined;
178
177
  "aria-rowspan"?: number | undefined;
179
- "aria-selected"?: (boolean | "false" | "true") | undefined;
178
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
180
179
  "aria-setsize"?: number | undefined;
181
180
  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
182
181
  "aria-valuemax"?: number | undefined;
@@ -350,16 +349,16 @@ export declare const motion: {
350
349
  onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement> | undefined;
351
350
  onTransitionStart?: TransitionEventHandler<HTMLDivElement> | undefined;
352
351
  onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement> | undefined;
352
+ gap?: number | undefined;
353
+ as?: ElementType | undefined;
353
354
  arrangement?: HorizontalArrangement | undefined;
354
355
  alignment?: VerticalAlignment | undefined;
355
- gap?: number | undefined;
356
356
  } & MotionProps_2, "children"> & {
357
357
  children?: ReactNode | MotionValue<number> | MotionValue<string>;
358
358
  }>;
359
359
  readonly Column: ComponentType<Omit<{
360
360
  slot?: string | undefined;
361
361
  title?: string | undefined;
362
- as?: ElementType | undefined;
363
362
  ref?: Ref<HTMLElement> | undefined;
364
363
  key?: Key | null | undefined;
365
364
  defaultChecked?: boolean | undefined;
@@ -370,16 +369,16 @@ export declare const motion: {
370
369
  autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
371
370
  autoFocus?: boolean | undefined;
372
371
  className?: string | undefined;
373
- contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
372
+ contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
374
373
  contextMenu?: string | undefined;
375
374
  dir?: string | undefined;
376
- draggable?: (boolean | "false" | "true") | undefined;
375
+ draggable?: (boolean | "true" | "false") | undefined;
377
376
  enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send" | undefined;
378
377
  hidden?: boolean | undefined;
379
378
  id?: string | undefined;
380
379
  lang?: string | undefined;
381
380
  nonce?: string | undefined;
382
- spellCheck?: (boolean | "false" | "true") | undefined;
381
+ spellCheck?: (boolean | "true" | "false") | undefined;
383
382
  tabIndex?: number | undefined;
384
383
  translate?: "no" | "yes" | undefined;
385
384
  radioGroup?: string | undefined;
@@ -407,7 +406,7 @@ export declare const motion: {
407
406
  security?: string | undefined;
408
407
  unselectable?: "off" | "on" | undefined;
409
408
  popover?: "" | "auto" | "manual" | "hint" | undefined;
410
- popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
409
+ popoverTargetAction?: "toggle" | "hide" | "show" | undefined;
411
410
  popoverTarget?: string | undefined;
412
411
  inert?: boolean | undefined;
413
412
  inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
@@ -415,52 +414,52 @@ export declare const motion: {
415
414
  exportparts?: string | undefined;
416
415
  part?: string | undefined;
417
416
  "aria-activedescendant"?: string | undefined;
418
- "aria-atomic"?: (boolean | "false" | "true") | undefined;
419
- "aria-autocomplete"?: "none" | "both" | "inline" | "list" | undefined;
417
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
418
+ "aria-autocomplete"?: "inline" | "none" | "list" | "both" | undefined;
420
419
  "aria-braillelabel"?: string | undefined;
421
420
  "aria-brailleroledescription"?: string | undefined;
422
- "aria-busy"?: (boolean | "false" | "true") | undefined;
423
- "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
421
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
422
+ "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
424
423
  "aria-colcount"?: number | undefined;
425
424
  "aria-colindex"?: number | undefined;
426
425
  "aria-colindextext"?: string | undefined;
427
426
  "aria-colspan"?: number | undefined;
428
427
  "aria-controls"?: string | undefined;
429
- "aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
428
+ "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
430
429
  "aria-describedby"?: string | undefined;
431
430
  "aria-description"?: string | undefined;
432
431
  "aria-details"?: string | undefined;
433
- "aria-disabled"?: (boolean | "false" | "true") | undefined;
432
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
434
433
  "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
435
434
  "aria-errormessage"?: string | undefined;
436
- "aria-expanded"?: (boolean | "false" | "true") | undefined;
435
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
437
436
  "aria-flowto"?: string | undefined;
438
- "aria-grabbed"?: (boolean | "false" | "true") | undefined;
439
- "aria-haspopup"?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
440
- "aria-hidden"?: (boolean | "false" | "true") | undefined;
441
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
437
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
438
+ "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
439
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
440
+ "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
442
441
  "aria-keyshortcuts"?: string | undefined;
443
442
  "aria-label"?: string | undefined;
444
443
  "aria-labelledby"?: string | undefined;
445
444
  "aria-level"?: number | undefined;
446
445
  "aria-live"?: "off" | "assertive" | "polite" | undefined;
447
- "aria-modal"?: (boolean | "false" | "true") | undefined;
448
- "aria-multiline"?: (boolean | "false" | "true") | undefined;
449
- "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
446
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
447
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
448
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
450
449
  "aria-orientation"?: "horizontal" | "vertical" | undefined;
451
450
  "aria-owns"?: string | undefined;
452
451
  "aria-placeholder"?: string | undefined;
453
452
  "aria-posinset"?: number | undefined;
454
- "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
455
- "aria-readonly"?: (boolean | "false" | "true") | undefined;
453
+ "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
454
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
456
455
  "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
457
- "aria-required"?: (boolean | "false" | "true") | undefined;
456
+ "aria-required"?: (boolean | "true" | "false") | undefined;
458
457
  "aria-roledescription"?: string | undefined;
459
458
  "aria-rowcount"?: number | undefined;
460
459
  "aria-rowindex"?: number | undefined;
461
460
  "aria-rowindextext"?: string | undefined;
462
461
  "aria-rowspan"?: number | undefined;
463
- "aria-selected"?: (boolean | "false" | "true") | undefined;
462
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
464
463
  "aria-setsize"?: number | undefined;
465
464
  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
466
465
  "aria-valuemax"?: number | undefined;
@@ -634,9 +633,10 @@ export declare const motion: {
634
633
  onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement> | undefined;
635
634
  onTransitionStart?: TransitionEventHandler<HTMLDivElement> | undefined;
636
635
  onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement> | undefined;
636
+ gap?: number | undefined;
637
+ as?: ElementType | undefined;
637
638
  arrangement?: VerticalArrangement | undefined;
638
639
  alignment?: HorizontalAlignment | undefined;
639
- gap?: number | undefined;
640
640
  } & MotionProps_2, "children"> & {
641
641
  children?: ReactNode | MotionValue<number> | MotionValue<string>;
642
642
  }>;
package/dist/motion.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { motion as o } from "motion/react";
2
- import { C as m, R as t } from "./Column-CQXZX7F9.js";
2
+ import { C as m, R as t } from "./Column-CIsJNLGH.js";
3
3
  const a = {
4
4
  Row: o.create(t),
5
5
  Column: o.create(m)
package/package.json CHANGED
@@ -1,7 +1,9 @@
1
1
  {
2
2
  "name": "@a4banana/react-layout-primitives",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
+ "description": "Flexible and type-safe React layout components inspired by Jetpack Compose",
4
5
  "type": "module",
6
+ "sideEffects": false,
5
7
  "files": [
6
8
  "dist"
7
9
  ],
@@ -56,9 +58,13 @@
56
58
  "react",
57
59
  "layout",
58
60
  "flexbox",
61
+ "row",
62
+ "column",
59
63
  "components",
60
64
  "ui",
61
- "typescript"
65
+ "typescript",
66
+ "motion",
67
+ "animation"
62
68
  ],
63
69
  "author": "a4banana",
64
70
  "license": "MIT"
package/dist/Column-BQyZsRY7.cjs DELETED
@@ -1,6 +0,0 @@
1
- "use strict";const M=require("react"),z={Start:"start",End:"end",Center:"center",SpaceBetween:"space-between",SpaceAround:"space-around",SpaceEvenly:"space-evenly"},W={Top:"top",Bottom:"bottom",Center:"center",SpaceBetween:"space-between",SpaceAround:"space-around",SpaceEvenly:"space-evenly"},U={Start:"start",Center:"center",End:"end",Stretch:"stretch"},q={Top:"top",Center:"center",Bottom:"bottom",Stretch:"stretch"},F={start:"flex-start",end:"flex-end",top:"flex-start",bottom:"flex-end",center:"center",stretch:"stretch","space-between":"space-between","space-around":"space-around","space-evenly":"space-evenly"};var S={exports:{}},_={};var D;function ce(){if(D)return _;D=1;var l=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function i(f,o,s){var c=null;if(s!==void 0&&(c=""+s),o.key!==void 0&&(c=""+o.key),"key"in o){s={};for(var u in o)u!=="key"&&(s[u]=o[u])}else s=o;return o=s.ref,{$$typeof:l,type:f,key:c,ref:o!==void 0?o:null,props:s}}return _.Fragment=d,_.jsx=i,_.jsxs=i,_}var b={};var L;function ue(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case Z:return"Profiler";case X:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case ae:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case K:return e.displayName||"Context";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case g:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function d(e){return""+e}function i(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),d(e)}}function f(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===g)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=x.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function c(e){if(j.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function u(e,r){function t(){C||(C=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function y(){var e=l(this.type);return N[e]||(N[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,r,t,n,A,h){var a=t.ref;return e={$$typeof:T,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:h}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function E(e,r,t,n,A,h){var a=r.children;if(a!==void 0)if(n)if(se(a)){for(n=0;n<a.length;n++)v(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v(a);if(j.call(r,"key")){a=l(e);var p=Object.keys(r).filter(function(le){return le!=="key"});n=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",I[a+n]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
2
- let props = %s;
3
- <%s {...props} />
4
- React keys must be passed directly to JSX without using spread:
5
- let props = %s;
6
- <%s key={someKey} {...props} />`,n,a,p,a),I[a+n]=!0)}if(a=null,t!==void 0&&(i(t),a=""+t),c(r)&&(i(r.key),a=""+r.key),"key"in r){t={};for(var P in r)P!=="key"&&(t[P]=r[P])}else t=r;return a&&u(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,a,t,o(),A,h)}function v(e){R(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===g&&(e._payload.status==="fulfilled"?R(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function R(e){return typeof e=="object"&&e!==null&&e.$$typeof===T}var m=M,T=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),X=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),ae=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),x=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,se=Array.isArray,O=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var C,N={},Y=m.react_stack_bottom_frame.bind(m,s)(),$=O(f(s)),I={};b.Fragment=w,b.jsx=function(e,r,t){var n=1e4>x.recentlyCreatedOwnerStacks++;return E(e,r,t,!1,n?Error("react-stack-top-frame"):Y,n?O(f(e)):$)},b.jsxs=function(e,r,t){var n=1e4>x.recentlyCreatedOwnerStacks++;return E(e,r,t,!0,n?Error("react-stack-top-frame"):Y,n?O(f(e)):$)}})()),b}var V;function ie(){return V||(V=1,process.env.NODE_ENV==="production"?S.exports=ce():S.exports=ue()),S.exports}var fe=ie();function J(l){const{direction:d,defaultArrangement:i,defaultAlignment:f}=l;return({children:s=null,arrangement:c=i,alignment:u=f,style:y={},className:k="",gap:E=0,as:v="div",ref:R,...m})=>{const T=M.useMemo(()=>({display:"flex",flexDirection:d,gap:`${E}px`,justifyContent:F[c]??c,alignItems:F[u]??u}),[E,c,u]);return fe.jsx(v,{ref:R,style:{...T,...y},className:k,...m,children:s})}}const B=J({direction:"row",defaultArrangement:z.Start,defaultAlignment:q.Stretch});B.displayName="Row";const G=J({direction:"column",defaultArrangement:W.Top,defaultAlignment:U.Stretch});G.displayName="Column";exports.Column=G;exports.HorizontalAlignment=U;exports.HorizontalArrangement=z;exports.Row=B;exports.VerticalAlignment=q;exports.VerticalArrangement=W;