@a4banana/react-layout-primitives 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# React Layout Primitives
+
+Flexible and reusable React layout primitive components for modern React applications.
+
+## Requirements
+
+- React 19 or later
+- Vite 6.x
+- Node.js 22 or later
+- TypeScript 5.7 or later
+
+## Installation
+
+```bash
+npm install @a4banana/react-layout-primitives
+```
+
+## Usage
+
+```tsx
+import { Row, Column } from '@a4banana/react-layout-primitives';
+
+function App() {
+  return (
+    <Column gap={20} arrangement="Center" alignment="Center">
+      <h1>Title</h1>
+      <Row gap={10} arrangement="Space Between" alignment="Center">
+        <button>Left</button>
+        <button>Right</button>
+      </Row>
+    </Column>
+  );
+}
+```
+
+## API
+
+### Row Component
+A component that arranges its children horizontally (in a row).
+
+Props:
+- `arrangement`: Horizontal arrangement ('Start' | 'End' | 'Center' | 'Space Between' | 'Space Around' | 'Space Evenly' | 'Equal Weight')
+- `alignment`: Vertical alignment ('Top' | 'Center' | 'Bottom')
+- `gap`: Space between children in pixels
+- `as`: HTML element or component to render as (default: 'div')
+- `className`: CSS class names
+- `style`: Additional CSS styles
+
+### Column Component
+A component that arranges its children vertically (in a column).
+
+Props:
+- `arrangement`: Vertical arrangement ('Top' | 'Bottom' | 'Center' | 'Space Between' | 'Space Around' | 'Space Evenly' | 'Equal Weight')
+- `alignment`: Horizontal alignment ('Start' | 'Center' | 'End')
+- `gap`: Space between children in pixels
+- `as`: HTML element or component to render as (default: 'div')
+- `className`: CSS class names
+- `style`: Additional CSS styles
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),s={EQUAL_WEIGHT:"Equal Weight",SPACE_BETWEEN:"Space Between",SPACE_AROUND:"Space Around",SPACE_EVENLY:"Space Evenly",CENTER:"Center",START:"Start",END:"End",TOP:"Top",BOTTOM:"Bottom"},be={[s.EQUAL_WEIGHT]:"stretch",[s.SPACE_BETWEEN]:"space-between",[s.SPACE_AROUND]:"space-around",[s.SPACE_EVENLY]:"space-evenly",[s.CENTER]:"center",[s.START]:"flex-start",[s.END]:"flex-end",[s.TOP]:"flex-start",[s.BOTTOM]:"flex-end"};var P={exports:{}},O={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ge;function je(){if(ge)return O;ge=1;var f=Symbol.for("react.transitional.element"),A=Symbol.for("react.fragment");function g(R,i,c){var E=null;if(c!==void 0&&(E=""+c),i.key!==void 0&&(E=""+i.key),"key"in i){c={};for(var d in i)d!=="key"&&(c[d]=i[d])}else c=i;return i=c.ref,{$$typeof:f,type:R,key:E,ref:i!==void 0?i:null,props:c}}return O.Fragment=A,O.jsx=g,O.jsxs=g,O}var N={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Te;function he(){return Te||(Te=1,process.env.NODE_ENV!=="production"&&function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===we?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case q:return"Fragment";case xe:return"Portal";case D:return"Profiler";case K:return"StrictMode";case V:return"Suspense";case G:return"SuspenseList"}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 re:return(e.displayName||"Context")+".Provider";case ee:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case J:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case L:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function A(e){return""+e}function g(e){try{A(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,o=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.",o),A(e)}}function R(){}function i(){if(p===0){oe=console.log,ae=console.info,ue=console.warn,le=console.error,se=console.group,fe=console.groupCollapsed,ie=console.groupEnd;var e={configurable:!0,enumerable:!0,value:R,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}p++}function c(){if(p--,p===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:_({},e,{value:oe}),info:_({},e,{value:ae}),warn:_({},e,{value:ue}),error:_({},e,{value:le}),group:_({},e,{value:se}),groupCollapsed:_({},e,{value:fe}),groupEnd:_({},e,{value:ie})})}0>p&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}function E(e){if(H===void 0)try{throw Error()}catch(t){var r=t.stack.trim().match(/\n( *(at )?)/);H=r&&r[1]||"",ce=-1<t.stack.indexOf(`
+    at`)?" (<anonymous>)":-1<t.stack.indexOf("@")?"@unknown:0:0":""}return`
+`+H+e+ce}function d(e,r){if(!e||X)return"";var t=F.get(e);if(t!==void 0)return t;X=!0,t=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var o=null;o=T.H,T.H=null,i();try{var u={DetermineComponentFrameRoot:function(){try{if(r){var b=function(){throw Error()};if(Object.defineProperty(b.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(b,[])}catch(m){var k=m}Reflect.construct(e,[],b)}else{try{b.call()}catch(m){k=m}e.call(b.prototype)}}else{try{throw Error()}catch(m){k=m}(b=e())&&typeof b.catch=="function"&&b.catch(function(){})}}catch(m){if(m&&k&&typeof m.stack=="string")return[m.stack,k.stack]}return[null,null]}};u.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var a=Object.getOwnPropertyDescriptor(u.DetermineComponentFrameRoot,"name");a&&a.configurable&&Object.defineProperty(u.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var n=u.DetermineComponentFrameRoot(),v=n[0],C=n[1];if(v&&C){var l=v.split(`
+`),y=C.split(`
+`);for(n=a=0;a<l.length&&!l[a].includes("DetermineComponentFrameRoot");)a++;for(;n<y.length&&!y[n].includes("DetermineComponentFrameRoot");)n++;if(a===l.length||n===y.length)for(a=l.length-1,n=y.length-1;1<=a&&0<=n&&l[a]!==y[n];)n--;for(;1<=a&&0<=n;a--,n--)if(l[a]!==y[n]){if(a!==1||n!==1)do if(a--,n--,0>n||l[a]!==y[n]){var w=`
+`+l[a].replace(" at new "," at ");return e.displayName&&w.includes("<anonymous>")&&(w=w.replace("<anonymous>",e.displayName)),typeof e=="function"&&F.set(e,w),w}while(1<=a&&0<=n);break}}}finally{X=!1,T.H=o,c(),Error.prepareStackTrace=t}return l=(l=e?e.displayName||e.name:"")?E(l):"",typeof e=="function"&&F.set(e,l),l}function S(e){if(e==null)return"";if(typeof e=="function"){var r=e.prototype;return d(e,!(!r||!r.isReactComponent))}if(typeof e=="string")return E(e);switch(e){case V:return E("Suspense");case G:return E("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case B:return e=d(e.render,!1),e;case J:return S(e.type);case L:r=e._payload,e=e._init;try{return S(e(r))}catch{}}return""}function x(){var e=T.A;return e===null?null:e.getOwner()}function j(e){if(ne.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function Y(e,r){function t(){Ee||(Ee=!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 M(){var e=f(this.type);return de[e]||(de[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 W(e,r,t,o,u,a){return t=a.ref,e={$$typeof:U,type:e,key:r,props:a,_owner:u},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:M}):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.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,r,t,o,u,a){if(typeof e=="string"||typeof e=="function"||e===q||e===D||e===K||e===V||e===G||e===pe||typeof e=="object"&&e!==null&&(e.$$typeof===L||e.$$typeof===J||e.$$typeof===re||e.$$typeof===ee||e.$$typeof===B||e.$$typeof===Oe||e.getModuleId!==void 0)){var n=r.children;if(n!==void 0)if(o)if(z(n)){for(o=0;o<n.length;o++)Q(n[o],e);Object.freeze&&Object.freeze(n)}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 Q(n,e)}else n="",(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(n+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),e===null?o="null":z(e)?o="array":e!==void 0&&e.$$typeof===U?(o="<"+(f(e.type)||"Unknown")+" />",n=" Did you accidentally export a JSX literal instead of a component?"):o=typeof e,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",o,n);if(ne.call(r,"key")){n=f(e);var v=Object.keys(r).filter(function(l){return l!=="key"});o=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",ve[n+o]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,n,v,n),ve[n+o]=!0)}if(n=null,t!==void 0&&(g(t),n=""+t),j(r)&&(g(r.key),n=""+r.key),"key"in r){t={};for(var C in r)C!=="key"&&(t[C]=r[C])}else t=r;return n&&Y(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),W(e,n,a,u,x(),t)}function Q(e,r){if(typeof e=="object"&&e&&e.$$typeof!==Ne){if(z(e))for(var t=0;t<e.length;t++){var o=e[t];$(o)&&Z(o,r)}else if($(e))e._store&&(e._store.validated=1);else if(e===null||typeof e!="object"?t=null:(t=te&&e[te]||e["@@iterator"],t=typeof t=="function"?t:null),typeof t=="function"&&t!==e.entries&&(t=t.call(e),t!==e))for(;!(e=t.next()).done;)$(e.value)&&Z(e.value,r)}}function $(e){return typeof e=="object"&&e!==null&&e.$$typeof===U}function Z(e,r){if(e._store&&!e._store.validated&&e.key==null&&(e._store.validated=1,r=Ce(r),!me[r])){me[r]=!0;var t="";e&&e._owner!=null&&e._owner!==x()&&(t=null,typeof e._owner.tag=="number"?t=f(e._owner.type):typeof e._owner.name=="string"&&(t=e._owner.name),t=" It was passed a child from "+t+".");var o=T.getCurrentStack;T.getCurrentStack=function(){var u=S(e.type);return o&&(u+=o()||""),u},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',r,t),T.getCurrentStack=o}}function Ce(e){var r="",t=x();return t&&(t=f(t.type))&&(r=`
+
+Check the render method of \``+t+"`."),r||(e=f(e))&&(r=`
+
+Check the top-level render call using <`+e+">."),r}var Se=I,U=Symbol.for("react.transitional.element"),xe=Symbol.for("react.portal"),q=Symbol.for("react.fragment"),K=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),re=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),V=Symbol.for("react.suspense"),G=Symbol.for("react.suspense_list"),J=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),pe=Symbol.for("react.offscreen"),te=Symbol.iterator,we=Symbol.for("react.client.reference"),T=Se.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ne=Object.prototype.hasOwnProperty,_=Object.assign,Oe=Symbol.for("react.client.reference"),z=Array.isArray,p=0,oe,ae,ue,le,se,fe,ie;R.__reactDisabledLog=!0;var H,ce,X=!1,F=new(typeof WeakMap=="function"?WeakMap:Map),Ne=Symbol.for("react.client.reference"),Ee,de={},ve={},me={};N.Fragment=q,N.jsx=function(e,r,t,o,u){return h(e,r,t,!1,o,u)},N.jsxs=function(e,r,t,o,u){return h(e,r,t,!0,o,u)}}()),N}var _e;function ke(){return _e||(_e=1,process.env.NODE_ENV==="production"?P.exports=je():P.exports=he()),P.exports}var Pe=ke();function ye(f){const{direction:A,defaultArrangement:g,defaultAlignment:R}=f;return I.forwardRef(({children:c=null,arrangement:E=g,alignment:d=R,style:S={},className:x="",gap:j=0,as:Y="div",...M},W)=>{const h=I.useMemo(()=>({display:"flex",flexDirection:A,gap:`${j}px`,justifyContent:be[E],alignItems:be[d]}),[j,E,d]);return Pe.jsx(Y,{ref:W,style:{...h,...S},className:x,...M,children:c})})}const Ae=ye({direction:"row",defaultArrangement:s.START,defaultAlignment:s.TOP});Ae.displayName="Row";const Re=ye({direction:"column",defaultArrangement:s.TOP,defaultAlignment:s.START});Re.displayName="Column";exports.Column=Re;exports.Row=Ae;

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+import { ComponentPropsWithRef } from 'react';
+import { CSSProperties } from 'react';
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { ReactNode } from 'react';
+
+/** Configuration options for element alignment in both horizontal and vertical directions */
+declare type Alignment = Readonly<{
+    /** Alignment configuration for horizontal positioning */
+    Horizontal: HorizontalAlignment;
+    /** Alignment configuration for vertical positioning */
+    Vertical: VerticalAlignment;
+}>;
+
+/** Configuration options for element arrangement in both horizontal and vertical directions */
+declare type Arrangement = Readonly<{
+    /** Arrangement configuration for horizontal layouts */
+    Horizontal: HorizontalArrangement;
+    /** Arrangement configuration for vertical layouts */
+    Vertical: VerticalArrangement;
+}>;
+
+/**
+ * Common arrangement values used across the layout primitives.
+ * These values are used to define the alignment and distribution of child elements.
+ */
+declare const ArrangementValues: {
+    readonly EQUAL_WEIGHT: "Equal Weight";
+    readonly SPACE_BETWEEN: "Space Between";
+    readonly SPACE_AROUND: "Space Around";
+    readonly SPACE_EVENLY: "Space Evenly";
+    readonly CENTER: "Center";
+    readonly START: "Start";
+    readonly END: "End";
+    readonly TOP: "Top";
+    readonly BOTTOM: "Bottom";
+};
+
+export declare const Column: ForwardRefExoticComponent<ColumnProps>;
+
+/**
+ * Props interface for the Column component
+ * Extends LayoutPrimitivesProps with column-specific arrangement options
+ */
+export declare interface ColumnProps extends LayoutPrimitivesProps {
+    readonly arrangement?: Arrangement['Vertical'];
+    readonly alignment?: Alignment['Horizontal'];
+}
+
+/** Common arrangement options that can be applied to both horizontal and vertical layouts */
+declare type CommonArrangement = typeof ArrangementValues.EQUAL_WEIGHT | typeof ArrangementValues.SPACE_BETWEEN | typeof ArrangementValues.SPACE_AROUND | typeof ArrangementValues.SPACE_EVENLY | typeof ArrangementValues.CENTER;
+
+/** Alignment options for horizontal positioning */
+declare type HorizontalAlignment = typeof ArrangementValues.START | typeof ArrangementValues.CENTER | typeof ArrangementValues.END;
+
+/** Arrangement options specific to horizontal layouts */
+declare type HorizontalArrangement = typeof ArrangementValues.START | typeof ArrangementValues.END | CommonArrangement;
+
+/**
+ * Base interface for all layout primitive components
+ * Extends React's div props while adding custom layout properties
+ */
+declare interface LayoutPrimitivesProps extends Omit<ComponentPropsWithRef<'div'>, 'as'> {
+    readonly children?: ReactNode;
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    readonly gap?: number;
+    readonly as?: ElementType;
+}
+
+export declare const Row: ForwardRefExoticComponent<RowProps>;
+
+/**
+ * Props interface for the Row component
+ * Extends LayoutPrimitivesProps with row-specific arrangement options
+ */
+export declare interface RowProps extends LayoutPrimitivesProps {
+    readonly arrangement?: Arrangement['Horizontal'];
+    readonly alignment?: Alignment['Vertical'];
+}
+
+/** Alignment options for vertical positioning */
+declare type VerticalAlignment = typeof ArrangementValues.TOP | typeof ArrangementValues.CENTER | typeof ArrangementValues.BOTTOM;
+
+/** Arrangement options specific to vertical layouts */
+declare type VerticalArrangement = typeof ArrangementValues.TOP | typeof ArrangementValues.BOTTOM | CommonArrangement;
+
+export { }

package/dist/index.js

@@ -0,0 +1,510 @@
+import we, { forwardRef as Oe, useMemo as Ne } from "react";
+const f = {
+  EQUAL_WEIGHT: "Equal Weight",
+  SPACE_BETWEEN: "Space Between",
+  SPACE_AROUND: "Space Around",
+  SPACE_EVENLY: "Space Evenly",
+  CENTER: "Center",
+  START: "Start",
+  END: "End",
+  TOP: "Top",
+  BOTTOM: "Bottom"
+}, ve = {
+  [f.EQUAL_WEIGHT]: "stretch",
+  [f.SPACE_BETWEEN]: "space-between",
+  [f.SPACE_AROUND]: "space-around",
+  [f.SPACE_EVENLY]: "space-evenly",
+  [f.CENTER]: "center",
+  [f.START]: "flex-start",
+  [f.END]: "flex-end",
+  [f.TOP]: "flex-start",
+  [f.BOTTOM]: "flex-end"
+};
+var P = { exports: {} }, O = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var be;
+function je() {
+  if (be) return O;
+  be = 1;
+  var s = Symbol.for("react.transitional.element"), R = Symbol.for("react.fragment");
+  function g(y, i, c) {
+    var E = null;
+    if (c !== void 0 && (E = "" + c), i.key !== void 0 && (E = "" + i.key), "key" in i) {
+      c = {};
+      for (var d in i)
+        d !== "key" && (c[d] = i[d]);
+    } else c = i;
+    return i = c.ref, {
+      $$typeof: s,
+      type: y,
+      key: E,
+      ref: i !== void 0 ? i : null,
+      props: c
+    };
+  }
+  return O.Fragment = R, O.jsx = g, O.jsxs = g, O;
+}
+var N = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ge;
+function he() {
+  return ge || (ge = 1, process.env.NODE_ENV !== "production" && function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === pe ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case B:
+          return "Fragment";
+        case ye:
+          return "Portal";
+        case K:
+          return "Profiler";
+        case Z:
+          return "StrictMode";
+        case q:
+          return "Suspense";
+        case G:
+          return "SuspenseList";
+      }
+      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 ee:
+            return (e.displayName || "Context") + ".Provider";
+          case D:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case V:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case J:
+            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case L:
+            r = e._payload, e = e._init;
+            try {
+              return s(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function R(e) {
+      return "" + e;
+    }
+    function g(e) {
+      try {
+        R(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, o = 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.",
+          o
+        ), R(e);
+      }
+    }
+    function y() {
+    }
+    function i() {
+      if (S === 0) {
+        ne = console.log, oe = console.info, ae = console.warn, ue = console.error, le = console.group, fe = console.groupCollapsed, se = console.groupEnd;
+        var e = {
+          configurable: !0,
+          enumerable: !0,
+          value: y,
+          writable: !0
+        };
+        Object.defineProperties(console, {
+          info: e,
+          log: e,
+          warn: e,
+          error: e,
+          group: e,
+          groupCollapsed: e,
+          groupEnd: e
+        });
+      }
+      S++;
+    }
+    function c() {
+      if (S--, S === 0) {
+        var e = { configurable: !0, enumerable: !0, writable: !0 };
+        Object.defineProperties(console, {
+          log: _({}, e, { value: ne }),
+          info: _({}, e, { value: oe }),
+          warn: _({}, e, { value: ae }),
+          error: _({}, e, { value: ue }),
+          group: _({}, e, { value: le }),
+          groupCollapsed: _({}, e, { value: fe }),
+          groupEnd: _({}, e, { value: se })
+        });
+      }
+      0 > S && console.error(
+        "disabledDepth fell below zero. This is a bug in React. Please file an issue."
+      );
+    }
+    function E(e) {
+      if (H === void 0)
+        try {
+          throw Error();
+        } catch (t) {
+          var r = t.stack.trim().match(/\n( *(at )?)/);
+          H = r && r[1] || "", ie = -1 < t.stack.indexOf(`
+    at`) ? " (<anonymous>)" : -1 < t.stack.indexOf("@") ? "@unknown:0:0" : "";
+        }
+      return `
+` + H + e + ie;
+    }
+    function d(e, r) {
+      if (!e || X) return "";
+      var t = F.get(e);
+      if (t !== void 0) return t;
+      X = !0, t = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
+      var o = null;
+      o = T.H, T.H = null, i();
+      try {
+        var u = {
+          DetermineComponentFrameRoot: function() {
+            try {
+              if (r) {
+                var b = function() {
+                  throw Error();
+                };
+                if (Object.defineProperty(b.prototype, "props", {
+                  set: function() {
+                    throw Error();
+                  }
+                }), typeof Reflect == "object" && Reflect.construct) {
+                  try {
+                    Reflect.construct(b, []);
+                  } catch (v) {
+                    var k = v;
+                  }
+                  Reflect.construct(e, [], b);
+                } else {
+                  try {
+                    b.call();
+                  } catch (v) {
+                    k = v;
+                  }
+                  e.call(b.prototype);
+                }
+              } else {
+                try {
+                  throw Error();
+                } catch (v) {
+                  k = v;
+                }
+                (b = e()) && typeof b.catch == "function" && b.catch(function() {
+                });
+              }
+            } catch (v) {
+              if (v && k && typeof v.stack == "string")
+                return [v.stack, k.stack];
+            }
+            return [null, null];
+          }
+        };
+        u.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
+        var a = Object.getOwnPropertyDescriptor(
+          u.DetermineComponentFrameRoot,
+          "name"
+        );
+        a && a.configurable && Object.defineProperty(
+          u.DetermineComponentFrameRoot,
+          "name",
+          { value: "DetermineComponentFrameRoot" }
+        );
+        var n = u.DetermineComponentFrameRoot(), m = n[0], x = n[1];
+        if (m && x) {
+          var l = m.split(`
+`), A = x.split(`
+`);
+          for (n = a = 0; a < l.length && !l[a].includes(
+            "DetermineComponentFrameRoot"
+          ); )
+            a++;
+          for (; n < A.length && !A[n].includes(
+            "DetermineComponentFrameRoot"
+          ); )
+            n++;
+          if (a === l.length || n === A.length)
+            for (a = l.length - 1, n = A.length - 1; 1 <= a && 0 <= n && l[a] !== A[n]; )
+              n--;
+          for (; 1 <= a && 0 <= n; a--, n--)
+            if (l[a] !== A[n]) {
+              if (a !== 1 || n !== 1)
+                do
+                  if (a--, n--, 0 > n || l[a] !== A[n]) {
+                    var w = `
+` + l[a].replace(
+                      " at new ",
+                      " at "
+                    );
+                    return e.displayName && w.includes("<anonymous>") && (w = w.replace("<anonymous>", e.displayName)), typeof e == "function" && F.set(e, w), w;
+                  }
+                while (1 <= a && 0 <= n);
+              break;
+            }
+        }
+      } finally {
+        X = !1, T.H = o, c(), Error.prepareStackTrace = t;
+      }
+      return l = (l = e ? e.displayName || e.name : "") ? E(l) : "", typeof e == "function" && F.set(e, l), l;
+    }
+    function p(e) {
+      if (e == null) return "";
+      if (typeof e == "function") {
+        var r = e.prototype;
+        return d(
+          e,
+          !(!r || !r.isReactComponent)
+        );
+      }
+      if (typeof e == "string") return E(e);
+      switch (e) {
+        case q:
+          return E("Suspense");
+        case G:
+          return E("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case V:
+            return e = d(e.render, !1), e;
+          case J:
+            return p(e.type);
+          case L:
+            r = e._payload, e = e._init;
+            try {
+              return p(e(r));
+            } catch {
+            }
+        }
+      return "";
+    }
+    function C() {
+      var e = T.A;
+      return e === null ? null : e.getOwner();
+    }
+    function j(e) {
+      if (te.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function Y(e, r) {
+      function t() {
+        ce || (ce = !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 M() {
+      var e = s(this.type);
+      return Ee[e] || (Ee[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 W(e, r, t, o, u, a) {
+      return t = a.ref, e = {
+        $$typeof: U,
+        type: e,
+        key: r,
+        props: a,
+        _owner: u
+      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: M
+      }) : 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.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function h(e, r, t, o, u, a) {
+      if (typeof e == "string" || typeof e == "function" || e === B || e === K || e === Z || e === q || e === G || e === xe || typeof e == "object" && e !== null && (e.$$typeof === L || e.$$typeof === J || e.$$typeof === ee || e.$$typeof === D || e.$$typeof === V || e.$$typeof === Ce || e.getModuleId !== void 0)) {
+        var n = r.children;
+        if (n !== void 0)
+          if (o)
+            if (z(n)) {
+              for (o = 0; o < n.length; o++)
+                I(n[o], e);
+              Object.freeze && Object.freeze(n);
+            } 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 I(n, e);
+      } else
+        n = "", (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (n += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), e === null ? o = "null" : z(e) ? o = "array" : e !== void 0 && e.$$typeof === U ? (o = "<" + (s(e.type) || "Unknown") + " />", n = " Did you accidentally export a JSX literal instead of a component?") : o = typeof e, console.error(
+          "React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
+          o,
+          n
+        );
+      if (te.call(r, "key")) {
+        n = s(e);
+        var m = Object.keys(r).filter(function(l) {
+          return l !== "key";
+        });
+        o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", de[n + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          n,
+          m,
+          n
+        ), de[n + o] = !0);
+      }
+      if (n = null, t !== void 0 && (g(t), n = "" + t), j(r) && (g(r.key), n = "" + r.key), "key" in r) {
+        t = {};
+        for (var x in r)
+          x !== "key" && (t[x] = r[x]);
+      } else t = r;
+      return n && Y(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), W(e, n, a, u, C(), t);
+    }
+    function I(e, r) {
+      if (typeof e == "object" && e && e.$$typeof !== Se) {
+        if (z(e))
+          for (var t = 0; t < e.length; t++) {
+            var o = e[t];
+            $(o) && Q(o, r);
+          }
+        else if ($(e))
+          e._store && (e._store.validated = 1);
+        else if (e === null || typeof e != "object" ? t = null : (t = re && e[re] || e["@@iterator"], t = typeof t == "function" ? t : null), typeof t == "function" && t !== e.entries && (t = t.call(e), t !== e))
+          for (; !(e = t.next()).done; )
+            $(e.value) && Q(e.value, r);
+      }
+    }
+    function $(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === U;
+    }
+    function Q(e, r) {
+      if (e._store && !e._store.validated && e.key == null && (e._store.validated = 1, r = Ae(r), !me[r])) {
+        me[r] = !0;
+        var t = "";
+        e && e._owner != null && e._owner !== C() && (t = null, typeof e._owner.tag == "number" ? t = s(e._owner.type) : typeof e._owner.name == "string" && (t = e._owner.name), t = " It was passed a child from " + t + ".");
+        var o = T.getCurrentStack;
+        T.getCurrentStack = function() {
+          var u = p(e.type);
+          return o && (u += o() || ""), u;
+        }, console.error(
+          'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
+          r,
+          t
+        ), T.getCurrentStack = o;
+      }
+    }
+    function Ae(e) {
+      var r = "", t = C();
+      return t && (t = s(t.type)) && (r = `
+
+Check the render method of \`` + t + "`."), r || (e = s(e)) && (r = `
+
+Check the top-level render call using <` + e + ">."), r;
+    }
+    var Re = we, U = Symbol.for("react.transitional.element"), ye = Symbol.for("react.portal"), B = Symbol.for("react.fragment"), Z = Symbol.for("react.strict_mode"), K = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), ee = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), q = Symbol.for("react.suspense"), G = Symbol.for("react.suspense_list"), J = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), xe = Symbol.for("react.offscreen"), re = Symbol.iterator, pe = Symbol.for("react.client.reference"), T = Re.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, te = Object.prototype.hasOwnProperty, _ = Object.assign, Ce = Symbol.for("react.client.reference"), z = Array.isArray, S = 0, ne, oe, ae, ue, le, fe, se;
+    y.__reactDisabledLog = !0;
+    var H, ie, X = !1, F = new (typeof WeakMap == "function" ? WeakMap : Map)(), Se = Symbol.for("react.client.reference"), ce, Ee = {}, de = {}, me = {};
+    N.Fragment = B, N.jsx = function(e, r, t, o, u) {
+      return h(e, r, t, !1, o, u);
+    }, N.jsxs = function(e, r, t, o, u) {
+      return h(e, r, t, !0, o, u);
+    };
+  }()), N;
+}
+var Te;
+function ke() {
+  return Te || (Te = 1, process.env.NODE_ENV === "production" ? P.exports = je() : P.exports = he()), P.exports;
+}
+var Pe = ke();
+function _e(s) {
+  const { direction: R, defaultArrangement: g, defaultAlignment: y } = s;
+  return Oe(({
+    children: c = null,
+    arrangement: E = g,
+    alignment: d = y,
+    style: p = {},
+    className: C = "",
+    gap: j = 0,
+    as: Y = "div",
+    ...M
+  }, W) => {
+    const h = Ne(() => ({
+      display: "flex",
+      flexDirection: R,
+      gap: `${j}px`,
+      justifyContent: ve[E],
+      alignItems: ve[d]
+    }), [j, E, d]);
+    return /* @__PURE__ */ Pe.jsx(
+      Y,
+      {
+        ref: W,
+        style: { ...h, ...p },
+        className: C,
+        ...M,
+        children: c
+      }
+    );
+  });
+}
+const Ye = _e({
+  direction: "row",
+  defaultArrangement: f.START,
+  defaultAlignment: f.TOP
+});
+Ye.displayName = "Row";
+const Me = _e({
+  direction: "column",
+  defaultArrangement: f.TOP,
+  defaultAlignment: f.START
+});
+Me.displayName = "Column";
+export {
+  Me as Column,
+  Ye as Row
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@a4banana/react-layout-primitives",
+  "version": "1.0.0",
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.24",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^3.7.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "engines": {
+    "node": "^22.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "layout",
+    "flexbox",
+    "components",
+    "ui",
+    "typescript"
+  ],
+  "author": "a4banana",
+  "license": "MIT"
+}