@opensite/ui 0.3.4 → 0.4.0

package/dist/hero-pattern-badge-logos.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, L as LogoItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig, L as LogoItem, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface HeroPatternBadgeLogosProps {

package/dist/hero-pattern-badge-logos.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, L as LogoItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig, L as LogoItem, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface HeroPatternBadgeLogosProps {

package/dist/hero-pattern-badge-logos.js

@@ -461,28 +461,13 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-
-// lib/mediaPlaceholders.ts
-var logoPlaceholders = {
-  darkHorizontalLogo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
-  lightHorizontalLogo: "https://cdn.ing/assets/i/r/285985/vs7w9ov4y1afgp95pb7nqkvnchq6/logo-light.png"
-};
-var defaultActions = [
-  { label: "Get Started", href: "#", variant: "default" },
-  { label: "Learn More", href: "#", variant: "outline" }
-];
-var defaultLogos = [
-  { src: logoPlaceholders.darkHorizontalLogo, alt: "Opensite AI", imgClassName: "h-6 dark:invert" },
-  { src: logoPlaceholders.darkHorizontalLogo, alt: "Partner", imgClassName: "h-5 dark:invert" },
-  { src: { light: logoPlaceholders.darkHorizontalLogo, dark: logoPlaceholders.lightHorizontalLogo }, alt: "Partner", imgClassName: "h-6" }
-];
 function HeroPatternBadgeLogos({
-  badge = /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: "New Release" }),
-  heading = "This is a heading for your new project",
-  description = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat omnis! Porro facilis quo animi consequatur.",
-  actions = defaultActions,
+  badge,
+  heading,
+  description,
+  actions,
   actionsSlot,
-  logos = defaultLogos,
+  logos,
   logosSlot,
   logosTagline = "Powering the next generation of digital products",
   backgroundImageUrl = "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",

package/dist/hero-pattern-logo-tech-stack.cjs

@@ -450,151 +450,16 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React__namespace.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
-
-// lib/mediaPlaceholders.ts
-var logoPlaceholders = {
-  logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
-var defaultLogo = {
-  src: logoPlaceholders.logoMark,
-  alt: "logo",
-  imgClassName: "h-16"
-};
-var defaultActions = [
-  {
-    label: "Get Started",
-    href: "#",
-    variant: "default",
-    className: "shadow-sm transition-shadow hover:shadow"
-  },
-  {
-    label: "Learn more",
-    href: "#",
-    variant: "outline",
-    className: "group",
-    iconAfter: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/external-link", size: 16, className: "ml-2 transition-transform group-hover:translate-x-0.5" })
-  }
-];
-var defaultTechLogos = [
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" },
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" },
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" },
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" }
-];
 function HeroPatternLogoTechStack({
-  logo = defaultLogo,
+  logo,
   logoSlot,
-  heading = "Build your next project with",
+  heading,
   highlightedWord = "Blocks",
-  description = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat omnis! Porro facilis quo animi consequatur. Explicabo.",
-  actions = defaultActions,
+  description,
+  actions,
   actionsSlot,
   techStackLabel = "Built with open-source technologies",
-  techLogos = defaultTechLogos,
+  techLogos,
   techLogosSlot,
   backgroundImage = "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
   className,
@@ -608,6 +473,7 @@ function HeroPatternLogoTechStack({
 }) {
   const renderLogo = () => {
     if (logoSlot) return logoSlot;
+    if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl bg-background/30 p-4 shadow-sm backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
@@ -621,6 +487,7 @@ function HeroPatternLogoTechStack({
   };
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex justify-center gap-3", actionsClassName), children: actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/hero-pattern-logo-tech-stack.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { L as LogoItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { L as LogoItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface HeroPatternLogoTechStackProps {

package/dist/hero-pattern-logo-tech-stack.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { L as LogoItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { L as LogoItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface HeroPatternLogoTechStackProps {

package/dist/hero-pattern-logo-tech-stack.js

@@ -428,151 +428,16 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
-
-// lib/mediaPlaceholders.ts
-var logoPlaceholders = {
-  logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
-var defaultLogo = {
-  src: logoPlaceholders.logoMark,
-  alt: "logo",
-  imgClassName: "h-16"
-};
-var defaultActions = [
-  {
-    label: "Get Started",
-    href: "#",
-    variant: "default",
-    className: "shadow-sm transition-shadow hover:shadow"
-  },
-  {
-    label: "Learn more",
-    href: "#",
-    variant: "outline",
-    className: "group",
-    iconAfter: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/external-link", size: 16, className: "ml-2 transition-transform group-hover:translate-x-0.5" })
-  }
-];
-var defaultTechLogos = [
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" },
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" },
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" },
-  { src: logoPlaceholders.logoMark, alt: "technology logo", href: "#" }
-];
 function HeroPatternLogoTechStack({
-  logo = defaultLogo,
+  logo,
   logoSlot,
-  heading = "Build your next project with",
+  heading,
   highlightedWord = "Blocks",
-  description = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat omnis! Porro facilis quo animi consequatur. Explicabo.",
-  actions = defaultActions,
+  description,
+  actions,
   actionsSlot,
   techStackLabel = "Built with open-source technologies",
-  techLogos = defaultTechLogos,
+  techLogos,
   techLogosSlot,
   backgroundImage = "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
   className,
@@ -586,6 +451,7 @@ function HeroPatternLogoTechStack({
 }) {
   const renderLogo = () => {
     if (logoSlot) return logoSlot;
+    if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
     return /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-background/30 p-4 shadow-sm backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Img,
@@ -599,6 +465,7 @@ function HeroPatternLogoTechStack({
   };
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex justify-center gap-3", actionsClassName), children: actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsx(

package/dist/hero-platform-features-grid.cjs

@@ -555,53 +555,14 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-
-// lib/mediaPlaceholders.ts
-var logoPlaceholders = {
-  logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
-var defaultLogo = {
-  src: logoPlaceholders.logoMark,
-  alt: "placeholder",
-  imgClassName: "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28"
-};
-var defaultAction = {
-  label: "Start now for free",
-  href: "#",
-  variant: "default",
-  size: "lg",
-  className: "mt-8",
-  iconAfter: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/move-right", size: 20, className: "ml-2" })
-};
-var defaultFeatures = [
-  {
-    iconName: "lucide/globe",
-    title: "Robust Infrastructure",
-    description: "Reliable and scalable infrastructure, easy to manage."
-  },
-  {
-    iconName: "lucide/rocket",
-    title: "Easy Setup",
-    description: "Quick and simple configuration for any use case."
-  },
-  {
-    iconName: "lucide/expand",
-    title: "Effortless Scaling",
-    description: "Built to handle increased demand with ease."
-  },
-  {
-    iconName: "lucide/wrench",
-    title: "Low Maintenance",
-    description: "Focus on building, not on maintenance tasks."
-  }
-];
 function HeroPlatformFeaturesGrid({
-  logo = defaultLogo,
+  logo,
   logoSlot,
-  subtitle = "PLATFORM",
-  heading = "Develop, launch, and grow your service with our platform",
-  action = defaultAction,
+  subtitle,
+  heading,
+  action,
   actionSlot,
-  features = defaultFeatures,
+  features,
   featuresSlot,
   className,
   containerClassName,
@@ -612,6 +573,7 @@ function HeroPlatformFeaturesGrid({
 }) {
   const renderLogo = () => {
     if (logoSlot) return logoSlot;
+    if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
     return /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
@@ -625,6 +587,7 @@ function HeroPlatformFeaturesGrid({
   };
   const renderAction = () => {
     if (actionSlot) return actionSlot;
+    if (!action) return null;
     const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
     return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon,

package/dist/hero-platform-features-grid.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { L as LogoItem, A as ActionConfig, F as FeatureItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { L as LogoItem, A as ActionConfig, F as FeatureItem, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface HeroPlatformFeaturesGridProps {

package/dist/hero-platform-features-grid.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { L as LogoItem, A as ActionConfig, F as FeatureItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { L as LogoItem, A as ActionConfig, F as FeatureItem, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface HeroPlatformFeaturesGridProps {

package/dist/hero-platform-features-grid.js

@@ -533,53 +533,14 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-
-// lib/mediaPlaceholders.ts
-var logoPlaceholders = {
-  logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
-var defaultLogo = {
-  src: logoPlaceholders.logoMark,
-  alt: "placeholder",
-  imgClassName: "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28"
-};
-var defaultAction = {
-  label: "Start now for free",
-  href: "#",
-  variant: "default",
-  size: "lg",
-  className: "mt-8",
-  iconAfter: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/move-right", size: 20, className: "ml-2" })
-};
-var defaultFeatures = [
-  {
-    iconName: "lucide/globe",
-    title: "Robust Infrastructure",
-    description: "Reliable and scalable infrastructure, easy to manage."
-  },
-  {
-    iconName: "lucide/rocket",
-    title: "Easy Setup",
-    description: "Quick and simple configuration for any use case."
-  },
-  {
-    iconName: "lucide/expand",
-    title: "Effortless Scaling",
-    description: "Built to handle increased demand with ease."
-  },
-  {
-    iconName: "lucide/wrench",
-    title: "Low Maintenance",
-    description: "Focus on building, not on maintenance tasks."
-  }
-];
 function HeroPlatformFeaturesGrid({
-  logo = defaultLogo,
+  logo,
   logoSlot,
-  subtitle = "PLATFORM",
-  heading = "Develop, launch, and grow your service with our platform",
-  action = defaultAction,
+  subtitle,
+  heading,
+  action,
   actionSlot,
-  features = defaultFeatures,
+  features,
   featuresSlot,
   className,
   containerClassName,
@@ -590,6 +551,7 @@ function HeroPlatformFeaturesGrid({
 }) {
   const renderLogo = () => {
     if (logoSlot) return logoSlot;
+    if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
     return /* @__PURE__ */ jsx(
       Img,
@@ -603,6 +565,7 @@ function HeroPlatformFeaturesGrid({
   };
   const renderAction = () => {
     if (actionSlot) return actionSlot;
+    if (!action) return null;
     const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
       icon,