@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.
Files changed (75) hide show
  1. package/LICENSE +28 -0
  2. package/README.md +315 -0
  3. package/dist/animated-dialog.cjs +168 -0
  4. package/dist/animated-dialog.cjs.map +1 -0
  5. package/dist/animated-dialog.d.cts +24 -0
  6. package/dist/animated-dialog.d.ts +24 -0
  7. package/dist/animated-dialog.js +166 -0
  8. package/dist/animated-dialog.js.map +1 -0
  9. package/dist/badge.cjs +49 -0
  10. package/dist/badge.cjs.map +1 -0
  11. package/dist/badge.d.cts +13 -0
  12. package/dist/badge.d.ts +13 -0
  13. package/dist/badge.js +46 -0
  14. package/dist/badge.js.map +1 -0
  15. package/dist/button.cjs +63 -0
  16. package/dist/button.cjs.map +1 -0
  17. package/dist/button.d.cts +14 -0
  18. package/dist/button.d.ts +14 -0
  19. package/dist/button.js +60 -0
  20. package/dist/button.js.map +1 -0
  21. package/dist/card.cjs +99 -0
  22. package/dist/card.cjs.map +1 -0
  23. package/dist/card.d.cts +12 -0
  24. package/dist/card.d.ts +12 -0
  25. package/dist/card.js +91 -0
  26. package/dist/card.js.map +1 -0
  27. package/dist/components.cjs +533 -0
  28. package/dist/components.cjs.map +1 -0
  29. package/dist/components.d.cts +14 -0
  30. package/dist/components.d.ts +14 -0
  31. package/dist/components.js +494 -0
  32. package/dist/components.js.map +1 -0
  33. package/dist/container.cjs +47 -0
  34. package/dist/container.cjs.map +1 -0
  35. package/dist/container.d.cts +16 -0
  36. package/dist/container.d.ts +16 -0
  37. package/dist/container.js +41 -0
  38. package/dist/container.js.map +1 -0
  39. package/dist/index.cjs +534 -0
  40. package/dist/index.cjs.map +1 -0
  41. package/dist/index.d.cts +16 -0
  42. package/dist/index.d.ts +16 -0
  43. package/dist/index.js +494 -0
  44. package/dist/index.js.map +1 -0
  45. package/dist/page-hero-banner.cjs +119 -0
  46. package/dist/page-hero-banner.cjs.map +1 -0
  47. package/dist/page-hero-banner.d.cts +22 -0
  48. package/dist/page-hero-banner.d.ts +22 -0
  49. package/dist/page-hero-banner.js +113 -0
  50. package/dist/page-hero-banner.js.map +1 -0
  51. package/dist/popover.cjs +73 -0
  52. package/dist/popover.cjs.map +1 -0
  53. package/dist/popover.d.cts +10 -0
  54. package/dist/popover.d.ts +10 -0
  55. package/dist/popover.js +48 -0
  56. package/dist/popover.js.map +1 -0
  57. package/dist/section.cjs +96 -0
  58. package/dist/section.cjs.map +1 -0
  59. package/dist/section.d.cts +21 -0
  60. package/dist/section.d.ts +21 -0
  61. package/dist/section.js +90 -0
  62. package/dist/section.js.map +1 -0
  63. package/dist/types.cjs +4 -0
  64. package/dist/types.cjs.map +1 -0
  65. package/dist/types.d.cts +180 -0
  66. package/dist/types.d.ts +180 -0
  67. package/dist/types.js +3 -0
  68. package/dist/types.js.map +1 -0
  69. package/dist/utils.cjs +13 -0
  70. package/dist/utils.cjs.map +1 -0
  71. package/dist/utils.d.cts +5 -0
  72. package/dist/utils.d.ts +5 -0
  73. package/dist/utils.js +11 -0
  74. package/dist/utils.js.map +1 -0
  75. 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"]}
@@ -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 };
@@ -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"]}
@@ -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 };
@@ -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,4 @@
1
+ 'use strict';
2
+
3
+ //# sourceMappingURL=types.cjs.map
4
+ //# sourceMappingURL=types.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"types.cjs"}