@opensite/ui 0.4.8 → 0.5.0

package/dist/timeline-two-column-featured.cjs

@@ -745,7 +745,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -769,11 +770,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -800,13 +803,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );

package/dist/timeline-two-column-featured.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineFeature {

package/dist/timeline-two-column-featured.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig } from './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface TimelineFeature {

package/dist/timeline-two-column-featured.js

@@ -724,7 +724,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -748,11 +749,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -779,13 +782,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );

package/dist/timeline-vertical-icon-dashed.cjs

@@ -430,7 +430,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -454,11 +455,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -485,13 +488,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );

package/dist/timeline-vertical-icon-dashed.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './blocks-CJYRLpXR.cjs';
+import './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineStep {

package/dist/timeline-vertical-icon-dashed.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './blocks-BWc_7JNA.js';
+import './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface TimelineStep {

package/dist/timeline-vertical-icon-dashed.js

@@ -409,7 +409,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -433,11 +434,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -464,13 +467,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );

package/dist/types.d.cts

@@ -1,9 +1,9 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-CJYRLpXR.cjs';
+export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -13,7 +13,7 @@ type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "full";
 /**
  * Background variants for Section component
  */
-type SectionBackground = "white" | "gray" | "dark" | "gradient" | "primary" | "secondary" | "transparent" | "muted";
+type SectionBackground = "default" | "white" | "gray" | "dark" | "gradient" | "primary" | "secondary" | "transparent" | "muted";
 /**
  * Spacing variants for Section component
  */
@@ -67,7 +67,7 @@ interface SectionProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
     /**
      * Background style variant
-     * @default "white"
+     * @default "default"
      */
     background?: SectionBackground;
     /**
@@ -79,6 +79,15 @@ interface SectionProps extends HTMLAttributes<HTMLElement> {
      * Additional CSS classes (can override spacing and background styles)
      */
     className?: string;
+    /**
+     * Optional max width for the internal Container wrapper
+     * @default "xl"
+     */
+    containerMaxWidth?: ContainerMaxWidth;
+    /**
+     * Additional CSS classes for the internal Container wrapper
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name from the predefined pattern overlays
      * Use one of the pattern overlay names for type-safe pattern selection

package/dist/types.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-BWc_7JNA.js';
+export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**
@@ -13,7 +13,7 @@ type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "full";
 /**
  * Background variants for Section component
  */
-type SectionBackground = "white" | "gray" | "dark" | "gradient" | "primary" | "secondary" | "transparent" | "muted";
+type SectionBackground = "default" | "white" | "gray" | "dark" | "gradient" | "primary" | "secondary" | "transparent" | "muted";
 /**
  * Spacing variants for Section component
  */
@@ -67,7 +67,7 @@ interface SectionProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
     /**
      * Background style variant
-     * @default "white"
+     * @default "default"
      */
     background?: SectionBackground;
     /**
@@ -79,6 +79,15 @@ interface SectionProps extends HTMLAttributes<HTMLElement> {
      * Additional CSS classes (can override spacing and background styles)
      */
     className?: string;
+    /**
+     * Optional max width for the internal Container wrapper
+     * @default "xl"
+     */
+    containerMaxWidth?: ContainerMaxWidth;
+    /**
+     * Additional CSS classes for the internal Container wrapper
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name from the predefined pattern overlays
      * Use one of the pattern overlay names for type-safe pattern selection

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3277,13 +3277,16 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup",
+    "build": "pnpm run generate:exports && pnpm run build:lib && pnpm run export:registry",
+    "build:lib": "tsup",
     "dev": "tsup --watch",
     "test": "vitest",
     "test:ci": "./scripts/test-ci-silent.sh",
     "type-check": "tsc --noEmit",
     "size": "bash -c 'size-limit --silent 2>/dev/null'",
     "generate:exports": "bash scripts/generate-all-exports.sh && node scripts/merge-exports.js && node scripts/create-organized-exports.js",
+    "export:registry": "node scripts/export-registry.js",
+    "generate:registry": "pnpm run build:lib && pnpm run export:registry",
     "prepublishOnly": "pnpm run build && pnpm run test:ci"
   },
   "peerDependencies": {