@pyreon/coolgrid 0.12.0 → 0.12.1

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../src/types.ts","../../src/Col/component.tsx","../../src/Container/component.tsx","../../src/Row/component.tsx","../../src/theme.ts"],"mappings":";;;;;KAWK,eAAA,MAAqB,CAAA,GAAI,CAAA,KAAM,OAAA,CAAQ,MAAA,CAAO,cAAA,EAAgB,CAAA;AAAA,KAGvD,KAAA;AAAA,KACA,GAAA,GAAM,UAAA,QAAkB,SAAA;AAAA,KACxB,WAAA,GAAc,eAAA,CAAgB,GAAA;AAAA,KAI9B,SAAA,GAAY,eAAA;AAAA,KACZ,cAAA,GAAiB,eAAA,CAAgB,KAAA;AAAA,KAEjC,aAAA;AAAA,KAQA,kBAAA,GAAqB,OAAA;EAC/B,IAAA,EAAM,SAAA;EACN,OAAA,EAAS,SAAA;EACT,GAAA,EAAK,SAAA;EACL,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,SAAA;EACT,MAAA,EAAQ,WAAA;EACR,MAAA,EAAQ,WAAA;EACR,YAAA,EAAc,WAAA;EACd,YAAA,EAAc,WAAA;EACd,aAAA,EAAe,aAAA;EACf,cAAA,EAAgB,cAAA;EAChB,KAAA,EAAO,cAAA,KAAmB,MAAA,EAAQ,MAAA,kBAAwB,cAAA;AAAA;AAAA,KAGhD,cAAA,GAAiB,kBAAA,GAC3B,OAAA;EACE,SAAA,EAAW,WAAA;EACX,GAAA,EAAK,WAAA;AAAA;AAAA,KAcG,WAAA,uBAAkC,WAAA,CAC5C,IAAA,CAAK,cAAA,EAAgB,CAAA,YAAa,MAAA;EAA4B,QAAA,GAAW,UAAA;AAAA;EAEzE,WAAA;EACA,OAAA;EACA,iBAAA;AAAA;;;cCnDI,SAAA,EAAW,WAAA;;;cCCX,WAAA,EAAW,WAAA;;;cCAX,WAAA,EAAW,WAAA"}

package/lib/index.js

@@ -1,5 +1,5 @@
 import { ALIGN_CONTENT_MAP_X, Provider, context, extendCss, makeItResponsive, value } from "@pyreon/unistyle";
-import { createContext, provide, useContext } from "@pyreon/core";
+import { createContext, provide, splitProps, useContext } from "@pyreon/core";
 import { config, get, omit, pick } from "@pyreon/ui-core";
 import { jsx } from "@pyreon/core/jsx-runtime";
 
@@ -151,24 +151,29 @@ var styled_default$2 = styled$2(component$2)`
 * of the total columns. Supports responsive size, padding, and visibility.
 */
 const DEV_PROPS$2 = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "col" } : {};
-const Component$2 = ({ children, component, css, ...props }) => {
+const Component$2 = (props) => {
+	const [own, rest] = splitProps(props, [
+		"children",
+		"component",
+		"css"
+	]);
 	const { colCss, colComponent, columns, gap, size, padding } = useGridContext({
 		...useContext(RowContext_default),
-		...props
+		...rest
 	});
 	const finalProps = { $coolgrid: {
 		columns,
 		gap,
 		size,
 		padding,
-		extraStyles: css ?? colCss
+		extraStyles: own.css ?? colCss
 	} };
 	return /* @__PURE__ */ jsx(styled_default$2, {
-		...omitCtxKeys(props),
-		as: component ?? colComponent,
+		...omitCtxKeys(rest),
+		as: own.component ?? colComponent,
 		...finalProps,
 		...DEV_PROPS$2,
-		children
+		children: own.children
 	});
 };
 const name$2 = `${PKG_NAME}/Col`;
@@ -217,8 +222,14 @@ var styled_default$1 = styled$1(component$1)`
 * responsive max-width.
 */
 const DEV_PROPS$1 = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "container" } : {};
-const Component$1 = ({ children, component, css, width, ...props }) => {
-	const { containerWidth, columns, size, gap, padding, gutter, colCss, colComponent, rowCss, rowComponent, contentAlignX } = useGridContext(props);
+const Component$1 = (props) => {
+	const [own, rest] = splitProps(props, [
+		"children",
+		"component",
+		"css",
+		"width"
+	]);
+	const { containerWidth, columns, size, gap, padding, gutter, colCss, colComponent, rowCss, rowComponent, contentAlignX } = useGridContext(rest);
 	const context = {
 		columns,
 		size,
@@ -233,19 +244,19 @@ const Component$1 = ({ children, component, css, width, ...props }) => {
 	};
 	const finalProps = { $coolgrid: {
 		width: (() => {
-			if (!width) return containerWidth;
-			if (typeof width === "function") return width(containerWidth);
-			return width;
+			if (!own.width) return containerWidth;
+			if (typeof own.width === "function") return own.width(containerWidth);
+			return own.width;
 		})(),
-		extraStyles: css
+		extraStyles: own.css
 	} };
 	provide(ContainerContext_default, context);
 	return /* @__PURE__ */ jsx(styled_default$1, {
-		...omitCtxKeys(props),
-		as: component,
+		...omitCtxKeys(rest),
+		as: own.component,
 		...finalProps,
 		...DEV_PROPS$1,
-		children
+		children: own.children
 	});
 };
 const name$1 = `${PKG_NAME}/Container`;
@@ -313,10 +324,16 @@ var styled_default = styled(component)`
 * with negative margins to offset column gutters.
 */
 const DEV_PROPS = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "row" } : {};
-const Component = ({ children, component, css, contentAlignX: rowAlignX, ...props }) => {
+const Component = (props) => {
+	const [own, rest] = splitProps(props, [
+		"children",
+		"component",
+		"css",
+		"contentAlignX"
+	]);
 	const { columns, gap, gutter, rowComponent, rowCss, contentAlignX, containerWidth, size, padding, colCss, colComponent } = useGridContext({
 		...useContext(ContainerContext_default),
-		...props
+		...rest
 	});
 	const context = {
 		containerWidth,
@@ -329,19 +346,19 @@ const Component = ({ children, component, css, contentAlignX: rowAlignX, ...prop
 		gutter
 	};
 	const finalProps = { $coolgrid: {
-		contentAlignX: rowAlignX || contentAlignX,
+		contentAlignX: own.contentAlignX || contentAlignX,
 		columns,
 		gap,
 		gutter,
-		extraStyles: css || rowCss
+		extraStyles: own.css || rowCss
 	} };
 	provide(RowContext_default, context);
 	return /* @__PURE__ */ jsx(styled_default, {
-		...omitCtxKeys(props),
-		as: component || rowComponent,
+		...omitCtxKeys(rest),
+		as: own.component || rowComponent,
 		...finalProps,
 		...DEV_PROPS,
-		children
+		children: own.children
 	});
 };
 const name = `${PKG_NAME}/Row`;

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["spacingStyles","styles","component","DEV_PROPS","Component","RowContext","Styled","name","component","styles","component","DEV_PROPS","Component","ContainerContext","Styled","name","component","ContainerContext","RowContext","Styled","component"],"sources":["../src/constants.ts","../src/context/ContainerContext.ts","../src/context/RowContext.ts","../src/useContext.tsx","../src/utils.ts","../src/Col/styled.ts","../src/Col/component.tsx","../src/Col/index.ts","../src/Container/styled.ts","../src/Container/component.tsx","../src/Container/index.ts","../src/Row/styled.ts","../src/Row/component.tsx","../src/Row/index.ts","../src/theme.ts"],"sourcesContent":["export const PKG_NAME = '@pyreon/coolgrid'\n\n/**\n * Grid configuration keys that are passed through context\n * from Container to Row and from Row to Col components.\n */\nexport const CONTEXT_KEYS = [\n  // 'breakpoints',\n  // 'rootSize',\n  'columns',\n  'size',\n  'gap',\n  'padding',\n  'gutter',\n  'colCss',\n  'colComponent',\n  'rowCss',\n  'rowComponent',\n  'contentAlignX',\n]\n","import { createContext } from '@pyreon/core'\nimport type { Context as ContextType } from '../types'\n\n/**\n * Context for container-level grid configuration.\n * Provided by the Container component and consumed by Row children\n * to inherit columns, gap, gutter, and other grid settings.\n */\nexport default createContext<ContextType>({})\n","import { createContext } from '@pyreon/core'\nimport type { Context as ContextType } from '../types'\n\n/**\n * Context for row-level grid configuration.\n * Provided by the Row component and consumed by Col children\n * to inherit columns, gap, gutter, and sizing for width calculations.\n */\nexport default createContext<ContextType>({})\n","import { useContext } from '@pyreon/core'\nimport { get, pick } from '@pyreon/ui-core'\nimport { context } from '@pyreon/unistyle'\nimport { CONTEXT_KEYS } from './constants'\nimport type { Context, Obj, ValueType } from './types'\n\n/**\n * Picks only the recognized grid configuration keys from a props object,\n * filtering out any non-grid props before they enter context resolution.\n */\nexport type PickThemeProps = <T extends Record<string, unknown>>(\n  props: T,\n  keywords: Array<keyof T>,\n) => ReturnType<typeof pick>\nconst pickThemeProps: PickThemeProps = (props, keywords) => pick(props, keywords)\n\n/**\n * Resolves grid columns and container width using a three-layer fallback:\n * 1. Explicit component props (e.g. `columns={6}`)\n * 2. `theme.grid.columns` / `theme.grid.container`\n * 3. `theme.coolgrid.columns` / `theme.coolgrid.container`\n */\ntype GetGridContext = (\n  props: Obj,\n  theme: Obj,\n) => {\n  columns?: ValueType\n  containerWidth?: Record<string, number>\n}\n\nexport const getGridContext: GetGridContext = (props = {}, theme = {}) => ({\n  columns: (get(props, 'columns') ||\n    get(theme, 'grid.columns') ||\n    get(theme, 'coolgrid.columns')) as ValueType,\n  containerWidth: (get(props, 'width') ||\n    get(theme, 'grid.container') ||\n    get(theme, 'coolgrid.container')) as Record<string, number>,\n})\n\n/**\n * Hook that reads the unistyle theme context and merges it with the\n * component's own props to produce the final grid configuration.\n * Applies the three-layer resolution (props -> grid.* -> coolgrid.*).\n */\ntype UseGridContext = (props: Obj) => Context\nconst useGridContext: UseGridContext = (props) => {\n  const getCtx = useContext(context)\n  const { theme } = getCtx()\n  const ctxProps = pickThemeProps(props, CONTEXT_KEYS)\n  const gridContext = getGridContext(ctxProps, theme as Record<string, unknown>)\n\n  return { ...gridContext, ...ctxProps }\n}\n\nexport default useGridContext\n","import { omit } from '@pyreon/ui-core'\nimport { CONTEXT_KEYS } from './constants'\n\n/** Checks whether a value is a finite number. */\nexport const isNumber = (value: unknown): value is number => Number.isFinite(value)\n\n/** Checks whether a value is a finite number greater than zero. */\nexport const hasValue = (value: unknown): boolean => isNumber(value) && value > 0\n\n/**\n * Determines if a column should be visible. A column is visible when its\n * size is undefined (auto) or a non-zero number. Size 0 hides the column.\n */\nexport const isVisible = (value: unknown): boolean =>\n  (isNumber(value) && value !== 0) || value === undefined\n\n/** Returns true when both size and columns are positive numbers, indicating an explicit width can be calculated. */\ntype HasWidth = (size: unknown, columns: unknown) => boolean\nexport const hasWidth: HasWidth = (size, columns) => !!(hasValue(size) && hasValue(columns))\n\n/** Strips grid context keys from a props object so they are not forwarded to the DOM element. */\ntype OmitCtxKeys = (props?: Record<string, any>) => ReturnType<typeof omit>\nexport const omitCtxKeys: OmitCtxKeys = (props) => omit(props, CONTEXT_KEYS)\n","import { config } from '@pyreon/ui-core'\nimport type { MakeItResponsiveStyles } from '@pyreon/unistyle'\nimport { extendCss, makeItResponsive, value } from '@pyreon/unistyle'\nimport type { CssOutput, StyledTypes } from '../types'\nimport { hasValue, isNumber, isVisible } from '../utils'\n\nconst { styled, css, component } = config\n\ntype HasWidth = (size?: number, columns?: number) => boolean\n\n/** Returns true when both size and columns are valid, enabling explicit width calculation. */\nconst hasWidth: HasWidth = (size, columns) => hasValue(size) && hasValue(columns)\n\ntype WidthStyles = (\n  props: Pick<StyledTypes, 'size' | 'columns' | 'gap'>,\n  defaults: { rootSize?: number | undefined },\n) => CssOutput\n\n/**\n * Calculates column width as a percentage of total columns, subtracting\n * the gap when present. Uses `calc(%)` for web.\n */\nconst widthStyles: WidthStyles = ({ size, columns, gap }, { rootSize }) => {\n  if (!hasWidth(size, columns)) {\n    return ''\n  }\n\n  const s = size as number\n  const c = columns as number\n  const g = gap as number\n\n  // calculate % of width\n  const width = (s / c) * 100\n\n  const hasGap = hasValue(gap)\n\n  const val = hasGap ? `calc(${width}% - ${g}px)` : `${width}%`\n\n  const v = value(val, rootSize)\n\n  return css`\n    flex-grow: 0;\n    flex-shrink: 0;\n    max-width: ${v};\n    flex-basis: ${v};\n  `\n}\n\ntype SpacingStyles = (type: 'margin' | 'padding', param?: number, rootSize?: number) => CssOutput\n/** Applies half of the given value as either margin or padding (used for gap and padding distribution). */\nconst spacingStyles: SpacingStyles = (type, param, rootSize) => {\n  if (!isNumber(param)) {\n    return ''\n  }\n\n  const finalStyle = `${type}: ${value((param as number) / 2, rootSize)}`\n\n  return css`\n    ${finalStyle};\n  `\n}\n\n/**\n * Main responsive style block for Col. When the column is visible, applies\n * width, padding, margin, and extra CSS. When hidden (size === 0), moves\n * the element off-screen with fixed positioning.\n */\nconst styles: MakeItResponsiveStyles<StyledTypes> = ({ theme, css: cssFn, rootSize }) => {\n  const { size, columns, gap, padding, extraStyles } = theme\n  const renderStyles = isVisible(size)\n\n  if (renderStyles) {\n    return cssFn`\n      left: initial;\n      position: relative;\n      ${widthStyles({ size, columns, gap }, { rootSize })};\n      ${spacingStyles('padding', padding, rootSize)};\n      ${spacingStyles('margin', gap, rootSize)};\n      ${extendCss(extraStyles)};\n    `\n  }\n\n  return cssFn`\n    left: -9999px;\n    position: fixed;\n    margin: 0;\n    padding: 0;\n  `\n}\n\nexport default styled(component)`\n  box-sizing: border-box;\n  justify-content: stretch;\n\n  position: relative;\n  display: flex;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-direction: column;\n\n  ${makeItResponsive({\n    key: '$coolgrid',\n    styles,\n    css,\n    normalize: true,\n  })};\n`\n","import { splitProps, useContext } from '@pyreon/core'\nimport { PKG_NAME } from '../constants'\nimport { RowContext } from '../context'\nimport type { ElementType } from '../types'\nimport useGridContext from '../useContext'\nimport { omitCtxKeys } from '../utils'\nimport Styled from './styled'\n\n/**\n * Col (column) component that reads grid settings from RowContext\n * (columns, gap, gutter) and calculates its own width as a fraction\n * of the total columns. Supports responsive size, padding, and visibility.\n */\n\nconst DEV_PROPS: Record<string, string> =\n  process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'col' } : {}\n\nconst Component: ElementType<\n  [\n    'containerWidth',\n    'width',\n    'rowComponent',\n    'rowCss',\n    'colCss',\n    'colComponent',\n    'columns',\n    'gap',\n    'gutter',\n    'contentAlignX',\n  ]\n> = (props) => {\n  const [own, rest] = splitProps(props, ['children', 'component', 'css'])\n  const parentCtx = useContext(RowContext)\n  const { colCss, colComponent, columns, gap, size, padding } = useGridContext({\n    ...parentCtx,\n    ...rest,\n  })\n\n  const finalProps = {\n    $coolgrid: {\n      columns,\n      gap,\n      size,\n      padding,\n      extraStyles: own.css ?? colCss,\n    },\n  }\n\n  return (\n    <Styled {...omitCtxKeys(rest)} as={own.component ?? colComponent} {...finalProps} {...DEV_PROPS}>\n      {own.children}\n    </Styled>\n  )\n}\n\nconst name = `${PKG_NAME}/Col`\n\nComponent.displayName = name\nComponent.pkgName = PKG_NAME\nComponent.PYREON__COMPONENT = name\n\nexport default Component\n","import component from './component'\n\nexport default component\n","import { config } from '@pyreon/ui-core'\nimport type { MakeItResponsiveStyles } from '@pyreon/unistyle'\nimport { extendCss, makeItResponsive, value } from '@pyreon/unistyle'\nimport type { StyledTypes } from '../types'\n\nconst { styled, css, component } = config\n\n/** Responsive styles that apply the container's max-width and any extra CSS at each breakpoint. */\nconst styles: MakeItResponsiveStyles<Pick<StyledTypes, 'width' | 'extraStyles'>> = ({\n  theme: t,\n  css: cssFn,\n  rootSize,\n}) => {\n  const w = t.width != null && typeof t.width !== 'object' ? t.width : null\n\n  return cssFn`\n    ${w != null ? `max-width: ${value(w, rootSize)};` : ''};\n    ${extendCss(t.extraStyles)};\n  `\n}\n\n/** Styled Container element. Centered via auto margins with responsive max-width. */\nexport default styled(component)`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n\n  ${makeItResponsive({\n    key: '$coolgrid',\n    styles,\n    css,\n    normalize: true,\n  })};\n`\n","import { provide, splitProps } from '@pyreon/core'\nimport { PKG_NAME } from '../constants'\nimport ContainerContext from '../context/ContainerContext'\nimport type { ElementType } from '../types'\nimport useGridContext from '../useContext'\nimport { omitCtxKeys } from '../utils'\nimport Styled from './styled'\n\n/**\n * Container component that establishes the outermost grid boundary.\n * Resolves grid config from the theme, provides it to descendant Row/Col\n * components via ContainerContext, and renders a styled wrapper with\n * responsive max-width.\n */\n\nconst DEV_PROPS: Record<string, string> =\n  process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'container' } : {}\n\nconst Component: ElementType<['containerWidth']> = (props) => {\n  const [own, rest] = splitProps(props, ['children', 'component', 'css', 'width'])\n  const {\n    containerWidth,\n    columns,\n    size,\n    gap,\n    padding,\n    gutter,\n    colCss,\n    colComponent,\n    rowCss,\n    rowComponent,\n    contentAlignX,\n  } = useGridContext(rest)\n\n  const context = {\n    columns,\n    size,\n    gap,\n    padding,\n    gutter,\n    colCss,\n    colComponent,\n    rowCss,\n    rowComponent,\n    contentAlignX,\n  }\n\n  const finalWidth = (() => {\n    if (!own.width) return containerWidth\n    if (typeof own.width === 'function') return own.width(containerWidth as Record<string, any>)\n    return own.width\n  })()\n\n  const finalProps = {\n    $coolgrid: {\n      width: finalWidth,\n      extraStyles: own.css,\n    },\n  }\n\n  // Provide container context to descendant Row/Col components\n  provide(ContainerContext, context)\n\n  return (\n    <Styled {...omitCtxKeys(rest)} as={own.component} {...finalProps} {...DEV_PROPS}>\n      {own.children}\n    </Styled>\n  )\n}\n\nconst name = `${PKG_NAME}/Container`\n\nComponent.displayName = name\nComponent.pkgName = PKG_NAME\nComponent.PYREON__COMPONENT = name\n\nexport default Component\n","import component from './component'\n\nexport default component\n","import { config } from '@pyreon/ui-core'\nimport type { MakeItResponsiveStyles } from '@pyreon/unistyle'\nimport { ALIGN_CONTENT_MAP_X, extendCss, makeItResponsive, value } from '@pyreon/unistyle'\nimport type { CssOutput, StyledTypes } from '../types'\nimport { isNumber } from '../utils'\n\nconst { styled, css, component } = config\n\n/**\n * Computes negative horizontal margins to compensate for column gap,\n * and vertical margins that account for gutter (inter-row spacing).\n * This creates the classic grid pattern where column gaps cancel out\n * at the row edges.\n */\ntype SpacingStyles = (\n  props: Pick<StyledTypes, 'gap' | 'gutter'>,\n  { rootSize }: { rootSize?: number | undefined },\n) => CssOutput\n\nconst spacingStyles: SpacingStyles = ({ gap, gutter }, { rootSize }) => {\n  if (!isNumber(gap)) return ''\n\n  const g = gap as number\n  const getValue = (param: string | number | null | undefined) => value(param, rootSize)\n\n  const spacingX = (g / 2) * -1\n  const spacingY = isNumber(gutter) ? (gutter as number) - g / 2 : g / 2\n\n  return css`\n    margin: ${getValue(spacingY)} ${getValue(spacingX)};\n  `\n}\n\n/** Maps the contentAlignX prop to a CSS justify-content value. */\nconst contentAlign = (align?: StyledTypes['contentAlignX']) => {\n  if (!align) return ''\n\n  return css`\n    justify-content: ${ALIGN_CONTENT_MAP_X[align]};\n  `\n}\n\n/** Composes spacing, alignment, and extra CSS into a single responsive style block for the Row. */\nconst styles: MakeItResponsiveStyles<\n  Pick<StyledTypes, 'gap' | 'gutter' | 'contentAlignX' | 'extraStyles'>\n> = ({ theme, css: cssFn, rootSize }) => {\n  const { gap, gutter, contentAlignX, extraStyles } = theme\n\n  return cssFn`\n    ${spacingStyles({ gap, gutter }, { rootSize })};\n    ${contentAlign(contentAlignX)};\n    ${extendCss(extraStyles)};\n  `\n}\n\nexport default styled(component)`\n  box-sizing: border-box;\n\n  display: flex;\n  flex-wrap: wrap;\n  align-self: stretch;\n  flex-direction: row;\n\n  ${makeItResponsive({\n    key: '$coolgrid',\n    styles,\n    css,\n    normalize: true,\n  })};\n`\n","import { provide, splitProps, useContext } from '@pyreon/core'\nimport { PKG_NAME } from '../constants'\nimport { ContainerContext, RowContext } from '../context'\nimport type { ElementType } from '../types'\nimport useGridContext from '../useContext'\nimport { omitCtxKeys } from '../utils'\nimport Styled from './styled'\n\n/**\n * Row component that reads inherited config from ContainerContext, merges\n * it with its own props, and provides the resolved grid settings (columns,\n * gap, gutter) to Col children via RowContext. Renders a flex-wrap container\n * with negative margins to offset column gutters.\n */\n\nconst DEV_PROPS: Record<string, string> =\n  process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'row' } : {}\n\nconst Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss']> = (props) => {\n  const [own, rest] = splitProps(props, ['children', 'component', 'css', 'contentAlignX'])\n  const parentCtx = useContext(ContainerContext)\n\n  const {\n    columns,\n    gap,\n    gutter,\n    rowComponent,\n    rowCss,\n    contentAlignX,\n    containerWidth,\n    size,\n    padding,\n    colCss,\n    colComponent,\n  } = useGridContext({ ...parentCtx, ...rest })\n\n  const context = {\n    containerWidth,\n    size,\n    padding,\n    colCss,\n    colComponent,\n    columns,\n    gap,\n    gutter,\n  }\n\n  const finalProps = {\n    $coolgrid: {\n      contentAlignX: own.contentAlignX || contentAlignX,\n      columns,\n      gap,\n      gutter,\n      extraStyles: own.css || rowCss,\n    },\n  }\n\n  // Provide row context to Col children\n  provide(RowContext, context)\n\n  return (\n    <Styled {...omitCtxKeys(rest)} as={own.component || rowComponent} {...finalProps} {...DEV_PROPS}>\n      {own.children}\n    </Styled>\n  )\n}\n\nconst name = `${PKG_NAME}/Row`\n\nComponent.displayName = name\nComponent.pkgName = PKG_NAME\nComponent.PYREON__COMPONENT = name\n\nexport default Component\n","import component from './component'\n\nexport default component\n","/**\n * Default Bootstrap-like grid configuration. Provides 5 breakpoints (xs-xl),\n * a 12-column grid, and responsive container max-widths matching Bootstrap 4.\n */\nexport default {\n  rootSize: 16,\n  breakpoints: {\n    xs: 0,\n    sm: 576,\n    md: 768,\n    lg: 992,\n    xl: 1200,\n  },\n  grid: {\n    columns: 12,\n    container: {\n      xs: '100%',\n      sm: 540,\n      md: 720,\n      lg: 960,\n      xl: 1140,\n    },\n  },\n} as const\n\nexport const defaultBreakpoints: Record<string, number> = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n}\n\nexport const defaultContainerWidths: Record<string, string | number> = {\n  xs: '100%',\n  sm: 540,\n  md: 720,\n  lg: 960,\n  xl: 1140,\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/coolgrid",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Responsive grid system for Pyreon",
   "license": "MIT",
   "repository": {
@@ -10,7 +10,6 @@
   },
   "files": [
     "lib",
-    "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
     "LICENSE",
@@ -41,15 +40,15 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/typescript": "^0.12.0",
+    "@pyreon/typescript": "^0.12.1",
     "@vitus-labs/tools-rolldown": "^1.15.3"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.12.0",
-    "@pyreon/reactivity": "^0.12.0",
-    "@pyreon/styler": "^0.12.0",
-    "@pyreon/ui-core": "^0.12.0",
-    "@pyreon/unistyle": "^0.12.0"
+    "@pyreon/core": "^0.12.1",
+    "@pyreon/reactivity": "^0.12.1",
+    "@pyreon/styler": "^0.12.1",
+    "@pyreon/ui-core": "^0.12.1",
+    "@pyreon/unistyle": "^0.12.1"
   },
   "engines": {
     "node": ">= 22"

package/src/Col/component.tsx

@@ -1,4 +1,4 @@
-import { useContext } from '@pyreon/core'
+import { splitProps, useContext } from '@pyreon/core'
 import { PKG_NAME } from '../constants'
 import { RowContext } from '../context'
 import type { ElementType } from '../types'
@@ -28,11 +28,12 @@ const Component: ElementType<
     'gutter',
     'contentAlignX',
   ]
-> = ({ children, component, css, ...props }) => {
+> = (props) => {
+  const [own, rest] = splitProps(props, ['children', 'component', 'css'])
   const parentCtx = useContext(RowContext)
   const { colCss, colComponent, columns, gap, size, padding } = useGridContext({
     ...parentCtx,
-    ...props,
+    ...rest,
   })
 
   const finalProps = {
@@ -41,13 +42,13 @@ const Component: ElementType<
       gap,
       size,
       padding,
-      extraStyles: css ?? colCss,
+      extraStyles: own.css ?? colCss,
     },
   }
 
   return (
-    <Styled {...omitCtxKeys(props)} as={component ?? colComponent} {...finalProps} {...DEV_PROPS}>
-      {children}
+    <Styled {...omitCtxKeys(rest)} as={own.component ?? colComponent} {...finalProps} {...DEV_PROPS}>
+      {own.children}
     </Styled>
   )
 }

package/src/Container/component.tsx

@@ -1,4 +1,4 @@
-import { provide } from '@pyreon/core'
+import { provide, splitProps } from '@pyreon/core'
 import { PKG_NAME } from '../constants'
 import ContainerContext from '../context/ContainerContext'
 import type { ElementType } from '../types'
@@ -16,13 +16,8 @@ import Styled from './styled'
 const DEV_PROPS: Record<string, string> =
   process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'container' } : {}
 
-const Component: ElementType<['containerWidth']> = ({
-  children,
-  component,
-  css,
-  width,
-  ...props
-}) => {
+const Component: ElementType<['containerWidth']> = (props) => {
+  const [own, rest] = splitProps(props, ['children', 'component', 'css', 'width'])
   const {
     containerWidth,
     columns,
@@ -35,7 +30,7 @@ const Component: ElementType<['containerWidth']> = ({
     rowCss,
     rowComponent,
     contentAlignX,
-  } = useGridContext(props)
+  } = useGridContext(rest)
 
   const context = {
     columns,
@@ -51,15 +46,15 @@ const Component: ElementType<['containerWidth']> = ({
   }
 
   const finalWidth = (() => {
-    if (!width) return containerWidth
-    if (typeof width === 'function') return width(containerWidth as Record<string, any>)
-    return width
+    if (!own.width) return containerWidth
+    if (typeof own.width === 'function') return own.width(containerWidth as Record<string, any>)
+    return own.width
   })()
 
   const finalProps = {
     $coolgrid: {
       width: finalWidth,
-      extraStyles: css,
+      extraStyles: own.css,
     },
   }
 
@@ -67,8 +62,8 @@ const Component: ElementType<['containerWidth']> = ({
   provide(ContainerContext, context)
 
   return (
-    <Styled {...omitCtxKeys(props)} as={component} {...finalProps} {...DEV_PROPS}>
-      {children}
+    <Styled {...omitCtxKeys(rest)} as={own.component} {...finalProps} {...DEV_PROPS}>
+      {own.children}
     </Styled>
   )
 }

package/src/Row/component.tsx

@@ -1,4 +1,4 @@
-import { provide, useContext } from '@pyreon/core'
+import { provide, splitProps, useContext } from '@pyreon/core'
 import { PKG_NAME } from '../constants'
 import { ContainerContext, RowContext } from '../context'
 import type { ElementType } from '../types'
@@ -16,13 +16,8 @@ import Styled from './styled'
 const DEV_PROPS: Record<string, string> =
   process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'row' } : {}
 
-const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss']> = ({
-  children,
-  component,
-  css,
-  contentAlignX: rowAlignX,
-  ...props
-}) => {
+const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss']> = (props) => {
+  const [own, rest] = splitProps(props, ['children', 'component', 'css', 'contentAlignX'])
   const parentCtx = useContext(ContainerContext)
 
   const {
@@ -37,7 +32,7 @@ const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss
     padding,
     colCss,
     colComponent,
-  } = useGridContext({ ...parentCtx, ...props })
+  } = useGridContext({ ...parentCtx, ...rest })
 
   const context = {
     containerWidth,
@@ -52,11 +47,11 @@ const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss
 
   const finalProps = {
     $coolgrid: {
-      contentAlignX: rowAlignX || contentAlignX,
+      contentAlignX: own.contentAlignX || contentAlignX,
       columns,
       gap,
       gutter,
-      extraStyles: css || rowCss,
+      extraStyles: own.css || rowCss,
     },
   }
 
@@ -64,8 +59,8 @@ const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss
   provide(RowContext, context)
 
   return (
-    <Styled {...omitCtxKeys(props)} as={component || rowComponent} {...finalProps} {...DEV_PROPS}>
-      {children}
+    <Styled {...omitCtxKeys(rest)} as={own.component || rowComponent} {...finalProps} {...DEV_PROPS}>
+      {own.children}
     </Styled>
   )
 }