polen 0.11.0-next.15 → 0.11.0-next.16

package/src/lib/swiss/$.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from 'vitest'
+import { extractSpacingProps } from './utils.js'
+
+describe('Swiss Grid Radix Props Integration', () => {
+  test('extractSpacingProps handles margin props', () => {
+    const props = {
+      mt: '4',
+      mb: '2',
+      mx: { initial: '3', md: '5' },
+      otherProp: 'value',
+    }
+
+    const result = extractSpacingProps(props)
+
+    // Should have className and style properties
+    expect(result).toHaveProperty('className')
+    expect(result).toHaveProperty('style')
+
+    // Should not have the margin props in the result
+    expect(result).not.toHaveProperty('mt')
+    expect(result).not.toHaveProperty('mb')
+    expect(result).not.toHaveProperty('mx')
+
+    // Should preserve other props
+    expect(result.otherProp).toBe('value')
+  })
+
+  test('extractSpacingProps handles padding props', () => {
+    const props = {
+      p: '6',
+      py: { xs: '2', lg: '8' },
+      pl: '9',
+      customProp: 'test',
+    }
+
+    const result = extractSpacingProps(props)
+
+    // Should have className and style properties
+    expect(result).toHaveProperty('className')
+    expect(result).toHaveProperty('style')
+
+    // Should not have the padding props in the result
+    expect(result).not.toHaveProperty('p')
+    expect(result).not.toHaveProperty('py')
+    expect(result).not.toHaveProperty('pl')
+
+    // Should preserve other props
+    expect(result.customProp).toBe('test')
+  })
+
+  test('extractSpacingProps handles both margin and padding props', () => {
+    const props = {
+      m: '4',
+      p: { initial: '2', md: '4' },
+      mt: '-2',
+      className: 'custom-class',
+      style: { color: 'red' },
+    }
+
+    const result = extractSpacingProps(props)
+
+    // Should have className and style properties
+    expect(result).toHaveProperty('className')
+    expect(result).toHaveProperty('style')
+
+    // className should include custom class if provided
+    if (result.className) {
+      expect(result.className).toContain('custom-class')
+    }
+
+    // style should be merged if provided
+    if (result.style && typeof result.style === 'object') {
+      expect(result.style).toHaveProperty('color', 'red')
+    }
+
+    // Should not have the spacing props in the result
+    expect(result).not.toHaveProperty('m')
+    expect(result).not.toHaveProperty('p')
+    expect(result).not.toHaveProperty('mt')
+  })
+
+  test('extractSpacingProps handles empty props', () => {
+    const props = {}
+    const result = extractSpacingProps(props)
+
+    expect(result).toBeDefined()
+    // May or may not have className/style, but should not throw
+  })
+})

package/src/lib/swiss/$.ts

@@ -0,0 +1,2 @@
+// Namespace export - Swiss
+export * as Swiss from './$$.js'

package/src/lib/swiss/grid.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import type { GridProps } from './types.js'
+import { cx, extractLayoutProps, generateCSSVars } from './utils.js'
+
+/**
+ * Swiss Grid container component.
+ *
+ * Creates a 12-column grid with semantic zones for content placement.
+ * Integrates with Radix UI Themes space scale for consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <Grid maxWidth={1440} gutter="var(--space-4)">
+ *   {children}
+ * </Grid>
+ * ```
+ */
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  (
+    {
+      children,
+      maxWidth = 1440,
+      gutter,
+      margins,
+      columns = 12,
+      debug = false,
+      className: userClassName,
+      style: userStyle,
+      ...props
+    },
+    ref,
+  ) => {
+    // Extract Radix layout props (margin, padding, position, etc.)
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Generate CSS variables from props
+    const cssVars = React.useMemo(
+      () =>
+        generateCSSVars({
+          maxWidth,
+          ...(gutter !== undefined && { gutter }),
+          ...(margins !== undefined && { margins }),
+          columns,
+        }),
+      [maxWidth, gutter, margins, columns],
+    )
+
+    return (
+      <div
+        ref={ref}
+        className={cx('swiss-grid', debug && 'swiss-grid--debug', layoutClassName, userClassName)}
+        style={{ ...cssVars, ...layoutStyle, ...userStyle }}
+        {...restProps}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+
+Grid.displayName = 'Swiss.Grid'

package/src/lib/swiss/items.tsx

@@ -0,0 +1,288 @@
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import type { GridItemProps, ItemProps } from './types.js'
+import { cx, extractLayoutProps, generateDataAttributes } from './utils.js'
+
+/**
+ * Grid item that spans the body zone (main 12-column area).
+ *
+ * @example
+ * ```tsx
+ * <Body>
+ *   <Article />
+ * </Body>
+ * ```
+ */
+export const Body = React.forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, asChild = false, subgrid = false, flow, className: userClassName, style: userStyle, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Build style with subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: React.CSSProperties = { ...layoutStyle }
+
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        data-span='body'
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Body.displayName = 'Swiss.Body'
+
+/**
+ * Grid item that spans the viewport zone (full viewport width).
+ *
+ * @example
+ * ```tsx
+ * <Viewport>
+ *   <Hero />
+ * </Viewport>
+ * ```
+ */
+export const Viewport = React.forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, asChild = false, subgrid = false, flow, className: userClassName, style: userStyle, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Build style with subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: React.CSSProperties = { ...layoutStyle }
+
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        data-span='viewport'
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Viewport.displayName = 'Swiss.Viewport'
+
+/**
+ * Grid item that spans the extended zone (subtly breaks out of body).
+ *
+ * @example
+ * ```tsx
+ * <Extended>
+ *   <Feature />
+ * </Extended>
+ * ```
+ */
+export const Extended = React.forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, asChild = false, subgrid = false, flow, className: userClassName, style: userStyle, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Build style with subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: React.CSSProperties = { ...layoutStyle }
+
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        data-span='extended'
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Extended.displayName = 'Swiss.Extended'
+
+/**
+ * Flexible grid item with responsive span and column support.
+ *
+ * @example
+ * ```tsx
+ * // Responsive span
+ * <Item span={{ initial: 'viewport', md: 'body' }}>
+ *   <Content />
+ * </Item>
+ *
+ * // Column span within body
+ * <Item cols={6}>
+ *   <HalfWidth />
+ * </Item>
+ * ```
+ */
+export const Item = React.forwardRef<HTMLDivElement, ItemProps>(
+  (
+    {
+      children,
+      asChild = false,
+      subgrid = false,
+      flow,
+      span = 'body',
+      cols,
+      start,
+      className: userClassName,
+      style: userStyle,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Process cols to handle both number and string values, and combine with start if provided
+    const processedCols = React.useMemo(() => {
+      if (cols === undefined) return undefined
+
+      // Helper function to combine start and cols
+      const combineStartAndCols = (startVal: any, colsVal: any) => {
+        // If cols is a string with explicit positioning, ignore start
+        if (typeof colsVal === 'string') {
+          return colsVal
+        }
+        // If cols is a number and start is provided, combine them
+        if (typeof colsVal === 'number' && startVal !== undefined) {
+          return `${startVal} / span ${colsVal}`
+        }
+        // Otherwise just convert number cols to span
+        if (typeof colsVal === 'number') {
+          return `span ${colsVal}`
+        }
+        return colsVal
+      }
+
+      // Handle responsive object for cols
+      if (typeof cols === 'object' && !Array.isArray(cols)) {
+        const processed: any = {}
+
+        // Get start values (responsive or single)
+        const startResponsive = start !== undefined && typeof start === 'object' && !Array.isArray(start)
+
+        for (const [breakpoint, value] of Object.entries(cols)) {
+          if (value !== undefined) {
+            // Get corresponding start value for this breakpoint
+            const startVal = startResponsive
+              ? (start as any)[breakpoint]
+              : start
+
+            processed[breakpoint] = combineStartAndCols(startVal, value)
+          }
+        }
+        return processed
+      }
+
+      // Handle single value
+      return combineStartAndCols(start, cols)
+    }, [cols, start])
+
+    // Generate data attributes for responsive span behavior only when cols is not specified
+    // When cols is provided, we're doing column spanning within a grid, not zone spanning
+    const dataAttrs = React.useMemo(
+      () =>
+        cols !== undefined
+          ? {} // No data-span when cols is specified
+          : generateDataAttributes({
+            span,
+          }),
+      [span, cols],
+    )
+
+    // Build combined style with grid-column from processed cols and subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: any = { ...layoutStyle }
+
+      // Apply grid-column based on processed cols
+      if (processedCols !== undefined) {
+        if (typeof processedCols === 'object') {
+          // For responsive cols, we need to handle this differently
+          // For now, just use the initial value if present
+          if (processedCols.initial) {
+            style.gridColumn = processedCols.initial
+          }
+          // TODO: Handle responsive values properly with CSS variables or media queries
+        } else {
+          style.gridColumn = processedCols
+        }
+      }
+
+      // Add subgrid support
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, processedCols, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        {...dataAttrs}
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Item.displayName = 'Swiss.Item'