@opensite/ui 0.0.1
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.
- package/LICENSE +28 -0
- package/README.md +315 -0
- package/dist/animated-dialog.cjs +168 -0
- package/dist/animated-dialog.cjs.map +1 -0
- package/dist/animated-dialog.d.cts +24 -0
- package/dist/animated-dialog.d.ts +24 -0
- package/dist/animated-dialog.js +166 -0
- package/dist/animated-dialog.js.map +1 -0
- package/dist/badge.cjs +49 -0
- package/dist/badge.cjs.map +1 -0
- package/dist/badge.d.cts +13 -0
- package/dist/badge.d.ts +13 -0
- package/dist/badge.js +46 -0
- package/dist/badge.js.map +1 -0
- package/dist/button.cjs +63 -0
- package/dist/button.cjs.map +1 -0
- package/dist/button.d.cts +14 -0
- package/dist/button.d.ts +14 -0
- package/dist/button.js +60 -0
- package/dist/button.js.map +1 -0
- package/dist/card.cjs +99 -0
- package/dist/card.cjs.map +1 -0
- package/dist/card.d.cts +12 -0
- package/dist/card.d.ts +12 -0
- package/dist/card.js +91 -0
- package/dist/card.js.map +1 -0
- package/dist/components.cjs +533 -0
- package/dist/components.cjs.map +1 -0
- package/dist/components.d.cts +14 -0
- package/dist/components.d.ts +14 -0
- package/dist/components.js +494 -0
- package/dist/components.js.map +1 -0
- package/dist/container.cjs +47 -0
- package/dist/container.cjs.map +1 -0
- package/dist/container.d.cts +16 -0
- package/dist/container.d.ts +16 -0
- package/dist/container.js +41 -0
- package/dist/container.js.map +1 -0
- package/dist/index.cjs +534 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +16 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +494 -0
- package/dist/index.js.map +1 -0
- package/dist/page-hero-banner.cjs +119 -0
- package/dist/page-hero-banner.cjs.map +1 -0
- package/dist/page-hero-banner.d.cts +22 -0
- package/dist/page-hero-banner.d.ts +22 -0
- package/dist/page-hero-banner.js +113 -0
- package/dist/page-hero-banner.js.map +1 -0
- package/dist/popover.cjs +73 -0
- package/dist/popover.cjs.map +1 -0
- package/dist/popover.d.cts +10 -0
- package/dist/popover.d.ts +10 -0
- package/dist/popover.js +48 -0
- package/dist/popover.js.map +1 -0
- package/dist/section.cjs +96 -0
- package/dist/section.cjs.map +1 -0
- package/dist/section.d.cts +21 -0
- package/dist/section.d.ts +21 -0
- package/dist/section.js +90 -0
- package/dist/section.js.map +1 -0
- package/dist/types.cjs +4 -0
- package/dist/types.cjs.map +1 -0
- package/dist/types.d.cts +180 -0
- package/dist/types.d.ts +180 -0
- package/dist/types.js +3 -0
- package/dist/types.js.map +1 -0
- package/dist/utils.cjs +13 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.d.cts +5 -0
- package/dist/utils.d.ts +5 -0
- package/dist/utils.js +11 -0
- package/dist/utils.js.map +1 -0
- package/package.json +152 -0
|
@@ -0,0 +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-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","\"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 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=\"absolute inset-0 bg-gradient-to-b from-foreground/70 via-foreground/50 to-foreground/80\"\n style={{ opacity: overlayOpacity }}\n />\n )}\n\n {/* Content */}\n <Container\n maxWidth={contentMaxWidth}\n className=\"relative h-full flex items-center\"\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"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { PageHeroBannerProps } from './types.cjs';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Page Hero Banner component for full-width hero sections with image or video backgrounds
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <PageHeroBanner
|
|
11
|
+
* imageUrl="https://example.com/hero.jpg"
|
|
12
|
+
* alt="Hero banner"
|
|
13
|
+
* minHeight="600px"
|
|
14
|
+
* >
|
|
15
|
+
* <h1>Welcome to our site</h1>
|
|
16
|
+
* <p>Discover amazing content</p>
|
|
17
|
+
* </PageHeroBanner>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
declare function PageHeroBanner({ imageUrl, videoUrl, alt, children, className, loading, minHeight, showOverlay, overlayOpacity, contentMaxWidth, style, ...props }: PageHeroBannerProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { PageHeroBanner };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { PageHeroBannerProps } from './types.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Page Hero Banner component for full-width hero sections with image or video backgrounds
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <PageHeroBanner
|
|
11
|
+
* imageUrl="https://example.com/hero.jpg"
|
|
12
|
+
* alt="Hero banner"
|
|
13
|
+
* minHeight="600px"
|
|
14
|
+
* >
|
|
15
|
+
* <h1>Welcome to our site</h1>
|
|
16
|
+
* <p>Discover amazing content</p>
|
|
17
|
+
* </PageHeroBanner>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
declare function PageHeroBanner({ imageUrl, videoUrl, alt, children, className, loading, minHeight, showOverlay, overlayOpacity, contentMaxWidth, style, ...props }: PageHeroBannerProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { PageHeroBanner };
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
var maxWidthStyles = {
|
|
10
|
+
sm: "max-w-screen-sm",
|
|
11
|
+
md: "max-w-screen-md",
|
|
12
|
+
lg: "max-w-screen-lg",
|
|
13
|
+
xl: "max-w-screen-xl",
|
|
14
|
+
"2xl": "max-w-screen-2xl",
|
|
15
|
+
"4xl": "max-w-[1536px]",
|
|
16
|
+
full: "max-w-full"
|
|
17
|
+
};
|
|
18
|
+
var Container = React.forwardRef(
|
|
19
|
+
({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
|
|
20
|
+
const Component = as;
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
Component,
|
|
23
|
+
{
|
|
24
|
+
ref,
|
|
25
|
+
className: cn(
|
|
26
|
+
"mx-auto w-full px-4 sm:px-6 lg:px-8",
|
|
27
|
+
maxWidthStyles[maxWidth],
|
|
28
|
+
className
|
|
29
|
+
),
|
|
30
|
+
...props,
|
|
31
|
+
children
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
Container.displayName = "Container";
|
|
37
|
+
function PageHeroBanner({
|
|
38
|
+
imageUrl,
|
|
39
|
+
videoUrl,
|
|
40
|
+
alt = "Hero banner",
|
|
41
|
+
children,
|
|
42
|
+
className = "",
|
|
43
|
+
loading = "eager",
|
|
44
|
+
minHeight = "500px",
|
|
45
|
+
showOverlay = true,
|
|
46
|
+
overlayOpacity = 0.6,
|
|
47
|
+
contentMaxWidth = "4xl",
|
|
48
|
+
style,
|
|
49
|
+
...props
|
|
50
|
+
}) {
|
|
51
|
+
if (!imageUrl && !videoUrl) {
|
|
52
|
+
throw new Error("PageHeroBanner requires either imageUrl or videoUrl");
|
|
53
|
+
}
|
|
54
|
+
if (imageUrl && videoUrl) {
|
|
55
|
+
throw new Error(
|
|
56
|
+
"PageHeroBanner cannot have both imageUrl and videoUrl. Please provide only one."
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
return /* @__PURE__ */ jsxs(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
className: cn("relative w-full overflow-hidden", className),
|
|
63
|
+
style: {
|
|
64
|
+
minHeight,
|
|
65
|
+
...style
|
|
66
|
+
},
|
|
67
|
+
...props,
|
|
68
|
+
children: [
|
|
69
|
+
imageUrl && /* @__PURE__ */ jsx(
|
|
70
|
+
"img",
|
|
71
|
+
{
|
|
72
|
+
src: imageUrl,
|
|
73
|
+
alt,
|
|
74
|
+
loading,
|
|
75
|
+
className: "absolute inset-0 w-full h-full object-cover"
|
|
76
|
+
}
|
|
77
|
+
),
|
|
78
|
+
videoUrl && /* @__PURE__ */ jsx(
|
|
79
|
+
"video",
|
|
80
|
+
{
|
|
81
|
+
src: videoUrl,
|
|
82
|
+
className: "absolute inset-0 w-full h-full object-cover",
|
|
83
|
+
autoPlay: true,
|
|
84
|
+
loop: true,
|
|
85
|
+
muted: true,
|
|
86
|
+
playsInline: true,
|
|
87
|
+
preload: "auto"
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
showOverlay && /* @__PURE__ */ jsx(
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
className: "absolute inset-0 bg-gradient-to-b from-foreground/70 via-foreground/50 to-foreground/80",
|
|
94
|
+
style: { opacity: overlayOpacity }
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ jsx(
|
|
98
|
+
Container,
|
|
99
|
+
{
|
|
100
|
+
maxWidth: contentMaxWidth,
|
|
101
|
+
className: "relative h-full flex items-center",
|
|
102
|
+
style: { minHeight },
|
|
103
|
+
children: /* @__PURE__ */ jsx("div", { className: "relative text-background drop-shadow-lg py-16 md:py-24", children })
|
|
104
|
+
}
|
|
105
|
+
)
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
export { PageHeroBanner };
|
|
112
|
+
//# sourceMappingURL=page-hero-banner.js.map
|
|
113
|
+
//# sourceMappingURL=page-hero-banner.js.map
|
|
@@ -0,0 +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-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","\"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 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=\"absolute inset-0 bg-gradient-to-b from-foreground/70 via-foreground/50 to-foreground/80\"\n style={{ opacity: overlayOpacity }}\n />\n )}\n\n {/* Content */}\n <Container\n maxWidth={contentMaxWidth}\n className=\"relative h-full flex items-center\"\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"]}
|
package/dist/popover.cjs
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var tailwindMerge = require('tailwind-merge');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
function _interopNamespace(e) {
|
|
9
|
+
if (e && e.__esModule) return e;
|
|
10
|
+
var n = Object.create(null);
|
|
11
|
+
if (e) {
|
|
12
|
+
Object.keys(e).forEach(function (k) {
|
|
13
|
+
if (k !== 'default') {
|
|
14
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
15
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () { return e[k]; }
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
n.default = e;
|
|
23
|
+
return Object.freeze(n);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
|
|
27
|
+
|
|
28
|
+
// components/ui/popover.tsx
|
|
29
|
+
function cn(...inputs) {
|
|
30
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
31
|
+
}
|
|
32
|
+
function Popover({
|
|
33
|
+
...props
|
|
34
|
+
}) {
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
|
|
36
|
+
}
|
|
37
|
+
function PopoverTrigger({
|
|
38
|
+
...props
|
|
39
|
+
}) {
|
|
40
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
41
|
+
}
|
|
42
|
+
function PopoverContent({
|
|
43
|
+
className,
|
|
44
|
+
align = "center",
|
|
45
|
+
sideOffset = 4,
|
|
46
|
+
...props
|
|
47
|
+
}) {
|
|
48
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
49
|
+
PopoverPrimitive__namespace.Content,
|
|
50
|
+
{
|
|
51
|
+
"data-slot": "popover-content",
|
|
52
|
+
align,
|
|
53
|
+
sideOffset,
|
|
54
|
+
className: cn(
|
|
55
|
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
|
56
|
+
className
|
|
57
|
+
),
|
|
58
|
+
...props
|
|
59
|
+
}
|
|
60
|
+
) });
|
|
61
|
+
}
|
|
62
|
+
function PopoverAnchor({
|
|
63
|
+
...props
|
|
64
|
+
}) {
|
|
65
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
exports.Popover = Popover;
|
|
69
|
+
exports.PopoverAnchor = PopoverAnchor;
|
|
70
|
+
exports.PopoverContent = PopoverContent;
|
|
71
|
+
exports.PopoverTrigger = PopoverTrigger;
|
|
72
|
+
//# sourceMappingURL=popover.cjs.map
|
|
73
|
+
//# sourceMappingURL=popover.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/utils.ts","../components/ui/popover.tsx"],"names":["twMerge","clsx","PopoverPrimitive","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,sCAAyBC,2BAAA,CAAA,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,sCAAyBA,2BAAA,CAAA,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACEC,cAAA,CAAkBD,oCAAjB,EACC,QAAA,kBAAAC,cAAA;AAAA,IAAkBD,2BAAA,CAAA,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,geAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEA,SAAS,aAAA,CAAc;AAAA,EACrB,GAAG;AACL,CAAA,EAAyD;AACvD,EAAA,sCAAyBA,2BAAA,CAAA,MAAA,EAAjB,EAAwB,WAAA,EAAU,gBAAA,EAAkB,GAAG,KAAA,EAAO,CAAA;AACxE","file":"popover.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 * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n data-slot=\"popover-content\"\n align={align}\n sideOffset={sideOffset}\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n className\n )}\n {...props}\n />\n </PopoverPrimitive.Portal>\n )\n}\n\nfunction PopoverAnchor({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
4
|
+
|
|
5
|
+
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
6
|
+
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
4
|
+
|
|
5
|
+
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
6
|
+
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
|
package/dist/popover.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// components/ui/popover.tsx
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
function Popover({
|
|
11
|
+
...props
|
|
12
|
+
}) {
|
|
13
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
|
|
14
|
+
}
|
|
15
|
+
function PopoverTrigger({
|
|
16
|
+
...props
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
19
|
+
}
|
|
20
|
+
function PopoverContent({
|
|
21
|
+
className,
|
|
22
|
+
align = "center",
|
|
23
|
+
sideOffset = 4,
|
|
24
|
+
...props
|
|
25
|
+
}) {
|
|
26
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
27
|
+
PopoverPrimitive.Content,
|
|
28
|
+
{
|
|
29
|
+
"data-slot": "popover-content",
|
|
30
|
+
align,
|
|
31
|
+
sideOffset,
|
|
32
|
+
className: cn(
|
|
33
|
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
|
34
|
+
className
|
|
35
|
+
),
|
|
36
|
+
...props
|
|
37
|
+
}
|
|
38
|
+
) });
|
|
39
|
+
}
|
|
40
|
+
function PopoverAnchor({
|
|
41
|
+
...props
|
|
42
|
+
}) {
|
|
43
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
|
|
47
|
+
//# sourceMappingURL=popover.js.map
|
|
48
|
+
//# sourceMappingURL=popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/utils.ts","../components/ui/popover.tsx"],"names":[],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,2BAAyB,gBAAA,CAAA,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,2BAAyB,gBAAA,CAAA,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA,CAAkB,yBAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,IAAkB,gBAAA,CAAA,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,geAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEA,SAAS,aAAA,CAAc;AAAA,EACrB,GAAG;AACL,CAAA,EAAyD;AACvD,EAAA,2BAAyB,gBAAA,CAAA,MAAA,EAAjB,EAAwB,WAAA,EAAU,gBAAA,EAAkB,GAAG,KAAA,EAAO,CAAA;AACxE","file":"popover.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 * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n data-slot=\"popover-content\"\n align={align}\n sideOffset={sideOffset}\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n className\n )}\n {...props}\n />\n </PopoverPrimitive.Portal>\n )\n}\n\nfunction PopoverAnchor({\n ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"]}
|
package/dist/section.cjs
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var tailwindMerge = require('tailwind-merge');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
11
|
+
|
|
12
|
+
// components/ui/section.tsx
|
|
13
|
+
function cn(...inputs) {
|
|
14
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
15
|
+
}
|
|
16
|
+
var maxWidthStyles = {
|
|
17
|
+
sm: "max-w-screen-sm",
|
|
18
|
+
md: "max-w-screen-md",
|
|
19
|
+
lg: "max-w-screen-lg",
|
|
20
|
+
xl: "max-w-screen-xl",
|
|
21
|
+
"2xl": "max-w-screen-2xl",
|
|
22
|
+
"4xl": "max-w-[1536px]",
|
|
23
|
+
full: "max-w-full"
|
|
24
|
+
};
|
|
25
|
+
var Container = React__default.default.forwardRef(
|
|
26
|
+
({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
|
|
27
|
+
const Component = as;
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
29
|
+
Component,
|
|
30
|
+
{
|
|
31
|
+
ref,
|
|
32
|
+
className: cn(
|
|
33
|
+
"mx-auto w-full px-4 sm:px-6 lg:px-8",
|
|
34
|
+
maxWidthStyles[maxWidth],
|
|
35
|
+
className
|
|
36
|
+
),
|
|
37
|
+
...props,
|
|
38
|
+
children
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
Container.displayName = "Container";
|
|
44
|
+
var backgroundStyles = {
|
|
45
|
+
white: "bg-background text-foreground",
|
|
46
|
+
gray: "bg-muted/30 text-foreground",
|
|
47
|
+
dark: "bg-foreground text-background",
|
|
48
|
+
gradient: "bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
|
|
49
|
+
primary: "bg-primary text-primary-foreground",
|
|
50
|
+
secondary: "bg-secondary text-secondary-foreground",
|
|
51
|
+
muted: "bg-muted text-muted-foreground"
|
|
52
|
+
};
|
|
53
|
+
var spacingStyles = {
|
|
54
|
+
sm: "py-12 md:py-16",
|
|
55
|
+
md: "py-16 md:py-24",
|
|
56
|
+
lg: "py-20 md:py-32",
|
|
57
|
+
xl: "py-24 md:py-40"
|
|
58
|
+
};
|
|
59
|
+
var Section = React__default.default.forwardRef(
|
|
60
|
+
({
|
|
61
|
+
id,
|
|
62
|
+
title,
|
|
63
|
+
subtitle,
|
|
64
|
+
children,
|
|
65
|
+
className,
|
|
66
|
+
background = "white",
|
|
67
|
+
spacing = "lg",
|
|
68
|
+
...props
|
|
69
|
+
}, ref) => {
|
|
70
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
"section",
|
|
72
|
+
{
|
|
73
|
+
ref,
|
|
74
|
+
id,
|
|
75
|
+
className: cn(
|
|
76
|
+
backgroundStyles[background],
|
|
77
|
+
spacingStyles[spacing],
|
|
78
|
+
className
|
|
79
|
+
),
|
|
80
|
+
...props,
|
|
81
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
|
|
82
|
+
(title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-12 md:mb-16", children: [
|
|
83
|
+
subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wider mb-2 text-primary", children: subtitle }),
|
|
84
|
+
title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight", children: title })
|
|
85
|
+
] }),
|
|
86
|
+
children
|
|
87
|
+
] })
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
Section.displayName = "Section";
|
|
93
|
+
|
|
94
|
+
exports.Section = Section;
|
|
95
|
+
//# sourceMappingURL=section.cjs.map
|
|
96
|
+
//# sourceMappingURL=section.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["twMerge","clsx","React","jsx","jsxs"],"mappings":";;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAYC,sBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EAAU,qFAAA;AAAA,EACV,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUD,sBAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,cAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,0CAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACTC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCD,cAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,cAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n sm: \"max-w-screen-sm\",\n md: \"max-w-screen-md\",\n lg: \"max-w-screen-lg\",\n xl: \"max-w-screen-xl\",\n \"2xl\": \"max-w-screen-2xl\",\n \"4xl\": \"max-w-[1536px]\",\n full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n * <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n const Component = as as any;\n return (\n <Component\n ref={ref}\n className={cn(\n \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n maxWidthStyles[maxWidth],\n className\n )}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n white: \"bg-background text-foreground\",\n gray: \"bg-muted/30 text-foreground\",\n dark: \"bg-foreground text-background\",\n gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n primary: \"bg-primary text-primary-foreground\",\n secondary: \"bg-secondary text-secondary-foreground\",\n muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n sm: \"py-12 md:py-16\",\n md: \"py-16 md:py-24\",\n lg: \"py-20 md:py-32\",\n xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n * title=\"Our Services\"\n * subtitle=\"What we offer\"\n * background=\"gray\"\n * spacing=\"lg\"\n * >\n * <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n (\n {\n id,\n title,\n subtitle,\n children,\n className,\n background = \"white\",\n spacing = \"lg\",\n ...props\n },\n ref\n ) => {\n return (\n <section\n ref={ref}\n id={id}\n className={cn(\n backgroundStyles[background],\n spacingStyles[spacing],\n className\n )}\n {...props}\n >\n <Container>\n {(title || subtitle) && (\n <div className=\"text-center mb-12 md:mb-16\">\n {subtitle && (\n <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n {subtitle}\n </p>\n )}\n {title && (\n <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n {title}\n </h2>\n )}\n </div>\n )}\n {children}\n </Container>\n </section>\n );\n }\n);\n\nSection.displayName = \"Section\";\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { SectionProps } from './types.cjs';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Section component for consistent page sections with optional title, subtitle, and background
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <Section
|
|
10
|
+
* title="Our Services"
|
|
11
|
+
* subtitle="What we offer"
|
|
12
|
+
* background="gray"
|
|
13
|
+
* spacing="lg"
|
|
14
|
+
* >
|
|
15
|
+
* <div>Section content goes here</div>
|
|
16
|
+
* </Section>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare const Section: React__default.ForwardRefExoticComponent<SectionProps & React__default.RefAttributes<HTMLElement>>;
|
|
20
|
+
|
|
21
|
+
export { Section };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { SectionProps } from './types.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Section component for consistent page sections with optional title, subtitle, and background
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <Section
|
|
10
|
+
* title="Our Services"
|
|
11
|
+
* subtitle="What we offer"
|
|
12
|
+
* background="gray"
|
|
13
|
+
* spacing="lg"
|
|
14
|
+
* >
|
|
15
|
+
* <div>Section content goes here</div>
|
|
16
|
+
* </Section>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare const Section: React__default.ForwardRefExoticComponent<SectionProps & React__default.RefAttributes<HTMLElement>>;
|
|
20
|
+
|
|
21
|
+
export { Section };
|
package/dist/section.js
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// components/ui/section.tsx
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
var maxWidthStyles = {
|
|
11
|
+
sm: "max-w-screen-sm",
|
|
12
|
+
md: "max-w-screen-md",
|
|
13
|
+
lg: "max-w-screen-lg",
|
|
14
|
+
xl: "max-w-screen-xl",
|
|
15
|
+
"2xl": "max-w-screen-2xl",
|
|
16
|
+
"4xl": "max-w-[1536px]",
|
|
17
|
+
full: "max-w-full"
|
|
18
|
+
};
|
|
19
|
+
var Container = React.forwardRef(
|
|
20
|
+
({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
|
|
21
|
+
const Component = as;
|
|
22
|
+
return /* @__PURE__ */ jsx(
|
|
23
|
+
Component,
|
|
24
|
+
{
|
|
25
|
+
ref,
|
|
26
|
+
className: cn(
|
|
27
|
+
"mx-auto w-full px-4 sm:px-6 lg:px-8",
|
|
28
|
+
maxWidthStyles[maxWidth],
|
|
29
|
+
className
|
|
30
|
+
),
|
|
31
|
+
...props,
|
|
32
|
+
children
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
Container.displayName = "Container";
|
|
38
|
+
var backgroundStyles = {
|
|
39
|
+
white: "bg-background text-foreground",
|
|
40
|
+
gray: "bg-muted/30 text-foreground",
|
|
41
|
+
dark: "bg-foreground text-background",
|
|
42
|
+
gradient: "bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
|
|
43
|
+
primary: "bg-primary text-primary-foreground",
|
|
44
|
+
secondary: "bg-secondary text-secondary-foreground",
|
|
45
|
+
muted: "bg-muted text-muted-foreground"
|
|
46
|
+
};
|
|
47
|
+
var spacingStyles = {
|
|
48
|
+
sm: "py-12 md:py-16",
|
|
49
|
+
md: "py-16 md:py-24",
|
|
50
|
+
lg: "py-20 md:py-32",
|
|
51
|
+
xl: "py-24 md:py-40"
|
|
52
|
+
};
|
|
53
|
+
var Section = React.forwardRef(
|
|
54
|
+
({
|
|
55
|
+
id,
|
|
56
|
+
title,
|
|
57
|
+
subtitle,
|
|
58
|
+
children,
|
|
59
|
+
className,
|
|
60
|
+
background = "white",
|
|
61
|
+
spacing = "lg",
|
|
62
|
+
...props
|
|
63
|
+
}, ref) => {
|
|
64
|
+
return /* @__PURE__ */ jsx(
|
|
65
|
+
"section",
|
|
66
|
+
{
|
|
67
|
+
ref,
|
|
68
|
+
id,
|
|
69
|
+
className: cn(
|
|
70
|
+
backgroundStyles[background],
|
|
71
|
+
spacingStyles[spacing],
|
|
72
|
+
className
|
|
73
|
+
),
|
|
74
|
+
...props,
|
|
75
|
+
children: /* @__PURE__ */ jsxs(Container, { children: [
|
|
76
|
+
(title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16", children: [
|
|
77
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wider mb-2 text-primary", children: subtitle }),
|
|
78
|
+
title && /* @__PURE__ */ jsx("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight", children: title })
|
|
79
|
+
] }),
|
|
80
|
+
children
|
|
81
|
+
] })
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
Section.displayName = "Section";
|
|
87
|
+
|
|
88
|
+
export { Section };
|
|
89
|
+
//# sourceMappingURL=section.js.map
|
|
90
|
+
//# sourceMappingURL=section.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/utils.ts","../components/ui/container.tsx","../components/ui/section.tsx"],"names":["React","jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,cAAA,GAAiB;AAAA,EACrB,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,gBAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAYO,IAAM,YAAY,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,QAAA,EAAU,QAAA,GAAW,IAAA,EAAM,SAAA,EAAW,EAAA,GAAK,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACvE,IAAA,MAAM,SAAA,GAAY,EAAA;AAClB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,qCAAA;AAAA,UACA,eAAe,QAAQ,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AClCxB,IAAM,gBAAA,GAAmB;AAAA,EACvB,KAAA,EAAO,+BAAA;AAAA,EACP,IAAA,EAAM,6BAAA;AAAA,EACN,IAAA,EAAM,+BAAA;AAAA,EACN,QAAA,EAAU,qFAAA;AAAA,EACV,OAAA,EAAS,oCAAA;AAAA,EACT,SAAA,EAAW,wCAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAKA,IAAM,aAAA,GAAgB;AAAA,EACpB,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAiBO,IAAM,UAAUA,KAAAA,CAAM,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,OAAA;AAAA,IACb,OAAA,GAAU,IAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,iBAAiB,UAAU,CAAA;AAAA,UAC3B,cAAc,OAAO,CAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,+BAAC,SAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAA,KAAA,IAAS,QAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oEACV,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,YAED,yBACCA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DACX,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"section.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { ContainerProps } from \"../../src/types\";\n\nconst maxWidthStyles = {\n sm: \"max-w-screen-sm\",\n md: \"max-w-screen-md\",\n lg: \"max-w-screen-lg\",\n xl: \"max-w-screen-xl\",\n \"2xl\": \"max-w-screen-2xl\",\n \"4xl\": \"max-w-[1536px]\",\n full: \"max-w-full\",\n};\n\n/**\n * Container component for consistent content width and centering\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"xl\">\n * <h1>Page Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n ({ children, maxWidth = \"xl\", className, as = \"div\", ...props }, ref) => {\n const Component = as as any;\n return (\n <Component\n ref={ref}\n className={cn(\n \"mx-auto w-full px-4 sm:px-6 lg:px-8\",\n maxWidthStyles[maxWidth],\n className\n )}\n {...props}\n >\n {children}\n </Component>\n );\n }\n);\n\nContainer.displayName = \"Container\";\n","import React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Container } from \"./container\";\nimport type { SectionProps } from \"../../src/types\";\n\n/**\n * Background style variants\n * Uses standard Tailwind/shadcn CSS variables for theming\n */\nconst backgroundStyles = {\n white: \"bg-background text-foreground\",\n gray: \"bg-muted/30 text-foreground\",\n dark: \"bg-foreground text-background\",\n gradient: \"bg-gradient-to-br from-primary via-primary/90 to-foreground text-primary-foreground\",\n primary: \"bg-primary text-primary-foreground\",\n secondary: \"bg-secondary text-secondary-foreground\",\n muted: \"bg-muted text-muted-foreground\",\n};\n\n/**\n * Vertical spacing variants\n */\nconst spacingStyles = {\n sm: \"py-12 md:py-16\",\n md: \"py-16 md:py-24\",\n lg: \"py-20 md:py-32\",\n xl: \"py-24 md:py-40\",\n};\n\n/**\n * Section component for consistent page sections with optional title, subtitle, and background\n *\n * @example\n * ```tsx\n * <Section\n * title=\"Our Services\"\n * subtitle=\"What we offer\"\n * background=\"gray\"\n * spacing=\"lg\"\n * >\n * <div>Section content goes here</div>\n * </Section>\n * ```\n */\nexport const Section = React.forwardRef<HTMLElement, SectionProps>(\n (\n {\n id,\n title,\n subtitle,\n children,\n className,\n background = \"white\",\n spacing = \"lg\",\n ...props\n },\n ref\n ) => {\n return (\n <section\n ref={ref}\n id={id}\n className={cn(\n backgroundStyles[background],\n spacingStyles[spacing],\n className\n )}\n {...props}\n >\n <Container>\n {(title || subtitle) && (\n <div className=\"text-center mb-12 md:mb-16\">\n {subtitle && (\n <p className=\"text-sm font-semibold uppercase tracking-wider mb-2 text-primary\">\n {subtitle}\n </p>\n )}\n {title && (\n <h2 className=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight\">\n {title}\n </h2>\n )}\n </div>\n )}\n {children}\n </Container>\n </section>\n );\n }\n);\n\nSection.displayName = \"Section\";\n"]}
|
package/dist/types.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"types.cjs"}
|