@opensite/ui 0.0.1 → 0.0.3

package/README.md

@@ -1,3 +1,5 @@
+![Opensite Semantic UI](https://octane.cdn.ing/api/v1/images/transform?url=https://cdn.ing/assets/i/r/285962/rjrtx8dtbh6y34ae0h9li9v0xfw9/banner-short.png&q=90)
+
 # @opensite/ui
 
 Foundational UI component library for the OpenSite Semantic Site Builder ecosystem. Provides tree-shakable, performance-optimized components with abstract styling support.
@@ -98,7 +100,7 @@ import { Section } from "@opensite/ui/components/section";
 
 ### AnimatedDialog
 
-Animated modal dialog component using framer-motion.
+Animated modal dialog component using framer-motion with polished default styles.
 
 ```tsx
 import { AnimatedDialog } from "@opensite/ui/components/animated-dialog";
@@ -137,6 +139,13 @@ function MyComponent() {
 - `className?: string` - Additional CSS classes for container
 - `contentClassName?: string` - Additional CSS classes for content area
 
+**Default Styles:**
+- Background uses theme background color for proper contrast
+- Generous padding (p-6 on mobile, p-12 on desktop) for spacious feel
+- Proper viewport spacing (my-12 on mobile, my-20 on desktop)
+- Close button with circular background that maintains shape on all screen sizes
+- Smooth framer-motion animations with backdrop blur
+
 ### PageHeroBanner
 
 Hero banner component with image or video background support.
@@ -169,19 +178,121 @@ import { PageHeroBanner } from "@opensite/ui/components/page-hero-banner";
 - `className?: string` - Additional CSS classes
 - All standard div attributes
 
+### Button
+
+Interactive button component with multiple variants and sizes.
+
+```tsx
+import { Button } from "@opensite/ui/components/button";
+
+<Button variant="default" size="md">
+  Click Me
+</Button>
+```
+
+**Props:**
+- `variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"` (default: "default")
+- `size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg"` (default: "default")
+- `asChild?: boolean` - Render as child component using Radix Slot (default: false)
+- All standard button attributes
+
 ### shadcn/ui Components
 
 Additional components from shadcn/ui are available:
 
 ```tsx
-import { Button } from "@opensite/ui/components/button";
 import { Card, CardHeader, CardContent, CardFooter } from "@opensite/ui/components/card";
 import { Badge } from "@opensite/ui/components/badge";
 import { Popover, PopoverTrigger, PopoverContent } from "@opensite/ui/components/popover";
 ```
 
+### Content-Specific Blocks
+
+Pre-configured, reusable UI blocks for common content patterns.
+
+#### AlternatingBlocks
+
+Display content sections with alternating left/right media placement. Uses the Section component for consistent spacing, backgrounds, and optional titles. Located in the `about` category.
+
+```tsx
+import { AlternatingBlocks } from "@opensite/ui/blocks/about/alternating-blocks";
+
+<AlternatingBlocks
+  title="Our Journey"
+  subtitle="About Us"
+  background="gray"
+  spacing="xl"
+  sections={[
+    {
+      content: (
+        <div>
+          <h3 className="mb-3 text-2xl font-semibold">Our Story</h3>
+          <p className="text-muted-foreground">Started in 2018...</p>
+        </div>
+      ),
+      media: <img src="story.jpg" alt="Our story" />,
+      mediaLeft: false
+    },
+    {
+      content: <div>...</div>,
+      media: <img src="mission.jpg" alt="Our mission" />,
+      mediaLeft: true
+    }
+  ]}
+/>
+```
+
+**Props:**
+- `sections: AlternatingBlockSection[]` - Array of content sections (required)
+  - `content: ReactNode` - Content to display (text, headings, etc.)
+  - `media: ReactNode` - Media to display (image, video, icon, etc.)
+  - `mediaLeft?: boolean` - Place media on left side (default: false)
+- `title?: string` - Section title (optional)
+- `subtitle?: string` - Section subtitle/eyebrow (optional)
+- `background?: SectionBackground` - Background variant ("white" | "gray" | "accent", default: "white")
+- `spacing?: SectionSpacing` - Vertical spacing ("none" | "sm" | "md" | "lg" | "xl", default: "lg")
+- `className?: string` - Additional CSS classes for Section wrapper
+- `contentClassName?: string` - Additional CSS classes for content container
+
+**Note:** Blocks are now organized by category. Import path includes category: `@opensite/ui/blocks/[category]/[block-name]`
+
+### Block Registry
+
+Semantic registry for AI-driven component selection. Maps semantic concepts to available UI blocks.
+
+```tsx
+import {
+  BLOCK_REGISTRY,
+  getBlocksBySemanticTag,
+  getBlocksByCategory,
+  searchBlocks
+} from "@opensite/ui/registry";
+
+// Get blocks by semantic tag
+const aboutBlocks = getBlocksBySemanticTag("about");
+
+// Get blocks by category
+const featureBlocks = getBlocksByCategory("features");
+
+// Search blocks
+const results = searchBlocks("alternating");
+```
+
+**Available Functions:**
+- `getBlocksBySemanticTag(tag: string)` - Find blocks matching semantic tag
+- `getBlocksByCategory(category: BlockCategory)` - Find blocks in category
+- `getBlockById(id: string)` - Get specific block by ID
+- `getAllBlocks()` - Get all registered blocks
+- `getAllCategories()` - Get all available categories
+- `searchBlocks(query: string)` - Search blocks by name/description/tags
+
+**Block Categories:**
+- about, features, cta, testimonials, services, hero, footer, header, pricing, team, stats, faq, contact, gallery, timeline, process, benefits, comparison
+
 ## Styling
 
+For comprehensive styling documentation including all CSS variables, theming guides, and customization examples, see [STYLES.md](./docs/STYLES.md).
+
 ### CSS Variables
 
 Components use CSS variables for theming. Define these in your global CSS:
@@ -241,6 +352,10 @@ import type {
   SectionSpacing,
   AnimatedDialogProps,
   PageHeroBannerProps,
+  AlternatingBlocksProps,
+  AlternatingBlockSection,
+  BlockRegistryEntry,
+  BlockCategory,
 } from "@opensite/ui/types";
 ```
 

package/dist/alternating-blocks.cjs

@@ -0,0 +1,138 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// lib/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.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__default.default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsxRuntime.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__default.default.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "white",
+    spacing = "lg",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        ref,
+        id,
+        className: cn(
+          backgroundStyles[background],
+          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: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wider mb-2 text-primary", children: subtitle }),
+            title && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    Section,
+    {
+      title,
+      subtitle,
+      background,
+      spacing,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-12", children: sections?.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "grid items-center gap-8 md:grid-cols-2 md:gap-12",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: section.mediaLeft ? "md:order-2" : "", children: section.content }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "aspect-4/3 overflow-hidden rounded-lg border",
+                  section.mediaLeft ? "md:order-1" : ""
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: section.media })
+              }
+            )
+          ]
+        },
+        index
+      )) }) })
+    }
+  );
+}
+
+exports.AlternatingBlocks = AlternatingBlocks;
+//# sourceMappingURL=alternating-blocks.cjs.map
+//# sourceMappingURL=alternating-blocks.cjs.map

package/dist/alternating-blocks.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"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":"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","file":"alternating-blocks.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"]}

package/dist/alternating-blocks.d.cts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { SectionBackground, SectionSpacing } from './types.cjs';
+
+interface AlternatingBlockSection {
+    content: React.ReactNode;
+    media: React.ReactNode;
+    mediaLeft?: boolean;
+}
+interface AlternatingBlocksProps {
+    /**
+     * Array of sections to display with alternating layout
+     */
+    sections: AlternatingBlockSection[];
+    /**
+     * Section title (optional)
+     */
+    title?: string;
+    /**
+     * Section subtitle/eyebrow (optional)
+     */
+    subtitle?: string;
+    /**
+     * Background style variant
+     * @default "white"
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing variant
+     * @default "lg"
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the Section wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content container
+     */
+    contentClassName?: string;
+}
+/**
+ * AlternatingBlocks component displays content sections with alternating media placement.
+ * Uses the Section component for consistent spacing, backgrounds, and optional titles.
+ *
+ * @example
+ * ```tsx
+ * <AlternatingBlocks
+ *   title="Our Story"
+ *   subtitle="About Us"
+ *   background="gray"
+ *   spacing="xl"
+ *   sections={[
+ *     {
+ *       content: <div><h3>Title</h3><p>Description</p></div>,
+ *       media: <img src="..." alt="..." />,
+ *       mediaLeft: false
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+declare function AlternatingBlocks({ sections, title, subtitle, background, spacing, className, contentClassName, }: AlternatingBlocksProps): react_jsx_runtime.JSX.Element;
+
+export { type AlternatingBlockSection, AlternatingBlocks, type AlternatingBlocksProps };

package/dist/alternating-blocks.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { SectionBackground, SectionSpacing } from './types.js';
+
+interface AlternatingBlockSection {
+    content: React.ReactNode;
+    media: React.ReactNode;
+    mediaLeft?: boolean;
+}
+interface AlternatingBlocksProps {
+    /**
+     * Array of sections to display with alternating layout
+     */
+    sections: AlternatingBlockSection[];
+    /**
+     * Section title (optional)
+     */
+    title?: string;
+    /**
+     * Section subtitle/eyebrow (optional)
+     */
+    subtitle?: string;
+    /**
+     * Background style variant
+     * @default "white"
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing variant
+     * @default "lg"
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the Section wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content container
+     */
+    contentClassName?: string;
+}
+/**
+ * AlternatingBlocks component displays content sections with alternating media placement.
+ * Uses the Section component for consistent spacing, backgrounds, and optional titles.
+ *
+ * @example
+ * ```tsx
+ * <AlternatingBlocks
+ *   title="Our Story"
+ *   subtitle="About Us"
+ *   background="gray"
+ *   spacing="xl"
+ *   sections={[
+ *     {
+ *       content: <div><h3>Title</h3><p>Description</p></div>,
+ *       media: <img src="..." alt="..." />,
+ *       mediaLeft: false
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+declare function AlternatingBlocks({ sections, title, subtitle, background, spacing, className, contentClassName, }: AlternatingBlocksProps): react_jsx_runtime.JSX.Element;
+
+export { type AlternatingBlockSection, AlternatingBlocks, type AlternatingBlocksProps };

package/dist/alternating-blocks.js

@@ -0,0 +1,132 @@
+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
+      )) }) })
+    }
+  );
+}
+
+export { AlternatingBlocks };
+//# sourceMappingURL=alternating-blocks.js.map
+//# sourceMappingURL=alternating-blocks.js.map

package/dist/alternating-blocks.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"],"names":["React","jsx","jsxs"],"mappings":"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","file":"alternating-blocks.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"]}

package/dist/animated-dialog.cjs

@@ -91,19 +91,19 @@ function AnimatedDialog({
         "aria-labelledby": title ? titleId : void 0,
         "aria-describedby": description ? descriptionId : void 0,
         className: cn(
-          "relative z-[60] mx-auto my-10 flex w-[92vw] max-h-[85vh] flex-col overflow-hidden rounded-3xl bg-card p-4 shadow-2xl ring-1 ring-border/10 md:my-16 md:p-10",
+          "relative z-60 mx-auto my-12 flex w-[92vw] max-h-[85vh] flex-col overflow-hidden rounded-3xl bg-background p-6 shadow-2xl ring-1 ring-border/10 md:my-20 md:p-12",
           sizeStyles[size],
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
             header ? header : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
               eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-primary", children: eyebrow }) : null,
               title ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
                   id: titleId,
-                  className: "text-2xl font-semibold text-card-foreground md:text-4xl",
+                  className: "text-2xl font-semibold text-foreground md:text-4xl",
                   children: title
                 }
               ) : null,
@@ -121,7 +121,7 @@ function AnimatedDialog({
               {
                 type: "button",
                 "aria-label": "Close dialog",
-                className: "flex h-9 w-9 items-center justify-center rounded-full bg-foreground text-background transition hover:bg-foreground/80",
+                className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-foreground text-background transition hover:bg-foreground/80 md:h-11 md:w-11",
                 onClick: () => onOpenChange(false),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
@@ -150,13 +150,13 @@ function AnimatedDialog({
             "div",
             {
               className: cn(
-                "mt-6 flex-1 min-h-0 overflow-y-auto pr-2",
+                "mt-8 flex-1 min-h-0 overflow-y-auto pr-2 md:mt-10",
                 contentClassName
               ),
               children
             }
           ) : null,
-          footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: footer }) : null
+          footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 md:mt-10", children: footer }) : null
         ]
       }
     )