@opensite/ui 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  'use strict';
3
2
 
4
3
  var clsx = require('clsx');
@@ -10,6 +9,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
9
 
11
10
  var React__default = /*#__PURE__*/_interopDefault(React);
12
11
 
12
+ // lib/utils.ts
13
13
  function cn(...inputs) {
14
14
  return tailwindMerge.twMerge(clsx.clsx(inputs));
15
15
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/page-hero-banner.tsx"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":"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","file":"page-hero-banner.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-7xl\",\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-2 sm:px-4 lg:px-8\",\n maxWidthStyles[maxWidth],\n className,\n )}\n {...props}\n >\n {children}\n </Component>\n );\n },\n);\n\nContainer.displayName = \"Container\";\n","\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { PageHeroBannerProps } from \"../../src/types\";\n\n/**\n * Page Hero Banner component for full-width hero sections with image or video backgrounds\n *\n * @example\n * ```tsx\n * <PageHeroBanner\n * imageUrl=\"https://example.com/hero.jpg\"\n * alt=\"Hero banner\"\n * minHeight=\"600px\"\n * >\n * <h1>Welcome to our site</h1>\n * <p>Discover amazing content</p>\n * </PageHeroBanner>\n * ```\n */\nexport function PageHeroBanner({\n imageUrl,\n videoUrl,\n alt = \"Hero banner\",\n children,\n className = \"\",\n loading = \"eager\",\n minHeight = \"500px\",\n showOverlay = true,\n overlayOpacity = 0.6,\n contentMaxWidth = \"4xl\",\n overlayClassName,\n contentClassName,\n style,\n ...props\n}: PageHeroBannerProps) {\n if (!imageUrl && !videoUrl) {\n throw new Error(\"PageHeroBanner requires either imageUrl or videoUrl\");\n }\n\n if (imageUrl && videoUrl) {\n throw new Error(\n \"PageHeroBanner cannot have both imageUrl and videoUrl. Please provide only one.\"\n );\n }\n\n return (\n <div\n className={cn(\"relative w-full overflow-hidden\", className)}\n style={{\n minHeight,\n ...style,\n }}\n {...props}\n >\n {/* Image background */}\n {imageUrl && (\n <img\n src={imageUrl}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 w-full h-full object-cover\"\n />\n )}\n\n {/* Video background */}\n {videoUrl && (\n <video\n src={videoUrl}\n className=\"absolute inset-0 w-full h-full object-cover\"\n autoPlay\n loop\n muted\n playsInline\n preload=\"auto\"\n />\n )}\n\n {/* Gradient overlay */}\n {showOverlay && (\n <div\n className={cn(\n \"absolute inset-0 bg-linear-to-b from-black via-black to-black\",\n overlayClassName\n )}\n style={{ opacity: overlayOpacity }}\n />\n )}\n\n {/* Content */}\n <Container\n maxWidth={contentMaxWidth}\n className={cn(\"relative h-full flex items-center\", contentClassName)}\n style={{ minHeight }}\n >\n <div className=\"relative text-background drop-shadow-lg py-16 md:py-24\">\n {children}\n </div>\n </Container>\n </div>\n );\n}\n"]}
1
+ {"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/page-hero-banner.tsx"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":"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","file":"page-hero-banner.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-7xl\",\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-2 sm:px-4 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 { ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { PageHeroBannerProps } from \"../../src/types\";\n\n/**\n * Page Hero Banner component for full-width hero sections with image or video backgrounds\n *\n * @example\n * ```tsx\n * <PageHeroBanner\n * imageUrl=\"https://example.com/hero.jpg\"\n * alt=\"Hero banner\"\n * minHeight=\"600px\"\n * >\n * <h1>Welcome to our site</h1>\n * <p>Discover amazing content</p>\n * </PageHeroBanner>\n * ```\n */\nexport function PageHeroBanner({\n imageUrl,\n videoUrl,\n alt = \"Hero banner\",\n children,\n className = \"\",\n loading = \"eager\",\n minHeight = \"500px\",\n showOverlay = true,\n overlayOpacity = 0.6,\n contentMaxWidth = \"4xl\",\n overlayClassName,\n contentClassName,\n style,\n ...props\n}: PageHeroBannerProps) {\n if (!imageUrl && !videoUrl) {\n throw new Error(\"PageHeroBanner requires either imageUrl or videoUrl\");\n }\n\n if (imageUrl && videoUrl) {\n throw new Error(\n \"PageHeroBanner cannot have both imageUrl and videoUrl. Please provide only one.\"\n );\n }\n\n return (\n <div\n className={cn(\"relative w-full overflow-hidden\", className)}\n style={{\n minHeight,\n ...style,\n }}\n {...props}\n >\n {/* Image background */}\n {imageUrl && (\n <img\n src={imageUrl}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 w-full h-full object-cover\"\n />\n )}\n\n {/* Video background */}\n {videoUrl && (\n <video\n src={videoUrl}\n className=\"absolute inset-0 w-full h-full object-cover\"\n autoPlay\n loop\n muted\n playsInline\n preload=\"auto\"\n />\n )}\n\n {/* Gradient overlay */}\n {showOverlay && (\n <div\n className={cn(\n \"absolute inset-0 bg-linear-to-b from-black via-black to-black\",\n overlayClassName\n )}\n style={{ opacity: overlayOpacity }}\n />\n )}\n\n {/* Content */}\n <Container\n maxWidth={contentMaxWidth}\n className={cn(\"relative h-full flex items-center\", contentClassName)}\n style={{ minHeight }}\n >\n <div className=\"relative text-background drop-shadow-lg py-16 md:py-24\">\n {children}\n </div>\n </Container>\n </div>\n );\n}\n"]}
@@ -1,9 +1,9 @@
1
- "use client";
2
1
  import { clsx } from 'clsx';
3
2
  import { twMerge } from 'tailwind-merge';
4
3
  import React from 'react';
5
4
  import { jsx, jsxs } from 'react/jsx-runtime';
6
5
 
6
+ // lib/utils.ts
7
7
  function cn(...inputs) {
8
8
  return twMerge(clsx(inputs));
9
9
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/page-hero-banner.tsx"],"names":["jsx"],"mappings":"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","file":"page-hero-banner.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-7xl\",\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-2 sm:px-4 lg:px-8\",\n maxWidthStyles[maxWidth],\n className,\n )}\n {...props}\n >\n {children}\n </Component>\n );\n },\n);\n\nContainer.displayName = \"Container\";\n","\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { PageHeroBannerProps } from \"../../src/types\";\n\n/**\n * Page Hero Banner component for full-width hero sections with image or video backgrounds\n *\n * @example\n * ```tsx\n * <PageHeroBanner\n * imageUrl=\"https://example.com/hero.jpg\"\n * alt=\"Hero banner\"\n * minHeight=\"600px\"\n * >\n * <h1>Welcome to our site</h1>\n * <p>Discover amazing content</p>\n * </PageHeroBanner>\n * ```\n */\nexport function PageHeroBanner({\n imageUrl,\n videoUrl,\n alt = \"Hero banner\",\n children,\n className = \"\",\n loading = \"eager\",\n minHeight = \"500px\",\n showOverlay = true,\n overlayOpacity = 0.6,\n contentMaxWidth = \"4xl\",\n overlayClassName,\n contentClassName,\n style,\n ...props\n}: PageHeroBannerProps) {\n if (!imageUrl && !videoUrl) {\n throw new Error(\"PageHeroBanner requires either imageUrl or videoUrl\");\n }\n\n if (imageUrl && videoUrl) {\n throw new Error(\n \"PageHeroBanner cannot have both imageUrl and videoUrl. Please provide only one.\"\n );\n }\n\n return (\n <div\n className={cn(\"relative w-full overflow-hidden\", className)}\n style={{\n minHeight,\n ...style,\n }}\n {...props}\n >\n {/* Image background */}\n {imageUrl && (\n <img\n src={imageUrl}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 w-full h-full object-cover\"\n />\n )}\n\n {/* Video background */}\n {videoUrl && (\n <video\n src={videoUrl}\n className=\"absolute inset-0 w-full h-full object-cover\"\n autoPlay\n loop\n muted\n playsInline\n preload=\"auto\"\n />\n )}\n\n {/* Gradient overlay */}\n {showOverlay && (\n <div\n className={cn(\n \"absolute inset-0 bg-linear-to-b from-black via-black to-black\",\n overlayClassName\n )}\n style={{ opacity: overlayOpacity }}\n />\n )}\n\n {/* Content */}\n <Container\n maxWidth={contentMaxWidth}\n className={cn(\"relative h-full flex items-center\", contentClassName)}\n style={{ minHeight }}\n >\n <div className=\"relative text-background drop-shadow-lg py-16 md:py-24\">\n {children}\n </div>\n </Container>\n </div>\n );\n}\n"]}
1
+ {"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/page-hero-banner.tsx"],"names":["jsx"],"mappings":"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","file":"page-hero-banner.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-7xl\",\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-2 sm:px-4 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 { ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { PageHeroBannerProps } from \"../../src/types\";\n\n/**\n * Page Hero Banner component for full-width hero sections with image or video backgrounds\n *\n * @example\n * ```tsx\n * <PageHeroBanner\n * imageUrl=\"https://example.com/hero.jpg\"\n * alt=\"Hero banner\"\n * minHeight=\"600px\"\n * >\n * <h1>Welcome to our site</h1>\n * <p>Discover amazing content</p>\n * </PageHeroBanner>\n * ```\n */\nexport function PageHeroBanner({\n imageUrl,\n videoUrl,\n alt = \"Hero banner\",\n children,\n className = \"\",\n loading = \"eager\",\n minHeight = \"500px\",\n showOverlay = true,\n overlayOpacity = 0.6,\n contentMaxWidth = \"4xl\",\n overlayClassName,\n contentClassName,\n style,\n ...props\n}: PageHeroBannerProps) {\n if (!imageUrl && !videoUrl) {\n throw new Error(\"PageHeroBanner requires either imageUrl or videoUrl\");\n }\n\n if (imageUrl && videoUrl) {\n throw new Error(\n \"PageHeroBanner cannot have both imageUrl and videoUrl. Please provide only one.\"\n );\n }\n\n return (\n <div\n className={cn(\"relative w-full overflow-hidden\", className)}\n style={{\n minHeight,\n ...style,\n }}\n {...props}\n >\n {/* Image background */}\n {imageUrl && (\n <img\n src={imageUrl}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 w-full h-full object-cover\"\n />\n )}\n\n {/* Video background */}\n {videoUrl && (\n <video\n src={videoUrl}\n className=\"absolute inset-0 w-full h-full object-cover\"\n autoPlay\n loop\n muted\n playsInline\n preload=\"auto\"\n />\n )}\n\n {/* Gradient overlay */}\n {showOverlay && (\n <div\n className={cn(\n \"absolute inset-0 bg-linear-to-b from-black via-black to-black\",\n overlayClassName\n )}\n style={{ opacity: overlayOpacity }}\n />\n )}\n\n {/* Content */}\n <Container\n maxWidth={contentMaxWidth}\n className={cn(\"relative h-full flex items-center\", contentClassName)}\n style={{ minHeight }}\n >\n <div className=\"relative text-background drop-shadow-lg py-16 md:py-24\">\n {children}\n </div>\n </Container>\n </div>\n );\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { VariantProps } from 'class-variance-authority';
3
- import { b as buttonVariants } from './button-variants-OIpPF9yW.cjs';
3
+ import { b as buttonVariants } from './button-variants-U3-Or9vV.cjs';
4
4
  import 'class-variance-authority/types';
5
5
 
6
6
  type FallbackComponentType = "span" | "div" | "button";
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { VariantProps } from 'class-variance-authority';
3
- import { b as buttonVariants } from './button-variants-OIpPF9yW.js';
3
+ import { b as buttonVariants } from './button-variants-U3-Or9vV.js';
4
4
  import 'class-variance-authority/types';
5
5
 
6
6
  type FallbackComponentType = "span" | "div" | "button";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
5
5
  "keywords": [
6
6
  "react",