@ryuzaki13/react-foundation-ui 3.9.0 → 3.10.1

package/dist/chunks/grid-CFuzBigM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid-CFuzBigM.js","names":[],"sources":["../../src/grid/Grid.module.scss","../../src/grid/useGridClasses.ts","../../src/grid/GridContainer.tsx","../../src/grid/GridItem.tsx","../../src/grid/Grid.tsx"],"sourcesContent":[".grid {\n\tdisplay: grid;\n\n\t// Display variants\n\t&.inline {\n\t\tdisplay: inline-grid;\n\t\tvertical-align: middle;\n\t}\n\n\t// Auto flow\n\t&.row {\n\t\tgrid-auto-flow: row;\n\t}\n\t&.column {\n\t\tgrid-auto-flow: column;\n\t}\n\t&.dense {\n\t\tgrid-auto-flow: dense;\n\t}\n\n\t// Gap properties (аналогично Flex)\n\t&.gapNone {\n\t\tgap: unset;\n\t}\n\n\t// Row gaps\n\t&.gapRowXs {\n\t\trow-gap: var(--space-xs);\n\t}\n\t&.gapRowSm {\n\t\trow-gap: var(--space-sm);\n\t}\n\t&.gapRowMd {\n\t\trow-gap: var(--space-md);\n\t}\n\t&.gapRowLg {\n\t\trow-gap: var(--space-lg);\n\t}\n\t&.gapRowXl {\n\t\trow-gap: var(--space-xl);\n\t}\n\n\t// Column gaps\n\t&.gapColumnXs {\n\t\tcolumn-gap: var(--space-xs);\n\t}\n\t&.gapColumnSm {\n\t\tcolumn-gap: var(--space-sm);\n\t}\n\t&.gapColumnMd {\n\t\tcolumn-gap: var(--space-md);\n\t}\n\t&.gapColumnLg {\n\t\tcolumn-gap: var(--space-lg);\n\t}\n\t&.gapColumnXl {\n\t\tcolumn-gap: var(--space-xl);\n\t}\n\n\t// Combined gaps\n\t&.gapXs {\n\t\trow-gap: var(--space-xs);\n\t\tcolumn-gap: var(--space-xs);\n\t}\n\t&.gapSm {\n\t\trow-gap: var(--space-sm);\n\t\tcolumn-gap: var(--space-sm);\n\t}\n\t&.gapMd {\n\t\trow-gap: var(--space-md);\n\t\tcolumn-gap: var(--space-md);\n\t}\n\t&.gapLg {\n\t\trow-gap: var(--space-lg);\n\t\tcolumn-gap: var(--space-lg);\n\t}\n\t&.gapXl {\n\t\trow-gap: var(--space-xl);\n\t\tcolumn-gap: var(--space-xl);\n\t}\n\n\t// Align items\n\t&.alignStart {\n\t\talign-items: start;\n\t}\n\t&.alignCenter {\n\t\talign-items: center;\n\t}\n\t&.alignEnd {\n\t\talign-items: end;\n\t}\n\t&.alignStretch {\n\t\talign-items: stretch;\n\t}\n\t&.alignBaseline {\n\t\talign-items: baseline;\n\t}\n\n\t// Justify items\n\t&.justifyStart {\n\t\tjustify-items: start;\n\t}\n\t&.justifyCenter {\n\t\tjustify-items: center;\n\t}\n\t&.justifyEnd {\n\t\tjustify-items: end;\n\t}\n\t&.justifyStretch {\n\t\tjustify-items: stretch;\n\t}\n\n\t// Align content\n\t&.alignContentStart {\n\t\talign-content: start;\n\t}\n\t&.alignContentCenter {\n\t\talign-content: center;\n\t}\n\t&.alignContentEnd {\n\t\talign-content: end;\n\t}\n\t&.alignContentStretch {\n\t\talign-content: stretch;\n\t}\n\t&.alignContentBetween {\n\t\talign-content: space-between;\n\t}\n\t&.alignContentAround {\n\t\talign-content: space-around;\n\t}\n\t&.alignContentEvenly {\n\t\talign-content: space-evenly;\n\t}\n\n\t// Justify content\n\t&.justifyContentStart {\n\t\tjustify-content: start;\n\t}\n\t&.justifyContentCenter {\n\t\tjustify-content: center;\n\t}\n\t&.justifyContentEnd {\n\t\tjustify-content: end;\n\t}\n\t&.justifyContentStretch {\n\t\tjustify-content: stretch;\n\t}\n\t&.justifyContentBetween {\n\t\tjustify-content: space-between;\n\t}\n\t&.justifyContentAround {\n\t\tjustify-content: space-around;\n\t}\n\t&.justifyContentEvenly {\n\t\tjustify-content: space-evenly;\n\t}\n}\n\n// Grid Item\n.item {\n\t// Grid placement\n\t&.areaAuto {\n\t\tgrid-area: auto;\n\t}\n\n\t// Align self\n\t&.alignSelfStart {\n\t\talign-self: start;\n\t}\n\t&.alignSelfCenter {\n\t\talign-self: center;\n\t}\n\t&.alignSelfEnd {\n\t\talign-self: end;\n\t}\n\t&.alignSelfStretch {\n\t\talign-self: stretch;\n\t}\n\t&.alignSelfBaseline {\n\t\talign-self: baseline;\n\t}\n\n\t// Justify self\n\t&.justifySelfStart {\n\t\tjustify-self: start;\n\t}\n\t&.justifySelfCenter {\n\t\tjustify-self: center;\n\t}\n\t&.justifySelfEnd {\n\t\tjustify-self: end;\n\t}\n\t&.justifySelfStretch {\n\t\tjustify-self: stretch;\n\t}\n}\n\n// Предопределенные композиции\n.autoRows1fr {\n\tgrid-auto-rows: 1fr;\n}\n\n.columnsAuto1fr {\n\tgrid-template-columns: auto 1fr;\n\tgrid-auto-rows: auto;\n}\n\n.singleColumn {\n\tgrid-template-columns: 100%;\n\tgrid-auto-rows: auto 1fr;\n}\n","import { CSSProperties, useMemo } from \"react\";\n\nimport { ResolvedProps } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport styles from \"./Grid.module.scss\";\n\nimport type { GridContainerLayoutProps, GridItemLayoutProps } from \"./types\";\n\ntype ClassName = string | undefined | null | false;\n\nexport type ResolvedGridContainerProps = ResolvedProps<GridContainerLayoutProps>;\nexport type ResolvedGridItemProps = ResolvedProps<GridItemLayoutProps>;\n\nexport const useGridContainerClasses = (props: ResolvedGridContainerProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: ClassName[] = [styles.grid];\n\n\t\t// Display\n\t\tif (props.inline) classes.push(styles.inline);\n\n\t\t// Auto flow\n\t\tif (props.column) classes.push(styles.column);\n\t\telse if (props.dense) classes.push(styles.dense);\n\t\telse if (props.row) classes.push(styles.row);\n\n\t\t// Alignment\n\t\tif (props.align) classes.push(styles[`align${props.align.charAt(0).toUpperCase() + props.align.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify items\n\t\tif (props.justify)\n\t\t\tclasses.push(styles[`justify${props.justify.charAt(0).toUpperCase() + props.justify.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify content\n\t\tif (props.justifyContent)\n\t\t\tclasses.push(\n\t\t\t\tstyles[\n\t\t\t\t\t`justifyContent${props.justifyContent.charAt(0).toUpperCase() + props.justifyContent.slice(1)}` as keyof typeof styles\n\t\t\t\t]\n\t\t\t);\n\n\t\t// Align content\n\t\tif (props.alignContent)\n\t\t\tclasses.push(\n\t\t\t\tstyles[`alignContent${props.alignContent.charAt(0).toUpperCase() + props.alignContent.slice(1)}` as keyof typeof styles]\n\t\t\t);\n\n\t\t// Gap properties\n\t\tif (props.gap === \"none\") classes.push(styles.gapNone);\n\t\telse if (props.gap) classes.push(styles[`gap${props.gap.charAt(0).toUpperCase() + props.gap.slice(1)}` as keyof typeof styles]);\n\n\t\tif (props.gapRow)\n\t\t\tclasses.push(styles[`gapRow${props.gapRow.charAt(0).toUpperCase() + props.gapRow.slice(1)}` as keyof typeof styles]);\n\t\tif (props.gapColumn)\n\t\t\tclasses.push(styles[`gapColumn${props.gapColumn.charAt(0).toUpperCase() + props.gapColumn.slice(1)}` as keyof typeof styles]);\n\n\t\t// Предопределенные варианты\n\t\tif (props.variant === \"single-column\") classes.push(styles.singleColumn);\n\t\telse if (props.variant === \"auto-1fr\") classes.push(styles.autoRows1fr);\n\t\telse if (props.variant === \"auto1fr-rows-auto\") classes.push(styles.columnsAuto1fr);\n\n\t\treturn classes.filter(Boolean).join(\" \");\n\t}, [props]);\n};\n\nexport const useGridContainerStyles = (\n\tprops: Pick<ResolvedGridContainerProps, \"templateColumns\" | \"templateRows\" | \"autoColumns\" | \"autoRows\" | \"areas\">\n) => {\n\treturn useMemo(() => {\n\t\tconst styles: CSSProperties = {};\n\n\t\tif (props.templateColumns) {\n\t\t\t// if (typeof props.templateColumns === \"object\") {\n\t\t\t//     styles.gridTemplateColumns = props.templateColumns;\n\t\t\t// } else {\n\t\t\tstyles.gridTemplateColumns = props.templateColumns;\n\t\t\t// }\n\t\t}\n\t\tif (props.templateRows) {\n\t\t\tstyles.gridTemplateRows = props.templateRows;\n\t\t}\n\t\tif (props.autoColumns) {\n\t\t\tstyles.gridAutoColumns = props.autoColumns;\n\t\t}\n\t\tif (props.autoRows) {\n\t\t\tstyles.gridAutoRows = props.autoRows;\n\t\t}\n\t\tif (props.areas) {\n\t\t\tstyles.gridTemplateAreas = props.areas;\n\t\t}\n\n\t\treturn styles;\n\t}, [props.templateColumns, props.templateRows, props.autoColumns, props.autoRows, props.areas]);\n};\n\nexport const useGridItemClasses = (props: ResolvedGridItemProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: ClassName[] = [styles.item];\n\n\t\t// Self alignment\n\t\tif (props.alignSelf)\n\t\t\tclasses.push(styles[`alignSelf${props.alignSelf.charAt(0).toUpperCase() + props.alignSelf.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify self\n\t\tif (props.justifySelf)\n\t\t\tclasses.push(\n\t\t\t\tstyles[`justifySelf${props.justifySelf.charAt(0).toUpperCase() + props.justifySelf.slice(1)}` as keyof typeof styles]\n\t\t\t);\n\n\t\treturn classes.filter(Boolean).join(\" \");\n\t}, [props]);\n};\n\nexport const useGridItemStyles = (props: Pick<ResolvedGridItemProps, \"area\" | \"column\" | \"row\">) => {\n\treturn useMemo(() => {\n\t\tconst styles: CSSProperties = {};\n\n\t\tif (props.area) {\n\t\t\tstyles.gridArea = props.area;\n\t\t}\n\t\tif (props.column) {\n\t\t\tstyles.gridColumn = props.column;\n\t\t}\n\t\tif (props.row) {\n\t\t\tstyles.gridRow = props.row;\n\t\t}\n\n\t\treturn styles;\n\t}, [props.area, props.column, props.row]);\n};\n","import { type Ref, useMemo } from \"react\";\n\nimport { resolveResponsiveValue, useMatchMedia } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport { PolymorphicComponent } from \"../polymorphic\";\n\nimport { GridContainerProps } from \"./types\";\nimport { useGridContainerClasses, useGridContainerStyles } from \"./useGridClasses\";\n\nexport function GridContainer({\n\tref,\n\tchildren,\n\tclassName = \"\",\n\tas,\n\tstyle,\n\tinline,\n\trow,\n\tcolumn,\n\tdense,\n\tgap,\n\tgapRow,\n\tgapColumn,\n\talign,\n\tjustify,\n\talignContent,\n\tjustifyContent,\n\ttemplateColumns,\n\ttemplateRows,\n\tautoColumns,\n\tautoRows,\n\tareas,\n\tvariant,\n\t...htmlProps\n}: GridContainerProps & { ref?: Ref<HTMLElement> }) {\n\tconst { activeBreakpoint } = useMatchMedia();\n\n\tconst resolved = useMemo(() => {\n\t\treturn {\n\t\t\tinline: resolveResponsiveValue(inline, activeBreakpoint),\n\n\t\t\trow: resolveResponsiveValue(row, activeBreakpoint),\n\t\t\tcolumn: resolveResponsiveValue(column, activeBreakpoint),\n\t\t\tdense: resolveResponsiveValue(dense, activeBreakpoint),\n\n\t\t\tgap: resolveResponsiveValue(gap, activeBreakpoint),\n\t\t\tgapRow: resolveResponsiveValue(gapRow, activeBreakpoint),\n\t\t\tgapColumn: resolveResponsiveValue(gapColumn, activeBreakpoint),\n\n\t\t\talign: resolveResponsiveValue(align, activeBreakpoint),\n\t\t\tjustify: resolveResponsiveValue(justify, activeBreakpoint),\n\t\t\talignContent: resolveResponsiveValue(alignContent, activeBreakpoint),\n\t\t\tjustifyContent: resolveResponsiveValue(justifyContent, activeBreakpoint),\n\n\t\t\tvariant: resolveResponsiveValue(variant, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, align, alignContent, column, dense, gap, gapColumn, gapRow, inline, justify, justifyContent, row, variant]);\n\n\tconst resolvedStyles = useMemo(() => {\n\t\treturn {\n\t\t\ttemplateColumns: resolveResponsiveValue(templateColumns, activeBreakpoint),\n\t\t\ttemplateRows: resolveResponsiveValue(templateRows, activeBreakpoint),\n\t\t\tautoColumns: resolveResponsiveValue(autoColumns, activeBreakpoint),\n\t\t\tautoRows: resolveResponsiveValue(autoRows, activeBreakpoint),\n\t\t\tareas: resolveResponsiveValue(areas, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, templateColumns, templateRows, autoColumns, autoRows, areas]);\n\n\tconst gridClasses = useGridContainerClasses(resolved);\n\tconst gridStyles = useGridContainerStyles(resolvedStyles);\n\n\tconst finalClassName = [gridClasses, className].filter(Boolean).join(\" \");\n\tconst finalStyle = { ...gridStyles, ...style };\n\treturn (\n\t\t<PolymorphicComponent as={as} {...htmlProps} ref={ref} className={finalClassName} style={finalStyle}>\n\t\t\t{children}\n\t\t</PolymorphicComponent>\n\t);\n}\n\nGridContainer.displayName = \"GridContainer\";\n","import { type Ref, useMemo } from \"react\";\n\nimport { resolveResponsiveValue, useMatchMedia } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport { PolymorphicComponent } from \"../polymorphic\";\n\nimport { GridItemProps } from \"./types\";\nimport { useGridItemClasses, useGridItemStyles } from \"./useGridClasses\";\n\nexport function GridItem({\n\tref,\n\tchildren,\n\tclassName = \"\",\n\tas,\n\tstyle,\n\tarea,\n\tcolumn,\n\trow,\n\talignSelf,\n\tjustifySelf,\n\t...htmlProps\n}: GridItemProps & { ref?: Ref<HTMLElement> }) {\n\tconst { activeBreakpoint } = useMatchMedia();\n\n\tconst resolvedProps = useMemo(() => {\n\t\treturn {\n\t\t\talignSelf: resolveResponsiveValue(alignSelf, activeBreakpoint),\n\t\t\tjustifySelf: resolveResponsiveValue(justifySelf, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, alignSelf, justifySelf]);\n\n\tconst resolvedPlacement = useMemo(() => {\n\t\treturn {\n\t\t\tarea: resolveResponsiveValue(area, activeBreakpoint),\n\t\t\tcolumn: resolveResponsiveValue(column, activeBreakpoint),\n\t\t\trow: resolveResponsiveValue(row, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, area, column, row]);\n\n\tconst gridClasses = useGridItemClasses(resolvedProps);\n\tconst gridStyles = useGridItemStyles(resolvedPlacement);\n\n\tconst finalClassName = [gridClasses, className].filter(Boolean).join(\" \");\n\tconst finalStyle = { ...gridStyles, ...style };\n\treturn (\n\t\t<PolymorphicComponent as={as} {...htmlProps} ref={ref} className={finalClassName} style={finalStyle}>\n\t\t\t{children}\n\t\t</PolymorphicComponent>\n\t);\n}\n\nGridItem.displayName = \"GridItem\";\n","import { GridContainer } from \"./GridContainer\";\nimport { GridItem } from \"./GridItem\";\n\nexport const Grid = {\n\tContainer: GridContainer,\n\tItem: GridItem\n};\n"],"mappings":"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"}

package/dist/chunks/table-BRC1OTyE.js

@@ -1,141 +0,0 @@
-import { a as e, c as t, d as ee, i as n, n as r, o as i, p as te, r as ne, s as re, t as ie } from "./base-table-9H5YuVvB.js";
-import { jsx as a } from "react/jsx-runtime";
-import { useEffect as ae, useEffectEvent as o, useMemo as s, useRef as c } from "react";
-import { formatPipelineDisplayValue as l } from "@ryuzaki13/react-foundation-lib/formatters";
-import { foundationTableFeatures as u, useTableRowSelection as d } from "@ryuzaki13/react-foundation-lib/table";
-import { useTable as f } from "@tanstack/react-table";
-var p = {
-	selectedIndicatorCell: "hKghZt",
-	sentinel: "QsLRvS"
-};
-//#endregion
-//#region src/table/Table.tsx
-function oe(e, t) {
-	return String(t);
-}
-function m({ title: m, isLoading: h, isFetching: se, data: g, columns: _, selectionMode: v = "none", selectedRowIds: ce, getRowId: le, className: ue, minHeight: de, tableClassName: fe, columnVisibility: y, defaultColumnVisibility: b, columnOrder: x, defaultColumnOrder: S, columnSizing: C, defaultColumnSizing: w, columnPinning: T, defaultColumnPinning: E, enableColumnResizing: D = !1, enableColumnReordering: O = !1, columnResizeMinWidth: k, onColumnVisibilityChange: A, onColumnOrderChange: j, onColumnSizingChange: M, onColumnPinningChange: N, onRowClick: P, onRowSelectionChange: F, onReachEnd: I, getRowCanSelect: L, getRowClassName: R, renderHeaderContextMenu: pe, renderCellContent: z }) {
-	let B = s(() => g ?? [], [g]), V = s(() => t(_), [_]), H = le ?? oe, U = s(() => new Map(B.map((e, t) => [H(e, t), e])), [H, B]), me = s(() => Array.from(U.keys()), [U]), W = c(null), G = c(null), { rowSelection: he, activateRowSelection: ge } = d({
-		availableRowIds: me,
-		rowById: U,
-		selectionMode: v,
-		selectedRowIds: ce,
-		onRowSelectionChange: F
-	}), { columnVisibility: K, onColumnVisibilityChange: _e } = ne({
-		columnVisibility: y,
-		defaultColumnVisibility: b,
-		onColumnVisibilityChange: A
-	}), { columnOrder: q, onColumnOrderChange: ve } = i({
-		columnOrder: x,
-		defaultColumnOrder: S,
-		onColumnOrderChange: j
-	}), { columnSizing: J, onColumnSizingChange: ye } = n({
-		columnSizing: C,
-		defaultColumnSizing: w,
-		columnResizeMinWidth: k,
-		onColumnSizingChange: M
-	}), { columnPinning: Y, onColumnPinningChange: be } = e({
-		columnPinning: T,
-		defaultColumnPinning: E,
-		onColumnPinningChange: N
-	}), X = s(() => ({
-		columnOrder: q,
-		columnPinning: Y,
-		columnSizing: J,
-		columnVisibility: K
-	}), [
-		q,
-		Y,
-		J,
-		K
-	]), xe = o(() => {
-		I?.();
-	});
-	ae(() => {
-		if (!I || !W.current || !G.current || h) return;
-		let e = new IntersectionObserver((e) => {
-			e[0]?.isIntersecting && xe();
-		}, {
-			root: W.current,
-			threshold: .1
-		});
-		return e.observe(G.current), () => e.disconnect();
-	}, [
-		h,
-		I,
-		B.length
-	]);
-	let Z = f({
-		features: u,
-		data: B,
-		columns: _,
-		state: {
-			columnOrder: q,
-			columnPinning: Y,
-			columnSizing: J,
-			columnVisibility: K,
-			rowSelection: he
-		},
-		onColumnOrderChange: ve,
-		onColumnPinningChange: be,
-		onColumnSizingChange: ye,
-		onColumnVisibilityChange: _e,
-		getRowId: (e, t) => H(e, t),
-		enableMultiRowSelection: v === "multi",
-		enableRowSelection: (e) => v === "none" ? !1 : !L || L(e.original)
-	}), Q = te(Z, X), $ = Z.getRowModel().rows, Se = s(() => re({
-		rows: $,
-		columns: Q
-	}), [$, Q]), Ce = Q[0]?.id;
-	return /* @__PURE__ */ a(r, {
-		table: Z,
-		columnState: X,
-		title: m,
-		isLoading: h,
-		isFetching: se,
-		className: ue,
-		minHeight: de,
-		tableClassName: fe,
-		selectionMode: v,
-		scrollableRef: W,
-		onActivateRow: v !== "none" || P ? (e) => {
-			ge(e.id, e.getCanSelect()), P?.(e.original);
-		} : void 0,
-		isRowInteractive: (e) => !!(P || v !== "none" && e.getCanSelect()),
-		getRowClassName: (e) => R?.(e.original),
-		getCellClassName: ({ row: e, cell: t }) => t.column.id === Ce && e.getIsSelected() ? p.selectedIndicatorCell : void 0,
-		getCellLayout: ({ cell: e }) => Se.get(e.id),
-		renderHeaderContextMenu: pe,
-		enableColumnResizing: D,
-		enableColumnReordering: O,
-		columnResizeMinWidth: k,
-		renderCellContent: (e) => {
-			let t = l({
-				field: V.runtimeByColumnId[e.cell.column.id],
-				rawValue: e.cell.getValue(),
-				rowData: e.row.original,
-				rowKind: "plain"
-			}), n = ee({
-				columnId: e.cell.column.id,
-				runtimeByColumnId: V.runtimeByColumnId,
-				customCellColumnIds: V.customCellColumnIds
-			}) ? /* @__PURE__ */ a(ie, {
-				displayValue: t,
-				align: e.columnMeta?.align
-			}) : e.defaultContent;
-			return z ? z({
-				...e,
-				defaultContent: n,
-				displayValue: t
-			}) : n;
-		},
-		afterTableContent: I ? /* @__PURE__ */ a("div", {
-			ref: G,
-			className: p.sentinel,
-			"aria-hidden": "true"
-		}) : null
-	});
-}
-//#endregion
-export { m as t };
-
-//# sourceMappingURL=table-BRC1OTyE.js.map

package/dist/chunks/table-BRC1OTyE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table-BRC1OTyE.js","names":[],"sources":["../../src/table/Table.module.scss","../../src/table/Table.tsx"],"sourcesContent":[".selectedIndicatorCell {\n\tbox-shadow: inset 0.1875rem 0 0 var(--accent-text);\n}\n\n.sentinel {\n\theight: 1px;\n}\n","import { useEffect, useEffectEvent, useMemo, useRef } from \"react\";\n\nimport { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\nimport {\n\ttype FoundationTableRow,\n\tfoundationTableFeatures,\n\ttype TableColumnDef,\n\ttype TableColumnOrderState,\n\ttype TableColumnSizingState,\n\ttype TableColumnVisibilityState,\n\ttype TableSelectionMode,\n\tuseTableRowSelection\n} from \"@ryuzaki13/react-foundation-lib/table\";\nimport { useTable } from \"@tanstack/react-table\";\n\nimport {\n\tBaseTable,\n\tbuildBaseTableMergedCellsLayout,\n\tbuildTableFormattingSnapshot,\n\tFormattedTableCell,\n\tgetOrderedVisibleLeafColumns,\n\tshouldUseTableFormatting,\n\tuseTableColumnOrder,\n\tuseTableColumnPinning,\n\tuseTableColumnSizing,\n\tuseTableColumnVisibility,\n\ttype BaseTableColumnState,\n\ttype BaseTableProps,\n\ttype TableColumnPinningState\n} from \"../base-table\";\n\nimport styles from \"./Table.module.scss\";\n\n/**\n * Возвращает индекс как строковый id, если внешний id не передан.\n */\nfunction defaultGetRowId<TData>(_row: TData, index: number): string {\n\treturn String(index);\n}\n\n/**\n * Пропсы компонента Table.\n *\n * Компонент предназначен для плоских данных и по API осознанно сближен с TreeTable.\n */\nexport interface TableProps<TData extends object> {\n\t/**\n\t * Необязательный заголовок над таблицей.\n\t */\n\ttitle?: string;\n\t/**\n\t * Признак первичной загрузки.\n\t */\n\tisLoading?: boolean;\n\t/**\n\t * Признак фоновой догрузки или обновления данных.\n\t */\n\tisFetching?: boolean;\n\t/**\n\t * Плоский источник строк.\n\t */\n\tdata: readonly TData[] | undefined | null;\n\t/**\n\t * Описание колонок таблицы.\n\t */\n\tcolumns: readonly TableColumnDef<TData>[];\n\t/**\n\t * Режим выбора строк.\n\t */\n\tselectionMode?: TableSelectionMode;\n\t/**\n\t * Внешний список выбранных строк.\n\t *\n\t * Если передан, таблица синхронизирует визуальное выделение с этим набором id.\n\t */\n\tselectedRowIds?: readonly string[];\n\t/**\n\t * Стабильный идентификатор строки.\n\t *\n\t * Если не задан, используется индекс строки.\n\t */\n\tgetRowId?: (row: TData, index: number) => string;\n\t/**\n\t * Дополнительный CSS-класс корневого контейнера.\n\t */\n\tclassName?: string;\n\tminHeight?: `${number}em` | `${number}%`;\n\t/**\n\t * Дополнительный CSS-класс тега `table`.\n\t */\n\ttableClassName?: string;\n\t/**\n\t * Внешнее controlled-состояние видимости колонок.\n\t */\n\tcolumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Стартовое uncontrolled-состояние видимости колонок.\n\t */\n\tdefaultColumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Внешнее controlled-состояние порядка колонок.\n\t */\n\tcolumnOrder?: readonly string[];\n\t/**\n\t * Стартовое uncontrolled-состояние порядка колонок.\n\t */\n\tdefaultColumnOrder?: readonly string[];\n\t/**\n\t * Внешнее controlled-состояние ширин колонок в px.\n\t */\n\tcolumnSizing?: TableColumnSizingState;\n\t/**\n\t * Стартовое uncontrolled-состояние ширин колонок в px.\n\t */\n\tdefaultColumnSizing?: TableColumnSizingState;\n\t/**\n\t * Внешнее controlled-состояние start-pinning для колонок.\n\t */\n\tcolumnPinning?: TableColumnPinningState;\n\t/**\n\t * Стартовое uncontrolled-состояние start-pinning для колонок.\n\t */\n\tdefaultColumnPinning?: TableColumnPinningState;\n\t/**\n\t * Включает изменение ширины колонок через header-handle.\n\t */\n\tenableColumnResizing?: boolean;\n\t/**\n\t * Включает изменение порядка колонок через drag&drop заголовков.\n\t */\n\tenableColumnReordering?: boolean;\n\t/**\n\t * Минимальная ширина колонки при resize в px.\n\t */\n\tcolumnResizeMinWidth?: number;\n\t/**\n\t * Вызывается после изменения видимости колонок.\n\t */\n\tonColumnVisibilityChange?: (state: TableColumnVisibilityState) => void;\n\t/**\n\t * Вызывается после изменения порядка колонок.\n\t */\n\tonColumnOrderChange?: (state: TableColumnOrderState) => void;\n\t/**\n\t * Вызывается после изменения ширины колонок.\n\t */\n\tonColumnSizingChange?: (state: TableColumnSizingState) => void;\n\t/**\n\t * Вызывается после изменения start-pinning state.\n\t */\n\tonColumnPinningChange?: (state: TableColumnPinningState) => void;\n\t/**\n\t * Вызывается при активации строки кликом или клавиатурой.\n\t */\n\tonRowClick?: (row: TData) => void;\n\t/**\n\t * Вызывается после изменения выбранных строк.\n\t */\n\tonRowSelectionChange?: (rows: TData[]) => void;\n\t/**\n\t * Вызывается при достижении конца таблицы внутри scroll-контейнера.\n\t */\n\tonReachEnd?: () => void;\n\t/**\n\t * Позволяет запретить выбор отдельных строк.\n\t */\n\tgetRowCanSelect?: (row: TData) => boolean;\n\t/**\n\t * Позволяет добавить CSS-класс для конкретной строки.\n\t */\n\tgetRowClassName?: (row: TData) => string | undefined;\n\t/**\n\t * Контекстное меню заголовка колонки. Используется для общих runtime-действий\n\t * вроде server sorting без встраивания доменной логики в shared-таблицу.\n\t */\n\trenderHeaderContextMenu?: BaseTableProps<TData>[\"renderHeaderContextMenu\"];\n\t/**\n\t * Тонкая точка расширения содержимого ячейки поверх стандартного форматирования.\n\t *\n\t * В отличие от `column.cell`, этот слот не отключает общий formatting-runtime:\n\t * `defaultContent` уже содержит отформатированное значение, если оно применимо.\n\t */\n\trenderCellContent?: BaseTableProps<TData>[\"renderCellContent\"];\n}\n\n/**\n * Плоская таблица на базе TanStack Table как React-альтернатива `sap.m.Table`.\n */\nexport function Table<TData extends object>({\n\ttitle,\n\tisLoading,\n\tisFetching,\n\tdata,\n\tcolumns,\n\tselectionMode = \"none\",\n\tselectedRowIds,\n\tgetRowId,\n\tclassName,\n\tminHeight,\n\ttableClassName,\n\tcolumnVisibility,\n\tdefaultColumnVisibility,\n\tcolumnOrder,\n\tdefaultColumnOrder,\n\tcolumnSizing,\n\tdefaultColumnSizing,\n\tcolumnPinning,\n\tdefaultColumnPinning,\n\tenableColumnResizing = false,\n\tenableColumnReordering = false,\n\tcolumnResizeMinWidth,\n\tonColumnVisibilityChange,\n\tonColumnOrderChange,\n\tonColumnSizingChange,\n\tonColumnPinningChange,\n\tonRowClick,\n\tonRowSelectionChange,\n\tonReachEnd,\n\tgetRowCanSelect,\n\tgetRowClassName,\n\trenderHeaderContextMenu,\n\trenderCellContent\n}: TableProps<TData>) {\n\tconst tableData = useMemo(() => data ?? [], [data]);\n\tconst formattingSnapshot = useMemo(() => buildTableFormattingSnapshot(columns), [columns]);\n\tconst resolveRowId = getRowId ?? defaultGetRowId<TData>;\n\tconst rowById = useMemo(() => new Map(tableData.map((row, index) => [resolveRowId(row, index), row])), [resolveRowId, tableData]);\n\tconst availableRowIds = useMemo(() => Array.from(rowById.keys()), [rowById]);\n\tconst scrollableRef = useRef<HTMLDivElement | null>(null);\n\tconst sentinelRef = useRef<HTMLDivElement | null>(null);\n\n\tconst { rowSelection, activateRowSelection } = useTableRowSelection({\n\t\tavailableRowIds,\n\t\trowById,\n\t\tselectionMode,\n\t\tselectedRowIds,\n\t\tonRowSelectionChange\n\t});\n\tconst { columnVisibility: resolvedColumnVisibility, onColumnVisibilityChange: handleColumnVisibilityChange } = useTableColumnVisibility(\n\t\t{\n\t\t\tcolumnVisibility,\n\t\t\tdefaultColumnVisibility,\n\t\t\tonColumnVisibilityChange\n\t\t}\n\t);\n\tconst { columnOrder: resolvedColumnOrder, onColumnOrderChange: handleColumnOrderChange } = useTableColumnOrder({\n\t\tcolumnOrder,\n\t\tdefaultColumnOrder,\n\t\tonColumnOrderChange\n\t});\n\tconst { columnSizing: resolvedColumnSizing, onColumnSizingChange: handleColumnSizingChange } = useTableColumnSizing({\n\t\tcolumnSizing,\n\t\tdefaultColumnSizing,\n\t\tcolumnResizeMinWidth,\n\t\tonColumnSizingChange\n\t});\n\tconst { columnPinning: resolvedColumnPinning, onColumnPinningChange: handleColumnPinningChange } = useTableColumnPinning({\n\t\tcolumnPinning,\n\t\tdefaultColumnPinning,\n\t\tonColumnPinningChange\n\t});\n\tconst baseTableColumnState = useMemo<BaseTableColumnState>(\n\t\t() => ({\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility\n\t\t}),\n\t\t[resolvedColumnOrder, resolvedColumnPinning, resolvedColumnSizing, resolvedColumnVisibility]\n\t);\n\n\tconst emitReachEnd = useEffectEvent(() => {\n\t\tonReachEnd?.();\n\t});\n\n\tuseEffect(() => {\n\t\tif (!onReachEnd || !scrollableRef.current || !sentinelRef.current || isLoading) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst entry = entries[0];\n\n\t\t\t\tif (entry?.isIntersecting) {\n\t\t\t\t\temitReachEnd();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\troot: scrollableRef.current,\n\t\t\t\tthreshold: 0.1\n\t\t\t}\n\t\t);\n\n\t\tobserver.observe(sentinelRef.current);\n\n\t\treturn () => observer.disconnect();\n\t}, [isLoading, onReachEnd, tableData.length]);\n\n\tconst table = useTable({\n\t\tfeatures: foundationTableFeatures,\n\t\tdata: tableData as TData[],\n\t\tcolumns: columns as TableColumnDef<TData>[],\n\t\tstate: {\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility,\n\t\t\trowSelection\n\t\t},\n\t\tonColumnOrderChange: handleColumnOrderChange,\n\t\tonColumnPinningChange: handleColumnPinningChange,\n\t\tonColumnSizingChange: handleColumnSizingChange,\n\t\tonColumnVisibilityChange: handleColumnVisibilityChange,\n\t\tgetRowId: (row, index) => resolveRowId(row, index),\n\t\tenableMultiRowSelection: selectionMode === \"multi\",\n\t\tenableRowSelection: (row) => {\n\t\t\tif (selectionMode === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\treturn getRowCanSelect ? getRowCanSelect(row.original) : true;\n\t\t}\n\t});\n\n\tconst visibleLeafColumns = getOrderedVisibleLeafColumns(table, baseTableColumnState);\n\tconst rowModelRows = table.getRowModel().rows;\n\tconst mergedCellLayout = useMemo(\n\t\t() =>\n\t\t\tbuildBaseTableMergedCellsLayout({\n\t\t\t\trows: rowModelRows,\n\t\t\t\tcolumns: visibleLeafColumns\n\t\t\t}),\n\t\t[rowModelRows, visibleLeafColumns]\n\t);\n\tconst leadingColumnId = visibleLeafColumns[0]?.id;\n\n\t/**\n\t * Активирует строку: обновляет выбор в соответствии с режимом и вызывает внешний callback.\n\t */\n\tconst activateRow = (row: FoundationTableRow<TData>) => {\n\t\tactivateRowSelection(row.id, row.getCanSelect());\n\t\tonRowClick?.(row.original);\n\t};\n\n\treturn (\n\t\t<BaseTable\n\t\t\ttable={table}\n\t\t\tcolumnState={baseTableColumnState}\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tisFetching={isFetching}\n\t\t\tclassName={className}\n\t\t\tminHeight={minHeight}\n\t\t\ttableClassName={tableClassName}\n\t\t\tselectionMode={selectionMode}\n\t\t\tscrollableRef={scrollableRef}\n\t\t\tonActivateRow={selectionMode !== \"none\" || onRowClick ? activateRow : undefined}\n\t\t\tisRowInteractive={(row) => Boolean(onRowClick || (selectionMode !== \"none\" && row.getCanSelect()))}\n\t\t\tgetRowClassName={(row) => getRowClassName?.(row.original)}\n\t\t\tgetCellClassName={({ row, cell }) =>\n\t\t\t\tcell.column.id === leadingColumnId && row.getIsSelected() ? styles.selectedIndicatorCell : undefined\n\t\t\t}\n\t\t\tgetCellLayout={({ cell }) => mergedCellLayout.get(cell.id)}\n\t\t\trenderHeaderContextMenu={renderHeaderContextMenu}\n\t\t\tenableColumnResizing={enableColumnResizing}\n\t\t\tenableColumnReordering={enableColumnReordering}\n\t\t\tcolumnResizeMinWidth={columnResizeMinWidth}\n\t\t\trenderCellContent={(args) => {\n\t\t\t\tconst displayValue = formatPipelineDisplayValue({\n\t\t\t\t\tfield: formattingSnapshot.runtimeByColumnId[args.cell.column.id],\n\t\t\t\t\trawValue: args.cell.getValue(),\n\t\t\t\t\trowData: args.row.original as TableFormulaRowData,\n\t\t\t\t\trowKind: \"plain\"\n\t\t\t\t});\n\t\t\t\tconst defaultContent = !shouldUseTableFormatting({\n\t\t\t\t\tcolumnId: args.cell.column.id,\n\t\t\t\t\truntimeByColumnId: formattingSnapshot.runtimeByColumnId,\n\t\t\t\t\tcustomCellColumnIds: formattingSnapshot.customCellColumnIds\n\t\t\t\t}) ? (\n\t\t\t\t\targs.defaultContent\n\t\t\t\t) : (\n\t\t\t\t\t<FormattedTableCell displayValue={displayValue} align={args.columnMeta?.align} />\n\t\t\t\t);\n\n\t\t\t\tif (renderCellContent) {\n\t\t\t\t\treturn renderCellContent({\n\t\t\t\t\t\t...args,\n\t\t\t\t\t\tdefaultContent,\n\t\t\t\t\t\tdisplayValue\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn defaultContent;\n\t\t\t}}\n\t\t\tafterTableContent={onReachEnd ? <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" /> : null}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/flex/useFlexClasses.d.ts

@@ -1,8 +0,0 @@
-import { ResolvedProps } from "@ryuzaki13/react-foundation-lib/media";
-import type { FlexContainerLayoutProps, FlexItemLayoutProps } from "./types";
-export type ResolvedFlexContainerProps = ResolvedProps<FlexContainerLayoutProps>;
-export type ResolvedFlexItemProps = ResolvedProps<FlexItemLayoutProps>;
-export declare const useFlexContainerClasses: (props: ResolvedFlexContainerProps) => string;
-export declare const useFlexItemClasses: (props: ResolvedFlexItemProps) => string;
-export declare const useFlexPredefinedClasses: (variant: string) => "wrap" | "row" | "center" | "container" | "inline" | "column" | "nowrap" | "rowReverse" | "columnReverse" | "wrapReverse" | "grow" | "shrink" | "flex0" | "flex1" | "centerBetween" | "columnCenter" | "alignStart" | "alignCenter" | "alignEnd" | "alignStretch" | "alignBaseline" | "justifyStart" | "justifyCenter" | "justifyEnd" | "justifyStretch" | "justifyBetween" | "justifyAround" | "justifyEvenly" | "alignContentStart" | "alignContentCenter" | "alignContentEnd" | "alignContentStretch" | "alignContentBetween" | "alignContentAround" | "alignContentEvenly" | "gapNone" | "gapRowXs" | "gapRowSm" | "gapRowMd" | "gapRowLg" | "gapRowXl" | "gapColumnXs" | "gapColumnSm" | "gapColumnMd" | "gapColumnLg" | "gapColumnXl" | "gapXs" | "gapSm" | "gapMd" | "gapLg" | "gapXl" | "item" | "grow0" | "shrink0" | "basis0" | "basisAuto" | "alignSelfStart" | "alignSelfCenter" | "alignSelfEnd" | "alignSelfStretch" | "alignSelfBaseline" | "justifySelfCenter" | "justifySelfEnd" | "justifySelfStretch";
-//# sourceMappingURL=useFlexClasses.d.ts.map

package/dist/flex/useFlexClasses.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFlexClasses.d.ts","sourceRoot":"","sources":["../../src/flex/useFlexClasses.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAItE,OAAO,KAAK,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI7E,MAAM,MAAM,0BAA0B,GAAG,aAAa,CAAC,wBAAwB,CAAC,CAAC;AACjF,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAEvE,eAAO,MAAM,uBAAuB,GAAI,OAAO,0BAA0B,WA0CxE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,qBAAqB,WAmC9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,SAAS,MAAM,69BAEvD,CAAC"}

package/dist/grid/useGridClasses.d.ts

@@ -1,10 +0,0 @@
-import { CSSProperties } from "react";
-import { ResolvedProps } from "@ryuzaki13/react-foundation-lib/media";
-import type { GridContainerLayoutProps, GridItemLayoutProps } from "./types";
-export type ResolvedGridContainerProps = ResolvedProps<GridContainerLayoutProps>;
-export type ResolvedGridItemProps = ResolvedProps<GridItemLayoutProps>;
-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

@@ -1 +0,0 @@
-{"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,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI7E,MAAM,MAAM,0BAA0B,GAAG,aAAa,CAAC,wBAAwB,CAAC,CAAC;AACjF,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAEvE,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/storybook-static/assets/Flex-DpQpF63N.js

@@ -1,61 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-1Nw_zWMi.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-DR4JL0hD.js";import{a as p,c as m,d as h,f as g,i as _,l as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T}from"./Flex.stories-DtlKiJno.js";function E(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(s,{of:b,parameters:{docs:{toc:!0}}}),`
-`,(0,O.jsx)(u,{children:`Flex`}),`
-`,(0,O.jsx)(o,{children:`Набор flex-layout примитивов для строк, колонок и быстрых компоновок интерфейса`}),`
-`,(0,O.jsx)(t.p,{children:`Flex уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
-Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
-`,(0,O.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,O.jsx)(f,{}),`
-`,(0,O.jsx)(i,{of:S}),`
-`,(0,O.jsx)(t.pre,{children:(0,O.jsx)(t.code,{className:`language-tsx`,children:`import { Flex } from "@ryuzaki13/react-foundation-ui";
-
-export function Example() {
-	return (
-		<Flex.Container gap="md" align="center">
-			<Flex.Item>Фильтры</Flex.Item>
-			<Flex.Item>Действия</Flex.Item>
-		</Flex.Container>
-	);
-}
-`})}),`
-`,(0,O.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
-`,(0,O.jsxs)(t.ul,{children:[`
-`,(0,O.jsx)(t.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
-`]}),`
-`,(0,O.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
-`,(0,O.jsx)(t.h3,{id:`базовый-row-сценарий-flex-раскладки`,children:`Базовый row-сценарий flex-раскладки`}),`
-`,(0,O.jsx)(t.p,{children:`Базовый row-сценарий flex-раскладки.`}),`
-`,(0,O.jsx)(d,{of:S}),`
-`,(0,O.jsx)(t.h3,{id:`базовый-column-сценарий-flex-раскладки`,children:`Базовый column-сценарий flex-раскладки`}),`
-`,(0,O.jsx)(t.p,{children:`Базовый column-сценарий flex-раскладки.`}),`
-`,(0,O.jsx)(d,{of:y}),`
-`,(0,O.jsx)(t.h3,{id:`сравнение-доступных-направлений-раскладки`,children:`Сравнение доступных направлений раскладки`}),`
-`,(0,O.jsx)(t.p,{children:`Сравнение доступных направлений раскладки.`}),`
-`,(0,O.jsx)(d,{of:_}),`
-`,(0,O.jsx)(t.h3,{id:`выравнивание-элементов-по-главной-оси`,children:`Выравнивание элементов по главной оси`}),`
-`,(0,O.jsx)(t.p,{children:`Выравнивание элементов по главной оси.`}),`
-`,(0,O.jsx)(d,{of:v}),`
-`,(0,O.jsx)(t.h3,{id:`выравнивание-по-поперечной-оси`,children:`Выравнивание по поперечной оси`}),`
-`,(0,O.jsx)(t.p,{children:`Выравнивание по поперечной оси.`}),`
-`,(0,O.jsx)(d,{of:w}),`
-`,(0,O.jsx)(t.h3,{id:`поведение-при-переносе-элементов`,children:`Поведение при переносе элементов`}),`
-`,(0,O.jsx)(t.p,{children:`Поведение при переносе элементов.`}),`
-`,(0,O.jsx)(d,{of:g}),`
-`,(0,O.jsx)(t.h3,{id:`сравнение-интервалов-между-элементами`,children:`Сравнение интервалов между элементами`}),`
-`,(0,O.jsx)(t.p,{children:`Сравнение интервалов между элементами.`}),`
-`,(0,O.jsx)(d,{of:C}),`
-`,(0,O.jsx)(t.h3,{id:`настройка-поведения-отдельных-flex-элементов`,children:`Настройка поведения отдельных flex-элементов`}),`
-`,(0,O.jsx)(t.p,{children:`Настройка поведения отдельных flex-элементов.`}),`
-`,(0,O.jsx)(d,{of:p}),`
-`,(0,O.jsx)(t.h3,{id:`использование-готовых-преднастроенных-вариантов`,children:`Использование готовых преднастроенных вариантов`}),`
-`,(0,O.jsx)(t.p,{children:`Использование готовых преднастроенных вариантов.`}),`
-`,(0,O.jsx)(d,{of:T}),`
-`,(0,O.jsx)(t.h3,{id:`режим-inline-flex-в-составе-потока`,children:`Режим inline-flex в составе потока`}),`
-`,(0,O.jsx)(t.p,{children:`Режим inline-flex в составе потока.`}),`
-`,(0,O.jsx)(d,{of:m}),`
-`,(0,O.jsx)(t.h3,{id:`прикладной-пример-использования-в-интерфейсе`,children:`Прикладной пример использования в интерфейсе`}),`
-`,(0,O.jsx)(t.p,{children:`Прикладной пример использования в интерфейсе.`}),`
-`,(0,O.jsx)(d,{of:h}),`
-`,(0,O.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,O.jsx)(l,{of:b}),`
-`,(0,O.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,O.jsx)(a,{includePrimary:!1})]})}function D(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,O.jsx)(t,{...e,children:(0,O.jsx)(E,{...e})}):E(e)}var O;function k(){return(k=e((()=>{O=t(),r(),c(),x()})))()}k();export{D as default};

package/storybook-static/assets/Flex.stories-DtlKiJno.js

@@ -1,300 +0,0 @@
-import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-1Nw_zWMi.js";import{i,t as a}from"./useFlexClasses-SgVG37Bb.js";import{n as o,t as s}from"./FlexContainer-C1d63I55.js";import{n as c,t as l}from"./FlexItem-DsoW-br3.js";function u({ref:e,variant:t,children:n,className:r=``,...a}){let o=[i(t??``),r].filter(Boolean).join(` `);return(0,d.jsx)(s,{ref:e,className:o,...a,children:n})}var d;function f(){return(f=e((()=>{o(),a(),d=r(),u.displayName=`PredefinedFlex`,u.__docgenInfo={description:``,methods:[],displayName:`PredefinedFlex`,props:{variant:{required:!1,tsType:{name:`union`,raw:`"center" | "centerBetween" | "columnCenter"`,elements:[{name:`literal`,value:`"center"`},{name:`literal`,value:`"centerBetween"`},{name:`literal`,value:`"columnCenter"`}]},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLElement`}],raw:`Ref<HTMLElement>`},description:``},className:{defaultValue:{value:`""`,computed:!1},required:!1}},composes:[`Omit`]}})))()}var p;function m(){return(m=e((()=>{o(),c(),f(),p={Container:s,Item:l,Predefined:u}})))()}var h=t({AlignItems:()=>E,BasicColumn:()=>C,BasicRow:()=>S,Directions:()=>w,FlexItems:()=>k,Gaps:()=>O,InlineFlex:()=>j,JustifyContent:()=>T,Predefined:()=>A,RealWorld:()=>M,Wrapping:()=>D,__namedExportsOrder:()=>N,default:()=>x});function g({children:e,index:t=0}){return(0,_.jsx)(p.Item,{style:{...y.item,backgroundColor:b(t)},children:e})}var _,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M,N;function P(){return(P=e((()=>{n(),m(),_=r(),{useArgs:v}=__STORYBOOK_MODULE_PREVIEW_API__,y={container:{border:`2px dashed var(--border-0)`,padding:`2em`,marginBlock:`1em`},item:{padding:`16px`,textAlign:`center`,fontWeight:`bold`,color:`white`,minHeight:`5em`,minWidth:`10em`,display:`flex`,alignItems:`center`,justifyContent:`center`},itemColors:[`#ff6b6b`,`#4ecdc4`,`#45b7d1`,`#96ceb4`,`#feca57`,`#ff9ff3`]},b=e=>y.itemColors[e%y.itemColors.length],x={title:`Layout/Flex`,component:p.Container,args:{row:!0,gap:`md`},parameters:{layout:`padded`},decorators:[e=>{let[t]=v();return(0,_.jsx)(e,{args:t})}],argTypes:{inline:{description:`Использует inline-flex вместо flex.`,control:`boolean`},row:{description:`Направляет элементы по строке.`,control:`boolean`},column:{description:`Направляет элементы по колонке.`,control:`boolean`},rowReverse:{description:`Разворачивает порядок строки.`,control:`boolean`},columnReverse:{description:`Разворачивает порядок колонки.`,control:`boolean`},wrap:{description:`Разрешает перенос элементов.`,control:`boolean`},nowrap:{description:`Запрещает перенос элементов.`,control:`boolean`},wrapReverse:{description:`Разворачивает направление строк при переносе.`,control:`boolean`},align:{description:`Выравнивание по поперечной оси.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`baseline`]},justify:{description:`Выравнивание по главной оси.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},alignContent:{description:`Распределение строк по поперечной оси.`,control:`select`,options:[`start`,`center`,`end`,`stretch`,`between`,`around`,`evenly`]},gap:{description:`Общий интервал между элементами.`,control:`select`,options:[`none`,`xs`,`sm`,`md`,`lg`,`xl`]},gapRow:{description:`Интервал между строками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},gapColumn:{description:`Интервал между колонками.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},as:{description:`Семантический HTML-тег контейнера.`,control:`select`,options:[`div`,`section`,`main`,`nav`,`ul`]},children:{description:`Содержимое flex-контейнера.`,control:!1}}},S={render:e=>(0,_.jsx)(p.Container,{...e,style:y.container}),args:{children:(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(g,{index:0,children:`Item 1`}),(0,_.jsx)(g,{index:1,children:`Item 2`}),(0,_.jsx)(g,{index:2,children:`Item 3`})]}),row:!0}},C={render:e=>(0,_.jsx)(p.Container,{...e,style:y.container}),args:{children:(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(g,{index:0,children:`Header`}),(0,_.jsx)(g,{index:1,children:`Content`}),(0,_.jsx)(g,{index:2,children:`Footer`})]}),column:!0}},w={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Row (default)`}),(0,_.jsxs)(p.Container,{row:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]}),(0,_.jsx)(`h3`,{children:`Row Reverse`}),(0,_.jsxs)(p.Container,{rowReverse:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]}),(0,_.jsx)(`h3`,{children:`Column`}),(0,_.jsxs)(p.Container,{column:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]}),(0,_.jsx)(`h3`,{children:`Column Reverse`}),(0,_.jsxs)(p.Container,{columnReverse:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`1`}),(0,_.jsx)(g,{index:1,children:`2`}),(0,_.jsx)(g,{index:2,children:`3`})]})]}),args:{children:void 0}},T={render:()=>(0,_.jsx)(`div`,{children:[`start`,`center`,`end`,`between`,`around`,`evenly`].map(e=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`h3`,{children:[`Justify: `,e]}),(0,_.jsxs)(p.Container,{row:!0,justify:e,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`Item 1`}),(0,_.jsx)(g,{index:1,children:`Item 2`}),(0,_.jsx)(g,{index:2,children:`Item 3`})]})]},e))}),args:{children:void 0}},E={render:()=>(0,_.jsx)(`div`,{children:[`start`,`center`,`end`,`stretch`,`baseline`].map(e=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`h3`,{children:[`Align: `,e]}),(0,_.jsxs)(p.Container,{row:!0,align:e,style:{...y.container,height:`120px`},children:[(0,_.jsx)(g,{index:0,children:(0,_.jsx)(`div`,{children:`Short`})}),(0,_.jsx)(g,{index:1,children:(0,_.jsx)(`div`,{style:{padding:`40px`},children:`Tall`})}),(0,_.jsx)(g,{index:2,children:(0,_.jsx)(`div`,{style:{padding:`24px`},children:`Medium`})})]})]},e))}),args:{children:void 0}},D={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`No Wrap (default)`}),(0,_.jsx)(p.Container,{row:!0,nowrap:!0,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))}),(0,_.jsx)(`h3`,{children:`Wrap`}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))}),(0,_.jsx)(`h3`,{children:`Wrap Reverse`}),(0,_.jsx)(p.Container,{row:!0,wrapReverse:!0,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},O={render:()=>(0,_.jsxs)(`div`,{children:[[`xs`,`sm`,`md`,`lg`,`xl`].map(e=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`h3`,{children:[`Gap: `,e]}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,gap:e,style:y.container,children:[1,2,3,4,5,6].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))})]},e)),(0,_.jsx)(`h3`,{children:`Different Row and Column Gaps`}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,gapRow:`lg`,gapColumn:`sm`,style:y.container,children:[1,2,3,4,5,6,7,8,9,10,11,12].map(e=>(0,_.jsxs)(g,{index:e,children:[`Item `,e]},e))})]}),args:{children:void 0}},k={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Grow Properties`}),(0,_.jsxs)(p.Container,{row:!0,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`Default`}),(0,_.jsx)(p.Item,{grow:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(1)},children:`Grow`})}),(0,_.jsx)(g,{index:2,children:`Default`})]}),(0,_.jsx)(`h3`,{children:`Shrink Properties`}),(0,_.jsxs)(p.Container,{row:!0,style:{...y.container,width:`300px`},children:[(0,_.jsx)(p.Item,{shrink:!1,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(0),width:`150px`},children:`No Shrink`})}),(0,_.jsx)(p.Item,{children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(1),width:`150px`},children:`Shrink (default)`})})]}),(0,_.jsx)(`h3`,{children:`Composite Classes`}),(0,_.jsxs)(p.Container,{row:!0,style:y.container,children:[(0,_.jsx)(p.Item,{flex0:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(0)},children:`flex0`})}),(0,_.jsx)(p.Item,{flex1:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(1)},children:`flex1`})}),(0,_.jsx)(p.Item,{flex0:!0,children:(0,_.jsx)(`div`,{style:{...y.item,backgroundColor:b(2)},children:`flex0`})})]})]}),args:{children:void 0}},A={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Center`}),(0,_.jsx)(p.Predefined,{variant:`center`,style:{...y.container,height:`100px`},children:(0,_.jsx)(g,{index:0,children:`Centered Content`})}),(0,_.jsx)(`h3`,{children:`Center Between`}),(0,_.jsxs)(p.Predefined,{variant:`centerBetween`,style:y.container,children:[(0,_.jsx)(g,{index:0,children:`Left`}),(0,_.jsx)(g,{index:1,children:`Right`})]})]}),args:{children:void 0}},j={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsxs)(`p`,{children:[`This is text with`,(0,_.jsxs)(p.Container,{inline:!0,align:`center`,gap:`sm`,style:{margin:`0 8px`},children:[(0,_.jsx)(g,{index:0,children:`inline`}),(0,_.jsx)(g,{index:1,children:`flex`})]}),`elements inside.`]}),(0,_.jsxs)(`p`,{children:[`Another example with`,(0,_.jsxs)(p.Container,{inline:!0,column:!0,gap:`xs`,style:{margin:`0 8px`},children:[(0,_.jsx)(g,{index:2,children:`vertical`}),(0,_.jsx)(g,{index:3,children:`inline`})]}),`flex.`]})]}),args:{children:void 0}},M={render:()=>(0,_.jsxs)(`div`,{children:[(0,_.jsx)(`h3`,{children:`Navigation Bar`}),(0,_.jsxs)(p.Predefined,{variant:`centerBetween`,style:y.container,children:[(0,_.jsxs)(p.Container,{row:!0,align:`center`,gap:`md`,children:[(0,_.jsx)(g,{index:0,children:`Logo`}),(0,_.jsx)(g,{index:1,children:`Home`}),(0,_.jsx)(g,{index:2,children:`About`}),(0,_.jsx)(g,{index:3,children:`Contact`})]}),(0,_.jsx)(g,{index:4,children:`Login`})]}),(0,_.jsx)(`h3`,{children:`Card Layout`}),(0,_.jsx)(p.Container,{row:!0,wrap:!0,gap:`lg`,style:y.container,children:[1,2,3,4].map(e=>(0,_.jsx)(p.Item,{flex1:!0,style:{minWidth:`200px`},children:(0,_.jsxs)(`div`,{style:{border:`1px solid #ddd`,borderRadius:`8px`,padding:`16px`,textAlign:`center`,backgroundColor:b(e)},children:[(0,_.jsxs)(`h4`,{children:[`Card `,e]}),(0,_.jsx)(`p`,{children:`Card content goes here`})]})},e))}),(0,_.jsx)(`h3`,{children:`Form Layout`}),(0,_.jsxs)(p.Container,{column:!0,gap:`md`,style:y.container,children:[(0,_.jsxs)(p.Container,{row:!0,gap:`md`,children:[(0,_.jsx)(p.Item,{flex1:!0,children:(0,_.jsx)(g,{index:0,children:`First Name`})}),(0,_.jsx)(p.Item,{flex1:!0,children:(0,_.jsx)(g,{index:1,children:`Last Name`})})]}),(0,_.jsx)(g,{index:2,children:`Email`}),(0,_.jsx)(g,{index:3,children:`Message`})]})]}),args:{children:void 0}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
-  render: args => <Flex.Container {...args} style={demoStyles.container} />,
-  args: {
-    children: <>
-                <DemoItem index={0}>Item 1</DemoItem>
-                <DemoItem index={1}>Item 2</DemoItem>
-                <DemoItem index={2}>Item 3</DemoItem>
-            </>,
-    row: true
-  }
-}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
-  render: args => <Flex.Container {...args} style={demoStyles.container} />,
-  args: {
-    children: <>
-                <DemoItem index={0}>Header</DemoItem>
-                <DemoItem index={1}>Content</DemoItem>
-                <DemoItem index={2}>Footer</DemoItem>
-            </>,
-    column: true
-  }
-}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Row (default)</h3>
-            <Flex.Container row style={demoStyles.container}>
-                <DemoItem index={0}>1</DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2}>3</DemoItem>
-            </Flex.Container>
-
-            <h3>Row Reverse</h3>
-            <Flex.Container rowReverse style={demoStyles.container}>
-                <DemoItem index={0}>1</DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2}>3</DemoItem>
-            </Flex.Container>
-
-            <h3>Column</h3>
-            <Flex.Container column style={demoStyles.container}>
-                <DemoItem index={0}>1</DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2}>3</DemoItem>
-            </Flex.Container>
-
-            <h3>Column Reverse</h3>
-            <Flex.Container columnReverse style={demoStyles.container}>
-                <DemoItem index={0}>1</DemoItem>
-                <DemoItem index={1}>2</DemoItem>
-                <DemoItem index={2}>3</DemoItem>
-            </Flex.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            {(["start", "center", "end", "between", "around", "evenly"] as const).map(justify => <div key={justify}>
-                    <h3>Justify: {justify}</h3>
-                    <Flex.Container row justify={justify} style={demoStyles.container}>
-                        <DemoItem index={0}>Item 1</DemoItem>
-                        <DemoItem index={1}>Item 2</DemoItem>
-                        <DemoItem index={2}>Item 3</DemoItem>
-                    </Flex.Container>
-                </div>)}
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            {(["start", "center", "end", "stretch", "baseline"] as const).map(align => <div key={align}>
-                    <h3>Align: {align}</h3>
-                    <Flex.Container row align={align} style={{
-        ...demoStyles.container,
-        height: "120px"
-      }}>
-                        <DemoItem index={0}>
-                            <div>Short</div>
-                        </DemoItem>
-                        <DemoItem index={1}>
-                            <div style={{
-            padding: "40px"
-          }}>Tall</div>
-                        </DemoItem>
-                        <DemoItem index={2}>
-                            <div style={{
-            padding: "24px"
-          }}>Medium</div>
-                        </DemoItem>
-                    </Flex.Container>
-                </div>)}
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>No Wrap (default)</h3>
-            <Flex.Container row nowrap style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
-                        Item {i}
-                    </DemoItem>)}
-            </Flex.Container>
-
-            <h3>Wrap</h3>
-            <Flex.Container row wrap style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
-                        Item {i}
-                    </DemoItem>)}
-            </Flex.Container>
-
-            <h3>Wrap Reverse</h3>
-            <Flex.Container row wrapReverse style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
-                        Item {i}
-                    </DemoItem>)}
-            </Flex.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            {(["xs", "sm", "md", "lg", "xl"] as const).map(gap => <div key={gap}>
-                    <h3>Gap: {gap}</h3>
-                    <Flex.Container row wrap gap={gap} style={demoStyles.container}>
-                        {[1, 2, 3, 4, 5, 6].map(i => <DemoItem key={i} index={i}>
-                                Item {i}
-                            </DemoItem>)}
-                    </Flex.Container>
-                </div>)}
-
-            <h3>Different Row and Column Gaps</h3>
-            <Flex.Container row wrap gapRow="lg" gapColumn="sm" style={demoStyles.container}>
-                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => <DemoItem key={i} index={i}>
-                        Item {i}
-                    </DemoItem>)}
-            </Flex.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...O.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Grow Properties</h3>
-            <Flex.Container row style={demoStyles.container}>
-                <DemoItem index={0}>Default</DemoItem>
-                <Flex.Item grow>
-                    <div style={{
-          ...demoStyles.item,
-          backgroundColor: getItemColor(1)
-        }}>Grow</div>
-                </Flex.Item>
-                <DemoItem index={2}>Default</DemoItem>
-            </Flex.Container>
-
-            <h3>Shrink Properties</h3>
-            <Flex.Container row style={{
-      ...demoStyles.container,
-      width: "300px"
-    }}>
-                <Flex.Item shrink={false}>
-                    <div style={{
-          ...demoStyles.item,
-          backgroundColor: getItemColor(0),
-          width: "150px"
-        }}>
-                        No Shrink
-                    </div>
-                </Flex.Item>
-                <Flex.Item>
-                    <div style={{
-          ...demoStyles.item,
-          backgroundColor: getItemColor(1),
-          width: "150px"
-        }}>
-                        Shrink (default)
-                    </div>
-                </Flex.Item>
-            </Flex.Container>
-
-            <h3>Composite Classes</h3>
-            <Flex.Container row style={demoStyles.container}>
-                <Flex.Item flex0>
-                    <div style={{
-          ...demoStyles.item,
-          backgroundColor: getItemColor(0)
-        }}>flex0</div>
-                </Flex.Item>
-                <Flex.Item flex1>
-                    <div style={{
-          ...demoStyles.item,
-          backgroundColor: getItemColor(1)
-        }}>flex1</div>
-                </Flex.Item>
-                <Flex.Item flex0>
-                    <div style={{
-          ...demoStyles.item,
-          backgroundColor: getItemColor(2)
-        }}>flex0</div>
-                </Flex.Item>
-            </Flex.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...k.parameters?.docs?.source}}},A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Center</h3>
-            <Flex.Predefined variant="center" style={{
-      ...demoStyles.container,
-      height: "100px"
-    }}>
-                <DemoItem index={0}>Centered Content</DemoItem>
-            </Flex.Predefined>
-
-            <h3>Center Between</h3>
-            <Flex.Predefined variant="centerBetween" style={demoStyles.container}>
-                <DemoItem index={0}>Left</DemoItem>
-                <DemoItem index={1}>Right</DemoItem>
-            </Flex.Predefined>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <p>
-                This is text with
-                <Flex.Container inline align="center" gap="sm" style={{
-        margin: "0 8px"
-      }}>
-                    <DemoItem index={0}>inline</DemoItem>
-                    <DemoItem index={1}>flex</DemoItem>
-                </Flex.Container>
-                elements inside.
-            </p>
-
-            <p>
-                Another example with
-                <Flex.Container inline column gap="xs" style={{
-        margin: "0 8px"
-      }}>
-                    <DemoItem index={2}>vertical</DemoItem>
-                    <DemoItem index={3}>inline</DemoItem>
-                </Flex.Container>
-                flex.
-            </p>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...j.parameters?.docs?.source}}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
-  render: () => <div>
-            <h3>Navigation Bar</h3>
-            <Flex.Predefined variant="centerBetween" style={demoStyles.container}>
-                <Flex.Container row align="center" gap="md">
-                    <DemoItem index={0}>Logo</DemoItem>
-                    <DemoItem index={1}>Home</DemoItem>
-                    <DemoItem index={2}>About</DemoItem>
-                    <DemoItem index={3}>Contact</DemoItem>
-                </Flex.Container>
-                <DemoItem index={4}>Login</DemoItem>
-            </Flex.Predefined>
-
-            <h3>Card Layout</h3>
-            <Flex.Container row wrap gap="lg" style={demoStyles.container}>
-                {[1, 2, 3, 4].map(i => <Flex.Item key={i} flex1 style={{
-        minWidth: "200px"
-      }}>
-                        <div style={{
-          border: "1px solid #ddd",
-          borderRadius: "8px",
-          padding: "16px",
-          textAlign: "center",
-          backgroundColor: getItemColor(i)
-        }}>
-                            <h4>Card {i}</h4>
-                            <p>Card content goes here</p>
-                        </div>
-                    </Flex.Item>)}
-            </Flex.Container>
-
-            <h3>Form Layout</h3>
-            <Flex.Container column gap="md" style={demoStyles.container}>
-                <Flex.Container row gap="md">
-                    <Flex.Item flex1>
-                        <DemoItem index={0}>First Name</DemoItem>
-                    </Flex.Item>
-                    <Flex.Item flex1>
-                        <DemoItem index={1}>Last Name</DemoItem>
-                    </Flex.Item>
-                </Flex.Container>
-                <DemoItem index={2}>Email</DemoItem>
-                <DemoItem index={3}>Message</DemoItem>
-            </Flex.Container>
-        </div>,
-  args: {
-    children: undefined
-  }
-}`,...M.parameters?.docs?.source}}},N=[`BasicRow`,`BasicColumn`,`Directions`,`JustifyContent`,`AlignItems`,`Wrapping`,`Gaps`,`FlexItems`,`Predefined`,`InlineFlex`,`RealWorld`]})))()}export{k as a,j as c,M as d,D as f,w as i,T as l,C as n,h as o,P as p,S as r,O as s,E as t,A as u};