@opensite/ui 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, OpenSite AI. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,315 @@
+# @opensite/ui
+
+Foundational UI component library for the OpenSite Semantic Site Builder ecosystem. Provides tree-shakable, performance-optimized components with abstract styling support.
+
+## Features
+
+- 🎨 **Abstract Styling**: Components use CSS variables for full theme customization
+- 📦 **Tree-Shakable**: Granular imports for optimal bundle sizes
+- ⚡ **Performance First**: Optimized for Core Web Vitals (LCP ≤2.5s, INP ≤200ms, CLS ≤0.1)
+- 🎯 **TypeScript**: Full type safety with strict mode
+- 🧩 **shadcn/ui Compatible**: Built on shadcn/ui foundations with Tailwind CSS v4
+- 🔧 **Flexible**: Support for both default Tailwind styles and custom semantic builder styles
+
+## Installation
+
+```bash
+pnpm add @opensite/ui
+# or
+npm install @opensite/ui
+```
+
+### Peer Dependencies
+
+This library requires React 16.8.0 or higher:
+
+```bash
+pnpm add react react-dom
+```
+
+## Usage
+
+### Tree-Shakable Imports (Recommended)
+
+For optimal bundle sizes, import components individually:
+
+```tsx
+// Import specific components
+import { Container } from "@opensite/ui/components/container";
+import { Section } from "@opensite/ui/components/section";
+
+// Or import multiple from grouped export
+import { Container, Section, Button } from "@opensite/ui/components";
+```
+
+### Full Import (Not Recommended)
+
+```tsx
+// Import all (larger bundle)
+import * as UI from "@opensite/ui";
+```
+
+## Components
+
+### Container
+
+Layout container for consistent content width and centering.
+
+```tsx
+import { Container } from "@opensite/ui/components/container";
+
+<Container maxWidth="xl">
+  <h1>Page Content</h1>
+</Container>
+```
+
+**Props:**
+- `maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "full"` - Maximum width (default: "xl")
+- `as?: keyof JSX.IntrinsicElements` - HTML element to render (default: "div")
+- `className?: string` - Additional CSS classes
+- All standard HTML attributes
+
+### Section
+
+Section wrapper with optional title, subtitle, and background variants.
+
+```tsx
+import { Section } from "@opensite/ui/components/section";
+
+<Section
+  id="features"
+  title="Our Features"
+  subtitle="What we offer"
+  background="gradient"
+  spacing="lg"
+>
+  <p>Section content here</p>
+</Section>
+```
+
+**Props:**
+- `id?: string` - Section ID for anchor links
+- `title?: string` - Section title (renders as h2)
+- `subtitle?: string` - Section subtitle/eyebrow
+- `background?: "white" | "gray" | "dark" | "gradient" | "primary" | "secondary" | "muted"` (default: "white")
+- `spacing?: "sm" | "md" | "lg" | "xl"` (default: "lg")
+- `className?: string` - Additional CSS classes
+- All standard HTML attributes
+
+### AnimatedDialog
+
+Animated modal dialog component using framer-motion.
+
+```tsx
+import { AnimatedDialog } from "@opensite/ui/components/animated-dialog";
+import { useState } from "react";
+
+function MyComponent() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AnimatedDialog
+      open={open}
+      onOpenChange={setOpen}
+      title="Welcome"
+      eyebrow="Hello"
+      description="This is a modal dialog"
+      size="lg"
+      footer={
+        <button onClick={() => setOpen(false)}>Close</button>
+      }
+    >
+      <p>Dialog content here</p>
+    </AnimatedDialog>
+  );
+}
+```
+
+**Props:**
+- `open: boolean` - Whether the dialog is open (required)
+- `onOpenChange: (open: boolean) => void` - Callback when dialog state changes (required)
+- `title?: string` - Dialog title
+- `eyebrow?: string` - Eyebrow text above title
+- `description?: string` - Dialog description
+- `header?: ReactNode` - Custom header (overrides title/eyebrow/description)
+- `footer?: ReactNode` - Footer content
+- `size?: "sm" | "md" | "lg" | "xl" | "full"` (default: "lg")
+- `className?: string` - Additional CSS classes for container
+- `contentClassName?: string` - Additional CSS classes for content area
+
+### PageHeroBanner
+
+Hero banner component with image or video background support.
+
+```tsx
+import { PageHeroBanner } from "@opensite/ui/components/page-hero-banner";
+
+<PageHeroBanner
+  imageUrl="https://example.com/hero.jpg"
+  alt="Hero banner"
+  minHeight="600px"
+  showOverlay={true}
+  overlayOpacity={0.6}
+  contentMaxWidth="4xl"
+>
+  <h1>Welcome to Our Site</h1>
+  <p>Discover amazing content</p>
+</PageHeroBanner>
+```
+
+**Props:**
+- `imageUrl?: string` - Image URL or Media ID (either imageUrl or videoUrl required)
+- `videoUrl?: string` - Video URL or Media ID (either imageUrl or videoUrl required)
+- `alt?: string` - Alt text for image (default: "Hero banner")
+- `loading?: "eager" | "lazy"` (default: "eager")
+- `minHeight?: string` (default: "500px")
+- `showOverlay?: boolean` (default: true)
+- `overlayOpacity?: number` (default: 0.6)
+- `contentMaxWidth?: ContainerMaxWidth` (default: "4xl")
+- `className?: string` - Additional CSS classes
+- All standard div 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";
+```
+
+## Styling
+
+### CSS Variables
+
+Components use CSS variables for theming. Define these in your global CSS:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  /* ... more variables */
+}
+```
+
+### Tailwind CSS Configuration
+
+Ensure your `tailwind.config.js` includes the library components:
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@opensite/ui/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      // Your custom theme
+    },
+  },
+};
+```
+
+### Custom Styling
+
+Override component styles using the `className` prop:
+
+```tsx
+<Container className="bg-blue-500 text-white px-8">
+  Custom styled container
+</Container>
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```tsx
+import type {
+  ContainerProps,
+  ContainerMaxWidth,
+  SectionProps,
+  SectionBackground,
+  SectionSpacing,
+  AnimatedDialogProps,
+  PageHeroBannerProps,
+} from "@opensite/ui/types";
+```
+
+## Performance
+
+### Bundle Sizes
+
+- **Core Components**: ≤50KB gzipped
+- **Individual Components**: Container (~1KB), Section (~2.5KB), AnimatedDialog (~5KB), PageHeroBanner (~3KB)
+
+### Core Web Vitals
+
+All components are optimized for:
+- **LCP** (Largest Contentful Paint): ≤2.5s
+- **INP** (Interaction to Next Paint): ≤200ms
+- **CLS** (Cumulative Layout Shift): ≤0.1
+
+### Tree-Shaking
+
+The library is fully tree-shakable. Import only what you need:
+
+```tsx
+// ✅ Good - Only imports Container (~1KB)
+import { Container } from "@opensite/ui/components/container";
+
+// ❌ Avoid - Imports everything (~50KB)
+import * as UI from "@opensite/ui";
+```
+
+## Development
+
+### Building
+
+```bash
+pnpm build
+```
+
+### Testing
+
+```bash
+# Run tests
+pnpm test
+
+# Run tests in watch mode
+pnpm test:watch
+
+# Run tests with coverage
+pnpm test -- --coverage
+```
+
+### Type Checking
+
+```bash
+pnpm type-check
+```
+
+## Requirements
+
+- **Node.js**: >=18.0.0
+- **pnpm**: >=9.0.0
+- **React**: >=16.8.0
+
+## License
+
+MIT
+
+## Related Packages
+
+- [@opensite/blocks](https://github.com/opensite-ai/opensite-blocks) - Ultra-lightweight React rendering runtime
+- [@opensite/img](https://github.com/opensite-ai/opensite-img) - Performance-optimized image component
+- [@opensite/video](https://github.com/opensite-ai/opensite-video) - Performance-optimized video component
+- [@opensite/hooks](https://github.com/opensite-ai/opensite-hooks) - Custom React hooks library

package/dist/animated-dialog.cjs

@@ -0,0 +1,168 @@
+'use strict';
+
+var react = require('react');
+var framerMotion = require('framer-motion');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var hooks = require('@opensite/hooks');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var sizeStyles = {
+  sm: "max-w-md",
+  md: "max-w-2xl",
+  lg: "max-w-4xl",
+  xl: "max-w-5xl",
+  full: "max-w-7xl"
+};
+var dialogTransition = {
+  duration: 0.35,
+  ease: [0.16, 1, 0.3, 1]
+};
+function AnimatedDialog({
+  open,
+  onOpenChange,
+  title,
+  eyebrow,
+  description,
+  children,
+  header,
+  footer,
+  size = "lg",
+  className,
+  contentClassName
+}) {
+  const titleId = react.useId();
+  const descriptionId = react.useId();
+  const containerRef = react.useRef(null);
+  hooks.useOnClickOutside(containerRef, () => {
+    if (open) {
+      onOpenChange(false);
+    }
+  });
+  react.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onOpenChange(false);
+      }
+    };
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onOpenChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 h-screen overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1, transition: dialogTransition },
+        exit: { opacity: 0, transition: dialogTransition },
+        className: "fixed inset-0 h-full w-full bg-foreground/80 backdrop-blur-lg"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 24, scale: 0.98 },
+        animate: {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          transition: dialogTransition
+        },
+        exit: {
+          opacity: 0,
+          y: 12,
+          scale: 0.98,
+          transition: dialogTransition
+        },
+        ref: containerRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "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",
+          sizeStyles[size],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-6", 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",
+                  children: title
+                }
+              ) : null,
+              description ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  id: descriptionId,
+                  className: "text-sm text-muted-foreground md:text-base",
+                  children: description
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                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",
+                onClick: () => onOpenChange(false),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: "2",
+                        d: "M18 6L6 18M6 6l12 12"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          children ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mt-6 flex-1 min-h-0 overflow-y-auto pr-2",
+                contentClassName
+              ),
+              children
+            }
+          ) : null,
+          footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: footer }) : null
+        ]
+      }
+    )
+  ] }) : null });
+}
+
+exports.AnimatedDialog = AnimatedDialog;
+//# sourceMappingURL=animated-dialog.cjs.map
+//# sourceMappingURL=animated-dialog.cjs.map

package/dist/animated-dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts","../components/ui/animated-dialog.tsx"],"names":["twMerge","clsx","useId","useRef","useOnClickOutside","useEffect","AnimatePresence","jsxs","jsx","motion"],"mappings":";;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACMA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAA;AAKA,IAAM,gBAAA,GAAmB;AAAA,EACvB,QAAA,EAAU,IAAA;AAAA,EACV,IAAA,EAAM,CAAC,IAAA,EAAM,CAAA,EAAG,KAAK,CAAC;AACxB,CAAA;AAmBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,SAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,MAAM,UAAUC,WAAA,EAAM;AACtB,EAAA,MAAM,gBAAgBA,WAAA,EAAM;AAC5B,EAAA,MAAM,YAAA,GAAeC,aAAuB,IAAK,CAAA;AAEjD,EAAAC,uBAAA,CAAkB,cAAc,MAAM;AACpC,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB;AAAA,EACF,CAAC,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,QAAA;AAC7C,IAAA,QAAA,CAAS,IAAA,CAAK,MAAM,QAAA,GAAW,QAAA;AAC/B,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAE5C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,IAAA,CAAK,MAAM,QAAA,GAAW,gBAAA;AAC/B,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,IACjD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,YAAY,CAAC,CAAA;AAEvB,EAAA,sCACGC,4BAAA,EAAA,EACE,QAAA,EAAA,IAAA,mBACCC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6CAAA,EAEb,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,mBAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,QACtB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,YAAY,gBAAA,EAAiB;AAAA,QACpD,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,YAAY,gBAAA,EAAiB;AAAA,QACjD,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBAGAF,eAAA;AAAA,MAACE,mBAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,SAAS,EAAE,OAAA,EAAS,GAAG,CAAA,EAAG,EAAA,EAAI,OAAO,IAAA,EAAK;AAAA,QAC1C,OAAA,EAAS;AAAA,UACP,OAAA,EAAS,CAAA;AAAA,UACT,CAAA,EAAG,CAAA;AAAA,UACH,KAAA,EAAO,CAAA;AAAA,UACP,UAAA,EAAY;AAAA,SACd;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,OAAA,EAAS,CAAA;AAAA,UACT,CAAA,EAAG,EAAA;AAAA,UACH,KAAA,EAAO,IAAA;AAAA,UACP,UAAA,EAAY;AAAA,SACd;AAAA,QACA,GAAA,EAAK,YAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,kBAAA,EAAkB,cAAc,aAAA,GAAgB,MAAA;AAAA,QAChD,SAAA,EAAW,EAAA;AAAA,UACT,6JAAA;AAAA,UACA,WAAW,IAAI,CAAA;AAAA,UACf;AAAA,SACF;AAAA,QAGA,QAAA,EAAA;AAAA,0BAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wCAAA,EACZ,QAAA,EAAA;AAAA,YAAA,MAAA,GACC,MAAA,mBAEAA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACZ,QAAA,EAAA;AAAA,cAAA,OAAA,mBACCC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+DAAA,EACV,mBACH,CAAA,GACE,IAAA;AAAA,cACH,KAAA,mBACCA,cAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAI,OAAA;AAAA,kBACJ,SAAA,EAAU,yDAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH,GACE,IAAA;AAAA,cACH,WAAA,mBACCA,cAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAI,aAAA;AAAA,kBACJ,SAAA,EAAU,4CAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH,GACE;AAAA,aAAA,EACN,CAAA;AAAA,4BAIFA,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,YAAA,EAAW,cAAA;AAAA,gBACX,SAAA,EAAU,uHAAA;AAAA,gBACV,OAAA,EAAS,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,gBAEjC,QAAA,kBAAAA,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,KAAA,EAAM,4BAAA;AAAA,oBACN,KAAA,EAAM,IAAA;AAAA,oBACN,MAAA,EAAO,IAAA;AAAA,oBACP,OAAA,EAAQ,WAAA;AAAA,oBAER,QAAA,kBAAAA,cAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,IAAA,EAAK,MAAA;AAAA,wBACL,MAAA,EAAO,cAAA;AAAA,wBACP,aAAA,EAAc,OAAA;AAAA,wBACd,cAAA,EAAe,OAAA;AAAA,wBACf,WAAA,EAAY,GAAA;AAAA,wBACZ,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AACF;AAAA;AACF,WAAA,EACF,CAAA;AAAA,UAGC,QAAA,mBACCA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,0CAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEC;AAAA;AAAA,WACH,GACE,IAAA;AAAA,UAGH,yBAASA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA;AACnD,GAAA,EACF,IACE,IAAA,EACN,CAAA;AAEJ","file":"animated-dialog.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","\"use client\";\n\nimport React, { useEffect, useId, useRef } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { cn } from \"../../lib/utils\";\nimport { useOnClickOutside } from \"@opensite/hooks\";\nimport type { AnimatedDialogProps } from \"../../src/types\";\n\n/**\n * Size variants for the dialog\n */\nconst sizeStyles = {\n  sm: \"max-w-md\",\n  md: \"max-w-2xl\",\n  lg: \"max-w-4xl\",\n  xl: \"max-w-5xl\",\n  full: \"max-w-7xl\",\n};\n\n/**\n * Animation transition configuration\n */\nconst dialogTransition = {\n  duration: 0.35,\n  ease: [0.16, 1, 0.3, 1] as const,\n};\n\n/**\n * Animated dialog component with framer-motion animations\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <AnimatedDialog\n *   open={open}\n *   onOpenChange={setOpen}\n *   title=\"Dialog Title\"\n *   description=\"Dialog description\"\n * >\n *   <div>Dialog content</div>\n * </AnimatedDialog>\n * ```\n */\nexport function AnimatedDialog({\n  open,\n  onOpenChange,\n  title,\n  eyebrow,\n  description,\n  children,\n  header,\n  footer,\n  size = \"lg\",\n  className,\n  contentClassName,\n}: AnimatedDialogProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const containerRef = useRef<HTMLDivElement>(null!);\n\n  useOnClickOutside(containerRef, () => {\n    if (open) {\n      onOpenChange(false);\n    }\n  });\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange(false);\n      }\n    };\n\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    window.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.body.style.overflow = previousOverflow;\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open, onOpenChange]);\n\n  return (\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50 h-screen overflow-y-auto\">\n          {/* Backdrop */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1, transition: dialogTransition }}\n            exit={{ opacity: 0, transition: dialogTransition }}\n            className=\"fixed inset-0 h-full w-full bg-foreground/80 backdrop-blur-lg\"\n          />\n\n          {/* Dialog container */}\n          <motion.div\n            initial={{ opacity: 0, y: 24, scale: 0.98 }}\n            animate={{\n              opacity: 1,\n              y: 0,\n              scale: 1,\n              transition: dialogTransition,\n            }}\n            exit={{\n              opacity: 0,\n              y: 12,\n              scale: 0.98,\n              transition: dialogTransition,\n            }}\n            ref={containerRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={title ? titleId : undefined}\n            aria-describedby={description ? descriptionId : undefined}\n            className={cn(\n              \"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\",\n              sizeStyles[size],\n              className\n            )}\n          >\n            {/* Header */}\n            <div className=\"flex items-start justify-between gap-6\">\n              {header ? (\n                header\n              ) : (\n                <div className=\"space-y-3\">\n                  {eyebrow ? (\n                    <p className=\"text-xs font-semibold uppercase tracking-[0.3em] text-primary\">\n                      {eyebrow}\n                    </p>\n                  ) : null}\n                  {title ? (\n                    <h2\n                      id={titleId}\n                      className=\"text-2xl font-semibold text-card-foreground md:text-4xl\"\n                    >\n                      {title}\n                    </h2>\n                  ) : null}\n                  {description ? (\n                    <p\n                      id={descriptionId}\n                      className=\"text-sm text-muted-foreground md:text-base\"\n                    >\n                      {description}\n                    </p>\n                  ) : null}\n                </div>\n              )}\n\n              {/* Close button */}\n              <button\n                type=\"button\"\n                aria-label=\"Close dialog\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-full bg-foreground text-background transition hover:bg-foreground/80\"\n                onClick={() => onOpenChange(false)}\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth=\"2\"\n                    d=\"M18 6L6 18M6 6l12 12\"\n                  />\n                </svg>\n              </button>\n            </div>\n\n            {/* Content */}\n            {children ? (\n              <div\n                className={cn(\n                  \"mt-6 flex-1 min-h-0 overflow-y-auto pr-2\",\n                  contentClassName\n                )}\n              >\n                {children}\n              </div>\n            ) : null}\n\n            {/* Footer */}\n            {footer ? <div className=\"mt-6\">{footer}</div> : null}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n"]}

package/dist/animated-dialog.d.cts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AnimatedDialogProps } from './types.cjs';
+import 'react';
+
+/**
+ * Animated dialog component with framer-motion animations
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <AnimatedDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Dialog Title"
+ *   description="Dialog description"
+ * >
+ *   <div>Dialog content</div>
+ * </AnimatedDialog>
+ * ```
+ */
+declare function AnimatedDialog({ open, onOpenChange, title, eyebrow, description, children, header, footer, size, className, contentClassName, }: AnimatedDialogProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDialog };

package/dist/animated-dialog.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AnimatedDialogProps } from './types.js';
+import 'react';
+
+/**
+ * Animated dialog component with framer-motion animations
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <AnimatedDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Dialog Title"
+ *   description="Dialog description"
+ * >
+ *   <div>Dialog content</div>
+ * </AnimatedDialog>
+ * ```
+ */
+declare function AnimatedDialog({ open, onOpenChange, title, eyebrow, description, children, header, footer, size, className, contentClassName, }: AnimatedDialogProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedDialog };