@jengaui/layout/dist/index.js

Jenga UI Layout component in React

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('react');
var tastycss = require('tastycss');
var jsxRuntime = require('react/jsx-runtime');
var utils = require('@jengaui/utils');

var m=tastycss.tasty({styles:{display:"flex",flow:"row"}}),fe=react.forwardRef(function(t,o){let e=tastycss.extractStyles(t,tastycss.CONTAINER_STYLES);return jsxRuntime.jsx(m,{...tastycss.filterBaseProps(t,{eventProps:!0}),ref:o,styles:e})});var h=tastycss.tasty({styles:{display:"block",flow:"column"}}),w=tastycss.CONTAINER_STYLES,ye=react.forwardRef(function(t,o){let e=tastycss.extractStyles(t,w);return jsxRuntime.jsx(h,{...tastycss.filterBaseProps(t,{eventProps:!0}),ref:o,styles:e})});var J=tastycss.tasty({styles:{display:"grid",flow:"row"}}),N={template:"gridTemplate",columns:"gridColumns",rows:"gridRows",areas:"gridAreas"},Be=react.forwardRef(function(t,o){let e=tastycss.extractStyles(t,tastycss.CONTAINER_STYLES,void 0,N);return jsxRuntime.jsx(J,{...tastycss.filterBaseProps(t,{eventProps:!0}),ref:o,styles:e})});var k=tastycss.tasty({element:"Prefix",styles:{position:"absolute",display:"grid",placeContent:"stretch",placeItems:"center",flow:"column",gap:0,left:"@prefix-gap",top:"@prefix-gap",bottom:"@prefix-gap",color:"#dark.75",height:"(100% - (2 * @prefix-gap))"}}),Ie=react.forwardRef(function(t,o){let{onWidthChange:e,outerGap:a="1bw",children:s,...n}=t,i=tastycss.extractStyles(n,tastycss.CONTAINER_STYLES),r=utils.useCombinedRefs(o);return utils.useLayoutEffect(()=>{(r==null?void 0:r.current)&&e&&e(r.current.offsetWidth);},[s,r,e]),jsxRuntime.jsx(k,{...tastycss.filterBaseProps(n,{eventProps:!0}),ref:r,styles:i,style:{"--prefix-gap":tastycss.parseStyle(a).value},children:s})});var Q=tastycss.tasty({styles:{display:"flex",gap:!0,flow:{"":"row",vertical:"column"},placeItems:{"":"center stretch",vertical:"stretch"}}}),ke=react.forwardRef(function(t,o){let{mods:e,direction:a,...s}=t,n=tastycss.extractStyles(s,tastycss.CONTAINER_STYLES);return jsxRuntime.jsx(Q,{...tastycss.filterBaseProps(s,{eventProps:!0}),ref:o,mods:{vertical:a==="vertical"||s.flow==="column",...e},styles:n})});var oe=tastycss.tasty({element:"Suffix",styles:{position:"absolute",display:"grid",placeContent:"stretch",placeItems:"center",flow:"column",gap:0,right:"@suffix-gap",top:"@suffix-gap",bottom:"@suffix-gap",color:"#dark.75",height:"(100% - (2 * @suffix-gap))"}}),Ve=react.forwardRef(function(t,o){let{onWidthChange:e,outerGap:a="1bw",children:s,...n}=t,i=tastycss.extractStyles(n,tastycss.CONTAINER_STYLES),r=utils.useCombinedRefs(o);return react.useEffect(()=>{r&&r.current&&e&&e(r.current.offsetWidth);},[s,r,e]),jsxRuntime.jsx(oe,{...tastycss.filterBaseProps(n,{eventProps:!0}),ref:r,styles:i,style:{"--suffix-gap":tastycss.parseStyle(a).value},children:s})});

exports.Flex = fe;
exports.Flow = ye;
exports.Grid = Be;
exports.Prefix = Ie;
exports.Space = ke;
exports.Suffix = Ve;