@ryuzaki13/react-foundation-ui 0.1.0

package/dist/grid/stories/Grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.js","names":[],"sources":["../../../src/grid/stories/Grid.stories.tsx"],"sourcesContent":["// Grid.stories.tsx\nimport React from \"react\";\n\nimport { Grid } from \"../Grid\";\n\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\n// Стили для демонстрационных блоков (аналогично Flex)\nconst demoStyles = {\n\tcontainer: {\n\t\tborder: \"2px dashed var(--border-0)\",\n\t\tpadding: \"2em\",\n\t\tmarginBlock: \"1em\"\n\t},\n\titem: {\n\t\ttextAlign: \"center\" as const,\n\t\tfontWeight: \"bold\",\n\t\tcolor: \"white\",\n\t\tminHeight: \"5em\",\n\t\tminWidth: \"10em\",\n\t\tdisplay: \"flex\",\n\t\talignItems: \"center\",\n\t\tjustifyContent: \"center\"\n\t},\n\titemColors: [\"#ff6b6b\", \"#4ecdc4\", \"#45b7d1\", \"#96ceb4\", \"#feca57\", \"#ff9ff3\", \"#54a0ff\", \"#5f27cd\"]\n};\n\nconst getItemColor = (index: number) => demoStyles.itemColors[index % demoStyles.itemColors.length];\n\nconst DemoItem = ({ children, index = 0, style }: { children: React.ReactNode; index?: number; style?: React.CSSProperties }) => (\n\t<Grid.Item\n\t\tstyle={{\n\t\t\t...demoStyles.item,\n\t\t\tbackgroundColor: getItemColor(index),\n\t\t\t...style\n\t\t}}>\n\t\t{children}\n\t</Grid.Item>\n);\n\nconst meta = {\n\ttitle: \"Shared/Layout/Grid\",\n\tcomponent: Grid.Container,\n\tparameters: {\n\t\tlayout: \"padded\"\n\t},\n\ttags: [\"autodocs\"]\n} satisfies Meta<typeof Grid.Container>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// Базовые примеры\nexport const BasicGrid: Story = {\n\trender: ({ children, ...args }) => (\n\t\t<Grid.Container {...args} templateColumns=\"1fr 1fr 1fr\" style={demoStyles.container}>\n\t\t\t{children}\n\t\t</Grid.Container>\n\t),\n\targs: {\n\t\tchildren: (\n\t\t\t<>\n\t\t\t\t<DemoItem index={0}>1</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2}>3</DemoItem>\n\t\t\t\t<DemoItem index={3}>4</DemoItem>\n\t\t\t\t<DemoItem index={4}>5</DemoItem>\n\t\t\t\t<DemoItem index={5}>6</DemoItem>\n\t\t\t</>\n\t\t)\n\t}\n};\n\n// Auto Flow\nexport const AutoFlow: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Row (default)</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(3, 100px)\" templateRows=\"repeat(2, 60px)\" gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>1</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2}>3</DemoItem>\n\t\t\t\t<DemoItem index={3}>4</DemoItem>\n\t\t\t\t<DemoItem index={4}>5</DemoItem>\n\t\t\t\t<DemoItem index={5}>6</DemoItem>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Column</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(2, 100px)\" templateRows=\"repeat(3, 60px)\" column gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>1</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2}>3</DemoItem>\n\t\t\t\t<DemoItem index={3}>4</DemoItem>\n\t\t\t\t<DemoItem index={4}>5</DemoItem>\n\t\t\t\t<DemoItem index={5}>6</DemoItem>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Dense</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(4, 80px)\" templateRows=\"repeat(3, 60px)\" dense gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0} style={{ gridColumn: \"span 2\" }}>\n\t\t\t\t\tSpan 2\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={1}>2</DemoItem>\n\t\t\t\t<DemoItem index={2} style={{ gridRow: \"span 2\" }}>\n\t\t\t\t\tSpan 2\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={3}>4</DemoItem>\n\t\t\t\t<DemoItem index={4}>5</DemoItem>\n\t\t\t\t<DemoItem index={5}>6</DemoItem>\n\t\t\t\t<DemoItem index={6}>7</DemoItem>\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Выравнивание\nexport const Alignment: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3 style={{ marginBlock: \"1em\" }}>Align Items</h3>\n\t\t\t{([\"start\", \"center\", \"end\", \"stretch\"] as const).map((align) => (\n\t\t\t\t<div key={align}>\n\t\t\t\t\t<h4>{align}</h4>\n\t\t\t\t\t<Grid.Container templateColumns=\"repeat(3, 1fr)\" align={align} gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t\t\t<DemoItem index={0} style={{ height: align === \"stretch\" ? \"auto\" : \"5em\" }}>\n\t\t\t\t\t\t\tShort\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t<DemoItem index={1} style={{ height: align === \"stretch\" ? \"auto\" : \"10em\" }}>\n\t\t\t\t\t\t\tTall\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t<DemoItem index={2} style={{ height: align === \"stretch\" ? \"auto\" : \"8em\" }}>\n\t\t\t\t\t\t\tMedium\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</div>\n\t\t\t))}\n\n\t\t\t<h3 style={{ marginBlock: \"1em\" }}>Justify Items</h3>\n\t\t\t{([\"start\", \"center\", \"end\", \"stretch\"] as const).map((justify) => (\n\t\t\t\t<div key={justify}>\n\t\t\t\t\t<h4>{justify}</h4>\n\t\t\t\t\t<Grid.Container templateColumns=\"repeat(3, 20em)\" justify={justify} gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t\t\t<DemoItem index={0} style={{ width: justify === \"stretch\" ? \"auto\" : \"10em\" }}>\n\t\t\t\t\t\t\tItem\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t<DemoItem index={1} style={{ width: justify === \"stretch\" ? \"auto\" : \"10em\" }}>\n\t\t\t\t\t\t\tItem\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t<DemoItem index={2} style={{ width: justify === \"stretch\" ? \"auto\" : \"10em\" }}>\n\t\t\t\t\t\t\tItem\n\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Gap свойства\nexport const Gaps: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t{([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const).map((gap) => (\n\t\t\t\t<div key={gap}>\n\t\t\t\t\t<h3>Gap: {gap}</h3>\n\t\t\t\t\t<Grid.Container templateColumns=\"repeat(3, 1fr)\" gap={gap} style={demoStyles.container}>\n\t\t\t\t\t\t{[1, 2, 3, 4, 5, 6].map((i) => (\n\t\t\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\t\t\tItem {i}\n\t\t\t\t\t\t\t</DemoItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</div>\n\t\t\t))}\n\n\t\t\t<h3>Different Row and Column Gaps</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(3, 1fr)\" gapRow=\"lg\" gapColumn=\"sm\" style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tItem {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Предопределенные варианты\nexport const PredefinedVariants: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Single Column (grid-template-columns: 100%; grid-auto-rows: auto 1fr)</h3>\n\t\t\t<Grid.Container variant=\"single-column\" style={{ ...demoStyles.container, height: \"200px\" }}>\n\t\t\t\t<DemoItem index={0}>Header (auto)</DemoItem>\n\t\t\t\t<DemoItem index={1}>Content (1fr)</DemoItem>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Auto 1fr Rows (grid-auto-rows: 1fr)</h3>\n\t\t\t<Grid.Container variant=\"auto-1fr\" templateColumns=\"1fr 1fr\" style={{ ...demoStyles.container, height: \"150px\" }}>\n\t\t\t\t<DemoItem index={0}>Equal</DemoItem>\n\t\t\t\t<DemoItem index={1}>Height</DemoItem>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Auto 1fr Columns (grid-template-columns: auto 1fr; grid-auto-rows: auto)</h3>\n\t\t\t<Grid.Container variant=\"auto1fr-rows-auto\" gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>Label</DemoItem>\n\t\t\t\t<DemoItem index={1}>Content that takes remaining space</DemoItem>\n\t\t\t\t<DemoItem index={2}>Another</DemoItem>\n\t\t\t\t<DemoItem index={3}>More content here</DemoItem>\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Сложные шаблоны с inline styles\nexport const ComplexTemplates: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Auto-fit with Minmax</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(auto-fit, minmax(150px, 1fr))\" gap=\"md\" style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tCard {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Fixed and Flexible Columns</h3>\n\t\t\t<Grid.Container templateColumns=\"200px 1fr 100px\" gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0}>Sidebar</DemoItem>\n\t\t\t\t<DemoItem index={1}>Main Content</DemoItem>\n\t\t\t\t<DemoItem index={2}>Tools</DemoItem>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Masonry-like Layout</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(4, 1fr)\" autoRows=\"100px\" gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0} style={{ gridRow: \"span 2\" }}>\n\t\t\t\t\tTall\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={1}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={2}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={3} style={{ gridRow: \"span 3\" }}>\n\t\t\t\t\tVery Tall\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={4}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={5} style={{ gridRow: \"span 2\" }}>\n\t\t\t\t\tTall\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={6}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={7}>Normal</DemoItem>\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Grid Areas\nexport const GridAreas: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Basic Layout with Areas</h3>\n\t\t\t<Grid.Container\n\t\t\t\tareas={`\n          \"header header\"\n          \"nav main\"\n          \"footer footer\"\n        `}\n\t\t\t\ttemplateColumns=\"200px 1fr\"\n\t\t\t\ttemplateRows=\"auto 1fr auto\"\n\t\t\t\tgap=\"md\"\n\t\t\t\tstyle={{ ...demoStyles.container, height: \"300px\" }}>\n\t\t\t\t<Grid.Item area=\"header\">\n\t\t\t\t\t<DemoItem index={0}>Header</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"nav\">\n\t\t\t\t\t<DemoItem index={1}>Navigation</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"main\">\n\t\t\t\t\t<DemoItem index={2}>Main Content</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"footer\">\n\t\t\t\t\t<DemoItem index={3}>Footer</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Complex Areas Layout</h3>\n\t\t\t<Grid.Container\n\t\t\t\tareas={`\n          \"header header header\"\n          \"sidebar content ads\"\n          \"sidebar footer footer\"\n        `}\n\t\t\t\ttemplateColumns=\"150px 1fr 120px\"\n\t\t\t\ttemplateRows=\"60px 1fr 60px\"\n\t\t\t\tgap=\"sm\"\n\t\t\t\tstyle={{ ...demoStyles.container, height: \"350px\" }}>\n\t\t\t\t<Grid.Item area=\"header\">\n\t\t\t\t\t<DemoItem index={0}>Header</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"sidebar\">\n\t\t\t\t\t<DemoItem index={1}>Sidebar</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"content\">\n\t\t\t\t\t<DemoItem index={2}>Content</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"ads\">\n\t\t\t\t\t<DemoItem index={3}>Ads</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"footer\">\n\t\t\t\t\t<DemoItem index={4}>Footer</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Grid Item Placement\nexport const ItemPlacement: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Column and Row Span</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(4, 1fr)\" templateRows=\"repeat(3, 80px)\" gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0} style={{ gridColumn: \"span 2\" }}>\n\t\t\t\t\tSpan 2 Columns\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={1}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={2}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={3} style={{ gridRow: \"span 2\" }}>\n\t\t\t\t\tSpan 2 Rows\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={4}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={5}>Normal</DemoItem>\n\t\t\t\t<DemoItem index={6} style={{ gridColumn: \"span 3\", gridRow: \"span 2\" }}>\n\t\t\t\t\tSpan 3 Columns & 2 Rows\n\t\t\t\t</DemoItem>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Self Alignment</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(3, 1fr)\" templateRows=\"repeat(2, 100px)\" gap=\"sm\" style={demoStyles.container}>\n\t\t\t\t<Grid.Item alignSelf=\"start\">\n\t\t\t\t\t<DemoItem index={0}>Start</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item alignSelf=\"center\">\n\t\t\t\t\t<DemoItem index={1}>Center</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item alignSelf=\"end\">\n\t\t\t\t\t<DemoItem index={2}>End</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item justifySelf=\"start\">\n\t\t\t\t\t<DemoItem index={3} style={{ width: \"80px\" }}>\n\t\t\t\t\t\tStart\n\t\t\t\t\t</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item justifySelf=\"center\">\n\t\t\t\t\t<DemoItem index={4} style={{ width: \"80px\" }}>\n\t\t\t\t\t\tCenter\n\t\t\t\t\t</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item justifySelf=\"end\">\n\t\t\t\t\t<DemoItem index={5} style={{ width: \"80px\" }}>\n\t\t\t\t\t\tEnd\n\t\t\t\t\t</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Inline Grid\nexport const InlineGrid: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<p>\n\t\t\t\tThis is text with\n\t\t\t\t<Grid.Container inline templateColumns=\"repeat(2, auto)\" gap=\"xs\" style={{ margin: \"0 8px\" }}>\n\t\t\t\t\t<DemoItem index={0}>inline</DemoItem>\n\t\t\t\t\t<DemoItem index={1}>grid</DemoItem>\n\t\t\t\t</Grid.Container>\n\t\t\t\telements inside.\n\t\t\t</p>\n\n\t\t\t<p>\n\t\t\t\tAnother inline grid example:\n\t\t\t\t<Grid.Container inline templateColumns=\"auto auto\" gap=\"sm\" align=\"center\" style={{ margin: \"0 8px\" }}>\n\t\t\t\t\t<DemoItem index={2} style={{ fontSize: \"12px\", padding: \"4px 8px\" }}>\n\t\t\t\t\t\tSmall\n\t\t\t\t\t</DemoItem>\n\t\t\t\t\t<DemoItem index={3} style={{ fontSize: \"12px\", padding: \"4px 8px\" }}>\n\t\t\t\t\t\tItems\n\t\t\t\t\t</DemoItem>\n\t\t\t\t</Grid.Container>\n\t\t\t\tin text flow.\n\t\t\t</p>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Real World Examples\nexport const RealWorld: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t<h3>Dashboard Layout</h3>\n\t\t\t<Grid.Container\n\t\t\t\tareas={`\n          \"header header header\"\n          \"stats stats sidebar\"\n          \"chart chart sidebar\"\n          \"table table sidebar\"\n        `}\n\t\t\t\ttemplateColumns=\"1fr 1fr 300px\"\n\t\t\t\ttemplateRows=\"auto auto 1fr auto\"\n\t\t\t\tgap=\"lg\"\n\t\t\t\tstyle={{ ...demoStyles.container, minHeight: \"500px\" }}>\n\t\t\t\t<Grid.Item area=\"header\">\n\t\t\t\t\t<DemoItem index={0}>Dashboard Header</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"stats\">\n\t\t\t\t\t<DemoItem index={1}>Statistics Cards</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"chart\">\n\t\t\t\t\t<DemoItem index={2}>Main Chart</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"table\">\n\t\t\t\t\t<DemoItem index={3}>Data Table</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t\t<Grid.Item area=\"sidebar\">\n\t\t\t\t\t<DemoItem index={4}>Sidebar Widgets</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Product Grid</h3>\n\t\t\t<Grid.Container\n\t\t\t\ttemplateColumns=\"repeat(auto-fill, minmax(200px, 1fr))\"\n\t\t\t\tautoRows=\"minmax(250px, auto)\"\n\t\t\t\tgap=\"md\"\n\t\t\t\tstyle={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\n\t\t\t\t\t<Grid.Item key={i}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tborder: \"1px solid #ddd\",\n\t\t\t\t\t\t\t\tborderRadius: \"8px\",\n\t\t\t\t\t\t\t\tpadding: \"16px\",\n\t\t\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\t\t\tbackgroundColor: getItemColor(i),\n\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\tcolor: \"white\"\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<h4>Product {i}</h4>\n\t\t\t\t\t\t\t<p>Description</p>\n\t\t\t\t\t\t\t<button style={{ marginTop: \"8px\", padding: \"8px 16px\" }}>Buy Now</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Grid.Item>\n\t\t\t\t))}\n\t\t\t</Grid.Container>\n\n\t\t\t<h3>Form Layout</h3>\n\t\t\t<Grid.Container templateColumns=\"auto 1fr\" autoRows=\"auto\" gap=\"md\" align=\"center\" style={demoStyles.container}>\n\t\t\t\t<DemoItem index={0} style={{ justifySelf: \"end\" }}>\n\t\t\t\t\tName:\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={1}>Input Field</DemoItem>\n\n\t\t\t\t<DemoItem index={2} style={{ justifySelf: \"end\" }}>\n\t\t\t\t\tEmail:\n\t\t\t\t</DemoItem>\n\t\t\t\t<DemoItem index={3}>Input Field</DemoItem>\n\n\t\t\t\t<DemoItem index={4} style={{ justifySelf: \"end\" }}>\n\t\t\t\t\tMessage:\n\t\t\t\t</DemoItem>\n\t\t\t\t<Grid.Item style={{ gridColumn: \"2\", alignSelf: \"stretch\" }}>\n\t\t\t\t\t<DemoItem index={5} style={{ height: \"100%\" }}>\n\t\t\t\t\t\tTextarea\n\t\t\t\t\t</DemoItem>\n\t\t\t\t</Grid.Item>\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n\n// Responsive Examples\nexport const Responsive: Story = {\n\trender: () => (\n\t\t<div>\n\t\t\t{/* <h3>Responsive Columns</h3>\n\t\t\t<Grid.Container\n\t\t\t\ttemplateColumns={{\n\t\t\t\t\tmobile: \"1fr\",\n\t\t\t\t\ttablet: \"repeat(2, 1fr)\",\n\t\t\t\t\tdesktop: \"repeat(4, 1fr)\"\n\t\t\t\t}}\n\t\t\t\tgap=\"md\"\n\t\t\t\tstyle={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tItem {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Grid.Container> */}\n\n\t\t\t<h3>Adaptive Layout</h3>\n\t\t\t<Grid.Container templateColumns=\"repeat(auto-fit, minmax(min(100%, 300px), 1fr))\" gap=\"lg\" style={demoStyles.container}>\n\t\t\t\t{[1, 2, 3, 4, 5, 6].map((i) => (\n\t\t\t\t\t<DemoItem key={i} index={i}>\n\t\t\t\t\t\tAdaptive Card {i}\n\t\t\t\t\t</DemoItem>\n\t\t\t\t))}\n\t\t\t</Grid.Container>\n\t\t</div>\n\t),\n\targs: { children: undefined }\n};\n"],"mappings":"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"}

package/dist/grid/types.d.ts

@@ -0,0 +1,299 @@
+import type { CSSProperties, JSX } from "react";
+import { ResponsiveValue } from "@ryuzaki13/react-foundation-lib/media";
+export type GridTemplate = string | number;
+export type GridAuto = "auto" | "min-content" | "max-content" | "1fr" | string;
+export interface GridContainerProps {
+    id?: string;
+    /**
+     * Включение inline-grid вместо обычного grid
+     *
+     * Позволяет grid-контейнеру вести себя как строчный элемент,
+     * обтекаясь текстом и другими элементами. Полезно для встраивания grid-раскладки
+     * в текстовый поток или рядом с другими inline-элементами.
+     *
+     * Пример использования: кнопки с иконками и текстом, inline-формы, элементы навигации.
+     *
+     * @default false
+     */
+    inline?: ResponsiveValue<boolean>;
+    /**
+     * Направление автоматического размещения элементов (grid-auto-flow)
+     *
+     * Группа взаимосключающих свойств для управления автоматическим потоком элементов.
+     *
+     * Если ни одно не указано, используется стандартное поведение grid.
+     */
+    /**
+     * Автоматическое размещение элементов по строкам (grid-auto-flow: row)
+     *
+     * Элементы заполняют каждую строку по порядку, переходя на новую строку при необходимости.
+     * Стандартное поведение CSS Grid.
+     *
+     * @default false
+     */
+    row?: ResponsiveValue<boolean>;
+    /**
+     * Автоматическое размещение элементов по колонкам (grid-auto-flow: column)
+     *
+     * Элементы заполняют каждую колонку по порядку, переходя на новую колонку при необходимости.
+     * Полезно для вертикальных списков или когда важно сохранять порядок по вертикали.
+     *
+     * @default false
+     */
+    column?: ResponsiveValue<boolean>;
+    /**
+     * Плотное размещение элементов (grid-auto-flow: dense)
+     *
+     * Система пытается заполнить все пустые ячейки, даже если это нарушает порядок элементов.
+     * Особенно полезно при использовании grid-column/grid-row span, чтобы избежать "дыр" в раскладке.
+     *
+     * @default false
+     */
+    dense?: ResponsiveValue<boolean>;
+    /**
+     * Отступы между grid-элементами
+     *
+     * Управляет расстоянием между строками и колонками одновременно.
+     * Использует предопределенные значения из дизайн-системы для согласованности интерфейсов.
+     */
+    gap?: ResponsiveValue<"none" | "xs" | "sm" | "md" | "lg" | "xl">;
+    /**
+     * Отступы только между строками
+     *
+     * Позволяет установить разные расстояния для строк и колонок.
+     * Полезно когда вертикальные и горизонтальные отступы должны отличаться.
+     *
+     * Пример: карточки товаров где между рядами нужно больше места чем между колонками.
+     */
+    gapRow?: ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">;
+    /**
+     * Отступы только между колонками
+     *
+     * Устанавливает расстояние только между колонками grid-сетки.
+     * Используется вместе с gapRow для тонкого контроля над отступами.
+     */
+    gapColumn?: ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">;
+    /**
+     * Выравнивание элементов по вертикальной оси (align-items)
+     *
+     * Определяет как элементы выравниваются внутри своих ячеек по вертикали.
+     * Применяется ко всем элементам grid-контейнера.
+     */
+    align?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">;
+    /**
+     * Выравнивание элементов по горизонтальной оси (justify-items)
+     *
+     * Определяет как элементы выравниваются внутри своих ячеек по горизонтали.
+     * Влияет на позиционирование контента внутри каждой grid-ячейки.
+     */
+    justify?: ResponsiveValue<"start" | "center" | "end" | "stretch">;
+    /**
+     * Выравнивание всего grid-контента по вертикали (align-content)
+     *
+     * Работает когда общая высота grid-элементов меньше высоты контейнера.
+     * Определяет распределение свободного вертикального пространства.
+     */
+    alignContent?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">;
+    /**
+     * Выравнивание всего grid-контента по горизонтали (justify-content)
+     *
+     * Работает когда общая ширина grid-элементов меньше ширины контейнера.
+     * Определяет распределение свободного горизонтального пространства.
+     */
+    justifyContent?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">;
+    /**
+     * Определение колонок сетки (grid-template-columns)
+     *
+     * Строка с CSS значениями для создания структуры колонок.
+     * Поддерживает все CSS-значения: фиксированные размеры, fr-единицы, repeat(), minmax(), auto-fit, auto-fill.
+     *
+     * Примеры:
+     * - "1fr 1fr 1fr" - 3 равные колонки
+     * - "15em 1fr" - фиксированный сайдбар + гибкое содержимое
+     * - "repeat(auto-fit, minmax(20em, 1fr))" - адаптивные карточки
+     * - "auto 1fr auto" - хедер-контент-футер
+     */
+    templateColumns?: ResponsiveValue<GridTemplate>;
+    /**
+     * Определение строк сетки (grid-template-rows)
+     *
+     * Строка с CSS значениями для создания структуры строк.
+     * Используется когда нужно явно контролировать высоту строк.
+     *
+     * Примеры:
+     * - "auto 1fr auto" - классический макет (хедер-контент-футер)
+     * - "10em 20em" - фиксированные высоты строк
+     * - "minmax(10em, auto)" - минимальная высота с возможностью роста
+     */
+    templateRows?: ResponsiveValue<GridTemplate>;
+    /**
+     * Размер автоматически создаваемых колонок (grid-auto-columns)
+     *
+     * Определяет размер колонок которые создаются автоматически
+     * когда элементов больше чем явно объявленных колонок в templateColumns.
+     *
+     * Пример: если templateColumns="1fr 1fr", но элементов 5,
+     * autoColumns определит размер для 3-й и последующих колонок.
+     */
+    autoColumns?: ResponsiveValue<GridAuto>;
+    /**
+     * Размер автоматически создаваемых строк (grid-auto-rows)
+     *
+     * Определяет размер строк которые создаются автоматически
+     * когда элементов больше чем явно объявленных строк в templateRows.
+     * Часто используется с значениями minmax() для адаптивных высот.
+     *
+     * Пример: "minmax(10em, auto)" - минимальная высота 100px, растет по контенту.
+     */
+    autoRows?: ResponsiveValue<GridAuto>;
+    /**
+     * Именованные области сетки (grid-template-areas)
+     *
+     * Создает именованные области для семантической разметки.
+     * Позволяет легко создавать сложные макеты с понятной структурой.
+     *
+     * Формат: строки в кавычках, имена областей через пробелы.
+     * Пример:
+     * `
+     * "header header"
+     * "sidebar content"
+     * "footer footer"
+     * `
+     * Затем используйте <GridItem area="header"> для размещения.
+     */
+    areas?: ResponsiveValue<string>;
+    /**
+     * Предопределенные варианты раскладки
+     *
+     * Готовые решения для частых сценариев использования.
+     * Упрощают создание стандартных макетов без ручного указания templateColumns/templateRows.
+     */
+    variant?: ResponsiveValue<"single-column" | "auto-1fr" | "auto1fr-rows-auto">;
+    /**
+     * Дочерние элементы grid-контейнера
+     *
+     * Любые React-элементы которые будут отображаться внутри grid-раскладки.
+     * Рекомендуется использовать Grid.Item для лучшего контроля над позиционированием.
+     */
+    children: React.ReactNode;
+    /**
+     * HTML-тег для рендеринга
+     *
+     * Позволяет изменить HTML-тег контейнера для семантической разметки.
+     *
+     * Примеры:
+     * - as="main" для основного контента
+     * - as="nav" для навигации
+     * - as="section" для секций контента
+     * - as="ul" для списков с grid-раскладкой
+     *
+     * @default "div"
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Дополнительные CSS-классы
+     *
+     * Позволяет добавить кастомные стили к grid-контейнеру.
+     * Используется для специфических случаев которые не покрываются пропсами компонента.
+     */
+    className?: string;
+    /**
+     * Инлайн-стили
+     *
+     * JavaScript-объект с CSS-свойствами для тонкого контроля над стилями.
+     * Используется когда нужно динамически вычислять стили или для свойств не покрытых пропсами.
+     *
+     * Важно: инлайн-стили имеют высший приоритет, переопределяя CSS-классы.
+     */
+    style?: CSSProperties;
+}
+export interface GridItemProps {
+    /**
+     * Именованная область для размещения элемента
+     *
+     * Связывает элемент с областью объявленной в GridContainer areas.
+     * Самый простой способ позиционирования в сложных макетах.
+     *
+     * Пример: если в контейнере areas включает "header", то area="header"
+     * разместит элемент в этой области.
+     */
+    area?: ResponsiveValue<string>;
+    /**
+     * Позиционирование элемента в колонках
+     *
+     * CSS-значение для grid-column: начало / конец.
+     * Позволяет тонко контролировать размещение элемента в колонках.
+     *
+     * Примеры:
+     * - "1" - разместить в первой колонке
+     * - "1 / 3" - растянуть с первой по третью колонку
+     * - "span 2" - занять 2 колонки
+     * - "2 / span 3" - начать со второй, занять 3 колонки
+     */
+    column?: ResponsiveValue<string>;
+    /**
+     * Позиционирование элемента в строках
+     *
+     * CSS-значение для grid-row: начало / конец.
+     * Позволяет тонко контролировать размещение элемента в строках.
+     *
+     * Примеры:
+     * - "2" - разместить во второй строке
+     * - "1 / 4" - растянуть с первой по четвертую строку
+     * - "span 3" - занять 3 строки
+     */
+    row?: ResponsiveValue<string>;
+    /**
+     * Индивидуальное вертикальное выравнивание элемента (align-self)
+     *
+     * Переопределяет выравнивание установленное в GridContainer align.
+     * Позволяет конкретному элементу иметь отличное от остальных выравнивание.
+     *
+     * Пример: в контейнере align="center", но для одного элемента alignSelf="start".
+     */
+    alignSelf?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">;
+    /**
+     * Индивидуальное горизонтальное выравнивание элемента (justify-self)
+     *
+     * Переопределяет выравнивание установленное в GridContainer justify.
+     * Позволяет конкретному элементу иметь отличное от остальных выравнивание.
+     *
+     * Пример: в контейнере justify="stretch", но для кнопки justifySelf="center".
+     */
+    justifySelf?: ResponsiveValue<"start" | "center" | "end" | "stretch">;
+    /**
+     * Контент внутри grid-элемента
+     *
+     * Любые React-элементы которые будут отображаться внутри ячейки grid.
+     * Может содержать текст, изображения, другие компоненты.
+     */
+    children?: React.ReactNode;
+    /**
+     * HTML-тег для рендеринга
+     *
+     * Позволяет изменить HTML-тег элемента для семантической разметки.
+     *
+     * Примеры:
+     * - as="li" для элементов списка
+     * - as="article" для карточек контента
+     * - as="header" для шапки области
+     *
+     * @default "div"
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Дополнительные CSS-классы
+     *
+     * Позволяет добавить кастомные стили к grid-элементу.
+     * Используется для специфического оформления конкретных ячеек сетки.
+     */
+    className?: string;
+    /**
+     * Инлайн-стили
+     *
+     * JavaScript-объект с CSS-свойствами для тонкого контроля над стилями элемента.
+     * Особенно полезно для динамических расчетов позиционирования или анимаций.
+     */
+    style?: CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/grid/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/grid/types.ts"],"names":[],"mappings":"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"}

package/dist/grid/useGridClasses.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from "react";
+import { ResolvedProps } from "@ryuzaki13/react-foundation-lib/media";
+import type { GridContainerProps, GridItemProps } from "./types";
+export type ResolvedGridContainerProps = Omit<ResolvedProps<GridContainerProps>, "children" | "className" | "as" | "style">;
+export type ResolvedGridItemProps = Omit<ResolvedProps<GridItemProps>, "children" | "className" | "as" | "style">;
+export declare const useGridContainerClasses: (props: ResolvedGridContainerProps) => string;
+export declare const useGridContainerStyles: (props: Pick<ResolvedGridContainerProps, "templateColumns" | "templateRows" | "autoColumns" | "autoRows" | "areas">) => CSSProperties;
+export declare const useGridItemClasses: (props: ResolvedGridItemProps) => string;
+export declare const useGridItemStyles: (props: Pick<ResolvedGridItemProps, "area" | "column" | "row">) => CSSProperties;
+//# sourceMappingURL=useGridClasses.d.ts.map

package/dist/grid/useGridClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridClasses.d.ts","sourceRoot":"","sources":["../../src/grid/useGridClasses.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAW,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAItE,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIjE,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC;AAC5H,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC;AAElH,eAAO,MAAM,uBAAuB,GAAI,OAAO,0BAA0B,WAiDxE,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAClC,OAAO,IAAI,CAAC,0BAA0B,EAAE,iBAAiB,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,OAAO,CAAC,kBA2BlH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,qBAAqB,WAgB9D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,kBAgB9F,CAAC"}

package/dist/image/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./ui/ImageCropper";
+export * from "./ui/ImagePlaceholder";
+export * from "./ui/ImageRenderer";
+export * from "./ui/ImageSelection";
+export * from "./ui/ImageView";
+//# sourceMappingURL=index.d.ts.map

package/dist/image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}