@m5kdev/web-ui 0.8.2 → 0.8.4

package/dist/src/components/features-section-demo-3.mjs

@@ -0,0 +1,252 @@
+import { cn } from "../lib/utils.mjs";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { IconBrandYoutubeFilled } from "@tabler/icons-react";
+import createGlobe from "cobe";
+//#region src/components/features-section-demo-3.tsx
+function FeaturesSectionDemo() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative z-20 py-10 lg:py-40 max-w-7xl mx-auto",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "px-8",
+			children: [/* @__PURE__ */ jsx("h4", {
+				className: "text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white",
+				children: "Packed with thousands of features"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300",
+				children: "From Image generation to video generation, Everything AI has APIs for literally everything. It can even create this website copy for you."
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative ",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800",
+				children: [
+					{
+						title: "Open Source Projects",
+						description: "Track and manage your project issues with ease using our intuitive interface.",
+						skeleton: /* @__PURE__ */ jsx(SkeletonOne, {}),
+						className: "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800"
+					},
+					{
+						title: "Research Papers",
+						description: "Capture stunning photos effortlessly using our advanced AI technology.",
+						skeleton: /* @__PURE__ */ jsx(SkeletonTwo, {}),
+						className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800"
+					},
+					{
+						title: "Side Projects",
+						description: "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
+						skeleton: /* @__PURE__ */ jsx(SkeletonThree, {}),
+						className: "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800"
+					},
+					{
+						title: "Music",
+						description: "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
+						skeleton: /* @__PURE__ */ jsx(SkeletonFour, {}),
+						className: "col-span-1 lg:col-span-3 border-b lg:border-none"
+					}
+				].map((feature) => /* @__PURE__ */ jsxs(FeatureCard, {
+					className: feature.className,
+					children: [
+						/* @__PURE__ */ jsx(FeatureTitle, { children: feature.title }),
+						/* @__PURE__ */ jsx(FeatureDescription, { children: feature.description }),
+						/* @__PURE__ */ jsx("div", {
+							className: " h-full w-full",
+							children: feature.skeleton
+						})
+					]
+				}, feature.title))
+			})
+		})]
+	});
+}
+const FeatureCard = ({ children, className }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("p-4 sm:p-8 relative overflow-hidden", className),
+		children
+	});
+};
+const FeatureTitle = ({ children }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: " max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug",
+		children
+	});
+};
+const FeatureDescription = ({ children }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-sm md:text-base  max-w-4xl text-left mx-auto", "text-neutral-500 text-center font-normal dark:text-neutral-300", "text-left max-w-sm mx-0 md:text-sm my-2"),
+		children
+	});
+};
+const SkeletonOne = () => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex py-8 px-2 gap-10 h-full",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-1 w-full h-full flex-col space-y-2  ",
+					children: /* @__PURE__ */ jsx("img", {
+						src: "/linear.webp",
+						alt: "header",
+						width: 800,
+						height: 800,
+						className: "h-full w-full aspect-square object-cover object-left-top rounded-sm"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", { className: "absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" }),
+			/* @__PURE__ */ jsx("div", { className: "absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" })
+		]
+	});
+};
+const SkeletonThree = () => {
+	return /* @__PURE__ */ jsx("a", {
+		href: "https://www.youtube.com/watch?v=RPa3_AD1_Vs",
+		target: "__blank",
+		className: "relative flex gap-10  h-full group/image",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "w-full  mx-auto bg-transparent dark:bg-transparent group h-full",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 w-full h-full flex-col space-y-2  relative",
+				children: [/* @__PURE__ */ jsx(IconBrandYoutubeFilled, { className: "h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " }), /* @__PURE__ */ jsx("img", {
+					src: "https://assets.aceternity.com/fireship.jpg",
+					alt: "header",
+					width: 800,
+					height: 800,
+					className: "h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
+				})]
+			})
+		})
+	});
+};
+const SkeletonTwo = () => {
+	const images = [
+		"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+	];
+	const imageVariants = {
+		whileHover: {
+			scale: 1.1,
+			rotate: 0,
+			zIndex: 100
+		},
+		whileTap: {
+			scale: 1.1,
+			rotate: 0,
+			zIndex: 100
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-row -ml-20",
+				children: images.map((image, idx) => /* @__PURE__ */ jsx(motion.div, {
+					variants: imageVariants,
+					style: { rotate: Math.random() * 20 - 10 },
+					whileHover: "whileHover",
+					whileTap: "whileTap",
+					className: "rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden",
+					children: /* @__PURE__ */ jsx("img", {
+						src: image,
+						alt: "bali images",
+						width: "500",
+						height: "500",
+						className: "rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+					})
+				}, "images-first" + idx))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-row",
+				children: images.map((image, idx) => /* @__PURE__ */ jsx(motion.div, {
+					style: { rotate: Math.random() * 20 - 10 },
+					variants: imageVariants,
+					whileHover: "whileHover",
+					whileTap: "whileTap",
+					className: "rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden",
+					children: /* @__PURE__ */ jsx("img", {
+						src: image,
+						alt: "bali images",
+						width: "500",
+						height: "500",
+						className: "rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+					})
+				}, "images-second" + idx))
+			}),
+			/* @__PURE__ */ jsx("div", { className: "absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" }),
+			/* @__PURE__ */ jsx("div", { className: "absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" })
+		]
+	});
+};
+const SkeletonFour = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10",
+		children: /* @__PURE__ */ jsx(Globe, { className: "absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" })
+	});
+};
+const Globe = ({ className }) => {
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		let phi = 0;
+		if (!canvasRef.current) return;
+		const globe = createGlobe(canvasRef.current, {
+			devicePixelRatio: 2,
+			width: 600 * 2,
+			height: 600 * 2,
+			phi: 0,
+			theta: 0,
+			dark: 1,
+			diffuse: 1.2,
+			mapSamples: 16e3,
+			mapBrightness: 6,
+			baseColor: [
+				.3,
+				.3,
+				.3
+			],
+			markerColor: [
+				.1,
+				.8,
+				1
+			],
+			glowColor: [
+				1,
+				1,
+				1
+			],
+			markers: [{
+				location: [37.7595, -122.4367],
+				size: .03
+			}, {
+				location: [40.7128, -74.006],
+				size: .1
+			}],
+			onRender: (state) => {
+				state.phi = phi;
+				phi += .01;
+			}
+		});
+		return () => {
+			globe.destroy();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		style: {
+			width: 600,
+			height: 600,
+			maxWidth: "100%",
+			aspectRatio: 1
+		},
+		className
+	});
+};
+//#endregion
+export { Globe, SkeletonFour, SkeletonOne, SkeletonThree, SkeletonTwo, FeaturesSectionDemo as default };
+
+//# sourceMappingURL=features-section-demo-3.mjs.map

package/dist/src/components/features-section-demo-3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"features-section-demo-3.mjs","names":[],"sources":["../../../src/components/features-section-demo-3.tsx"],"sourcesContent":["import { IconBrandYoutubeFilled } from \"@tabler/icons-react\";\r\nimport createGlobe from \"cobe\";\r\nimport { motion } from \"motion/react\";\r\nimport type React from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\nexport default function FeaturesSectionDemo() {\r\n  const features = [\r\n    {\r\n      title: \"Open Source Projects\",\r\n      description: \"Track and manage your project issues with ease using our intuitive interface.\",\r\n      skeleton: <SkeletonOne />,\r\n      className: \"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800\",\r\n    },\r\n    {\r\n      title: \"Research Papers\",\r\n      description: \"Capture stunning photos effortlessly using our advanced AI technology.\",\r\n      skeleton: <SkeletonTwo />,\r\n      className: \"border-b col-span-1 lg:col-span-2 dark:border-neutral-800\",\r\n    },\r\n    {\r\n      title: \"Side Projects\",\r\n      description:\r\n        \"Whether its you or Tyler Durden, you can get to know about our product on YouTube\",\r\n      skeleton: <SkeletonThree />,\r\n      className: \"col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800\",\r\n    },\r\n    {\r\n      title: \"Music\",\r\n      description:\r\n        \"With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.\",\r\n      skeleton: <SkeletonFour />,\r\n      className: \"col-span-1 lg:col-span-3 border-b lg:border-none\",\r\n    },\r\n  ];\r\n  return (\r\n    <div className=\"relative z-20 py-10 lg:py-40 max-w-7xl mx-auto\">\r\n      <div className=\"px-8\">\r\n        <h4 className=\"text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white\">\r\n          Packed with thousands of features\r\n        </h4>\r\n\r\n        <p className=\"text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300\">\r\n          From Image generation to video generation, Everything AI has APIs for literally\r\n          everything. It can even create this website copy for you.\r\n        </p>\r\n      </div>\r\n\r\n      <div className=\"relative \">\r\n        <div className=\"grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800\">\r\n          {features.map((feature) => (\r\n            <FeatureCard key={feature.title} className={feature.className}>\r\n              <FeatureTitle>{feature.title}</FeatureTitle>\r\n              <FeatureDescription>{feature.description}</FeatureDescription>\r\n              <div className=\" h-full w-full\">{feature.skeleton}</div>\r\n            </FeatureCard>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst FeatureCard = ({\r\n  children,\r\n  className,\r\n}: {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n}) => {\r\n  return <div className={cn(\"p-4 sm:p-8 relative overflow-hidden\", className)}>{children}</div>;\r\n};\r\n\r\nconst FeatureTitle = ({ children }: { children?: React.ReactNode }) => {\r\n  return (\r\n    <p className=\" max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug\">\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n\r\nconst FeatureDescription = ({ children }: { children?: React.ReactNode }) => {\r\n  return (\r\n    <p\r\n      className={cn(\r\n        \"text-sm md:text-base  max-w-4xl text-left mx-auto\",\r\n        \"text-neutral-500 text-center font-normal dark:text-neutral-300\",\r\n        \"text-left max-w-sm mx-0 md:text-sm my-2\"\r\n      )}\r\n    >\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n\r\nexport const SkeletonOne = () => {\r\n  return (\r\n    <div className=\"relative flex py-8 px-2 gap-10 h-full\">\r\n      <div className=\"w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full\">\r\n        <div className=\"flex flex-1 w-full h-full flex-col space-y-2  \">\r\n          {/* TODO */}\r\n          <img\r\n            src=\"/linear.webp\"\r\n            alt=\"header\"\r\n            width={800}\r\n            height={800}\r\n            className=\"h-full w-full aspect-square object-cover object-left-top rounded-sm\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none\" />\r\n      <div className=\"absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none\" />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const SkeletonThree = () => {\r\n  return (\r\n    <a\r\n      href=\"https://www.youtube.com/watch?v=RPa3_AD1_Vs\"\r\n      target=\"__blank\"\r\n      className=\"relative flex gap-10  h-full group/image\"\r\n    >\r\n      <div className=\"w-full  mx-auto bg-transparent dark:bg-transparent group h-full\">\r\n        <div className=\"flex flex-1 w-full h-full flex-col space-y-2  relative\">\r\n          {/* TODO */}\r\n          <IconBrandYoutubeFilled className=\"h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto \" />\r\n          <img\r\n            src=\"https://assets.aceternity.com/fireship.jpg\"\r\n            alt=\"header\"\r\n            width={800}\r\n            height={800}\r\n            className=\"h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </a>\r\n  );\r\n};\r\n\r\nexport const SkeletonTwo = () => {\r\n  const images = [\r\n    \"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n  ];\r\n\r\n  const imageVariants = {\r\n    whileHover: {\r\n      scale: 1.1,\r\n      rotate: 0,\r\n      zIndex: 100,\r\n    },\r\n    whileTap: {\r\n      scale: 1.1,\r\n      rotate: 0,\r\n      zIndex: 100,\r\n    },\r\n  };\r\n  return (\r\n    <div className=\"relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden\">\r\n      {/* TODO */}\r\n      <div className=\"flex flex-row -ml-20\">\r\n        {images.map((image, idx) => (\r\n          <motion.div\r\n            variants={imageVariants}\r\n            key={\"images-first\" + idx}\r\n            style={{\r\n              rotate: Math.random() * 20 - 10,\r\n            }}\r\n            whileHover=\"whileHover\"\r\n            whileTap=\"whileTap\"\r\n            className=\"rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden\"\r\n          >\r\n            <img\r\n              src={image}\r\n              alt=\"bali images\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              className=\"rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0\"\r\n            />\r\n          </motion.div>\r\n        ))}\r\n      </div>\r\n      <div className=\"flex flex-row\">\r\n        {images.map((image, idx) => (\r\n          <motion.div\r\n            key={\"images-second\" + idx}\r\n            style={{\r\n              rotate: Math.random() * 20 - 10,\r\n            }}\r\n            variants={imageVariants}\r\n            whileHover=\"whileHover\"\r\n            whileTap=\"whileTap\"\r\n            className=\"rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden\"\r\n          >\r\n            <img\r\n              src={image}\r\n              alt=\"bali images\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              className=\"rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0\"\r\n            />\r\n          </motion.div>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none\" />\r\n      <div className=\"absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none\" />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const SkeletonFour = () => {\r\n  return (\r\n    <div className=\"h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10\">\r\n      <Globe className=\"absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72\" />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const Globe = ({ className }: { className?: string }) => {\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n\r\n  useEffect(() => {\r\n    let phi = 0;\r\n\r\n    if (!canvasRef.current) return;\r\n\r\n    const globe = createGlobe(canvasRef.current, {\r\n      devicePixelRatio: 2,\r\n      width: 600 * 2,\r\n      height: 600 * 2,\r\n      phi: 0,\r\n      theta: 0,\r\n      dark: 1,\r\n      diffuse: 1.2,\r\n      mapSamples: 16000,\r\n      mapBrightness: 6,\r\n      baseColor: [0.3, 0.3, 0.3],\r\n      markerColor: [0.1, 0.8, 1],\r\n      glowColor: [1, 1, 1],\r\n      markers: [\r\n        // longitude latitude\r\n        { location: [37.7595, -122.4367], size: 0.03 },\r\n        { location: [40.7128, -74.006], size: 0.1 },\r\n      ],\r\n      onRender: (state) => {\r\n        // Called on every animation frame.\r\n        // `state` will be an empty object, return updated params.\r\n        state.phi = phi;\r\n        phi += 0.01;\r\n      },\r\n    });\r\n\r\n    return () => {\r\n      globe.destroy();\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <canvas\r\n      ref={canvasRef}\r\n      style={{ width: 600, height: 600, maxWidth: \"100%\", aspectRatio: 1 }}\r\n      className={className}\r\n    />\r\n  );\r\n};\r\n"],"mappings":"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"}

package/dist/src/components/mode-toggle.d.mts

@@ -0,0 +1,7 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/mode-toggle.d.ts
+declare function ModeToggle(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ModeToggle };
+//# sourceMappingURL=mode-toggle.d.mts.map

package/dist/src/components/mode-toggle.mjs

@@ -0,0 +1,44 @@
+import { Button } from "./ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu.mjs";
+import { useTheme } from "./theme-provider.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Moon, Sun } from "lucide-react";
+//#region src/components/mode-toggle.tsx
+function ModeToggle() {
+	const { setTheme } = useTheme();
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "icon",
+			children: [
+				/* @__PURE__ */ jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+				/* @__PURE__ */ jsx(Moon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Toggle theme"
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => setTheme("light"),
+				children: "Light"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => setTheme("dark"),
+				children: "Dark"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => setTheme("system"),
+				children: "System"
+			})
+		]
+	})] });
+}
+//#endregion
+export { ModeToggle };
+
+//# sourceMappingURL=mode-toggle.mjs.map

package/dist/src/components/mode-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.mjs","names":[],"sources":["../../../src/components/mode-toggle.tsx"],"sourcesContent":["import { Moon, Sun } from \"lucide-react\";\r\n\r\nimport { useTheme } from \"./theme-provider\";\r\nimport { Button } from \"./ui/button\";\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuTrigger,\r\n} from \"./ui/dropdown-menu\";\r\n\r\nexport function ModeToggle() {\r\n  const { setTheme } = useTheme();\r\n\r\n  return (\r\n    <DropdownMenu>\r\n      <DropdownMenuTrigger asChild>\r\n        <Button variant=\"outline\" size=\"icon\">\r\n          <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\r\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\r\n          <span className=\"sr-only\">Toggle theme</span>\r\n        </Button>\r\n      </DropdownMenuTrigger>\r\n      <DropdownMenuContent align=\"end\">\r\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>Light</DropdownMenuItem>\r\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>Dark</DropdownMenuItem>\r\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>System</DropdownMenuItem>\r\n      </DropdownMenuContent>\r\n    </DropdownMenu>\r\n  );\r\n}\r\n"],"mappings":";;;;;;AAWA,SAAgB,aAAa;CAC3B,MAAM,EAAE,aAAa,UAAU;AAE/B,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;YACnB,qBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;aAA/B;IACE,oBAAC,KAAD,EAAK,WAAU,wFAAyF,CAAA;IACxG,oBAAC,MAAD,EAAM,WAAU,gGAAiG,CAAA;IACjH,oBAAC,QAAD;KAAM,WAAU;eAAU;KAAmB,CAAA;IACtC;;EACW,CAAA,EACtB,qBAAC,qBAAD;EAAqB,OAAM;YAA3B;GACE,oBAAC,kBAAD;IAAkB,eAAe,SAAS,QAAQ;cAAE;IAAwB,CAAA;GAC5E,oBAAC,kBAAD;IAAkB,eAAe,SAAS,OAAO;cAAE;IAAuB,CAAA;GAC1E,oBAAC,kBAAD;IAAkB,eAAe,SAAS,SAAS;cAAE;IAAyB,CAAA;GAC1D;IACT,EAAA,CAAA"}

package/dist/src/components/nav-main.d.mts

@@ -0,0 +1,21 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { LucideIcon } from "lucide-react";
+
+//#region src/components/nav-main.d.ts
+declare function NavMain({
+  items
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+    }[];
+  }[];
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NavMain };
+//# sourceMappingURL=nav-main.d.mts.map

package/dist/src/components/nav-main.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.mjs";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "./ui/sidebar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+//#region src/components/nav-main.tsx
+function NavMain({ items }) {
+	return /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Platform" }), /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsx(Collapsible, {
+		asChild: true,
+		defaultOpen: item.isActive,
+		className: "group/collapsible",
+		children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+				tooltip: item.title,
+				children: [
+					item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+					/* @__PURE__ */ jsx("span", { children: item.title }),
+					/* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+				]
+			})
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Link, {
+				to: subItem.url,
+				children: /* @__PURE__ */ jsx("span", { children: subItem.title })
+			})
+		}) }, subItem.title)) }) })] })
+	}, item.title)) })] });
+}
+//#endregion
+export { NavMain };
+
+//# sourceMappingURL=nav-main.mjs.map

package/dist/src/components/nav-main.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-main.mjs","names":[],"sources":["../../../src/components/nav-main.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ChevronRight, type LucideIcon } from \"lucide-react\";\r\nimport { Link } from \"react-router\";\r\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./ui/collapsible\";\r\nimport {\r\n  SidebarGroup,\r\n  SidebarGroupLabel,\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubButton,\r\n  SidebarMenuSubItem,\r\n} from \"./ui/sidebar\";\r\n\r\nexport function NavMain({\r\n  items,\r\n}: {\r\n  items: {\r\n    title: string;\r\n    url: string;\r\n    icon?: LucideIcon;\r\n    isActive?: boolean;\r\n    items?: {\r\n      title: string;\r\n      url: string;\r\n    }[];\r\n  }[];\r\n}) {\r\n  return (\r\n    <SidebarGroup>\r\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\r\n      <SidebarMenu>\r\n        {items.map((item) => (\r\n          <Collapsible\r\n            key={item.title}\r\n            asChild\r\n            defaultOpen={item.isActive}\r\n            className=\"group/collapsible\"\r\n          >\r\n            <SidebarMenuItem>\r\n              <CollapsibleTrigger asChild>\r\n                <SidebarMenuButton tooltip={item.title}>\r\n                  {item.icon && <item.icon />}\r\n                  <span>{item.title}</span>\r\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\r\n                </SidebarMenuButton>\r\n              </CollapsibleTrigger>\r\n              <CollapsibleContent>\r\n                <SidebarMenuSub>\r\n                  {item.items?.map((subItem) => (\r\n                    <SidebarMenuSubItem key={subItem.title}>\r\n                      <SidebarMenuSubButton asChild>\r\n                        <Link to={subItem.url}>\r\n                          <span>{subItem.title}</span>\r\n                        </Link>\r\n                      </SidebarMenuSubButton>\r\n                    </SidebarMenuSubItem>\r\n                  ))}\r\n                </SidebarMenuSub>\r\n              </CollapsibleContent>\r\n            </SidebarMenuItem>\r\n          </Collapsible>\r\n        ))}\r\n      </SidebarMenu>\r\n    </SidebarGroup>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;AAgBA,SAAgB,QAAQ,EACtB,SAYC;AACD,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,mBAAD,EAAA,UAAmB,YAA4B,CAAA,EAC/C,oBAAC,aAAD,EAAA,UACG,MAAM,KAAK,SACV,oBAAC,aAAD;EAEE,SAAA;EACA,aAAa,KAAK;EAClB,WAAU;YAEV,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,oBAAD;GAAoB,SAAA;aAClB,qBAAC,mBAAD;IAAmB,SAAS,KAAK;cAAjC;KACG,KAAK,QAAQ,oBAAC,KAAK,MAAN,EAAa,CAAA;KAC3B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAa,CAAA;KACzB,oBAAC,cAAD,EAAc,WAAU,2FAA4F,CAAA;KAClG;;GACD,CAAA,EACrB,oBAAC,oBAAD,EAAA,UACE,oBAAC,gBAAD,EAAA,UACG,KAAK,OAAO,KAAK,YAChB,oBAAC,oBAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,SAAA;aACpB,oBAAC,MAAD;IAAM,IAAI,QAAQ;cAChB,oBAAC,QAAD,EAAA,UAAO,QAAQ,OAAa,CAAA;IACvB,CAAA;GACc,CAAA,EACJ,EANI,QAAQ,MAMZ,CACrB,EACa,CAAA,EACE,CAAA,CACL,EAAA,CAAA;EACN,EA3BP,KAAK,MA2BE,CACd,EACU,CAAA,CACD,EAAA,CAAA"}

package/dist/src/components/pricing-cards.d.mts

@@ -0,0 +1,7 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/pricing-cards.d.ts
+declare function PricingCards(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PricingCards };
+//# sourceMappingURL=pricing-cards.d.mts.map

package/dist/src/components/pricing-cards.mjs

@@ -0,0 +1,128 @@
+import { Button } from "./ui/button.mjs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card.mjs";
+import { Badge } from "./ui/badge.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, MoveRight, PhoneCall } from "lucide-react";
+//#region src/components/pricing-cards.tsx
+function PricingCard({ title, description, price, features, highlighted = false, ctaText, ctaIcon: CtaIcon, variant = "outline" }) {
+	const Icon = CtaIcon;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: `w-full rounded-md ${highlighted ? "shadow-2xl" : ""}`,
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("span", {
+			className: "flex flex-row gap-4 items-center font-normal",
+			children: title
+		}) }), /* @__PURE__ */ jsx(CardDescription, { children: description })] }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-8 justify-start",
+			children: [
+				/* @__PURE__ */ jsxs("p", {
+					className: "flex flex-row items-center gap-2 text-xl",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "text-4xl",
+						children: ["$", price]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-muted-foreground",
+						children: " / month"
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-4 justify-start",
+					children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-row gap-4",
+						children: [/* @__PURE__ */ jsx(Check, { className: "w-4 h-4 mt-2 text-primary" }), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("p", { children: feature.title }), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-sm",
+								children: feature.description
+							})]
+						})]
+					}, index))
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant,
+					className: "gap-4",
+					children: [
+						ctaText,
+						" ",
+						/* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" })
+					]
+				})
+			]
+		}) })]
+	});
+}
+function PricingCards() {
+	const commonDescription = "Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.";
+	const commonFeatures = [
+		{
+			title: "Fast and reliable",
+			description: "We've made it fast and reliable."
+		},
+		{
+			title: "Fast and reliable",
+			description: "We've made it fast and reliable."
+		},
+		{
+			title: "Fast and reliable",
+			description: "We've made it fast and reliable."
+		}
+	];
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full py-20 lg:py-40",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "container mx-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex text-center justify-center items-center gap-4 flex-col",
+				children: [
+					/* @__PURE__ */ jsx(Badge, { children: "Pricing" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2 flex-col",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-3xl md:text-5xl tracking-tighter max-w-xl text-center font-regular",
+							children: "Prices that make sense!"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl text-center",
+							children: "Managing a small business today is already tough."
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid pt-20 text-left grid-cols-1 lg:grid-cols-3 w-full gap-8",
+						children: [
+							/* @__PURE__ */ jsx(PricingCard, {
+								title: "Startup",
+								description: commonDescription,
+								price: 40,
+								features: commonFeatures,
+								ctaText: "Sign up today",
+								ctaIcon: MoveRight,
+								variant: "outline"
+							}),
+							/* @__PURE__ */ jsx(PricingCard, {
+								title: "Growth",
+								description: commonDescription,
+								price: 40,
+								features: commonFeatures,
+								highlighted: true,
+								ctaText: "Sign up today",
+								ctaIcon: MoveRight,
+								variant: "default"
+							}),
+							/* @__PURE__ */ jsx(PricingCard, {
+								title: "Enterprise",
+								description: commonDescription,
+								price: 40,
+								features: commonFeatures,
+								ctaText: "Book a meeting",
+								ctaIcon: PhoneCall,
+								variant: "outline"
+							})
+						]
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { PricingCards };
+
+//# sourceMappingURL=pricing-cards.mjs.map

package/dist/src/components/pricing-cards.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-cards.mjs","names":[],"sources":["../../../src/components/pricing-cards.tsx"],"sourcesContent":["import { Check, type LucideIcon, MoveRight, PhoneCall } from \"lucide-react\";\r\nimport { Badge } from \"./ui/badge\";\r\nimport { Button } from \"./ui/button\";\r\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"./ui/card\";\r\n\r\ninterface Feature {\r\n  title: string;\r\n  description: string;\r\n}\r\n\r\ninterface PricingCardProps {\r\n  title: string;\r\n  description: string;\r\n  price: number;\r\n  features: Feature[];\r\n  highlighted?: boolean;\r\n  ctaText: string;\r\n  ctaIcon: LucideIcon;\r\n  variant?: \"default\" | \"outline\";\r\n}\r\n\r\nfunction PricingCard({\r\n  title,\r\n  description,\r\n  price,\r\n  features,\r\n  highlighted = false,\r\n  ctaText,\r\n  ctaIcon: CtaIcon,\r\n  variant = \"outline\",\r\n}: PricingCardProps) {\r\n  const Icon = CtaIcon;\r\n  return (\r\n    <Card className={`w-full rounded-md ${highlighted ? \"shadow-2xl\" : \"\"}`}>\r\n      <CardHeader>\r\n        <CardTitle>\r\n          <span className=\"flex flex-row gap-4 items-center font-normal\">{title}</span>\r\n        </CardTitle>\r\n        <CardDescription>{description}</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <div className=\"flex flex-col gap-8 justify-start\">\r\n          <p className=\"flex flex-row items-center gap-2 text-xl\">\r\n            <span className=\"text-4xl\">${price}</span>\r\n            <span className=\"text-sm text-muted-foreground\"> / month</span>\r\n          </p>\r\n          <div className=\"flex flex-col gap-4 justify-start\">\r\n            {features.map((feature, index) => (\r\n              <div key={index} className=\"flex flex-row gap-4\">\r\n                <Check className=\"w-4 h-4 mt-2 text-primary\" />\r\n                <div className=\"flex flex-col\">\r\n                  <p>{feature.title}</p>\r\n                  <p className=\"text-muted-foreground text-sm\">{feature.description}</p>\r\n                </div>\r\n              </div>\r\n            ))}\r\n          </div>\r\n          <Button variant={variant} className=\"gap-4\">\r\n            {ctaText} <Icon className=\"w-4 h-4\" />\r\n          </Button>\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n\r\nexport function PricingCards() {\r\n  const commonDescription =\r\n    \"Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.\";\r\n\r\n  const commonFeatures = [\r\n    {\r\n      title: \"Fast and reliable\",\r\n      description: \"We've made it fast and reliable.\",\r\n    },\r\n    {\r\n      title: \"Fast and reliable\",\r\n      description: \"We've made it fast and reliable.\",\r\n    },\r\n    {\r\n      title: \"Fast and reliable\",\r\n      description: \"We've made it fast and reliable.\",\r\n    },\r\n  ];\r\n\r\n  return (\r\n    <div className=\"w-full py-20 lg:py-40\">\r\n      <div className=\"container mx-auto\">\r\n        <div className=\"flex text-center justify-center items-center gap-4 flex-col\">\r\n          <Badge>Pricing</Badge>\r\n          <div className=\"flex gap-2 flex-col\">\r\n            <h2 className=\"text-3xl md:text-5xl tracking-tighter max-w-xl text-center font-regular\">\r\n              Prices that make sense!\r\n            </h2>\r\n            <p className=\"text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl text-center\">\r\n              Managing a small business today is already tough.\r\n            </p>\r\n          </div>\r\n          <div className=\"grid pt-20 text-left grid-cols-1 lg:grid-cols-3 w-full gap-8\">\r\n            <PricingCard\r\n              title=\"Startup\"\r\n              description={commonDescription}\r\n              price={40}\r\n              features={commonFeatures}\r\n              ctaText=\"Sign up today\"\r\n              ctaIcon={MoveRight}\r\n              variant=\"outline\"\r\n            />\r\n            <PricingCard\r\n              title=\"Growth\"\r\n              description={commonDescription}\r\n              price={40}\r\n              features={commonFeatures}\r\n              highlighted={true}\r\n              ctaText=\"Sign up today\"\r\n              ctaIcon={MoveRight}\r\n              variant=\"default\"\r\n            />\r\n            <PricingCard\r\n              title=\"Enterprise\"\r\n              description={commonDescription}\r\n              price={40}\r\n              features={commonFeatures}\r\n              ctaText=\"Book a meeting\"\r\n              ctaIcon={PhoneCall}\r\n              variant=\"outline\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;AAqBA,SAAS,YAAY,EACnB,OACA,aACA,OACA,UACA,cAAc,OACd,SACA,SAAS,SACT,UAAU,aACS;CACnB,MAAM,OAAO;AACb,QACE,qBAAC,MAAD;EAAM,WAAW,qBAAqB,cAAc,eAAe;YAAnE,CACE,qBAAC,YAAD,EAAA,UAAA,CACE,oBAAC,WAAD,EAAA,UACE,oBAAC,QAAD;GAAM,WAAU;aAAgD;GAAa,CAAA,EACnE,CAAA,EACZ,oBAAC,iBAAD,EAAA,UAAkB,aAA8B,CAAA,CACrC,EAAA,CAAA,EACb,oBAAC,aAAD,EAAA,UACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,KAAD;KAAG,WAAU;eAAb,CACE,qBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA2B,KAAE,MAAa;SAC1C,oBAAC,QAAD;MAAM,WAAU;gBAAgC;MAAe,CAAA,CAC7D;;IACJ,oBAAC,OAAD;KAAK,WAAU;eACZ,SAAS,KAAK,SAAS,UACtB,qBAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,oBAAC,OAAD,EAAO,WAAU,6BAA8B,CAAA,EAC/C,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,KAAD,EAAA,UAAI,QAAQ,OAAU,CAAA,EACtB,oBAAC,KAAD;QAAG,WAAU;kBAAiC,QAAQ;QAAgB,CAAA,CAClE;SACF;QANI,MAMJ,CACN;KACE,CAAA;IACN,qBAAC,QAAD;KAAiB;KAAS,WAAU;eAApC;MACG;MAAQ;MAAC,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA;MAC/B;;IACL;MACM,CAAA,CACT;;;AAIX,SAAgB,eAAe;CAC7B,MAAM,oBACJ;CAEF,MAAM,iBAAiB;EACrB;GACE,OAAO;GACP,aAAa;GACd;EACD;GACE,OAAO;GACP,aAAa;GACd;EACD;GACE,OAAO;GACP,aAAa;GACd;EACF;AAED,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD,EAAA,UAAO,WAAe,CAAA;KACtB,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,MAAD;OAAI,WAAU;iBAA0E;OAEnF,CAAA,EACL,oBAAC,KAAD;OAAG,WAAU;iBAAoF;OAE7F,CAAA,CACA;;KACN,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,oBAAC,aAAD;QACE,OAAM;QACN,aAAa;QACb,OAAO;QACP,UAAU;QACV,SAAQ;QACR,SAAS;QACT,SAAQ;QACR,CAAA;OACF,oBAAC,aAAD;QACE,OAAM;QACN,aAAa;QACb,OAAO;QACP,UAAU;QACV,aAAa;QACb,SAAQ;QACR,SAAS;QACT,SAAQ;QACR,CAAA;OACF,oBAAC,aAAD;QACE,OAAM;QACN,aAAa;QACb,OAAO;QACP,UAAU;QACV,SAAQ;QACR,SAAS;QACT,SAAQ;QACR,CAAA;OACE;;KACF;;GACF,CAAA;EACF,CAAA"}

package/dist/src/components/shared/ButtonCopy.d.mts

@@ -0,0 +1,17 @@
+import { ButtonProps } from "../ui/button.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/shared/ButtonCopy.d.ts
+declare function ButtonCopy({
+  text,
+  notificationTimeout,
+  iconOnly,
+  ...props
+}: ButtonProps & {
+  text: string;
+  notificationTimeout?: number;
+  iconOnly?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ButtonCopy };
+//# sourceMappingURL=ButtonCopy.d.mts.map

package/dist/src/components/shared/ButtonCopy.mjs

@@ -0,0 +1,35 @@
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle, Copy } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+//#region src/components/shared/ButtonCopy.tsx
+function ButtonCopy({ text, notificationTimeout = 1e3, iconOnly = false, ...props }) {
+	const { t } = useTranslation();
+	const [isCopied, setIsCopied] = useState(false);
+	const handleCopy = async (text) => {
+		try {
+			await window.navigator.clipboard.writeText(text);
+			setIsCopied(true);
+			toast.success(t("web-ui:common.copySuccess"));
+			setTimeout(() => setIsCopied(false), notificationTimeout);
+		} catch (error) {
+			toast.error(t("web-ui:common.copyError"));
+			console.error(error);
+		}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "sm",
+		onClick: () => handleCopy(text),
+		className: cn(isCopied ? "bg-green-200 hover:bg-green-300" : "", iconOnly ? "" : "gap-1"),
+		...props,
+		children: isCopied ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" }), !iconOnly && t("web-ui:common.copied")] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }), !iconOnly && t("web-ui:common.copy")] })
+	});
+}
+//#endregion
+export { ButtonCopy };
+
+//# sourceMappingURL=ButtonCopy.mjs.map

package/dist/src/components/shared/ButtonCopy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCopy.mjs","names":[],"sources":["../../../../src/components/shared/ButtonCopy.tsx"],"sourcesContent":["import { CheckCircle, Copy } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { toast } from \"sonner\";\r\nimport { Button, type ButtonProps } from \"../ui/button\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nexport function ButtonCopy({\r\n  text,\r\n  notificationTimeout = 1000,\r\n  iconOnly = false,\r\n  ...props\r\n}: ButtonProps & { text: string; notificationTimeout?: number; iconOnly?: boolean }) {\r\n  const { t } = useTranslation();\r\n  const [isCopied, setIsCopied] = useState(false);\r\n\r\n  const handleCopy = async (text: string) => {\r\n    try {\r\n      await window.navigator.clipboard.writeText(text);\r\n      setIsCopied(true);\r\n      toast.success(t(\"web-ui:common.copySuccess\"));\r\n      setTimeout(() => setIsCopied(false), notificationTimeout);\r\n    } catch (error) {\r\n      toast.error(t(\"web-ui:common.copyError\"));\r\n      console.error(error);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Button\r\n      variant=\"outline\"\r\n      size=\"sm\"\r\n      onClick={() => handleCopy(text)}\r\n      className={cn(isCopied ? \"bg-green-200 hover:bg-green-300\" : \"\", iconOnly ? \"\" : \"gap-1\")}\r\n      {...props}\r\n    >\r\n      {isCopied ? (\r\n        <>\r\n          <CheckCircle className=\"h-4 w-4\" />\r\n          {!iconOnly && t(\"web-ui:common.copied\")}\r\n        </>\r\n      ) : (\r\n        <>\r\n          <Copy className=\"h-4 w-4\" />\r\n          {!iconOnly && t(\"web-ui:common.copy\")}\r\n        </>\r\n      )}\r\n    </Button>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;AAOA,SAAgB,WAAW,EACzB,MACA,sBAAsB,KACtB,WAAW,OACX,GAAG,SACgF;CACnF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,aAAa,OAAO,SAAiB;AACzC,MAAI;AACF,SAAM,OAAO,UAAU,UAAU,UAAU,KAAK;AAChD,eAAY,KAAK;AACjB,SAAM,QAAQ,EAAE,4BAA4B,CAAC;AAC7C,oBAAiB,YAAY,MAAM,EAAE,oBAAoB;WAClD,OAAO;AACd,SAAM,MAAM,EAAE,0BAA0B,CAAC;AACzC,WAAQ,MAAM,MAAM;;;AAIxB,QACE,oBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACL,eAAe,WAAW,KAAK;EAC/B,WAAW,GAAG,WAAW,oCAAoC,IAAI,WAAW,KAAK,QAAQ;EACzF,GAAI;YAEH,WACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,WAAY,CAAA,EAClC,CAAC,YAAY,EAAE,uBAAuB,CACtC,EAAA,CAAA,GAEH,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,CAAC,YAAY,EAAE,qBAAqB,CACpC,EAAA,CAAA;EAEE,CAAA"}

package/dist/src/components/team-switcher.d.mts

@@ -0,0 +1,16 @@
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/team-switcher.d.ts
+declare function TeamSwitcher({
+  teams
+}: {
+  teams: {
+    name: string;
+    logo: React$1.ElementType;
+    plan: string;
+  }[];
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TeamSwitcher };
+//# sourceMappingURL=team-switcher.d.mts.map