@pyreon/coolgrid 0.29.0 → 0.32.0

package/README.md

@@ -175,7 +175,7 @@ Swap any layer's root element via `component`:
 
 ## Documentation
 
-Full docs: [docs.pyreon.dev/docs/coolgrid](https://docs.pyreon.dev/docs/coolgrid) (or `docs/docs/coolgrid.md` in this repo).
+Full docs: [docs.pyreon.dev/docs/coolgrid](https://docs.pyreon.dev/docs/coolgrid) (or `docs/src/content/docs/coolgrid.md` in this repo).
 
 ## License
 

package/lib/index.d.ts.map

@@ -1 +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,UAAU,QAAQ,SAAA;AAAA,KACxB,WAAA,GAAc,eAAe,CAAC,GAAA;AAAA,KAI9B,SAAA,GAAY,eAAe;AAAA,KAC3B,cAAA,GAAiB,eAAe,CAAC,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,WAAW;;;cCCtB,WAAA,EAAW,WAAW;;;cCAtB,WAAA,EAAW,WAAW"}
+{"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,UAAU,QAAQ,SAAA;AAAA,KACxB,WAAA,GAAc,eAAe,CAAC,GAAA;AAAA,KAI9B,SAAA,GAAY,eAAe;AAAA,KAC3B,cAAA,GAAiB,eAAe,CAAC,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,KAgBG,WAAA,uBAAkC,WAAA,CAC5C,IAAA,CAAK,cAAA,EAAgB,CAAA,YAAa,MAAA;EAA4B,QAAA,GAAW,UAAA;AAAA;EAEzE,WAAA;EACA,OAAA;EACA,iBAAA;AAAA;;;cCrDI,SAAA,EAAW,WAAW;;;cCCtB,WAAA,EAAW,WAAW;;;cCAtB,WAAA,EAAW,WAAW"}

package/lib/index.js

@@ -62,6 +62,13 @@ const isNumber = (value) => Number.isFinite(value);
 /** Checks whether a value is a finite number greater than zero. */
 const hasValue = (value) => isNumber(value) && value > 0;
 /**
+* A CSS-variables-mode value — a `var(…)`/`calc(…)` reference string produced
+* by the cssVariables theming mode (unistyle's `themeToCssVars` leaves /
+* rocketstyle's mode pairs). Grid math can't run JS arithmetic on these;
+* the styled helpers express the same split with native CSS `calc()`.
+*/
+const isCssVarValue = (value) => typeof value === "string" && (value.startsWith("var(") || value.startsWith("calc("));
+/**
 * Determines if a column should be visible. A column is visible when its
 * size is undefined (auto) or a non-zero number. Size 0 hides the column.
 */
@@ -83,7 +90,8 @@ const widthStyles = ({ size, columns, gap }, { rootSize }) => {
 	const c = columns;
 	const g = gap;
 	const width = s / c * 100;
-	const v = value(hasValue(gap) ? `calc(${width}% - ${g}px)` : `${width}%`, rootSize);
+	const hasGap = hasValue(gap);
+	const v = value(isCssVarValue(gap) ? `calc(${width}% - ${gap})` : hasGap ? `calc(${width}% - ${g}px)` : `${width}%`, rootSize);
 	return css$2`
     flex-grow: 0;
     flex-shrink: 0;
@@ -93,6 +101,9 @@ const widthStyles = ({ size, columns, gap }, { rootSize }) => {
 };
 /** Applies half of the given value as either margin or padding (used for gap and padding distribution). */
 const spacingStyles$1 = (type, param, rootSize) => {
+	if (isCssVarValue(param)) return css$2`
+      ${`${type}: calc(${param} * 0.5)`};
+    `;
 	if (!isNumber(param)) return "";
 	return css$2`
     ${`${type}: ${value(param / 2, rootSize)}`};
@@ -274,6 +285,12 @@ var Container_default = Component$1;
 //#region src/Row/styled.ts
 const { styled, css, component } = config;
 const spacingStyles = ({ gap, gutter }, { rootSize }) => {
+	if (isCssVarValue(gap)) {
+		const spacingX = `calc(${gap} * -0.5)`;
+		return css`
+      margin: ${isCssVarValue(gutter) ? `calc(${gutter} - ${gap} * 0.5)` : isNumber(gutter) ? `calc(${value(gutter, rootSize)} - ${gap} * 0.5)` : `calc(${gap} * 0.5)`} ${spacingX};
+    `;
+	}
 	if (!isNumber(gap)) return "";
 	const g = gap;
 	const getValue = (param) => value(param, rootSize);

package/lib/index.js.map

@@ -1 +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 * 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  // `props` is always a plain object (callers pass a `pick()` result or a\n  // user-supplied object literal), so direct property access is safe and\n  // skips `get`'s path-parsing for these single-key lookups. Ported from\n  // vitus-labs `55402572`. Two `get` calls per `getGridContext` invocation\n  // saved; fires once per Container/Row/Col render.\n  columns: ((props as Obj).columns ||\n    get(theme, 'grid.columns') ||\n    get(theme, 'coolgrid.columns')) as ValueType,\n  containerWidth: ((props as Obj).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  // Direct `pick` (vs the `pickThemeProps` one-liner wrapper that was\n  // removed in vitus-labs `55402572`) saves one function call per render.\n  const ctxProps = pick(props, CONTEXT_KEYS as Array<keyof typeof props>)\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, { layer: 'elements' })`\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\n/* v8 ignore next — production branch not exercised in tests */\nconst DEV_PROPS: Record<string, string> = 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, { layer: 'elements' })`\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 { nativeCompat, 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\n/* v8 ignore next — production branch not exercised in tests */\nconst DEV_PROPS: Record<string, string> = 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\n// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so\n// Container's provide(ContainerContext, ...) reaches descendant Row/Col.\nnativeCompat(Component)\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, { layer: 'elements' })`\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 { nativeCompat, 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\n/* v8 ignore next — production branch not exercised in tests */\nconst DEV_PROPS: Record<string, string> = 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\n// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so\n// Row's useContext(ContainerContext) read + provide(RowContext, ...) reach\n// Pyreon's setup frame.\nnativeCompat(Component)\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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"}
+{"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 * 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  // `props` is always a plain object (callers pass a `pick()` result or a\n  // user-supplied object literal), so direct property access is safe and\n  // skips `get`'s path-parsing for these single-key lookups. Ported from\n  // vitus-labs `55402572`. Two `get` calls per `getGridContext` invocation\n  // saved; fires once per Container/Row/Col render.\n  columns: ((props as Obj).columns ||\n    get(theme, 'grid.columns') ||\n    get(theme, 'coolgrid.columns')) as ValueType,\n  containerWidth: ((props as Obj).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  // Direct `pick` (vs the `pickThemeProps` one-liner wrapper that was\n  // removed in vitus-labs `55402572`) saves one function call per render.\n  const ctxProps = pick(props, CONTEXT_KEYS as Array<keyof typeof props>)\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 * A CSS-variables-mode value — a `var(…)`/`calc(…)` reference string produced\n * by the cssVariables theming mode (unistyle's `themeToCssVars` leaves /\n * rocketstyle's mode pairs). Grid math can't run JS arithmetic on these;\n * the styled helpers express the same split with native CSS `calc()`.\n */\nexport const isCssVarValue = (value: unknown): value is string =>\n  typeof value === 'string' && (value.startsWith('var(') || value.startsWith('calc('))\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, isCssVarValue, 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  // CSS-variables mode: the var reference already carries its unit — never\n  // append `px` (that would emit the malformed `var(--x)px`).\n  const val = isCssVarValue(gap)\n    ? `calc(${width}% - ${gap})`\n    : hasGap\n      ? `calc(${width}% - ${g}px)`\n      : `${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 = (\n  type: 'margin' | 'padding',\n  param?: number | string,\n  rootSize?: number,\n) => 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 (isCssVarValue(param)) {\n    // CSS-variables mode: halve via native calc() — JS division would NaN.\n    // (Multiplication for consistency with Row — see the calc divisor note.)\n    return css`\n      ${`${type}: calc(${param} * 0.5)`};\n    `\n  }\n\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, { layer: 'elements' })`\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\n/* v8 ignore next — production branch not exercised in tests */\nconst DEV_PROPS: Record<string, string> = 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, { layer: 'elements' })`\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 { nativeCompat, 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\n/* v8 ignore next — production branch not exercised in tests */\nconst DEV_PROPS: Record<string, string> = 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\n// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so\n// Container's provide(ContainerContext, ...) reaches descendant Row/Col.\nnativeCompat(Component)\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 { isCssVarValue, 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 (isCssVarValue(gap)) {\n    // CSS-variables mode: the gap is a var()/calc() reference — express the\n    // split with native CSS calc() instead of JS arithmetic (which would\n    // produce NaN; pre-fix this path silently SKIPPED all spacing).\n    // NOTE: multiplication, not division — `calc(x / -2)` is invalid CSS\n    // (divisor must be positive in Chromium's parser) and one invalid\n    // component would drop the WHOLE margin shorthand.\n    const spacingX = `calc(${gap} * -0.5)`\n    const spacingY = isCssVarValue(gutter)\n      ? `calc(${gutter} - ${gap} * 0.5)`\n      : isNumber(gutter)\n        ? `calc(${value(gutter, rootSize)} - ${gap} * 0.5)`\n        : `calc(${gap} * 0.5)`\n\n    return css`\n      margin: ${spacingY} ${spacingX};\n    `\n  }\n\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, { layer: 'elements' })`\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 { nativeCompat, 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\n/* v8 ignore next — production branch not exercised in tests */\nconst DEV_PROPS: Record<string, string> = 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\n// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so\n// Row's useContext(ContainerContext) read + provide(RowContext, ...) reach\n// Pyreon's setup frame.\nnativeCompat(Component)\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.29.0",
+  "version": "0.32.0",
   "description": "Responsive grid system for Pyreon",
   "license": "MIT",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/ui-system/coolgrid#readme",
@@ -40,18 +40,18 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.29.0",
-    "@pyreon/reactivity": "^0.29.0"
+    "@pyreon/core": "^0.32.0",
+    "@pyreon/reactivity": "^0.32.0"
   },
   "dependencies": {
-    "@pyreon/styler": "^0.29.0",
-    "@pyreon/ui-core": "^0.29.0",
-    "@pyreon/unistyle": "^0.29.0"
+    "@pyreon/styler": "^0.32.0",
+    "@pyreon/ui-core": "^0.32.0",
+    "@pyreon/unistyle": "^0.32.0"
   },
   "devDependencies": {
-    "@pyreon/test-utils": "^0.13.17",
-    "@pyreon/typescript": "^0.29.0",
-    "@pyreon/vitest-config": "0.13.2",
+    "@pyreon/test-utils": "^0.13.20",
+    "@pyreon/typescript": "^0.32.0",
+    "@pyreon/vitest-config": "0.13.3",
     "@vitest/browser-playwright": "^4.1.8",
     "@vitus-labs/tools-rolldown": "^2.5.0"
   },