npm - @pyreon/coolgrid - Versions diffs - 0.12.11 → 0.12.12 - Mend

@pyreon/coolgrid 0.12.11 → 0.12.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/lib/index.js CHANGED Viewed

@@ -124,7 +124,7 @@ const styles$2 = ({ theme, css: cssFn, rootSize }) => {
     padding: 0;
   `;
 };
-var styled_default$2 = styled$2(component$2)`
+var styled_default$2 = styled$2(component$2, { layer: "elements" })`
   box-sizing: border-box;
   justify-content: stretch;
@@ -245,7 +245,7 @@ const styles$1 = ({ theme: t, css: cssFn, rootSize }) => {
   `;
 };
 /** Styled Container element. Centered via auto margins with responsive max-width. */
-var styled_default$1 = styled$1(component$1)`
+var styled_default$1 = styled$1(component$1, { layer: "elements" })`
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -347,7 +347,7 @@ const styles = ({ theme, css: cssFn, rootSize }) => {
     ${extendCss(extraStyles)};
   `;
 };
-var styled_default = styled(component)`
+var styled_default = styled(component, { layer: "elements" })`
   box-sizing: border-box;
   display: flex;

package/lib/index.js.map CHANGED Viewed

	@@ -1 +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","../../../core/core/lib/jsx-runtime.js","../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","//#region src/h.ts\n/* Marker for fragment nodes — renders children without a wrapper element /\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/\n Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n\n Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n/\n/* Shared empty props sentinel — identity-checked in mountElement to skip applyProps. /\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/\n JSX automatic runtime.\n\n When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n* <div class=\"x\" /> → jsx(\"div\", { class: \"x\" })\n/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","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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"}
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","../../../core/core/lib/jsx-runtime.js","../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, { 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","//#region src/h.ts\n/* Marker for fragment nodes — renders children without a wrapper element /\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/\n Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n\n Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n/\n/* Shared empty props sentinel — identity-checked in mountElement to skip applyProps. /\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/\n JSX automatic runtime.\n\n When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n* <div class=\"x\" /> → jsx(\"div\", { class: \"x\" })\n/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","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, { 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 { 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, { 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 { 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/coolgrid",
-  "version": "0.12.11",
+  "version": "0.12.12",
   "description": "Responsive grid system for Pyreon",
   "license": "MIT",
   "repository": {
@@ -40,15 +40,15 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/typescript": "^0.12.11",
+    "@pyreon/typescript": "^0.12.12",
     "@vitus-labs/tools-rolldown": "^1.15.3"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.12.11",
-    "@pyreon/reactivity": "^0.12.11",
-    "@pyreon/styler": "^0.12.11",
-    "@pyreon/ui-core": "^0.12.11",
-    "@pyreon/unistyle": "^0.12.11"
+    "@pyreon/core": "^0.12.12",
+    "@pyreon/reactivity": "^0.12.12",
+    "@pyreon/styler": "^0.12.12",
+    "@pyreon/ui-core": "^0.12.12",
+    "@pyreon/unistyle": "^0.12.12"
   },
   "engines": {
     "node": ">= 22"

package/src/Col/styled.ts CHANGED Viewed

@@ -88,7 +88,7 @@ const styles: MakeItResponsiveStyles<StyledTypes> = ({ theme, css: cssFn, rootSi
   `
 }
-export default styled(component)`
+export default styled(component, { layer: 'elements' })`
   box-sizing: border-box;
   justify-content: stretch;

package/src/Container/styled.ts CHANGED Viewed

@@ -20,7 +20,7 @@ const styles: MakeItResponsiveStyles<Pick<StyledTypes, 'width' | 'extraStyles'>>
 }
 /** Styled Container element. Centered via auto margins with responsive max-width. */
-export default styled(component)`
+export default styled(component, { layer: 'elements' })`
   display: flex;
   flex-direction: column;
   box-sizing: border-box;

package/src/Row/styled.ts CHANGED Viewed

@@ -53,7 +53,7 @@ const styles: MakeItResponsiveStyles<
   `
 }
-export default styled(component)`
+export default styled(component, { layer: 'elements' })`
   box-sizing: border-box;
   display: flex;