@a4banana/react-layout-primitives 1.3.2 → 2.0.0

package/README.md

@@ -6,8 +6,8 @@ Flexible and type-safe React layout components inspired by Jetpack Compose's Row
 
 - **Type-safe** - Full TypeScript support with exported constants for arrangement and alignment
 - **React 19+** - Uses modern ref-as-prop pattern
-- **Motion support** - Optional integration with [Motion](https://motion.dev) for animations
-- **Lightweight** - Minimal bundle size with no unnecessary dependencies
+- **Lightweight** - Zero dependencies, minimal bundle size
+- **Motion compatible** - Works seamlessly with [Motion](https://motion.dev) for animations
 
 ## Requirements
 
@@ -21,12 +21,6 @@ Flexible and type-safe React layout components inspired by Jetpack Compose's Row
 npm install @a4banana/react-layout-primitives
 ```
 
-For animation support:
-
-```bash
-npm install @a4banana/react-layout-primitives motion
-```
-
 ## Usage
 
 ### Basic Usage
@@ -64,29 +58,38 @@ function App() {
 
 ### With Motion
 
+You can easily add animations using [Motion](https://motion.dev):
+
+```bash
+npm install motion
+```
+
 ```tsx
-import { motion } from '@a4banana/react-layout-primitives/motion';
-import { HorizontalArrangement, VerticalAlignment } from '@a4banana/react-layout-primitives';
+import { motion } from 'motion/react';
+import { Row, Column, HorizontalArrangement } from '@a4banana/react-layout-primitives';
+
+// Create motion-enabled components
+const MotionRow = motion.create(Row);
+const MotionColumn = motion.create(Column);
 
 function AnimatedLayout() {
   return (
-    <motion.Row
+    <MotionRow
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.3 }}
       gap={16}
       arrangement={HorizontalArrangement.SpaceBetween}
-      alignment={VerticalAlignment.Center}
     >
-      <motion.Column
+      <MotionColumn
         initial={{ scale: 0.9 }}
         animate={{ scale: 1 }}
         gap={8}
       >
         <span>Item 1</span>
         <span>Item 2</span>
-      </motion.Column>
-    </motion.Row>
+      </MotionColumn>
+    </MotionRow>
   );
 }
 ```

package/dist/index.cjs

@@ -1 +1,6 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=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 s=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function i(f,a,l){var c=null;if(l!==void 0&&(c=""+l),a.key!==void 0&&(c=""+a.key),"key"in a){l={};for(var u in a)u!=="key"&&(l[u]=a[u])}else l=a;return a=l.ref,{$$typeof:s,type:f,key:c,ref:a!==void 0?a:null,props:l}}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 s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case Z:return"Profiler";case X:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case oe: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:s(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return s(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===g)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=w.A;return e===null?null:e.getOwner()}function l(){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=s(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 b(e,r,t,n,A,x){var o=t.ref;return e={$$typeof:h,type:e,key:r,props:t,_owner:n},(o!==void 0?o: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 v(e,r,t,n,A,x){var o=r.children;if(o!==void 0)if(n)if(le(o)){for(n=0;n<o.length;n++)R(o[n]);Object.freeze&&Object.freeze(o)}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 R(o);if(j.call(r,"key")){o=s(e);var p=Object.keys(r).filter(function(se){return se!=="key"});n=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",I[o+n]||(p=0<p.length?"{"+p.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} />`,n,o,p,o),I[o+n]=!0)}if(o=null,t!==void 0&&(i(t),o=""+t),c(r)&&(i(r.key),o=""+r.key),"key"in r){t={};for(var P in r)P!=="key"&&(t[P]=r[P])}else t=r;return o&&u(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,o,t,a(),A,x)}function R(e){T(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===k&&(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=V,h=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),g=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"),k=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),w=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,le=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,l)(),$=O(f(l)),I={};_.Fragment=g,_.jsx=function(e,r,t){var n=1e4>w.recentlyCreatedOwnerStacks++;return v(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 v(e,r,t,!0,n?Error("react-stack-top-frame"):Y,n?O(f(e)):$)}})()),_}var M;function ie(){return M||(M=1,process.env.NODE_ENV==="production"?S.exports=ce():S.exports=ue()),S.exports}var fe=ie();function J(s){const{direction:m,defaultArrangement:i,defaultAlignment:f}=s;return({children:l,arrangement:c=i,alignment:u=f,style:y,gap:b=0,as:v="div",ref:R,...T})=>{const d=V.useMemo(()=>({display:"flex",flexDirection:m,gap:`${b}px`,justifyContent:F[c]??c,alignItems:F[u]??u}),[b,c,u]);return fe.jsx(v,{ref:R,style:{...d,...y},...T,children:l})}}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.js

@@ -1,9 +1,339 @@
-import { C as r, H as e, a as t, R as o, V as l, b as i } from "./Column-CIsJNLGH.js";
+import re, { useMemo as te } from "react";
+const ne = {
+  Start: "start",
+  End: "end",
+  Center: "center",
+  SpaceBetween: "space-between",
+  SpaceAround: "space-around",
+  SpaceEvenly: "space-evenly"
+}, oe = {
+  Top: "top",
+  Bottom: "bottom",
+  Center: "center",
+  SpaceBetween: "space-between",
+  SpaceAround: "space-around",
+  SpaceEvenly: "space-evenly"
+}, ae = {
+  Start: "start",
+  Center: "center",
+  End: "end",
+  Stretch: "stretch"
+}, se = {
+  Top: "top",
+  Center: "center",
+  Bottom: "bottom",
+  Stretch: "stretch"
+}, F = {
+  top: "flex-start",
+  bottom: "flex-end"
+};
+var A = { exports: {} }, E = {};
+var D;
+function le() {
+  if (D) return E;
+  D = 1;
+  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), d = /* @__PURE__ */ Symbol.for("react.fragment");
+  function i(f, a, s) {
+    var c = null;
+    if (s !== void 0 && (c = "" + s), a.key !== void 0 && (c = "" + a.key), "key" in a) {
+      s = {};
+      for (var u in a)
+        u !== "key" && (s[u] = a[u]);
+    } else s = a;
+    return a = s.ref, {
+      $$typeof: l,
+      type: f,
+      key: c,
+      ref: a !== void 0 ? a : null,
+      props: s
+    };
+  }
+  return E.Fragment = d, E.jsx = i, E.jsxs = i, E;
+}
+var _ = {};
+var L;
+function ce() {
+  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 === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case k:
+          return "Fragment";
+        case z:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case Z:
+          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 W:
+            return "Portal";
+          case J:
+            return e.displayName || "Context";
+          case q:
+            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 H:
+            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
+          case w:
+            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 === k) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === w)
+        return "<...>";
+      try {
+        var r = l(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      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 b(e, r, t, n, S, g) {
+      var o = t.ref;
+      return e = {
+        $$typeof: h,
+        type: e,
+        key: r,
+        props: t,
+        _owner: n
+      }, (o !== void 0 ? o : 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: S
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: g
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function v(e, r, t, n, S, g) {
+      var o = r.children;
+      if (o !== void 0)
+        if (n)
+          if (K(o)) {
+            for (n = 0; n < o.length; n++)
+              R(o[n]);
+            Object.freeze && Object.freeze(o);
+          } 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 R(o);
+      if (j.call(r, "key")) {
+        o = l(e);
+        var p = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        n = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", I[o + n] || (p = 0 < p.length ? "{" + p.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} />`,
+          n,
+          o,
+          p,
+          o
+        ), I[o + n] = !0);
+      }
+      if (o = null, t !== void 0 && (i(t), o = "" + t), c(r) && (i(r.key), o = "" + r.key), "key" in r) {
+        t = {};
+        for (var P in r)
+          P !== "key" && (t[P] = r[P]);
+      } else t = r;
+      return o && u(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), b(
+        e,
+        o,
+        t,
+        a(),
+        S,
+        g
+      );
+    }
+    function R(e) {
+      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));
+    }
+    function T(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === h;
+    }
+    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"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), H = /* @__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() {
+      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 = {};
+    _.Fragment = k, _.jsx = function(e, r, t) {
+      var n = 1e4 > x.recentlyCreatedOwnerStacks++;
+      return v(
+        e,
+        r,
+        t,
+        !1,
+        n ? Error("react-stack-top-frame") : Y,
+        n ? O(f(e)) : $
+      );
+    }, _.jsxs = function(e, r, t) {
+      var n = 1e4 > x.recentlyCreatedOwnerStacks++;
+      return v(
+        e,
+        r,
+        t,
+        !0,
+        n ? Error("react-stack-top-frame") : Y,
+        n ? O(f(e)) : $
+      );
+    };
+  })()), _;
+}
+var M;
+function ue() {
+  return M || (M = 1, process.env.NODE_ENV === "production" ? A.exports = le() : A.exports = ce()), A.exports;
+}
+var ie = ue();
+function V(l) {
+  const { direction: d, defaultArrangement: i, defaultAlignment: f } = l;
+  return ({
+    children: s,
+    arrangement: c = i,
+    alignment: u = f,
+    style: y,
+    gap: b = 0,
+    as: v = "div",
+    ref: R,
+    ...T
+  }) => {
+    const m = te(() => ({
+      display: "flex",
+      flexDirection: d,
+      gap: `${b}px`,
+      justifyContent: F[c] ?? c,
+      alignItems: F[u] ?? u
+    }), [b, c, u]);
+    return /* @__PURE__ */ ie.jsx(
+      v,
+      {
+        ref: R,
+        style: { ...m, ...y },
+        ...T,
+        children: s
+      }
+    );
+  };
+}
+const fe = V({
+  direction: "row",
+  defaultArrangement: ne.Start,
+  defaultAlignment: se.Stretch
+});
+fe.displayName = "Row";
+const de = V({
+  direction: "column",
+  defaultArrangement: oe.Top,
+  defaultAlignment: ae.Stretch
+});
+de.displayName = "Column";
 export {
-  r as Column,
-  e as HorizontalAlignment,
-  t as HorizontalArrangement,
-  o as Row,
-  l as VerticalAlignment,
-  i as VerticalArrangement
+  de as Column,
+  ae as HorizontalAlignment,
+  ne as HorizontalArrangement,
+  fe as Row,
+  se as VerticalAlignment,
+  oe as VerticalArrangement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4banana/react-layout-primitives",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "description": "Flexible and type-safe React layout components inspired by Jetpack Compose",
   "type": "module",
   "sideEffects": false,
@@ -16,11 +16,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./motion": {
-      "types": "./dist/motion.d.ts",
-      "import": "./dist/motion.js",
-      "require": "./dist/motion.cjs"
     }
   },
   "scripts": {
@@ -33,22 +28,15 @@
     "@types/node": "^25.2.1",
     "@types/react": "^19.2.13",
     "@vitejs/plugin-react-swc": "^4.2.3",
-    "motion": "^12.33.0",
     "react": "^19.2.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
-    "motion": "^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "peerDependenciesMeta": {
-    "motion": {
-      "optional": true
-    }
-  },
   "engines": {
     "node": ">=22.0.0"
   },
@@ -63,9 +51,7 @@
     "column",
     "components",
     "ui",
-    "typescript",
-    "motion",
-    "animation"
+    "typescript"
   ],
   "author": "a4banana",
   "license": "MIT"