@pyreon/coolgrid 0.11.5 → 0.11.6

package/README.md

@@ -29,10 +29,7 @@ Provider({
   theme,
   children: Container({
     children: Row({
-      children: [
-        Col({ size: 8, children: 'Main content' }),
-        Col({ size: 4, children: 'Sidebar' }),
-      ],
+      children: [Col({ size: 8, children: 'Main content' }), Col({ size: 4, children: 'Sidebar' })],
     }),
   }),
 })
@@ -54,16 +51,16 @@ Container({
 })
 ```
 
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| columns | `number` | Number of grid columns (default: 12) |
-| gap | `number` | Space between columns |
-| gutter | `number` | Outer gutter (negative margin offset on Row) |
-| padding | `number` | Column inner padding |
-| width | `value \| function` | Override container max-width |
-| component | `ComponentFn` | Custom root element |
-| css | `ExtendCss` | Extend container styling |
-| contentAlignX | `AlignX` | Horizontal alignment of columns |
+| Prop          | Type                | Description                                  |
+| ------------- | ------------------- | -------------------------------------------- |
+| columns       | `number`            | Number of grid columns (default: 12)         |
+| gap           | `number`            | Space between columns                        |
+| gutter        | `number`            | Outer gutter (negative margin offset on Row) |
+| padding       | `number`            | Column inner padding                         |
+| width         | `value \| function` | Override container max-width                 |
+| component     | `ComponentFn`       | Custom root element                          |
+| css           | `ExtendCss`         | Extend container styling                     |
+| contentAlignX | `AlignX`            | Horizontal alignment of columns              |
 
 All configuration props cascade to Row and Col through context.
 
@@ -75,10 +72,7 @@ Flex wrapper with column management. Inherits Container config and can override
 Row({
   size: { xs: 12, md: 6 },
   contentAlignX: 'center',
-  children: [
-    Col({ children: 'Column 1' }),
-    Col({ children: 'Column 2' }),
-  ],
+  children: [Col({ children: 'Column 1' }), Col({ children: 'Column 2' })],
 })
 ```
 
@@ -88,19 +82,16 @@ Setting `size` on Row applies it to all Cols inside:
 // All columns are 6 of 12
 Row({
   size: 6,
-  children: [
-    Col({ children: 'Half' }),
-    Col({ children: 'Half' }),
-  ],
+  children: [Col({ children: 'Half' }), Col({ children: 'Half' })],
 })
 ```
 
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| size | `number` | Default column size for all Cols inside |
-| component | `ComponentFn` | Custom row element |
-| css | `ExtendCss` | Extend row styling |
-| contentAlignX | `AlignX` | Override horizontal alignment |
+| Prop          | Type          | Description                             |
+| ------------- | ------------- | --------------------------------------- |
+| size          | `number`      | Default column size for all Cols inside |
+| component     | `ComponentFn` | Custom row element                      |
+| css           | `ExtendCss`   | Extend row styling                      |
+| contentAlignX | `AlignX`      | Override horizontal alignment           |
 
 ### Col
 
@@ -117,12 +108,12 @@ Col({ size: { xs: 12, sm: 6, lg: 4 }, children: 'Responsive' })
 Col({ size: { xs: 0, md: 6 }, children: 'Hidden on xs' })
 ```
 
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| size | `number` | Column span (e.g. 4 of 12) |
-| padding | `number` | Override column inner padding |
-| component | `ComponentFn` | Custom column element |
-| css | `ExtendCss` | Extend column styling |
+| Prop      | Type          | Description                   |
+| --------- | ------------- | ----------------------------- |
+| size      | `number`      | Column span (e.g. 4 of 12)    |
+| padding   | `number`      | Override column inner padding |
+| component | `ComponentFn` | Custom column element         |
+| css       | `ExtendCss`   | Extend column styling         |
 
 ## Configuration
 
@@ -139,7 +130,9 @@ Provider({
       wide: 1440,
     },
   },
-  children: [/* ... */],
+  children: [
+    /* ... */
+  ],
 })
 ```
 
@@ -149,10 +142,7 @@ Provider({
 Container({
   columns: 24,
   children: Row({
-    children: [
-      Col({ size: 16, children: 'Two thirds' }),
-      Col({ size: 8, children: 'One third' }),
-    ],
+    children: [Col({ size: 16, children: 'Two thirds' }), Col({ size: 8, children: 'One third' })],
   }),
 })
 ```
@@ -201,13 +191,13 @@ Col({ size: { xs: 12, md: 6, lg: 4 } })
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | >= 0.0.1 |
+| Package            | Version  |
+| ------------------ | -------- |
+| @pyreon/core       | >= 0.0.1 |
 | @pyreon/reactivity | >= 0.0.1 |
-| @pyreon/ui-core | >= 0.0.1 |
-| @pyreon/unistyle | >= 0.0.1 |
-| @pyreon/styler | >= 0.0.1 |
+| @pyreon/ui-core    | >= 0.0.1 |
+| @pyreon/unistyle   | >= 0.0.1 |
+| @pyreon/styler     | >= 0.0.1 |
 
 ## License
 

package/lib/index.d.ts

@@ -9,7 +9,7 @@ type Css = Parameters<typeof extendCss>[0];
 type ExtraStyles = CreateValueType<Css>;
 type ValueType = CreateValueType<number>;
 type ContainerWidth = CreateValueType<Value>;
-type ContentAlignX = "center" | "left" | "right" | "spaceAround" | "spaceBetween" | "spaceEvenly";
+type ContentAlignX = 'center' | 'left' | 'right' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';
 type ConfigurationProps = Partial<{
   size: ValueType;
   padding: ValueType;
@@ -37,13 +37,13 @@ type ElementType<O extends string[]> = ComponentFn<Omit<ComponentProps, O[number
 };
 //#endregion
 //#region src/Col/component.d.ts
-declare const Component: ElementType<["containerWidth", "width", "rowComponent", "rowCss", "colCss", "colComponent", "columns", "gap", "gutter", "contentAlignX"]>;
+declare const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss', 'colCss', 'colComponent', 'columns', 'gap', 'gutter', 'contentAlignX']>;
 //#endregion
 //#region src/Container/component.d.ts
-declare const Component$1: ElementType<["containerWidth"]>;
+declare const Component$1: ElementType<['containerWidth']>;
 //#endregion
 //#region src/Row/component.d.ts
-declare const Component$2: ElementType<["containerWidth", "width", "rowComponent", "rowCss"]>;
+declare const Component$2: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss']>;
 //#endregion
 //#region src/theme.d.ts
 /**

package/lib/index.js

@@ -48,7 +48,7 @@ const getGridContext = (props = {}, theme = {}) => ({
 	containerWidth: get(props, "width") || get(theme, "grid.container") || get(theme, "coolgrid.container")
 });
 const useGridContext = (props) => {
-	const { theme } = useContext(context);
+	const { theme } = useContext(context)();
 	const ctxProps = pickThemeProps(props, CONTEXT_KEYS);
 	return {
 		...getGridContext(ctxProps, theme),

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/coolgrid",
-  "version": "0.11.5",
+  "version": "0.11.6",
+  "description": "Responsive grid system for Pyreon",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/coolgrid"
   },
-  "description": "Responsive grid system for Pyreon",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,21 +34,24 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/typescript": "^0.11.6",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5",
-    "@pyreon/ui-core": "^0.11.5",
-    "@pyreon/unistyle": "^0.11.5",
-    "@pyreon/styler": "^0.11.5"
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6",
+    "@pyreon/styler": "^0.11.6",
+    "@pyreon/ui-core": "^0.11.6",
+    "@pyreon/unistyle": "^0.11.6"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/Col/component.tsx

@@ -1,10 +1,10 @@
-import { useContext } from "@pyreon/core"
-import { PKG_NAME } from "../constants"
-import { RowContext } from "../context"
-import type { ElementType } from "../types"
-import useGridContext from "../useContext"
-import { omitCtxKeys } from "../utils"
-import Styled from "./styled"
+import { useContext } from '@pyreon/core'
+import { PKG_NAME } from '../constants'
+import { RowContext } from '../context'
+import type { ElementType } from '../types'
+import useGridContext from '../useContext'
+import { omitCtxKeys } from '../utils'
+import Styled from './styled'
 
 /**
  * Col (column) component that reads grid settings from RowContext
@@ -13,20 +13,20 @@ import Styled from "./styled"
  */
 
 const DEV_PROPS: Record<string, string> =
-  process.env.NODE_ENV !== "production" ? { "data-coolgrid": "col" } : {}
+  process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'col' } : {}
 
 const Component: ElementType<
   [
-    "containerWidth",
-    "width",
-    "rowComponent",
-    "rowCss",
-    "colCss",
-    "colComponent",
-    "columns",
-    "gap",
-    "gutter",
-    "contentAlignX",
+    'containerWidth',
+    'width',
+    'rowComponent',
+    'rowCss',
+    'colCss',
+    'colComponent',
+    'columns',
+    'gap',
+    'gutter',
+    'contentAlignX',
   ]
 > = ({ children, component, css, ...props }) => {
   const parentCtx = useContext(RowContext)

package/src/Col/index.ts

@@ -1,3 +1,3 @@
-import component from "./component"
+import component from './component'
 
 export default component

package/src/Col/styled.ts

@@ -1,8 +1,8 @@
-import { config } from "@pyreon/ui-core"
-import type { MakeItResponsiveStyles } from "@pyreon/unistyle"
-import { extendCss, makeItResponsive, value } from "@pyreon/unistyle"
-import type { CssOutput, StyledTypes } from "../types"
-import { hasValue, isNumber, isVisible } from "../utils"
+import { config } from '@pyreon/ui-core'
+import type { MakeItResponsiveStyles } from '@pyreon/unistyle'
+import { extendCss, makeItResponsive, value } from '@pyreon/unistyle'
+import type { CssOutput, StyledTypes } from '../types'
+import { hasValue, isNumber, isVisible } from '../utils'
 
 const { styled, css, component } = config
 
@@ -12,7 +12,7 @@ type HasWidth = (size?: number, columns?: number) => boolean
 const hasWidth: HasWidth = (size, columns) => hasValue(size) && hasValue(columns)
 
 type WidthStyles = (
-  props: Pick<StyledTypes, "size" | "columns" | "gap">,
+  props: Pick<StyledTypes, 'size' | 'columns' | 'gap'>,
   defaults: { rootSize?: number | undefined },
 ) => CssOutput
 
@@ -22,7 +22,7 @@ type WidthStyles = (
  */
 const widthStyles: WidthStyles = ({ size, columns, gap }, { rootSize }) => {
   if (!hasWidth(size, columns)) {
-    return ""
+    return ''
   }
 
   const s = size as number
@@ -46,11 +46,11 @@ const widthStyles: WidthStyles = ({ size, columns, gap }, { rootSize }) => {
   `
 }
 
-type SpacingStyles = (type: "margin" | "padding", param?: number, rootSize?: number) => CssOutput
+type SpacingStyles = (type: 'margin' | 'padding', param?: number, rootSize?: number) => CssOutput
 /** Applies half of the given value as either margin or padding (used for gap and padding distribution). */
 const spacingStyles: SpacingStyles = (type, param, rootSize) => {
   if (!isNumber(param)) {
-    return ""
+    return ''
   }
 
   const finalStyle = `${type}: ${value((param as number) / 2, rootSize)}`
@@ -74,8 +74,8 @@ const styles: MakeItResponsiveStyles<StyledTypes> = ({ theme, css: cssFn, rootSi
       left: initial;
       position: relative;
       ${widthStyles({ size, columns, gap }, { rootSize })};
-      ${spacingStyles("padding", padding, rootSize)};
-      ${spacingStyles("margin", gap, rootSize)};
+      ${spacingStyles('padding', padding, rootSize)};
+      ${spacingStyles('margin', gap, rootSize)};
       ${extendCss(extraStyles)};
     `
   }
@@ -99,7 +99,7 @@ export default styled(component)`
   flex-direction: column;
 
   ${makeItResponsive({
-    key: "$coolgrid",
+    key: '$coolgrid',
     styles,
     css,
     normalize: true,

package/src/Container/component.tsx

@@ -1,10 +1,10 @@
-import { provide } from "@pyreon/core"
-import { PKG_NAME } from "../constants"
-import ContainerContext from "../context/ContainerContext"
-import type { ElementType } from "../types"
-import useGridContext from "../useContext"
-import { omitCtxKeys } from "../utils"
-import Styled from "./styled"
+import { provide } from '@pyreon/core'
+import { PKG_NAME } from '../constants'
+import ContainerContext from '../context/ContainerContext'
+import type { ElementType } from '../types'
+import useGridContext from '../useContext'
+import { omitCtxKeys } from '../utils'
+import Styled from './styled'
 
 /**
  * Container component that establishes the outermost grid boundary.
@@ -14,9 +14,9 @@ import Styled from "./styled"
  */
 
 const DEV_PROPS: Record<string, string> =
-  process.env.NODE_ENV !== "production" ? { "data-coolgrid": "container" } : {}
+  process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'container' } : {}
 
-const Component: ElementType<["containerWidth"]> = ({
+const Component: ElementType<['containerWidth']> = ({
   children,
   component,
   css,
@@ -52,7 +52,7 @@ const Component: ElementType<["containerWidth"]> = ({
 
   const finalWidth = (() => {
     if (!width) return containerWidth
-    if (typeof width === "function") return width(containerWidth as Record<string, any>)
+    if (typeof width === 'function') return width(containerWidth as Record<string, any>)
     return width
   })()
 

package/src/Container/index.ts

@@ -1,3 +1,3 @@
-import component from "./component"
+import component from './component'
 
 export default component

package/src/Container/styled.ts

@@ -1,20 +1,20 @@
-import { config } from "@pyreon/ui-core"
-import type { MakeItResponsiveStyles } from "@pyreon/unistyle"
-import { extendCss, makeItResponsive, value } from "@pyreon/unistyle"
-import type { StyledTypes } from "../types"
+import { config } from '@pyreon/ui-core'
+import type { MakeItResponsiveStyles } from '@pyreon/unistyle'
+import { extendCss, makeItResponsive, value } from '@pyreon/unistyle'
+import type { StyledTypes } from '../types'
 
 const { styled, css, component } = config
 
 /** Responsive styles that apply the container's max-width and any extra CSS at each breakpoint. */
-const styles: MakeItResponsiveStyles<Pick<StyledTypes, "width" | "extraStyles">> = ({
+const styles: MakeItResponsiveStyles<Pick<StyledTypes, 'width' | 'extraStyles'>> = ({
   theme: t,
   css: cssFn,
   rootSize,
 }) => {
-  const w = t.width != null && typeof t.width !== "object" ? t.width : null
+  const w = t.width != null && typeof t.width !== 'object' ? t.width : null
 
   return cssFn`
-    ${w != null ? `max-width: ${value(w, rootSize)};` : ""};
+    ${w != null ? `max-width: ${value(w, rootSize)};` : ''};
     ${extendCss(t.extraStyles)};
   `
 }
@@ -29,7 +29,7 @@ export default styled(component)`
   margin-left: auto;
 
   ${makeItResponsive({
-    key: "$coolgrid",
+    key: '$coolgrid',
     styles,
     css,
     normalize: true,

package/src/Container/utils.ts

@@ -1,4 +1,4 @@
-import { get } from "@pyreon/ui-core"
+import { get } from '@pyreon/ui-core'
 
 /**
  * Resolves the container max-width map using a three-layer fallback:
@@ -10,4 +10,4 @@ type GetContainerWidth = (
 ) => ReturnType<typeof get>
 
 export const getContainerWidth: GetContainerWidth = (props, theme) =>
-  get(props, "width") || get(theme, "grid.container") || get(theme, "coolgrid.container")
+  get(props, 'width') || get(theme, 'grid.container') || get(theme, 'coolgrid.container')

package/src/Row/component.tsx

@@ -1,10 +1,10 @@
-import { provide, useContext } from "@pyreon/core"
-import { PKG_NAME } from "../constants"
-import { ContainerContext, RowContext } from "../context"
-import type { ElementType } from "../types"
-import useGridContext from "../useContext"
-import { omitCtxKeys } from "../utils"
-import Styled from "./styled"
+import { provide, useContext } from '@pyreon/core'
+import { PKG_NAME } from '../constants'
+import { ContainerContext, RowContext } from '../context'
+import type { ElementType } from '../types'
+import useGridContext from '../useContext'
+import { omitCtxKeys } from '../utils'
+import Styled from './styled'
 
 /**
  * Row component that reads inherited config from ContainerContext, merges
@@ -14,9 +14,9 @@ import Styled from "./styled"
  */
 
 const DEV_PROPS: Record<string, string> =
-  process.env.NODE_ENV !== "production" ? { "data-coolgrid": "row" } : {}
+  process.env.NODE_ENV !== 'production' ? { 'data-coolgrid': 'row' } : {}
 
-const Component: ElementType<["containerWidth", "width", "rowComponent", "rowCss"]> = ({
+const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss']> = ({
   children,
   component,
   css,

package/src/Row/index.ts

@@ -1,3 +1,3 @@
-import component from "./component"
+import component from './component'
 
 export default component

package/src/Row/styled.ts

@@ -1,8 +1,8 @@
-import { config } from "@pyreon/ui-core"
-import type { MakeItResponsiveStyles } from "@pyreon/unistyle"
-import { ALIGN_CONTENT_MAP_X, extendCss, makeItResponsive, value } from "@pyreon/unistyle"
-import type { CssOutput, StyledTypes } from "../types"
-import { isNumber } from "../utils"
+import { config } from '@pyreon/ui-core'
+import type { MakeItResponsiveStyles } from '@pyreon/unistyle'
+import { ALIGN_CONTENT_MAP_X, extendCss, makeItResponsive, value } from '@pyreon/unistyle'
+import type { CssOutput, StyledTypes } from '../types'
+import { isNumber } from '../utils'
 
 const { styled, css, component } = config
 
@@ -13,12 +13,12 @@ const { styled, css, component } = config
  * at the row edges.
  */
 type SpacingStyles = (
-  props: Pick<StyledTypes, "gap" | "gutter">,
+  props: Pick<StyledTypes, 'gap' | 'gutter'>,
   { rootSize }: { rootSize?: number | undefined },
 ) => CssOutput
 
 const spacingStyles: SpacingStyles = ({ gap, gutter }, { rootSize }) => {
-  if (!isNumber(gap)) return ""
+  if (!isNumber(gap)) return ''
 
   const g = gap as number
   const getValue = (param: string | number | null | undefined) => value(param, rootSize)
@@ -32,8 +32,8 @@ const spacingStyles: SpacingStyles = ({ gap, gutter }, { rootSize }) => {
 }
 
 /** Maps the contentAlignX prop to a CSS justify-content value. */
-const contentAlign = (align?: StyledTypes["contentAlignX"]) => {
-  if (!align) return ""
+const contentAlign = (align?: StyledTypes['contentAlignX']) => {
+  if (!align) return ''
 
   return css`
     justify-content: ${ALIGN_CONTENT_MAP_X[align]};
@@ -42,7 +42,7 @@ const contentAlign = (align?: StyledTypes["contentAlignX"]) => {
 
 /** Composes spacing, alignment, and extra CSS into a single responsive style block for the Row. */
 const styles: MakeItResponsiveStyles<
-  Pick<StyledTypes, "gap" | "gutter" | "contentAlignX" | "extraStyles">
+  Pick<StyledTypes, 'gap' | 'gutter' | 'contentAlignX' | 'extraStyles'>
 > = ({ theme, css: cssFn, rootSize }) => {
   const { gap, gutter, contentAlignX, extraStyles } = theme
 
@@ -62,7 +62,7 @@ export default styled(component)`
   flex-direction: row;
 
   ${makeItResponsive({
-    key: "$coolgrid",
+    key: '$coolgrid',
     styles,
     css,
     normalize: true,