@opensite/ui 0.0.1 → 0.0.3

package/dist/registry.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx","../components/blocks/about/alternating-blocks.tsx","../src/registry/blocks.ts"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":"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","file":"registry.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  \"4xl\": \"max-w-[1536px]\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n *   <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n    const Component = as as any;\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n          maxWidthStyles[maxWidth],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n  white: \"bg-background text-foreground\",\n  gray: \"bg-muted/30 text-foreground\",\n  dark: \"bg-foreground text-background\",\n  gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  secondary: \"bg-secondary text-secondary-foreground\",\n  muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n  xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n *   title=\"Our Services\"\n *   subtitle=\"What we offer\"\n *   background=\"gray\"\n *   spacing=\"lg\"\n * >\n *   <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      id,\n      title,\n      subtitle,\n      children,\n      className,\n      style,\n      background = \"white\",\n      spacing = \"lg\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <section\n        ref={ref}\n        id={id}\n        className={cn(\n          backgroundStyles[background],\n          spacingStyles[spacing],\n          className\n        )}\n        style={style}\n        {...props}\n      >\n        <Container>\n          {(title || subtitle) && (\n            <div className=\"text-center mb-12 md:mb-16\">\n              {subtitle && (\n                <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n                  {subtitle}\n                </p>\n              )}\n              {title && (\n                <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n                  {title}\n                </h2>\n              )}\n            </div>\n          )}\n          {children}\n        </Container>\n      </section>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n","import * as React from \"react\";\nimport { cn } from \"../../../lib/utils\";\nimport { Section } from \"../../ui/section\";\nimport type { SectionBackground, SectionSpacing } from \"../../../src/types\";\n\nexport interface AlternatingBlockSection {\n  content: React.ReactNode;\n  media: React.ReactNode;\n  mediaLeft?: boolean;\n}\n\nexport interface AlternatingBlocksProps {\n  /**\n   * Array of sections to display with alternating layout\n   */\n  sections: AlternatingBlockSection[];\n  /**\n   * Section title (optional)\n   */\n  title?: string;\n  /**\n   * Section subtitle/eyebrow (optional)\n   */\n  subtitle?: string;\n  /**\n   * Background style variant\n   * @default \"white\"\n   */\n  background?: SectionBackground;\n  /**\n   * Vertical spacing variant\n   * @default \"lg\"\n   */\n  spacing?: SectionSpacing;\n  /**\n   * Additional CSS classes for the Section wrapper\n   */\n  className?: string;\n  /**\n   * Additional CSS classes for the content container\n   */\n  contentClassName?: string;\n}\n\n/**\n * AlternatingBlocks component displays content sections with alternating media placement.\n * Uses the Section component for consistent spacing, backgrounds, and optional titles.\n *\n * @example\n * ```tsx\n * <AlternatingBlocks\n *   title=\"Our Story\"\n *   subtitle=\"About Us\"\n *   background=\"gray\"\n *   spacing=\"xl\"\n *   sections={[\n *     {\n *       content: <div><h3>Title</h3><p>Description</p></div>,\n *       media: <img src=\"...\" alt=\"...\" />,\n *       mediaLeft: false\n *     }\n *   ]}\n * />\n * ```\n */\nexport function AlternatingBlocks({\n  sections,\n  title,\n  subtitle,\n  background = \"white\",\n  spacing = \"lg\",\n  className,\n  contentClassName,\n}: AlternatingBlocksProps) {\n  return (\n    <Section\n      title={title}\n      subtitle={subtitle}\n      background={background}\n      spacing={spacing}\n      className={className}\n    >\n      <div className={cn(\"mx-auto w-full max-w-[900px]\", contentClassName)}>\n        <div className=\"space-y-12\">\n          {sections?.map((section, index) => (\n            <div\n              key={index}\n              className=\"grid items-center gap-8 md:grid-cols-2 md:gap-12\"\n            >\n              <div className={section.mediaLeft ? \"md:order-2\" : \"\"}>\n                {section.content}\n              </div>\n\n              <div\n                className={cn(\n                  \"aspect-4/3 overflow-hidden rounded-lg border\",\n                  section.mediaLeft ? \"md:order-1\" : \"\",\n                )}\n              >\n                <div className=\"flex h-full w-full items-center justify-center\">\n                  {section.media}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </Section>\n  );\n}\n","/**\n * Semantic Block Registry\n *\n * This registry maps semantic concepts to available UI blocks for AI-driven\n * site generation. Each block entry contains:\n * - id: Unique identifier for the block\n * - name: Human-readable name\n * - description: What the block does and when to use it\n * - semanticTags: Array of semantic concepts this block represents\n * - category: Block category (about, features, cta, testimonials, etc.)\n * - component: Reference to the actual component\n * - props: TypeScript type for the component's props\n * - exampleUsage: Code example showing how to use the block\n */\n\nimport { AlternatingBlocks } from \"../../components/blocks/about/alternating-blocks\";\nimport type { AlternatingBlocksProps } from \"../../components/blocks/about/alternating-blocks\";\n\nexport interface BlockRegistryEntry<T = any> {\n  id: string;\n  name: string;\n  description: string;\n  semanticTags: string[];\n  category: BlockCategory;\n  component: React.ComponentType<T>;\n  props: string;\n  exampleUsage: string;\n}\n\nexport type BlockCategory =\n  | \"about\"\n  | \"features\"\n  | \"cta\"\n  | \"testimonials\"\n  | \"services\"\n  | \"hero\"\n  | \"footer\"\n  | \"header\"\n  | \"pricing\"\n  | \"team\"\n  | \"stats\"\n  | \"faq\"\n  | \"contact\"\n  | \"gallery\"\n  | \"timeline\"\n  | \"process\"\n  | \"benefits\"\n  | \"comparison\";\n\n/**\n * Block Registry - Central registry of all available UI blocks\n */\nexport const BLOCK_REGISTRY: Record<string, BlockRegistryEntry> = {\n  \"alternating-blocks\": {\n    id: \"alternating-blocks\",\n    name: \"Alternating Content Blocks\",\n    description:\n      \"Display content sections with alternating left/right media placement. Ideal for storytelling, feature showcases, or company history sections.\",\n    semanticTags: [\n      \"about\",\n      \"story\",\n      \"history\",\n      \"timeline\",\n      \"features\",\n      \"benefits\",\n      \"alternating\",\n      \"two-column\",\n      \"content-media\",\n    ],\n    category: \"about\",\n    component: AlternatingBlocks,\n    props: \"AlternatingBlocksProps\",\n    exampleUsage: `\n<AlternatingBlocks\n  sections={[\n    {\n      content: (\n        <div>\n          <div className=\"flex items-center gap-2 mb-3\">\n            <Lightbulb className=\"h-4 w-4 text-primary\" />\n            <span className=\"text-sm font-medium text-muted-foreground\">\n              The Origin\n            </span>\n          </div>\n          <h3 className=\"mb-3 text-2xl font-semibold tracking-tight\">\n            It started with frustration\n          </h3>\n          <p className=\"text-muted-foreground leading-relaxed\">\n            We spent years watching teams drown in tools that promised to help\n            but only added complexity. In 2018, we decided to build something better.\n          </p>\n        </div>\n      ),\n      media: <img src=\"...\" alt=\"...\" />,\n      mediaLeft: false\n    },\n    {\n      content: <div>...</div>,\n      media: <img src=\"...\" alt=\"...\" />,\n      mediaLeft: true\n    }\n  ]}\n/>\n    `.trim(),\n  },\n  // Add more blocks here following this pattern\n};\n\n/**\n * Get blocks by semantic tag\n */\nexport function getBlocksBySemanticTag(tag: string): BlockRegistryEntry[] {\n  return Object.values(BLOCK_REGISTRY).filter((block) =>\n    block.semanticTags.includes(tag)\n  );\n}\n\n/**\n * Get blocks by category\n */\nexport function getBlocksByCategory(\n  category: BlockCategory\n): BlockRegistryEntry[] {\n  return Object.values(BLOCK_REGISTRY).filter(\n    (block) => block.category === category\n  );\n}\n\n/**\n * Get block by ID\n */\nexport function getBlockById(id: string): BlockRegistryEntry | undefined {\n  return BLOCK_REGISTRY[id];\n}\n\n/**\n * Get all available blocks\n */\nexport function getAllBlocks(): BlockRegistryEntry[] {\n  return Object.values(BLOCK_REGISTRY);\n}\n\n/**\n * Get all categories\n */\nexport function getAllCategories(): BlockCategory[] {\n  return Array.from(\n    new Set(Object.values(BLOCK_REGISTRY).map((block) => block.category))\n  );\n}\n\n/**\n * Search blocks by query (searches name, description, and semantic tags)\n */\nexport function searchBlocks(query: string): BlockRegistryEntry[] {\n  const lowercaseQuery = query.toLowerCase();\n  return Object.values(BLOCK_REGISTRY).filter(\n    (block) =>\n      block.name.toLowerCase().includes(lowercaseQuery) ||\n      block.description.toLowerCase().includes(lowercaseQuery) ||\n      block.semanticTags.some((tag) => tag.toLowerCase().includes(lowercaseQuery))\n  );\n}\n"]}

package/dist/registry.d.cts

@@ -0,0 +1,55 @@
+/**
+ * Semantic Block Registry
+ *
+ * This registry maps semantic concepts to available UI blocks for AI-driven
+ * site generation. Each block entry contains:
+ * - id: Unique identifier for the block
+ * - name: Human-readable name
+ * - description: What the block does and when to use it
+ * - semanticTags: Array of semantic concepts this block represents
+ * - category: Block category (about, features, cta, testimonials, etc.)
+ * - component: Reference to the actual component
+ * - props: TypeScript type for the component's props
+ * - exampleUsage: Code example showing how to use the block
+ */
+interface BlockRegistryEntry<T = any> {
+    id: string;
+    name: string;
+    description: string;
+    semanticTags: string[];
+    category: BlockCategory;
+    component: React.ComponentType<T>;
+    props: string;
+    exampleUsage: string;
+}
+type BlockCategory = "about" | "features" | "cta" | "testimonials" | "services" | "hero" | "footer" | "header" | "pricing" | "team" | "stats" | "faq" | "contact" | "gallery" | "timeline" | "process" | "benefits" | "comparison";
+/**
+ * Block Registry - Central registry of all available UI blocks
+ */
+declare const BLOCK_REGISTRY: Record<string, BlockRegistryEntry>;
+/**
+ * Get blocks by semantic tag
+ */
+declare function getBlocksBySemanticTag(tag: string): BlockRegistryEntry[];
+/**
+ * Get blocks by category
+ */
+declare function getBlocksByCategory(category: BlockCategory): BlockRegistryEntry[];
+/**
+ * Get block by ID
+ */
+declare function getBlockById(id: string): BlockRegistryEntry | undefined;
+/**
+ * Get all available blocks
+ */
+declare function getAllBlocks(): BlockRegistryEntry[];
+/**
+ * Get all categories
+ */
+declare function getAllCategories(): BlockCategory[];
+/**
+ * Search blocks by query (searches name, description, and semantic tags)
+ */
+declare function searchBlocks(query: string): BlockRegistryEntry[];
+
+export { BLOCK_REGISTRY, type BlockCategory, type BlockRegistryEntry, getAllBlocks, getAllCategories, getBlockById, getBlocksByCategory, getBlocksBySemanticTag, searchBlocks };

package/dist/registry.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Semantic Block Registry
+ *
+ * This registry maps semantic concepts to available UI blocks for AI-driven
+ * site generation. Each block entry contains:
+ * - id: Unique identifier for the block
+ * - name: Human-readable name
+ * - description: What the block does and when to use it
+ * - semanticTags: Array of semantic concepts this block represents
+ * - category: Block category (about, features, cta, testimonials, etc.)
+ * - component: Reference to the actual component
+ * - props: TypeScript type for the component's props
+ * - exampleUsage: Code example showing how to use the block
+ */
+interface BlockRegistryEntry<T = any> {
+    id: string;
+    name: string;
+    description: string;
+    semanticTags: string[];
+    category: BlockCategory;
+    component: React.ComponentType<T>;
+    props: string;
+    exampleUsage: string;
+}
+type BlockCategory = "about" | "features" | "cta" | "testimonials" | "services" | "hero" | "footer" | "header" | "pricing" | "team" | "stats" | "faq" | "contact" | "gallery" | "timeline" | "process" | "benefits" | "comparison";
+/**
+ * Block Registry - Central registry of all available UI blocks
+ */
+declare const BLOCK_REGISTRY: Record<string, BlockRegistryEntry>;
+/**
+ * Get blocks by semantic tag
+ */
+declare function getBlocksBySemanticTag(tag: string): BlockRegistryEntry[];
+/**
+ * Get blocks by category
+ */
+declare function getBlocksByCategory(category: BlockCategory): BlockRegistryEntry[];
+/**
+ * Get block by ID
+ */
+declare function getBlockById(id: string): BlockRegistryEntry | undefined;
+/**
+ * Get all available blocks
+ */
+declare function getAllBlocks(): BlockRegistryEntry[];
+/**
+ * Get all categories
+ */
+declare function getAllCategories(): BlockCategory[];
+/**
+ * Search blocks by query (searches name, description, and semantic tags)
+ */
+declare function searchBlocks(query: string): BlockRegistryEntry[];
+
+export { BLOCK_REGISTRY, type BlockCategory, type BlockRegistryEntry, getAllBlocks, getAllCategories, getBlockById, getBlocksByCategory, getBlocksBySemanticTag, searchBlocks };

package/dist/registry.js

@@ -0,0 +1,215 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-4 sm:px-6 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var backgroundStyles = {
+  white: "bg-background text-foreground",
+  gray: "bg-muted/30 text-foreground",
+  dark: "bg-foreground text-background",
+  gradient: "bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-muted-foreground"
+};
+var spacingStyles = {
+  sm: "py-12 md:py-16",
+  md: "py-16 md:py-24",
+  lg: "py-20 md:py-32",
+  xl: "py-24 md:py-40"
+};
+var Section = React.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "white",
+    spacing = "lg",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        id,
+        className: cn(
+          backgroundStyles[background],
+          spacingStyles[spacing],
+          className
+        ),
+        style,
+        ...props,
+        children: /* @__PURE__ */ jsxs(Container, { children: [
+          (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16", children: [
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wider mb-2 text-primary", children: subtitle }),
+            title && /* @__PURE__ */ jsx("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight", children: title })
+          ] }),
+          children
+        ] })
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+function AlternatingBlocks({
+  sections,
+  title,
+  subtitle,
+  background = "white",
+  spacing = "lg",
+  className,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title,
+      subtitle,
+      background,
+      spacing,
+      className,
+      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: /* @__PURE__ */ jsx("div", { className: "space-y-12", children: sections?.map((section, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid items-center gap-8 md:grid-cols-2 md:gap-12",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: section.mediaLeft ? "md:order-2" : "", children: section.content }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "aspect-4/3 overflow-hidden rounded-lg border",
+                  section.mediaLeft ? "md:order-1" : ""
+                ),
+                children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: section.media })
+              }
+            )
+          ]
+        },
+        index
+      )) }) })
+    }
+  );
+}
+
+// src/registry/blocks.ts
+var BLOCK_REGISTRY = {
+  "alternating-blocks": {
+    id: "alternating-blocks",
+    name: "Alternating Content Blocks",
+    description: "Display content sections with alternating left/right media placement. Ideal for storytelling, feature showcases, or company history sections.",
+    semanticTags: [
+      "about",
+      "story",
+      "history",
+      "timeline",
+      "features",
+      "benefits",
+      "alternating",
+      "two-column",
+      "content-media"
+    ],
+    category: "about",
+    component: AlternatingBlocks,
+    props: "AlternatingBlocksProps",
+    exampleUsage: `
+<AlternatingBlocks
+  sections={[
+    {
+      content: (
+        <div>
+          <div className="flex items-center gap-2 mb-3">
+            <Lightbulb className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium text-muted-foreground">
+              The Origin
+            </span>
+          </div>
+          <h3 className="mb-3 text-2xl font-semibold tracking-tight">
+            It started with frustration
+          </h3>
+          <p className="text-muted-foreground leading-relaxed">
+            We spent years watching teams drown in tools that promised to help
+            but only added complexity. In 2018, we decided to build something better.
+          </p>
+        </div>
+      ),
+      media: <img src="..." alt="..." />,
+      mediaLeft: false
+    },
+    {
+      content: <div>...</div>,
+      media: <img src="..." alt="..." />,
+      mediaLeft: true
+    }
+  ]}
+/>
+    `.trim()
+  }
+  // Add more blocks here following this pattern
+};
+function getBlocksBySemanticTag(tag) {
+  return Object.values(BLOCK_REGISTRY).filter(
+    (block) => block.semanticTags.includes(tag)
+  );
+}
+function getBlocksByCategory(category) {
+  return Object.values(BLOCK_REGISTRY).filter(
+    (block) => block.category === category
+  );
+}
+function getBlockById(id) {
+  return BLOCK_REGISTRY[id];
+}
+function getAllBlocks() {
+  return Object.values(BLOCK_REGISTRY);
+}
+function getAllCategories() {
+  return Array.from(
+    new Set(Object.values(BLOCK_REGISTRY).map((block) => block.category))
+  );
+}
+function searchBlocks(query) {
+  const lowercaseQuery = query.toLowerCase();
+  return Object.values(BLOCK_REGISTRY).filter(
+    (block) => block.name.toLowerCase().includes(lowercaseQuery) || block.description.toLowerCase().includes(lowercaseQuery) || block.semanticTags.some((tag) => tag.toLowerCase().includes(lowercaseQuery))
+  );
+}
+
+export { BLOCK_REGISTRY, getAllBlocks, getAllCategories, getBlockById, getBlocksByCategory, getBlocksBySemanticTag, searchBlocks };
+//# sourceMappingURL=registry.js.map
+//# sourceMappingURL=registry.js.map

package/dist/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx","../components/blocks/about/alternating-blocks.tsx","../src/registry/blocks.ts"],"names":["React","jsx","jsxs"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAY,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EAAU,qFAAA;AAAA,EACV,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUA,KAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,+BAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AC5Bf,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,OAAA,GAAU,IAAA;AAAA,EACV,SAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,uBACEA,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MAEA,0BAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,8BAAA,EAAgC,gBAAgB,CAAA,EACjE,QAAA,kBAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,WAAU,YAAA,EACZ,QAAA,EAAA,QAAA,EAAU,IAAI,CAAC,OAAA,EAAS,0BACvBC,IAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,kDAAA;AAAA,UAEV,QAAA,EAAA;AAAA,4BAAAD,GAAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,YAAY,YAAA,GAAe,EAAA,EAChD,kBAAQ,OAAA,EACX,CAAA;AAAA,4BAEAA,GAAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,8CAAA;AAAA,kBACA,OAAA,CAAQ,YAAY,YAAA,GAAe;AAAA,iBACrC;AAAA,gBAEA,0BAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gDAAA,EACZ,kBAAQ,KAAA,EACX;AAAA;AAAA;AACF;AAAA,SAAA;AAAA,QAhBK;AAAA,OAkBR,GACH,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;ACzDO,IAAM,cAAA,GAAqD;AAAA,EAChE,oBAAA,EAAsB;AAAA,IACpB,EAAA,EAAI,oBAAA;AAAA,IACJ,IAAA,EAAM,4BAAA;AAAA,IACN,WAAA,EACE,+IAAA;AAAA,IACF,YAAA,EAAc;AAAA,MACZ,OAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,OAAA;AAAA,IACV,SAAA,EAAW,iBAAA;AAAA,IACX,KAAA,EAAO,wBAAA;AAAA,IACP,YAAA,EAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA,CA+BZ,IAAA;AAAK;AACT;AAEF;AAKO,SAAS,uBAAuB,GAAA,EAAmC;AACxE,EAAA,OAAO,MAAA,CAAO,MAAA,CAAO,cAAc,CAAA,CAAE,MAAA;AAAA,IAAO,CAAC,KAAA,KAC3C,KAAA,CAAM,YAAA,CAAa,SAAS,GAAG;AAAA,GACjC;AACF;AAKO,SAAS,oBACd,QAAA,EACsB;AACtB,EAAA,OAAO,MAAA,CAAO,MAAA,CAAO,cAAc,CAAA,CAAE,MAAA;AAAA,IACnC,CAAC,KAAA,KAAU,KAAA,CAAM,QAAA,KAAa;AAAA,GAChC;AACF;AAKO,SAAS,aAAa,EAAA,EAA4C;AACvE,EAAA,OAAO,eAAe,EAAE,CAAA;AAC1B;AAKO,SAAS,YAAA,GAAqC;AACnD,EAAA,OAAO,MAAA,CAAO,OAAO,cAAc,CAAA;AACrC;AAKO,SAAS,gBAAA,GAAoC;AAClD,EAAA,OAAO,KAAA,CAAM,IAAA;AAAA,IACX,IAAI,GAAA,CAAI,MAAA,CAAO,MAAA,CAAO,cAAc,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,KAAU,KAAA,CAAM,QAAQ,CAAC;AAAA,GACtE;AACF;AAKO,SAAS,aAAa,KAAA,EAAqC;AAChE,EAAA,MAAM,cAAA,GAAiB,MAAM,WAAA,EAAY;AACzC,EAAA,OAAO,MAAA,CAAO,MAAA,CAAO,cAAc,CAAA,CAAE,MAAA;AAAA,IACnC,CAAC,KAAA,KACC,KAAA,CAAM,IAAA,CAAK,WAAA,EAAY,CAAE,QAAA,CAAS,cAAc,CAAA,IAChD,KAAA,CAAM,WAAA,CAAY,WAAA,EAAY,CAAE,SAAS,cAAc,CAAA,IACvD,KAAA,CAAM,YAAA,CAAa,IAAA,CAAK,CAAC,GAAA,KAAQ,GAAA,CAAI,WAAA,EAAY,CAAE,QAAA,CAAS,cAAc,CAAC;AAAA,GAC/E;AACF","file":"registry.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  \"4xl\": \"max-w-[1536px]\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n *   <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n    const Component = as as any;\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n          maxWidthStyles[maxWidth],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n  white: \"bg-background text-foreground\",\n  gray: \"bg-muted/30 text-foreground\",\n  dark: \"bg-foreground text-background\",\n  gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  secondary: \"bg-secondary text-secondary-foreground\",\n  muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n  xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n *   title=\"Our Services\"\n *   subtitle=\"What we offer\"\n *   background=\"gray\"\n *   spacing=\"lg\"\n * >\n *   <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      id,\n      title,\n      subtitle,\n      children,\n      className,\n      style,\n      background = \"white\",\n      spacing = \"lg\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <section\n        ref={ref}\n        id={id}\n        className={cn(\n          backgroundStyles[background],\n          spacingStyles[spacing],\n          className\n        )}\n        style={style}\n        {...props}\n      >\n        <Container>\n          {(title || subtitle) && (\n            <div className=\"text-center mb-12 md:mb-16\">\n              {subtitle && (\n                <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n                  {subtitle}\n                </p>\n              )}\n              {title && (\n                <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n                  {title}\n                </h2>\n              )}\n            </div>\n          )}\n          {children}\n        </Container>\n      </section>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n","import * as React from \"react\";\nimport { cn } from \"../../../lib/utils\";\nimport { Section } from \"../../ui/section\";\nimport type { SectionBackground, SectionSpacing } from \"../../../src/types\";\n\nexport interface AlternatingBlockSection {\n  content: React.ReactNode;\n  media: React.ReactNode;\n  mediaLeft?: boolean;\n}\n\nexport interface AlternatingBlocksProps {\n  /**\n   * Array of sections to display with alternating layout\n   */\n  sections: AlternatingBlockSection[];\n  /**\n   * Section title (optional)\n   */\n  title?: string;\n  /**\n   * Section subtitle/eyebrow (optional)\n   */\n  subtitle?: string;\n  /**\n   * Background style variant\n   * @default \"white\"\n   */\n  background?: SectionBackground;\n  /**\n   * Vertical spacing variant\n   * @default \"lg\"\n   */\n  spacing?: SectionSpacing;\n  /**\n   * Additional CSS classes for the Section wrapper\n   */\n  className?: string;\n  /**\n   * Additional CSS classes for the content container\n   */\n  contentClassName?: string;\n}\n\n/**\n * AlternatingBlocks component displays content sections with alternating media placement.\n * Uses the Section component for consistent spacing, backgrounds, and optional titles.\n *\n * @example\n * ```tsx\n * <AlternatingBlocks\n *   title=\"Our Story\"\n *   subtitle=\"About Us\"\n *   background=\"gray\"\n *   spacing=\"xl\"\n *   sections={[\n *     {\n *       content: <div><h3>Title</h3><p>Description</p></div>,\n *       media: <img src=\"...\" alt=\"...\" />,\n *       mediaLeft: false\n *     }\n *   ]}\n * />\n * ```\n */\nexport function AlternatingBlocks({\n  sections,\n  title,\n  subtitle,\n  background = \"white\",\n  spacing = \"lg\",\n  className,\n  contentClassName,\n}: AlternatingBlocksProps) {\n  return (\n    <Section\n      title={title}\n      subtitle={subtitle}\n      background={background}\n      spacing={spacing}\n      className={className}\n    >\n      <div className={cn(\"mx-auto w-full max-w-[900px]\", contentClassName)}>\n        <div className=\"space-y-12\">\n          {sections?.map((section, index) => (\n            <div\n              key={index}\n              className=\"grid items-center gap-8 md:grid-cols-2 md:gap-12\"\n            >\n              <div className={section.mediaLeft ? \"md:order-2\" : \"\"}>\n                {section.content}\n              </div>\n\n              <div\n                className={cn(\n                  \"aspect-4/3 overflow-hidden rounded-lg border\",\n                  section.mediaLeft ? \"md:order-1\" : \"\",\n                )}\n              >\n                <div className=\"flex h-full w-full items-center justify-center\">\n                  {section.media}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </Section>\n  );\n}\n","/**\n * Semantic Block Registry\n *\n * This registry maps semantic concepts to available UI blocks for AI-driven\n * site generation. Each block entry contains:\n * - id: Unique identifier for the block\n * - name: Human-readable name\n * - description: What the block does and when to use it\n * - semanticTags: Array of semantic concepts this block represents\n * - category: Block category (about, features, cta, testimonials, etc.)\n * - component: Reference to the actual component\n * - props: TypeScript type for the component's props\n * - exampleUsage: Code example showing how to use the block\n */\n\nimport { AlternatingBlocks } from \"../../components/blocks/about/alternating-blocks\";\nimport type { AlternatingBlocksProps } from \"../../components/blocks/about/alternating-blocks\";\n\nexport interface BlockRegistryEntry<T = any> {\n  id: string;\n  name: string;\n  description: string;\n  semanticTags: string[];\n  category: BlockCategory;\n  component: React.ComponentType<T>;\n  props: string;\n  exampleUsage: string;\n}\n\nexport type BlockCategory =\n  | \"about\"\n  | \"features\"\n  | \"cta\"\n  | \"testimonials\"\n  | \"services\"\n  | \"hero\"\n  | \"footer\"\n  | \"header\"\n  | \"pricing\"\n  | \"team\"\n  | \"stats\"\n  | \"faq\"\n  | \"contact\"\n  | \"gallery\"\n  | \"timeline\"\n  | \"process\"\n  | \"benefits\"\n  | \"comparison\";\n\n/**\n * Block Registry - Central registry of all available UI blocks\n */\nexport const BLOCK_REGISTRY: Record<string, BlockRegistryEntry> = {\n  \"alternating-blocks\": {\n    id: \"alternating-blocks\",\n    name: \"Alternating Content Blocks\",\n    description:\n      \"Display content sections with alternating left/right media placement. Ideal for storytelling, feature showcases, or company history sections.\",\n    semanticTags: [\n      \"about\",\n      \"story\",\n      \"history\",\n      \"timeline\",\n      \"features\",\n      \"benefits\",\n      \"alternating\",\n      \"two-column\",\n      \"content-media\",\n    ],\n    category: \"about\",\n    component: AlternatingBlocks,\n    props: \"AlternatingBlocksProps\",\n    exampleUsage: `\n<AlternatingBlocks\n  sections={[\n    {\n      content: (\n        <div>\n          <div className=\"flex items-center gap-2 mb-3\">\n            <Lightbulb className=\"h-4 w-4 text-primary\" />\n            <span className=\"text-sm font-medium text-muted-foreground\">\n              The Origin\n            </span>\n          </div>\n          <h3 className=\"mb-3 text-2xl font-semibold tracking-tight\">\n            It started with frustration\n          </h3>\n          <p className=\"text-muted-foreground leading-relaxed\">\n            We spent years watching teams drown in tools that promised to help\n            but only added complexity. In 2018, we decided to build something better.\n          </p>\n        </div>\n      ),\n      media: <img src=\"...\" alt=\"...\" />,\n      mediaLeft: false\n    },\n    {\n      content: <div>...</div>,\n      media: <img src=\"...\" alt=\"...\" />,\n      mediaLeft: true\n    }\n  ]}\n/>\n    `.trim(),\n  },\n  // Add more blocks here following this pattern\n};\n\n/**\n * Get blocks by semantic tag\n */\nexport function getBlocksBySemanticTag(tag: string): BlockRegistryEntry[] {\n  return Object.values(BLOCK_REGISTRY).filter((block) =>\n    block.semanticTags.includes(tag)\n  );\n}\n\n/**\n * Get blocks by category\n */\nexport function getBlocksByCategory(\n  category: BlockCategory\n): BlockRegistryEntry[] {\n  return Object.values(BLOCK_REGISTRY).filter(\n    (block) => block.category === category\n  );\n}\n\n/**\n * Get block by ID\n */\nexport function getBlockById(id: string): BlockRegistryEntry | undefined {\n  return BLOCK_REGISTRY[id];\n}\n\n/**\n * Get all available blocks\n */\nexport function getAllBlocks(): BlockRegistryEntry[] {\n  return Object.values(BLOCK_REGISTRY);\n}\n\n/**\n * Get all categories\n */\nexport function getAllCategories(): BlockCategory[] {\n  return Array.from(\n    new Set(Object.values(BLOCK_REGISTRY).map((block) => block.category))\n  );\n}\n\n/**\n * Search blocks by query (searches name, description, and semantic tags)\n */\nexport function searchBlocks(query: string): BlockRegistryEntry[] {\n  const lowercaseQuery = query.toLowerCase();\n  return Object.values(BLOCK_REGISTRY).filter(\n    (block) =>\n      block.name.toLowerCase().includes(lowercaseQuery) ||\n      block.description.toLowerCase().includes(lowercaseQuery) ||\n      block.semanticTags.some((tag) => tag.toLowerCase().includes(lowercaseQuery))\n  );\n}\n"]}

package/dist/section.cjs

@@ -63,6 +63,7 @@ var Section = React__default.default.forwardRef(
     subtitle,
     children,
     className,
+    style,
     background = "white",
     spacing = "lg",
     ...props
@@ -77,6 +78,7 @@ var Section = React__default.default.forwardRef(
           spacingStyles[spacing],
           className
         ),
+        style,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-12 md:mb-16", children: [

package/dist/section.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":";;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAYC,sBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EAAU,qFAAA;AAAA,EACV,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUD,sBAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,cAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,0CAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACTC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCD,cAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,cAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  \"4xl\": \"max-w-[1536px]\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n *   <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n    const Component = as as any;\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n          maxWidthStyles[maxWidth],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n  white: \"bg-background text-foreground\",\n  gray: \"bg-muted/30 text-foreground\",\n  dark: \"bg-foreground text-background\",\n  gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  secondary: \"bg-secondary text-secondary-foreground\",\n  muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n  xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n *   title=\"Our Services\"\n *   subtitle=\"What we offer\"\n *   background=\"gray\"\n *   spacing=\"lg\"\n * >\n *   <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      id,\n      title,\n      subtitle,\n      children,\n      className,\n      background = \"white\",\n      spacing = \"lg\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <section\n        ref={ref}\n        id={id}\n        className={cn(\n          backgroundStyles[background],\n          spacingStyles[spacing],\n          className\n        )}\n        {...props}\n      >\n        <Container>\n          {(title || subtitle) && (\n            <div className=\"text-center mb-12 md:mb-16\">\n              {subtitle && (\n                <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n                  {subtitle}\n                </p>\n              )}\n              {title && (\n                <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n                  {title}\n                </h2>\n              )}\n            </div>\n          )}\n          {children}\n        </Container>\n      </section>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n"]}
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":";;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAYC,sBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EAAU,qFAAA;AAAA,EACV,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUD,sBAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,cAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,0CAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACTC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCD,cAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,cAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  \"4xl\": \"max-w-[1536px]\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n *   <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n    const Component = as as any;\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n          maxWidthStyles[maxWidth],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n  white: \"bg-background text-foreground\",\n  gray: \"bg-muted/30 text-foreground\",\n  dark: \"bg-foreground text-background\",\n  gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  secondary: \"bg-secondary text-secondary-foreground\",\n  muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n  xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n *   title=\"Our Services\"\n *   subtitle=\"What we offer\"\n *   background=\"gray\"\n *   spacing=\"lg\"\n * >\n *   <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      id,\n      title,\n      subtitle,\n      children,\n      className,\n      style,\n      background = \"white\",\n      spacing = \"lg\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <section\n        ref={ref}\n        id={id}\n        className={cn(\n          backgroundStyles[background],\n          spacingStyles[spacing],\n          className\n        )}\n        style={style}\n        {...props}\n      >\n        <Container>\n          {(title || subtitle) && (\n            <div className=\"text-center mb-12 md:mb-16\">\n              {subtitle && (\n                <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n                  {subtitle}\n                </p>\n              )}\n              {title && (\n                <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n                  {title}\n                </h2>\n              )}\n            </div>\n          )}\n          {children}\n        </Container>\n      </section>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n"]}

package/dist/section.js

@@ -57,6 +57,7 @@ var Section = React.forwardRef(
     subtitle,
     children,
     className,
+    style,
     background = "white",
     spacing = "lg",
     ...props
@@ -71,6 +72,7 @@ var Section = React.forwardRef(
           spacingStyles[spacing],
           className
         ),
+        style,
         ...props,
         children: /* @__PURE__ */ jsxs(Container, { children: [
           (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16", children: [

package/dist/section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["React","jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAY,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EAAU,qFAAA;AAAA,EACV,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUA,KAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,+BAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  \"4xl\": \"max-w-[1536px]\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n *   <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n    const Component = as as any;\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n          maxWidthStyles[maxWidth],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n  white: \"bg-background text-foreground\",\n  gray: \"bg-muted/30 text-foreground\",\n  dark: \"bg-foreground text-background\",\n  gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  secondary: \"bg-secondary text-secondary-foreground\",\n  muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n  xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n *   title=\"Our Services\"\n *   subtitle=\"What we offer\"\n *   background=\"gray\"\n *   spacing=\"lg\"\n * >\n *   <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      id,\n      title,\n      subtitle,\n      children,\n      className,\n      background = \"white\",\n      spacing = \"lg\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <section\n        ref={ref}\n        id={id}\n        className={cn(\n          backgroundStyles[background],\n          spacingStyles[spacing],\n          className\n        )}\n        {...props}\n      >\n        <Container>\n          {(title || subtitle) && (\n            <div className=\"text-center mb-12 md:mb-16\">\n              {subtitle && (\n                <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n                  {subtitle}\n                </p>\n              )}\n              {title && (\n                <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n                  {title}\n                </h2>\n              )}\n            </div>\n          )}\n          {children}\n        </Container>\n      </section>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n"]}
+{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["React","jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAY,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EAAU,qFAAA;AAAA,EACV,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUA,KAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,+BAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  \"4xl\": \"max-w-[1536px]\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n *   <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n    const Component = as as any;\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n          maxWidthStyles[maxWidth],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n  white: \"bg-background text-foreground\",\n  gray: \"bg-muted/30 text-foreground\",\n  dark: \"bg-foreground text-background\",\n  gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  secondary: \"bg-secondary text-secondary-foreground\",\n  muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n  xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n *   title=\"Our Services\"\n *   subtitle=\"What we offer\"\n *   background=\"gray\"\n *   spacing=\"lg\"\n * >\n *   <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      id,\n      title,\n      subtitle,\n      children,\n      className,\n      style,\n      background = \"white\",\n      spacing = \"lg\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <section\n        ref={ref}\n        id={id}\n        className={cn(\n          backgroundStyles[background],\n          spacingStyles[spacing],\n          className\n        )}\n        style={style}\n        {...props}\n      >\n        <Container>\n          {(title || subtitle) && (\n            <div className=\"text-center mb-12 md:mb-16\">\n              {subtitle && (\n                <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n                  {subtitle}\n                </p>\n              )}\n              {title && (\n                <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n                  {title}\n                </h2>\n              )}\n            </div>\n          )}\n          {children}\n        </Container>\n      </section>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n"]}

package/dist/types.d.cts

@@ -70,9 +70,13 @@ interface SectionProps extends HTMLAttributes<HTMLElement> {
      */
     spacing?: SectionSpacing;
     /**
-     * Additional CSS classes
+     * Additional CSS classes (can override spacing and background styles)
      */
     className?: string;
+    /**
+     * Inline styles (React.CSSProperties)
+     */
+    style?: React.CSSProperties;
 }
 /**
  * Props for AnimatedDialog component
@@ -176,5 +180,36 @@ interface PageHeroBannerProps extends HTMLAttributes<HTMLDivElement> {
      */
     contentMaxWidth?: ContainerMaxWidth;
 }
+/**
+ * Block Types - Content-Specific UI Blocks
+ */
+/**
+ * Props for AlternatingBlocks component
+ */
+interface AlternatingBlockSection {
+    /**
+     * Content node to display (text, headings, etc.)
+     */
+    content: ReactNode;
+    /**
+     * Media node to display (image, video, icon, etc.)
+     */
+    media: ReactNode;
+    /**
+     * Whether to place media on the left side
+     * @default false (media on right)
+     */
+    mediaLeft?: boolean;
+}
+interface AlternatingBlocksProps {
+    /**
+     * Array of sections to display with alternating layout
+     */
+    sections: AlternatingBlockSection[];
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
 
-export type { AnimatedDialogProps, AnimatedDialogSize, ContainerMaxWidth, ContainerProps, PageHeroBannerProps, SectionBackground, SectionProps, SectionSpacing };
+export type { AlternatingBlockSection, AlternatingBlocksProps, AnimatedDialogProps, AnimatedDialogSize, ContainerMaxWidth, ContainerProps, PageHeroBannerProps, SectionBackground, SectionProps, SectionSpacing };

package/dist/types.d.ts

@@ -70,9 +70,13 @@ interface SectionProps extends HTMLAttributes<HTMLElement> {
      */
     spacing?: SectionSpacing;
     /**
-     * Additional CSS classes
+     * Additional CSS classes (can override spacing and background styles)
      */
     className?: string;
+    /**
+     * Inline styles (React.CSSProperties)
+     */
+    style?: React.CSSProperties;
 }
 /**
  * Props for AnimatedDialog component
@@ -176,5 +180,36 @@ interface PageHeroBannerProps extends HTMLAttributes<HTMLDivElement> {
      */
     contentMaxWidth?: ContainerMaxWidth;
 }
+/**
+ * Block Types - Content-Specific UI Blocks
+ */
+/**
+ * Props for AlternatingBlocks component
+ */
+interface AlternatingBlockSection {
+    /**
+     * Content node to display (text, headings, etc.)
+     */
+    content: ReactNode;
+    /**
+     * Media node to display (image, video, icon, etc.)
+     */
+    media: ReactNode;
+    /**
+     * Whether to place media on the left side
+     * @default false (media on right)
+     */
+    mediaLeft?: boolean;
+}
+interface AlternatingBlocksProps {
+    /**
+     * Array of sections to display with alternating layout
+     */
+    sections: AlternatingBlockSection[];
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
 
-export type { AnimatedDialogProps, AnimatedDialogSize, ContainerMaxWidth, ContainerProps, PageHeroBannerProps, SectionBackground, SectionProps, SectionSpacing };
+export type { AlternatingBlockSection, AlternatingBlocksProps, AnimatedDialogProps, AnimatedDialogSize, ContainerMaxWidth, ContainerProps, PageHeroBannerProps, SectionBackground, SectionProps, SectionSpacing };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@opensite/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
     "performance",
     "pagespeed",
     "tree-shakeable",
-    "ui",
+    "semantic-ui",
     "shadcn",
     "tailwind"
   ],
@@ -76,6 +76,16 @@
       "import": "./dist/popover.js",
       "require": "./dist/popover.cjs"
     },
+    "./blocks/about/alternating-blocks": {
+      "types": "./dist/alternating-blocks.d.ts",
+      "import": "./dist/alternating-blocks.js",
+      "require": "./dist/alternating-blocks.cjs"
+    },
+    "./registry": {
+      "types": "./dist/registry.d.ts",
+      "import": "./dist/registry.js",
+      "require": "./dist/registry.cjs"
+    },
     "./utils": {
       "types": "./dist/utils.d.ts",
       "import": "./dist/utils.js",