@vinyasa/layout 1.0.19

package/README.md

@@ -0,0 +1,164 @@
+# @vinyasa/layout
+
+13 structural layout primitives: Box, Flex, Stack, Inline, Grid, Container, Surface, Divider, ScrollArea, Portal, AspectRatio, Center, Spacer.
+
+## Installation
+
+```bash
+pnpm add @vinyasa/layout @vinyasa/tokens react react-dom
+```
+
+`@vinyasa/tokens` is a peer dependency: most of these primitives reference the shared design-token contract, and rendering them requires a `VinyasaProvider` (from `@vinyasa/tokens`) somewhere above them in the tree. See [`@vinyasa/tokens`'s README](../tokens/README.md).
+
+## Spacing
+
+Every component in this package except `Portal` (which renders no wrapper element of its own) and `Spacer` (which has no properties left to space) accepts the same set of margin/padding shorthand props, resolved against `@vinyasa/tokens`'s `space1`–`space6` scale — the same scale `Flex`/`Grid`'s `gap` already use:
+
+| Prop | CSS applied     | Prop | CSS applied      |
+| ---- | --------------- | ---- | ---------------- |
+| `m`  | `margin`        | `p`  | `padding`        |
+| `mx` | `margin-inline` | `px` | `padding-inline` |
+| `my` | `margin-block`  | `py` | `padding-block`  |
+| `mt` | `margin-top`    | `pt` | `padding-top`    |
+| `mr` | `margin-right`  | `pr` | `padding-right`  |
+| `mb` | `margin-bottom` | `pb` | `padding-bottom` |
+| `ml` | `margin-left`   | `pl` | `padding-left`   |
+
+Each accepts `1`–`6`, mapping directly to a token:
+
+| Scale | Token    | Value             |
+| ----- | -------- | ----------------- |
+| `1`   | `space1` | `0.25rem` (4px)   |
+| `2`   | `space2` | `0.5rem` (8px)    |
+| `3`   | `space3` | `0.625rem` (10px) |
+| `4`   | `space4` | `1rem` (16px)     |
+| `5`   | `space5` | `1.25rem` (20px)  |
+| `6`   | `space6` | `1.5rem` (24px)   |
+
+Values are scale-only — there's no raw-string escape hatch for margin/padding, so spacing always traces back to a token. General → axis → specific-side precedence applies, same as CSS shorthand: `mx`/`my` override `m`; `mt`/`mr`/`mb`/`ml` override both. A consumer-supplied `style` prop always wins over any spacing prop.
+
+```tsx
+<Surface p={4} m={2}>...</Surface>
+<Box px={4} py={2}>...</Box>
+```
+
+## Usage
+
+### Box
+
+A minimal polymorphic wrapper — an `as` prop, native props, and the spacing props above. Every other primitive below builds its own small set of curated, token-aware props on top of this same `as` pattern.
+
+```tsx
+<Box as="section" p={4} mb={6}>
+	content
+</Box>
+```
+
+### Flex, Stack, Inline, Center
+
+`Flex` is the one real recipe (`direction`, `align`, `justify`, `wrap`, `gap`); `Stack`, `Inline`, and `Center` are thin, fixed-prop wrappers over it — not duplicated CSS.
+
+```tsx
+<Flex direction="row" align="center" justify="between" gap={4} px={4} py={2}>...</Flex>
+<Stack gap={3} p={4}>...</Stack>    {/* Flex direction="column" */}
+<Inline gap={2} mx={4}>...</Inline> {/* Flex direction="row" */}
+<Center p={6}>...</Center>          {/* Flex align/justify="center" */}
+```
+
+### Grid
+
+`columns`/`rows` each take a number (`repeat(N, 1fr)`) or a raw `grid-template-*` string for advanced layouts; `flow` maps to `grid-auto-flow`; `align`/`justify` use the same value sets as `Flex`.
+
+```tsx
+<Grid columns={3} rows={2} gap={4} align="center" justify="between" flow="row-dense" p={4}>
+	...
+</Grid>
+<Grid columns="1fr 2fr" gap={4}>...</Grid>
+```
+
+### Container
+
+Centers content and snaps its max-width at each breakpoint (640/768/1024/1280px) as the viewport grows — the same mechanism Tailwind's own `.container` utility uses. `maxWidth` is an escape hatch for a narrower container regardless of viewport (e.g. a login form).
+
+```tsx
+<Container my={6}>...</Container>
+<Container maxWidth="20rem">...</Container>
+```
+
+### Surface
+
+```tsx
+<Surface p={4} radius="md" elevation="raised" m={2}>
+	...
+</Surface>
+```
+
+`radius` is the same `sm`/`md`/`full` scale `@vinyasa/button`'s `radius` prop uses; `elevation` is `raised`/`overlay`/`modal`.
+
+### Divider
+
+```tsx
+<Divider />                                  {/* <hr>, horizontal */}
+<Divider orientation="vertical" />           {/* role="separator" div */}
+<Divider orientation="vertical" decorative /> {/* aria-hidden, purely visual */}
+<Divider my={4} />                           {/* spacing props apply here too */}
+```
+
+### ScrollArea
+
+A fully custom, cross-browser-consistent scrollbar (thumb/track/drag), built by styling [`@radix-ui/react-scroll-area`](https://www.radix-ui.com/primitives/docs/components/scroll-area) with our own tokens rather than hand-rolling pointer-drag math and accessibility. `maxHeight`/`maxWidth` are applied as real `height`/`width` (not `max-height`/`max-width`) since Radix's internal viewport needs an explicit bound to resolve its own `100%` sizing against.
+
+```tsx
+<ScrollArea maxHeight="20rem">{longContent}</ScrollArea>
+<ScrollArea maxHeight="20rem" maxWidth="24rem">{content}</ScrollArea>
+```
+
+### Portal
+
+An SSR-safe wrapper around `createPortal` (mounts only on the client, no hydration mismatch). No spacing props — it renders no wrapper element of its own.
+
+```tsx
+<Portal>{children}</Portal>                    {/* defaults to document.body */}
+<Portal container={someElement}>{children}</Portal>
+```
+
+### AspectRatio
+
+```tsx
+<AspectRatio ratio={16 / 9} m={4}>
+	{video}
+</AspectRatio>
+```
+
+`ratio` is an arbitrary runtime number, not a themed/discrete design value — this is why it's a plain inline `aspect-ratio` style rather than a `recipe()` variant, unlike everything else in this package.
+
+### Spacer
+
+A flexible filler (`flex: 1 0 0%`) for pushing content apart inside `Flex`/`Stack`/`Inline`. No props beyond native ones — a spacer being "spaceable" itself doesn't add anything.
+
+```tsx
+<Inline>
+	<span>Left</span>
+	<Spacer />
+	<span>Right</span>
+</Inline>
+```
+
+## Subpath imports
+
+Every component can be imported directly instead of through the package root, e.g.:
+
+```tsx
+import Surface from '@vinyasa/layout/surface';
+```
+
+## Development
+
+From the repository root:
+
+```bash
+pnpm --filter @vinyasa/layout build
+pnpm --filter @vinyasa/layout test
+pnpm --filter @vinyasa/layout lint
+pnpm storybook   # Layout/*
+```

package/dist/cjs/aspect-ratio.cjs

@@ -0,0 +1,271 @@
+"use strict";
+var __webpack_modules__ = {
+    153 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            v: ()=>resolveSpacingStyle
+        });
+        const tokens_namespaceObject = require("@vinyasa/tokens");
+        const space = {
+            1: tokens_namespaceObject.themeContract.space1,
+            2: tokens_namespaceObject.themeContract.space2,
+            3: tokens_namespaceObject.themeContract.space3,
+            4: tokens_namespaceObject.themeContract.space4,
+            5: tokens_namespaceObject.themeContract.space5,
+            6: tokens_namespaceObject.themeContract.space6
+        };
+        const spacingPropertyMap = [
+            [
+                'm',
+                'margin'
+            ],
+            [
+                'mx',
+                'marginInline'
+            ],
+            [
+                'my',
+                'marginBlock'
+            ],
+            [
+                'mt',
+                'marginTop'
+            ],
+            [
+                'mr',
+                'marginRight'
+            ],
+            [
+                'mb',
+                'marginBottom'
+            ],
+            [
+                'ml',
+                'marginLeft'
+            ],
+            [
+                'p',
+                'padding'
+            ],
+            [
+                'px',
+                'paddingInline'
+            ],
+            [
+                'py',
+                'paddingBlock'
+            ],
+            [
+                'pt',
+                'paddingTop'
+            ],
+            [
+                'pr',
+                'paddingRight'
+            ],
+            [
+                'pb',
+                'paddingBottom'
+            ],
+            [
+                'pl',
+                'paddingLeft'
+            ]
+        ];
+        const resolveSpacingStyle = (props)=>{
+            const style = {};
+            for (const [propKey, cssProperty] of spacingPropertyMap){
+                const value = props[propKey];
+                if (void 0 !== value) style[cssProperty] = space[value];
+            }
+            return style;
+        };
+    },
+    15 (module) {
+        module.exports = require("react");
+    },
+    732 (module) {
+        module.exports = require("react/jsx-runtime");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        default: ()=>aspect_ratio
+    });
+    var jsx_runtime_ = __webpack_require__(732);
+    var external_react_ = __webpack_require__(15);
+    var spacing = __webpack_require__(153);
+    function _define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    function _object_spread(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = null != arguments[i] ? arguments[i] : {};
+            var ownKeys = Object.keys(source);
+            if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+            ownKeys.forEach(function(key) {
+                _define_property(target, key, source[key]);
+            });
+        }
+        return target;
+    }
+    function AspectRatio_ownKeys(object, enumerableOnly) {
+        var keys = Object.keys(object);
+        if (Object.getOwnPropertySymbols) {
+            var symbols = Object.getOwnPropertySymbols(object);
+            if (enumerableOnly) symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+            keys.push.apply(keys, symbols);
+        }
+        return keys;
+    }
+    function _object_spread_props(target, source) {
+        source = null != source ? source : {};
+        if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+        else AspectRatio_ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+        return target;
+    }
+    function _object_without_properties(source, excluded) {
+        if (null == source) return {};
+        var target = {}, sourceKeys, key, i;
+        if ("u" > typeof Reflect && Reflect.ownKeys) {
+            sourceKeys = Reflect.ownKeys(Object(source));
+            for(i = 0; i < sourceKeys.length; i++){
+                key = sourceKeys[i];
+                if (!(excluded.indexOf(key) >= 0)) {
+                    if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                }
+            }
+            return target;
+        }
+        target = _object_without_properties_loose(source, excluded);
+        if (Object.getOwnPropertySymbols) {
+            sourceKeys = Object.getOwnPropertySymbols(source);
+            for(i = 0; i < sourceKeys.length; i++){
+                key = sourceKeys[i];
+                if (!(excluded.indexOf(key) >= 0)) {
+                    if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    }
+    function _object_without_properties_loose(source, excluded) {
+        if (null == source) return {};
+        var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    const AspectRatio = /*#__PURE__*/ (0, external_react_.forwardRef)((_0, _1)=>{
+        let _ref = [
+            _0,
+            _1
+        ], [_ref1, ..._rest] = _ref, { as: Component = 'div', ratio = 1, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, style, children } = _ref1, rest = _object_without_properties(_ref1, [
+            "as",
+            "ratio",
+            "m",
+            "mt",
+            "mr",
+            "mb",
+            "ml",
+            "mx",
+            "my",
+            "p",
+            "pt",
+            "pr",
+            "pb",
+            "pl",
+            "px",
+            "py",
+            "style",
+            "children"
+        ]), [ref] = _rest;
+        const computedStyle = _object_spread(_object_spread_props(_object_spread({}, (0, spacing.v)({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        })), {
+            aspectRatio: String(ratio)
+        }), style);
+        return /*#__PURE__*/ (0, jsx_runtime_.jsx)(Component, _object_spread_props(_object_spread({
+            ref: ref,
+            style: computedStyle
+        }, rest), {
+            children: children
+        }));
+    });
+    AspectRatio.displayName = 'AspectRatio';
+    const aspect_ratio_AspectRatio = AspectRatio;
+    const aspect_ratio = aspect_ratio_AspectRatio;
+})();
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/box.cjs

@@ -0,0 +1,268 @@
+"use strict";
+var __webpack_modules__ = {
+    153 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            v: ()=>resolveSpacingStyle
+        });
+        const tokens_namespaceObject = require("@vinyasa/tokens");
+        const space = {
+            1: tokens_namespaceObject.themeContract.space1,
+            2: tokens_namespaceObject.themeContract.space2,
+            3: tokens_namespaceObject.themeContract.space3,
+            4: tokens_namespaceObject.themeContract.space4,
+            5: tokens_namespaceObject.themeContract.space5,
+            6: tokens_namespaceObject.themeContract.space6
+        };
+        const spacingPropertyMap = [
+            [
+                'm',
+                'margin'
+            ],
+            [
+                'mx',
+                'marginInline'
+            ],
+            [
+                'my',
+                'marginBlock'
+            ],
+            [
+                'mt',
+                'marginTop'
+            ],
+            [
+                'mr',
+                'marginRight'
+            ],
+            [
+                'mb',
+                'marginBottom'
+            ],
+            [
+                'ml',
+                'marginLeft'
+            ],
+            [
+                'p',
+                'padding'
+            ],
+            [
+                'px',
+                'paddingInline'
+            ],
+            [
+                'py',
+                'paddingBlock'
+            ],
+            [
+                'pt',
+                'paddingTop'
+            ],
+            [
+                'pr',
+                'paddingRight'
+            ],
+            [
+                'pb',
+                'paddingBottom'
+            ],
+            [
+                'pl',
+                'paddingLeft'
+            ]
+        ];
+        const resolveSpacingStyle = (props)=>{
+            const style = {};
+            for (const [propKey, cssProperty] of spacingPropertyMap){
+                const value = props[propKey];
+                if (void 0 !== value) style[cssProperty] = space[value];
+            }
+            return style;
+        };
+    },
+    15 (module) {
+        module.exports = require("react");
+    },
+    732 (module) {
+        module.exports = require("react/jsx-runtime");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        default: ()=>box
+    });
+    var jsx_runtime_ = __webpack_require__(732);
+    var external_react_ = __webpack_require__(15);
+    var spacing = __webpack_require__(153);
+    function _define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    function _object_spread(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = null != arguments[i] ? arguments[i] : {};
+            var ownKeys = Object.keys(source);
+            if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+            ownKeys.forEach(function(key) {
+                _define_property(target, key, source[key]);
+            });
+        }
+        return target;
+    }
+    function Box_ownKeys(object, enumerableOnly) {
+        var keys = Object.keys(object);
+        if (Object.getOwnPropertySymbols) {
+            var symbols = Object.getOwnPropertySymbols(object);
+            if (enumerableOnly) symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+            keys.push.apply(keys, symbols);
+        }
+        return keys;
+    }
+    function _object_spread_props(target, source) {
+        source = null != source ? source : {};
+        if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+        else Box_ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+        return target;
+    }
+    function _object_without_properties(source, excluded) {
+        if (null == source) return {};
+        var target = {}, sourceKeys, key, i;
+        if ("u" > typeof Reflect && Reflect.ownKeys) {
+            sourceKeys = Reflect.ownKeys(Object(source));
+            for(i = 0; i < sourceKeys.length; i++){
+                key = sourceKeys[i];
+                if (!(excluded.indexOf(key) >= 0)) {
+                    if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                }
+            }
+            return target;
+        }
+        target = _object_without_properties_loose(source, excluded);
+        if (Object.getOwnPropertySymbols) {
+            sourceKeys = Object.getOwnPropertySymbols(source);
+            for(i = 0; i < sourceKeys.length; i++){
+                key = sourceKeys[i];
+                if (!(excluded.indexOf(key) >= 0)) {
+                    if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    }
+    function _object_without_properties_loose(source, excluded) {
+        if (null == source) return {};
+        var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    const Box = /*#__PURE__*/ (0, external_react_.forwardRef)((_0, _1)=>{
+        let _ref = [
+            _0,
+            _1
+        ], [_ref1, ..._rest] = _ref, { as: Component = 'div', m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, style, children } = _ref1, rest = _object_without_properties(_ref1, [
+            "as",
+            "m",
+            "mt",
+            "mr",
+            "mb",
+            "ml",
+            "mx",
+            "my",
+            "p",
+            "pt",
+            "pr",
+            "pb",
+            "pl",
+            "px",
+            "py",
+            "style",
+            "children"
+        ]), [ref] = _rest;
+        const computedStyle = _object_spread({}, (0, spacing.v)({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        }), style);
+        return /*#__PURE__*/ (0, jsx_runtime_.jsx)(Component, _object_spread_props(_object_spread({
+            ref: ref,
+            style: computedStyle
+        }, rest), {
+            children: children
+        }));
+    });
+    Box.displayName = 'Box';
+    const box_Box = Box;
+    const box = box_Box;
+})();
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});