@opensite/ui 0.0.1

package/dist/types.d.cts

@@ -0,0 +1,180 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Max width variants for Container component
+ */
+type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "full";
+/**
+ * Background variants for Section component
+ */
+type SectionBackground = "white" | "gray" | "dark" | "gradient" | "primary" | "secondary" | "muted";
+/**
+ * Spacing variants for Section component
+ */
+type SectionSpacing = "sm" | "md" | "lg" | "xl";
+/**
+ * Size variants for AnimatedDialog component
+ */
+type AnimatedDialogSize = "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Props for Container component
+ */
+interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The content to be rendered inside the container
+     */
+    children: ReactNode;
+    /**
+     * Maximum width of the container
+     * @default "xl"
+     */
+    maxWidth?: ContainerMaxWidth;
+    /**
+     * HTML element type to render
+     * @default "div"
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Props for Section component
+ */
+interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Section ID for anchor links
+     */
+    id?: string;
+    /**
+     * Section title (renders as h2)
+     */
+    title?: string;
+    /**
+     * Section subtitle/eyebrow (renders above title)
+     */
+    subtitle?: string;
+    /**
+     * The content to be rendered inside the section
+     */
+    children: ReactNode;
+    /**
+     * Background style variant
+     * @default "white"
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing variant
+     * @default "lg"
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Props for AnimatedDialog component
+ */
+interface AnimatedDialogProps {
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * Callback when the dialog open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Dialog title
+     */
+    title?: string;
+    /**
+     * Eyebrow text above title
+     */
+    eyebrow?: string;
+    /**
+     * Dialog description
+     */
+    description?: string;
+    /**
+     * Dialog content
+     */
+    children?: ReactNode;
+    /**
+     * Custom header content (overrides title/eyebrow/description)
+     */
+    header?: ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: ReactNode;
+    /**
+     * Dialog size variant
+     * @default "lg"
+     */
+    size?: AnimatedDialogSize;
+    /**
+     * Additional CSS classes for the dialog container
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content area
+     */
+    contentClassName?: string;
+}
+/**
+ * Props for PageHeroBanner component
+ */
+interface PageHeroBannerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image URL or Media ID to display as background
+     * Either imageUrl or videoUrl must be provided
+     */
+    imageUrl?: string;
+    /**
+     * Video URL or Media ID to display as background
+     * Either imageUrl or videoUrl must be provided
+     */
+    videoUrl?: string;
+    /**
+     * Alt text for the image (not used for video)
+     */
+    alt?: string;
+    /**
+     * Content to display on top of the banner
+     */
+    children: ReactNode;
+    /**
+     * Custom className for the banner container
+     */
+    className?: string;
+    /**
+     * Whether to use eager loading for the image
+     * @default true for hero banners
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Minimum height of the banner
+     * @default "500px"
+     */
+    minHeight?: string;
+    /**
+     * Whether to show the gradient overlay
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Gradient overlay opacity
+     * @default 0.6
+     */
+    overlayOpacity?: number;
+    /**
+     * Maximum width of content area
+     * @default "4xl"
+     */
+    contentMaxWidth?: ContainerMaxWidth;
+}
+
+export type { AnimatedDialogProps, AnimatedDialogSize, ContainerMaxWidth, ContainerProps, PageHeroBannerProps, SectionBackground, SectionProps, SectionSpacing };

package/dist/types.d.ts

@@ -0,0 +1,180 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Max width variants for Container component
+ */
+type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "full";
+/**
+ * Background variants for Section component
+ */
+type SectionBackground = "white" | "gray" | "dark" | "gradient" | "primary" | "secondary" | "muted";
+/**
+ * Spacing variants for Section component
+ */
+type SectionSpacing = "sm" | "md" | "lg" | "xl";
+/**
+ * Size variants for AnimatedDialog component
+ */
+type AnimatedDialogSize = "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Props for Container component
+ */
+interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The content to be rendered inside the container
+     */
+    children: ReactNode;
+    /**
+     * Maximum width of the container
+     * @default "xl"
+     */
+    maxWidth?: ContainerMaxWidth;
+    /**
+     * HTML element type to render
+     * @default "div"
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Props for Section component
+ */
+interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Section ID for anchor links
+     */
+    id?: string;
+    /**
+     * Section title (renders as h2)
+     */
+    title?: string;
+    /**
+     * Section subtitle/eyebrow (renders above title)
+     */
+    subtitle?: string;
+    /**
+     * The content to be rendered inside the section
+     */
+    children: ReactNode;
+    /**
+     * Background style variant
+     * @default "white"
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing variant
+     * @default "lg"
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Props for AnimatedDialog component
+ */
+interface AnimatedDialogProps {
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * Callback when the dialog open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Dialog title
+     */
+    title?: string;
+    /**
+     * Eyebrow text above title
+     */
+    eyebrow?: string;
+    /**
+     * Dialog description
+     */
+    description?: string;
+    /**
+     * Dialog content
+     */
+    children?: ReactNode;
+    /**
+     * Custom header content (overrides title/eyebrow/description)
+     */
+    header?: ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: ReactNode;
+    /**
+     * Dialog size variant
+     * @default "lg"
+     */
+    size?: AnimatedDialogSize;
+    /**
+     * Additional CSS classes for the dialog container
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content area
+     */
+    contentClassName?: string;
+}
+/**
+ * Props for PageHeroBanner component
+ */
+interface PageHeroBannerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image URL or Media ID to display as background
+     * Either imageUrl or videoUrl must be provided
+     */
+    imageUrl?: string;
+    /**
+     * Video URL or Media ID to display as background
+     * Either imageUrl or videoUrl must be provided
+     */
+    videoUrl?: string;
+    /**
+     * Alt text for the image (not used for video)
+     */
+    alt?: string;
+    /**
+     * Content to display on top of the banner
+     */
+    children: ReactNode;
+    /**
+     * Custom className for the banner container
+     */
+    className?: string;
+    /**
+     * Whether to use eager loading for the image
+     * @default true for hero banners
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Minimum height of the banner
+     * @default "500px"
+     */
+    minHeight?: string;
+    /**
+     * Whether to show the gradient overlay
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Gradient overlay opacity
+     * @default 0.6
+     */
+    overlayOpacity?: number;
+    /**
+     * Maximum width of content area
+     * @default "4xl"
+     */
+    contentMaxWidth?: ContainerMaxWidth;
+}
+
+export type { AnimatedDialogProps, AnimatedDialogSize, ContainerMaxWidth, ContainerProps, PageHeroBannerProps, SectionBackground, SectionProps, SectionSpacing };

package/dist/types.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

package/dist/utils.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// lib/utils.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports.cn = cn;
+//# sourceMappingURL=utils.cjs.map
+//# sourceMappingURL=utils.cjs.map

package/dist/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts"],"names":["twMerge","clsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"utils.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"]}

package/dist/utils.d.cts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.js

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"utils.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"]}

package/package.json

@@ -0,0 +1,152 @@
+{
+  "name": "@opensite/ui",
+  "version": "0.0.1",
+  "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
+  "keywords": [
+    "react",
+    "performance",
+    "pagespeed",
+    "tree-shakeable",
+    "ui",
+    "shadcn",
+    "tailwind"
+  ],
+  "homepage": "https://github.com/opensite-ai/opensite-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opensite-ai/opensite-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/opensite-ai/opensite-ui/issues"
+  },
+  "author": "OpenSite AI (https://opensite.ai)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js",
+      "require": "./dist/components.cjs"
+    },
+    "./components/container": {
+      "types": "./dist/container.d.ts",
+      "import": "./dist/container.js",
+      "require": "./dist/container.cjs"
+    },
+    "./components/section": {
+      "types": "./dist/section.d.ts",
+      "import": "./dist/section.js",
+      "require": "./dist/section.cjs"
+    },
+    "./components/animated-dialog": {
+      "types": "./dist/animated-dialog.d.ts",
+      "import": "./dist/animated-dialog.js",
+      "require": "./dist/animated-dialog.cjs"
+    },
+    "./components/page-hero-banner": {
+      "types": "./dist/page-hero-banner.d.ts",
+      "import": "./dist/page-hero-banner.js",
+      "require": "./dist/page-hero-banner.cjs"
+    },
+    "./components/button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js",
+      "require": "./dist/button.cjs"
+    },
+    "./components/card": {
+      "types": "./dist/card.d.ts",
+      "import": "./dist/card.js",
+      "require": "./dist/card.cjs"
+    },
+    "./components/badge": {
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js",
+      "require": "./dist/badge.cjs"
+    },
+    "./components/popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js",
+      "require": "./dist/popover.cjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js",
+      "require": "./dist/utils.cjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:ci": "./scripts/test-ci-silent.sh",
+    "type-check": "tsc --noEmit",
+    "size": "bash -c 'size-limit --silent 2>/dev/null'",
+    "prepublishOnly": "pnpm run build && pnpm run test:ci"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/coverage-v8": "^4.0.10",
+    "@vitest/ui": "^4.0.10",
+    "happy-dom": "^20.0.10",
+    "jsdom": "^27.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "size-limit": "^11.1.6",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^4.0.10"
+  },
+  "dependencies": {
+    "@opensite/hooks": "^0.1.1",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.2.0",
+    "lucide-react": "^0.562.0",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "optionalDependencies": {
+    "@legendapp/state": "^3.0.0-beta.42",
+    "valibot": "^1.2.0"
+  },
+  "packageManager": "pnpm@9.14.4",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=9.0.0"
+  }
+}