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

package/build/lib/swiss/styles.css

@@ -0,0 +1,298 @@
+/**
+ * Swiss Grid System
+ * 
+ * A document-level layout system with semantic zones:
+ * - Viewport: Full viewport width
+ * - Extended: Subtly breaks out of body
+ * - Body: Main 12-column content area
+ */
+
+/* ============================================================================
+ * Grid Container
+ * ============================================================================ */
+
+.swiss-grid {
+  display: grid;
+  width: 100%;
+  
+  /* Dynamic margin calculation for centering */
+  --swiss-margin: max(
+    var(--swiss-margins, var(--space-5, 2rem)),
+    calc((100vw - var(--swiss-max, 1440px)) / 2)
+  );
+  
+  /* Named grid lines create semantic zones */
+  grid-template-columns:
+    [viewport-start]
+    minmax(calc(var(--swiss-margin) * 0.5), 0.5fr)
+    [extended-start]
+    minmax(calc(var(--swiss-margin) * 0.5), 0.5fr)
+    [body-start]
+    repeat(var(--swiss-columns, 12), [col] minmax(0, 1fr))
+    [body-end]
+    minmax(calc(var(--swiss-margin) * 0.5), 0.5fr)
+    [extended-end]
+    minmax(calc(var(--swiss-margin) * 0.5), 0.5fr)
+    [viewport-end];
+    
+  /* Spacing using Radix space scale or fallbacks */
+  column-gap: var(--swiss-gutter, var(--space-4, 1.5rem));
+  row-gap: calc(var(--swiss-gutter, var(--space-4, 1.5rem)) * 2);
+}
+
+/* ============================================================================
+ * Grid Items
+ * ============================================================================ */
+
+.swiss-item {
+  /* Default to body zone */
+  grid-column: body-start / body-end;
+}
+
+/* Semantic zone mappings */
+[data-span="body"] {
+  grid-column: body-start / body-end;
+}
+
+[data-span="extended"] {
+  grid-column: extended-start / extended-end;
+}
+
+[data-span="viewport"] {
+  grid-column: viewport-start / viewport-end;
+}
+
+/* Column spans are now handled via inline styles in the Item component */
+
+/* ============================================================================
+ * Responsive Behavior - Aligned with Radix Breakpoints
+ * ============================================================================ */
+
+/* xs: 520px */
+@media (min-width: 520px) {
+  .swiss-grid {
+    --swiss-max: var(--swiss-max-xs, var(--swiss-max));
+    --swiss-gutter: var(--swiss-gutter-xs, var(--swiss-gutter));
+    --swiss-margins: var(--swiss-margins-xs, var(--swiss-margins));
+    --swiss-columns: var(--swiss-columns-xs, var(--swiss-columns));
+  }
+  
+  [data-span-xs="body"] { grid-column: body-start / body-end; }
+  [data-span-xs="extended"] { grid-column: extended-start / extended-end; }
+  [data-span-xs="viewport"] { grid-column: viewport-start / viewport-end; }
+  
+  /* Column spans handled via inline styles */
+}
+
+/* sm: 768px */
+@media (min-width: 768px) {
+  .swiss-grid {
+    --swiss-max: var(--swiss-max-sm, var(--swiss-max));
+    --swiss-gutter: var(--swiss-gutter-sm, var(--swiss-gutter));
+    --swiss-margins: var(--swiss-margins-sm, var(--swiss-margins));
+    --swiss-columns: var(--swiss-columns-sm, var(--swiss-columns));
+  }
+  
+  [data-span-sm="body"] { grid-column: body-start / body-end; }
+  [data-span-sm="extended"] { grid-column: extended-start / extended-end; }
+  [data-span-sm="viewport"] { grid-column: viewport-start / viewport-end; }
+  
+  /* Column spans handled via inline styles */
+}
+
+/* md: 1024px */
+@media (min-width: 1024px) {
+  .swiss-grid {
+    --swiss-max: var(--swiss-max-md, var(--swiss-max));
+    --swiss-gutter: var(--swiss-gutter-md, var(--swiss-gutter));
+    --swiss-margins: var(--swiss-margins-md, var(--swiss-margins));
+    --swiss-columns: var(--swiss-columns-md, var(--swiss-columns));
+  }
+  
+  [data-span-md="body"] { grid-column: body-start / body-end; }
+  [data-span-md="extended"] { grid-column: extended-start / extended-end; }
+  [data-span-md="viewport"] { grid-column: viewport-start / viewport-end; }
+  
+  /* Column spans handled via inline styles */
+}
+
+/* lg: 1280px */
+@media (min-width: 1280px) {
+  .swiss-grid {
+    --swiss-max: var(--swiss-max-lg, var(--swiss-max));
+    --swiss-gutter: var(--swiss-gutter-lg, var(--swiss-gutter));
+    --swiss-margins: var(--swiss-margins-lg, var(--swiss-margins));
+    --swiss-columns: var(--swiss-columns-lg, var(--swiss-columns));
+  }
+  
+  [data-span-lg="body"] { grid-column: body-start / body-end; }
+  [data-span-lg="extended"] { grid-column: extended-start / extended-end; }
+  [data-span-lg="viewport"] { grid-column: viewport-start / viewport-end; }
+  
+  /* Column spans handled via inline styles */
+}
+
+/* xl: 1640px */
+@media (min-width: 1640px) {
+  .swiss-grid {
+    --swiss-max: var(--swiss-max-xl, var(--swiss-max));
+    --swiss-gutter: var(--swiss-gutter-xl, var(--swiss-gutter));
+    --swiss-margins: var(--swiss-margins-xl, var(--swiss-margins));
+    --swiss-columns: var(--swiss-columns-xl, var(--swiss-columns));
+  }
+  
+  [data-span-xl="body"] { grid-column: body-start / body-end; }
+  [data-span-xl="extended"] { grid-column: extended-start / extended-end; }
+  [data-span-xl="viewport"] { grid-column: viewport-start / viewport-end; }
+  
+  /* Column spans handled via inline styles */
+}
+
+/* ============================================================================
+ * SubGrid
+ * ============================================================================ */
+
+.swiss-subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+/* Optional row subgrid */
+[data-subgrid-rows] {
+  grid-template-rows: subgrid;
+}
+
+/* Responsive column spans for subgrid */
+[data-subgrid-cols="1"] { grid-column: span 1; }
+[data-subgrid-cols="2"] { grid-column: span 2; }
+[data-subgrid-cols="3"] { grid-column: span 3; }
+[data-subgrid-cols="4"] { grid-column: span 4; }
+[data-subgrid-cols="5"] { grid-column: span 5; }
+[data-subgrid-cols="6"] { grid-column: span 6; }
+[data-subgrid-cols="7"] { grid-column: span 7; }
+[data-subgrid-cols="8"] { grid-column: span 8; }
+[data-subgrid-cols="9"] { grid-column: span 9; }
+[data-subgrid-cols="10"] { grid-column: span 10; }
+[data-subgrid-cols="11"] { grid-column: span 11; }
+[data-subgrid-cols="12"] { grid-column: span 12; }
+
+/* Responsive subgrid columns */
+@media (min-width: 520px) {
+  [data-subgrid-cols-xs="1"] { grid-column: span 1; }
+  [data-subgrid-cols-xs="2"] { grid-column: span 2; }
+  [data-subgrid-cols-xs="3"] { grid-column: span 3; }
+  [data-subgrid-cols-xs="4"] { grid-column: span 4; }
+  [data-subgrid-cols-xs="5"] { grid-column: span 5; }
+  [data-subgrid-cols-xs="6"] { grid-column: span 6; }
+  [data-subgrid-cols-xs="7"] { grid-column: span 7; }
+  [data-subgrid-cols-xs="8"] { grid-column: span 8; }
+  [data-subgrid-cols-xs="9"] { grid-column: span 9; }
+  [data-subgrid-cols-xs="10"] { grid-column: span 10; }
+  [data-subgrid-cols-xs="11"] { grid-column: span 11; }
+  [data-subgrid-cols-xs="12"] { grid-column: span 12; }
+}
+
+@media (min-width: 768px) {
+  [data-subgrid-cols-sm="1"] { grid-column: span 1; }
+  [data-subgrid-cols-sm="2"] { grid-column: span 2; }
+  [data-subgrid-cols-sm="3"] { grid-column: span 3; }
+  [data-subgrid-cols-sm="4"] { grid-column: span 4; }
+  [data-subgrid-cols-sm="5"] { grid-column: span 5; }
+  [data-subgrid-cols-sm="6"] { grid-column: span 6; }
+  [data-subgrid-cols-sm="7"] { grid-column: span 7; }
+  [data-subgrid-cols-sm="8"] { grid-column: span 8; }
+  [data-subgrid-cols-sm="9"] { grid-column: span 9; }
+  [data-subgrid-cols-sm="10"] { grid-column: span 10; }
+  [data-subgrid-cols-sm="11"] { grid-column: span 11; }
+  [data-subgrid-cols-sm="12"] { grid-column: span 12; }
+}
+
+@media (min-width: 1024px) {
+  [data-subgrid-cols-md="1"] { grid-column: span 1; }
+  [data-subgrid-cols-md="2"] { grid-column: span 2; }
+  [data-subgrid-cols-md="3"] { grid-column: span 3; }
+  [data-subgrid-cols-md="4"] { grid-column: span 4; }
+  [data-subgrid-cols-md="5"] { grid-column: span 5; }
+  [data-subgrid-cols-md="6"] { grid-column: span 6; }
+  [data-subgrid-cols-md="7"] { grid-column: span 7; }
+  [data-subgrid-cols-md="8"] { grid-column: span 8; }
+  [data-subgrid-cols-md="9"] { grid-column: span 9; }
+  [data-subgrid-cols-md="10"] { grid-column: span 10; }
+  [data-subgrid-cols-md="11"] { grid-column: span 11; }
+  [data-subgrid-cols-md="12"] { grid-column: span 12; }
+}
+
+@media (min-width: 1280px) {
+  [data-subgrid-cols-lg="1"] { grid-column: span 1; }
+  [data-subgrid-cols-lg="2"] { grid-column: span 2; }
+  [data-subgrid-cols-lg="3"] { grid-column: span 3; }
+  [data-subgrid-cols-lg="4"] { grid-column: span 4; }
+  [data-subgrid-cols-lg="5"] { grid-column: span 5; }
+  [data-subgrid-cols-lg="6"] { grid-column: span 6; }
+  [data-subgrid-cols-lg="7"] { grid-column: span 7; }
+  [data-subgrid-cols-lg="8"] { grid-column: span 8; }
+  [data-subgrid-cols-lg="9"] { grid-column: span 9; }
+  [data-subgrid-cols-lg="10"] { grid-column: span 10; }
+  [data-subgrid-cols-lg="11"] { grid-column: span 11; }
+  [data-subgrid-cols-lg="12"] { grid-column: span 12; }
+}
+
+@media (min-width: 1640px) {
+  [data-subgrid-cols-xl="1"] { grid-column: span 1; }
+  [data-subgrid-cols-xl="2"] { grid-column: span 2; }
+  [data-subgrid-cols-xl="3"] { grid-column: span 3; }
+  [data-subgrid-cols-xl="4"] { grid-column: span 4; }
+  [data-subgrid-cols-xl="5"] { grid-column: span 5; }
+  [data-subgrid-cols-xl="6"] { grid-column: span 6; }
+  [data-subgrid-cols-xl="7"] { grid-column: span 7; }
+  [data-subgrid-cols-xl="8"] { grid-column: span 8; }
+  [data-subgrid-cols-xl="9"] { grid-column: span 9; }
+  [data-subgrid-cols-xl="10"] { grid-column: span 10; }
+  [data-subgrid-cols-xl="11"] { grid-column: span 11; }
+  [data-subgrid-cols-xl="12"] { grid-column: span 12; }
+}
+
+/* ============================================================================
+ * Debug Mode
+ * ============================================================================ */
+
+.swiss-grid--debug {
+  position: relative;
+}
+
+.swiss-grid--debug::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: repeating-linear-gradient(
+    to right,
+    rgba(255, 0, 0, 0.1) 0,
+    rgba(255, 0, 0, 0.1) calc((100% - var(--swiss-margin) * 2) / var(--swiss-columns, 12) - var(--swiss-gutter)),
+    transparent calc((100% - var(--swiss-margin) * 2) / var(--swiss-columns, 12) - var(--swiss-gutter)),
+    transparent calc((100% - var(--swiss-margin) * 2) / var(--swiss-columns, 12))
+  );
+  pointer-events: none;
+  z-index: 9999;
+}
+
+/* ============================================================================
+ * Responsive Grid Adjustments
+ * ============================================================================ */
+
+/* Tablet - 8 columns default */
+@media (max-width: 1023px) {
+  .swiss-grid {
+    --swiss-columns: 8;
+  }
+}
+
+/* Mobile - 4 columns default */
+@media (max-width: 767px) {
+  .swiss-grid {
+    --swiss-columns: 4;
+    --swiss-margins: var(--space-3, 1rem);
+  }
+}

package/build/lib/swiss/subgrid.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { SubGridProps } from './types.js';
+/**
+ * SubGrid component that inherits grid tracks from parent.
+ * Supports asChild pattern for composition.
+ *
+ * @example
+ * ```tsx
+ * // Regular usage - creates div with subgrid
+ * <SubGrid>
+ *   <Logo />
+ *   <Nav />
+ * </SubGrid>
+ *
+ * // With asChild - merges onto child element
+ * <SubGrid asChild>
+ *   <header>
+ *     <Logo />
+ *     <Nav />
+ *   </header>
+ * </SubGrid>
+ * ```
+ */
+export declare const SubGrid: React.ForwardRefExoticComponent<SubGridProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=subgrid.d.ts.map

package/build/lib/swiss/subgrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subgrid.d.ts","sourceRoot":"","sources":["../../../src/lib/swiss/subgrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAG9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,OAAO,qFAsDnB,CAAA"}

package/build/lib/swiss/subgrid.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { cx, extractLayoutProps, generateDataAttributes } from './utils.js';
+/**
+ * SubGrid component that inherits grid tracks from parent.
+ * Supports asChild pattern for composition.
+ *
+ * @example
+ * ```tsx
+ * // Regular usage - creates div with subgrid
+ * <SubGrid>
+ *   <Logo />
+ *   <Nav />
+ * </SubGrid>
+ *
+ * // With asChild - merges onto child element
+ * <SubGrid asChild>
+ *   <header>
+ *     <Logo />
+ *     <Nav />
+ *   </header>
+ * </SubGrid>
+ * ```
+ */
+export const SubGrid = React.forwardRef(({ children, asChild = false, className: userClassName, style: userStyle, cols, rows, flow, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props);
+    // Generate responsive data attributes if cols/rows provided
+    const dataAttrs = React.useMemo(() => generateDataAttributes({
+        ...(cols !== undefined && { cols }),
+        ...(rows !== undefined && { rows }),
+    }), // SubGrid uses rows which is not in the base type
+    [cols, rows]);
+    // Build style object with optional grid-auto-flow
+    // Map flow prop to match Flexbox semantics for intuitive API:
+    // - flow='row' (horizontal layout) → grid-auto-flow: column
+    // - flow='column' (vertical layout) → grid-auto-flow: row
+    const combinedStyle = React.useMemo(() => ({
+        ...layoutStyle,
+        ...(flow && { gridAutoFlow: flow === 'row' ? 'column' : 'row' }),
+        ...userStyle,
+    }), [layoutStyle, flow, userStyle]);
+    return (_jsx(Comp, { ref: ref, className: cx('swiss-subgrid', layoutClassName, userClassName), ...dataAttrs, style: combinedStyle, ...restProps, children: children }));
+});
+SubGrid.displayName = 'Swiss.SubGrid';
+//# sourceMappingURL=subgrid.js.map

package/build/lib/swiss/subgrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subgrid.js","sourceRoot":"","sources":["../../../src/lib/swiss/subgrid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAE3E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EACE,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IAEnC,6BAA6B;IAC7B,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAElG,4DAA4D;IAC5D,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CACH,sBAAsB,CAAC;QACrB,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,EAAE,IAAI,EAAE,CAAC;QACnC,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,EAAE,IAAI,EAAE,CAAC;KAC7B,CAAC,EAAE,kDAAkD;IAC/D,CAAC,IAAI,EAAE,IAAI,CAAC,CACb,CAAA;IAED,kDAAkD;IAClD,8DAA8D;IAC9D,4DAA4D;IAC5D,0DAA0D;IAC1D,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,WAAW;QACd,GAAG,CAAC,IAAI,IAAI,EAAE,YAAY,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAChE,GAAG,SAAS;KACb,CAAC,EACF,CAAC,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,CAC/B,CAAA;IAED,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,eAAe,EAAE,aAAa,CAAC,KAC1D,SAAS,EACb,KAAK,EAAE,aAAa,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,OAAO,CAAC,WAAW,GAAG,eAAe,CAAA"}