50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T7c3,'use client'; import { Layout, LayoutHeader, LayoutContent, LayoutFooter, HStack, VStack, } from '@astryxdesign/core/Layout'; import {Card} from '@astryxdesign/core/Card'; import {Button} from '@astryxdesign/core/Button'; import {Heading, Text} from '@astryxdesign/core/Text'; export default function LayoutBasicCardLayout() { return ( Card Title } content={ This is a basic card layout with a header, scrollable content area, and footer. The layout automatically handles padding and spacing between sections. When content exceeds the available height, the content area scrolls independently while the header and footer stay fixed in place. This pattern works well for modal dialogs, detail panels, and any card where the amount of content is unpredictable. The dividers between header, content, and footer provide clear visual boundaries between the fixed and scrollable regions. } footer={ } /> ); } 55:T13de,{ "schemaVersion": 2, "item": { "name": "example-layout-basic-card", "path": "examples/layout/basic-card", "aliases": [], "kind": "example" }, "source": { "package": "@astryxdesign/cli", "version": "0.7.3" }, "files": [ { "id": "primary", "target": "../LayoutBasicCardLayout.tsx", "registryTarget": "components/astryx/examples/LayoutBasicCardLayout.tsx", "registryPath": "registry/example-layout-basic-card/LayoutBasicCardLayout.tsx", "sha256": "8414cb178fc93c16d1d3c1de1b8ea5cc5c30e197b2f530e06ea79f57ab64731a", "content": "'use client';\n\nimport {\n Layout,\n LayoutHeader,\n LayoutContent,\n LayoutFooter,\n HStack,\n VStack,\n} from '@astryxdesign/core/Layout';\nimport {Card} from '@astryxdesign/core/Card';\nimport {Button} from '@astryxdesign/core/Button';\nimport {Heading, Text} from '@astryxdesign/core/Text';\n\nexport default function LayoutBasicCardLayout() {\n return (\n \n \n Card Title\n \n }\n content={\n \n \n \n This is a basic card layout with a header, scrollable content\n area, and footer. The layout automatically handles padding and\n spacing between sections.\n \n \n When content exceeds the available height, the content area\n scrolls independently while the header and footer stay fixed in\n place.\n \n \n This pattern works well for modal dialogs, detail panels, and\n any card where the amount of content is unpredictable.\n \n \n The dividers between header, content, and footer provide clear\n visual boundaries between the fixed and scrollable regions.\n \n \n \n }\n footer={\n \n \n \n \n \n \n }\n />\n \n );\n}\n", "variants": [ { "format": "javascript", "target": "../LayoutBasicCardLayout.jsx", "registryTarget": "components/astryx/examples/LayoutBasicCardLayout.jsx", "sha256": "8414cb178fc93c16d1d3c1de1b8ea5cc5c30e197b2f530e06ea79f57ab64731a", "content": "'use client';\n\nimport {\n Layout,\n LayoutHeader,\n LayoutContent,\n LayoutFooter,\n HStack,\n VStack,\n} from '@astryxdesign/core/Layout';\nimport {Card} from '@astryxdesign/core/Card';\nimport {Button} from '@astryxdesign/core/Button';\nimport {Heading, Text} from '@astryxdesign/core/Text';\n\nexport default function LayoutBasicCardLayout() {\n return (\n \n \n Card Title\n \n }\n content={\n \n \n \n This is a basic card layout with a header, scrollable content\n area, and footer. The layout automatically handles padding and\n spacing between sections.\n \n \n When content exceeds the available height, the content area\n scrolls independently while the header and footer stay fixed in\n place.\n \n \n This pattern works well for modal dialogs, detail panels, and\n any card where the amount of content is unpredictable.\n \n \n The dividers between header, content, and footer provide clear\n visual boundaries between the fixed and scrollable regions.\n \n \n \n }\n footer={\n \n \n \n \n \n \n }\n />\n \n );\n}\n" } ] } ] } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@astryxdesign/core@0.7.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40astryxdesign%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@astryxdesign/core@0.7.3"}]]}]}],["$","li","@stylexjs/stylex@0.19.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex@0.19.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@astryx","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@astryxdesign/core/reset.css\" {\n\n}\n\n@import \"@astryxdesign/core/astryx.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/example-layout-basic-card/LayoutBasicCardLayout.tsx","content":"$54","type":"registry:block","target":"components/astryx/examples/LayoutBasicCardLayout.tsx"},{"path":"registry/example-layout-basic-card/astryx-receipt.json","content":"$55","type":"registry:file","target":"components/astryx/examples/.astryx/example-layout-basic-card.json"}],"className":"h-[70svh] min-h-80"}]]}]