@opensite/ui 0.3.4 → 0.4.1

package/dist/comparison-grid-badges.js

@@ -147,46 +147,12 @@ function Badge({
     }
   );
 }
-var defaultFeatures = [
-  {
-    icon: "lucide/code-2",
-    title: "Development Speed",
-    description: "Time from concept to production deployment",
-    optionAValue: "2-4 weeks",
-    optionBValue: "3-6 months",
-    optionAHighlight: true
-  },
-  {
-    icon: "lucide/headset",
-    title: "Support Level",
-    description: "Access to technical assistance and guidance",
-    optionAValue: "24/7 Priority",
-    optionBValue: "Business Hours",
-    optionAHighlight: true
-  },
-  {
-    icon: "lucide/chart-line",
-    title: "Scalability",
-    description: "Ability to handle growth and increased demand",
-    optionAValue: "Auto-scaling",
-    optionBValue: "Manual",
-    optionAHighlight: true
-  },
-  {
-    icon: "lucide/users",
-    title: "Team Size",
-    description: "Number of team members included",
-    optionAValue: "Unlimited",
-    optionBValue: "Up to 10",
-    optionAHighlight: true
-  }
-];
 function ComparisonGridBadges({
-  heading = "Feature Comparison",
-  description = "See how our solution compares to traditional approaches across key metrics.",
+  heading,
+  description,
   optionALabel = "Our Solution",
   optionBLabel = "Traditional",
-  features = defaultFeatures,
+  features,
   featuresSlot,
   className,
   containerClassName,
@@ -198,6 +164,7 @@ function ComparisonGridBadges({
 }) {
   const renderFeatures = () => {
     if (featuresSlot) return featuresSlot;
+    if (!features || features.length === 0) return null;
     return features.map((feature, idx) => /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/comparison-image-cards.cjs

@@ -450,27 +450,11 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultOptionA = {
-  image: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-  imageAlt: "Option 1",
-  title: "Option 1",
-  description: "Let our expert team handle everything for you. We'll manage the entire development process from start to finish, delivering a polished solution tailored to your exact specifications.",
-  ctaText: "Get Started",
-  ctaHref: "#"
-};
-var defaultOptionB = {
-  image: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-  imageAlt: "Option 2",
-  title: "Option 2",
-  description: "Take control of your project with our comprehensive self-service platform. Access powerful tools and resources to build your solution at your own pace with expert guidance when needed.",
-  ctaText: "Get Started",
-  ctaHref: "#"
-};
 function ComparisonImageCards({
-  heading = "Old vs New",
-  description = "Compare the difference between the original and the new way of doing things.",
-  optionA = defaultOptionA,
-  optionB = defaultOptionB,
+  heading,
+  description,
+  optionA,
+  optionB,
   dividerText = "OR",
   cardsSlot,
   className,
@@ -509,6 +493,7 @@ function ComparisonImageCards({
   ] }) });
   const renderCards = () => {
     if (cardsSlot) return cardsSlot;
+    if (!optionA || !optionB) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       renderCard(optionA),
       renderCard(optionB),

package/dist/comparison-image-cards.js

@@ -428,27 +428,11 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultOptionA = {
-  image: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-  imageAlt: "Option 1",
-  title: "Option 1",
-  description: "Let our expert team handle everything for you. We'll manage the entire development process from start to finish, delivering a polished solution tailored to your exact specifications.",
-  ctaText: "Get Started",
-  ctaHref: "#"
-};
-var defaultOptionB = {
-  image: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-  imageAlt: "Option 2",
-  title: "Option 2",
-  description: "Take control of your project with our comprehensive self-service platform. Access powerful tools and resources to build your solution at your own pace with expert guidance when needed.",
-  ctaText: "Get Started",
-  ctaHref: "#"
-};
 function ComparisonImageCards({
-  heading = "Old vs New",
-  description = "Compare the difference between the original and the new way of doing things.",
-  optionA = defaultOptionA,
-  optionB = defaultOptionB,
+  heading,
+  description,
+  optionA,
+  optionB,
   dividerText = "OR",
   cardsSlot,
   className,
@@ -487,6 +471,7 @@ function ComparisonImageCards({
   ] }) });
   const renderCards = () => {
     if (cardsSlot) return cardsSlot;
+    if (!optionA || !optionB) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       renderCard(optionA),
       renderCard(optionB),

package/dist/comparison-legacy-modern.cjs

@@ -157,34 +157,14 @@ function Separator({
     }
   );
 }
-var defaultLegacyFeatures = [
-  { text: "One-size-fits-all project tools with generic workflows." },
-  { text: "Clunky, overcomplicated, and hard to adopt." },
-  { text: "Scattered data stitched together with brittle integrations." },
-  { text: "Minimal automation leading to manual reporting." },
-  { text: "Slow, risky migrations that disrupt delivery." },
-  { text: "Aging tech with limited cloud and mobile support." },
-  { text: "High price tags without measurable outcomes." },
-  { text: "Surprise fees for training, support, and integrations." }
-];
-var defaultModernFeatures = [
-  { emoji: "\u{1F9ED}", text: "Built for modern product and engineering teams." },
-  { emoji: "\u{1F4A1}", text: "Opinionated defaults with a simple, modern UX." },
-  { emoji: "\u{1F4CA}", text: "Unified workspace as your single source of truth." },
-  { emoji: "\u26A1", text: "Automation and AI that cut busywork." },
-  { emoji: "\u{1F9F0}", text: "Guided, low-risk migrations measured in weeks." },
-  { emoji: "\u2601\uFE0F", text: "Cloud-native, secure, and always up to date." },
-  { emoji: "\u{1F4C8}", text: "Improves velocity with a clear, provable ROI." },
-  { emoji: "\u{1F4AC}", text: "Straightforward, transparent pricing." }
-];
 function ComparisonLegacyModern({
-  heading = "Why Teams are",
+  heading,
   headingHighlight = "Moving to Modern Tools",
-  description = "Old tools slow your team down and don't help you ship faster. Modern tools help you ship faster.",
+  description,
   legacyTitle = "Legacy Features",
-  legacyFeatures = defaultLegacyFeatures,
+  legacyFeatures,
   modernTitle = "New Features",
-  modernFeatures = defaultModernFeatures,
+  modernFeatures,
   columnsSlot,
   className,
   containerClassName,
@@ -197,6 +177,7 @@ function ComparisonLegacyModern({
 }) {
   const renderColumns = () => {
     if (columnsSlot) return columnsSlot;
+    if (!legacyFeatures || legacyFeatures.length === 0 || !modernFeatures || modernFeatures.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-3xl bg-muted p-6 lg:rounded-r-none lg:p-12", legacyColumnClassName), children: [
         legacyTitle && (typeof legacyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-medium", children: legacyTitle }) : legacyTitle),

package/dist/comparison-legacy-modern.js

@@ -134,34 +134,14 @@ function Separator({
     }
   );
 }
-var defaultLegacyFeatures = [
-  { text: "One-size-fits-all project tools with generic workflows." },
-  { text: "Clunky, overcomplicated, and hard to adopt." },
-  { text: "Scattered data stitched together with brittle integrations." },
-  { text: "Minimal automation leading to manual reporting." },
-  { text: "Slow, risky migrations that disrupt delivery." },
-  { text: "Aging tech with limited cloud and mobile support." },
-  { text: "High price tags without measurable outcomes." },
-  { text: "Surprise fees for training, support, and integrations." }
-];
-var defaultModernFeatures = [
-  { emoji: "\u{1F9ED}", text: "Built for modern product and engineering teams." },
-  { emoji: "\u{1F4A1}", text: "Opinionated defaults with a simple, modern UX." },
-  { emoji: "\u{1F4CA}", text: "Unified workspace as your single source of truth." },
-  { emoji: "\u26A1", text: "Automation and AI that cut busywork." },
-  { emoji: "\u{1F9F0}", text: "Guided, low-risk migrations measured in weeks." },
-  { emoji: "\u2601\uFE0F", text: "Cloud-native, secure, and always up to date." },
-  { emoji: "\u{1F4C8}", text: "Improves velocity with a clear, provable ROI." },
-  { emoji: "\u{1F4AC}", text: "Straightforward, transparent pricing." }
-];
 function ComparisonLegacyModern({
-  heading = "Why Teams are",
+  heading,
   headingHighlight = "Moving to Modern Tools",
-  description = "Old tools slow your team down and don't help you ship faster. Modern tools help you ship faster.",
+  description,
   legacyTitle = "Legacy Features",
-  legacyFeatures = defaultLegacyFeatures,
+  legacyFeatures,
   modernTitle = "New Features",
-  modernFeatures = defaultModernFeatures,
+  modernFeatures,
   columnsSlot,
   className,
   containerClassName,
@@ -174,6 +154,7 @@ function ComparisonLegacyModern({
 }) {
   const renderColumns = () => {
     if (columnsSlot) return columnsSlot;
+    if (!legacyFeatures || legacyFeatures.length === 0 || !modernFeatures || modernFeatures.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: cn("rounded-3xl bg-muted p-6 lg:rounded-r-none lg:p-12", legacyColumnClassName), children: [
         legacyTitle && (typeof legacyTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-medium", children: legacyTitle }) : legacyTitle),

package/dist/comparison-metrics-rows.cjs

@@ -4,8 +4,8 @@
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,111 +31,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-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;
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -554,51 +449,15 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultMetrics = [
-  {
-    title: "Initial Setup",
-    optionA: { value: "6", unit: "mo", desc: "Enterprise implementation timeline" },
-    optionB: { value: "2", unit: "wk", desc: "Rapid deployment process" }
-  },
-  {
-    title: "Monthly Cost",
-    optionA: { value: "$50k", unit: "+", desc: "Enterprise licensing fees" },
-    optionB: { value: "$5k", unit: "", desc: "Predictable monthly pricing" }
-  },
-  {
-    title: "Team Training",
-    optionA: { value: "3", unit: "mo", desc: "Extensive onboarding required" },
-    optionB: { value: "1", unit: "wk", desc: "Intuitive interface design" }
-  },
-  {
-    title: "ROI Timeline",
-    optionA: { value: "4", unit: "y", desc: "Standard enterprise timeline" },
-    optionB: { value: "8", unit: "m", desc: "Accelerated market entry" }
-  }
-];
-var defaultActions = [
-  {
-    label: "Get Started",
-    href: "#",
-    variant: "default",
-    size: "lg",
-    iconAfter: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-  }
-];
-var defaultFootnotes = [
-  "* Varies based on specific requirements and complexity",
-  "^ Deployment time may vary depending on integration requirements",
-  "# Additional costs may apply for premium features"
-];
 function ComparisonMetricsRows({
-  heading = "Compare Cloud vs On-site Infrastructure",
+  heading,
   description,
   optionALabel = "Traditional",
   optionBLabel = "Cloud-Native",
-  metrics = defaultMetrics,
+  metrics,
   metricsSlot,
-  footnotes = defaultFootnotes,
-  actions = defaultActions,
+  footnotes,
+  actions,
   actionsSlot,
   className,
   containerClassName,
@@ -611,6 +470,7 @@ function ComparisonMetricsRows({
 }) {
   const renderMetrics = () => {
     if (metricsSlot) return metricsSlot;
+    if (!metrics || metrics.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("col-span-4 rounded-xl bg-background shadow-sm md:col-span-8 lg:col-span-10 lg:col-start-2", metricsClassName), children: metrics.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -669,7 +529,7 @@ function ComparisonMetricsRows({
     ] }) }),
     renderMetrics(),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 md:col-span-8 lg:col-span-10 lg:col-start-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes.map((note, idx) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes?.map((note, idx) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
       renderActions()
     ] }) })
   ] }) });

package/dist/comparison-metrics-rows.js

@@ -2,118 +2,13 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // lib/utils.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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;
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -532,51 +427,15 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultMetrics = [
-  {
-    title: "Initial Setup",
-    optionA: { value: "6", unit: "mo", desc: "Enterprise implementation timeline" },
-    optionB: { value: "2", unit: "wk", desc: "Rapid deployment process" }
-  },
-  {
-    title: "Monthly Cost",
-    optionA: { value: "$50k", unit: "+", desc: "Enterprise licensing fees" },
-    optionB: { value: "$5k", unit: "", desc: "Predictable monthly pricing" }
-  },
-  {
-    title: "Team Training",
-    optionA: { value: "3", unit: "mo", desc: "Extensive onboarding required" },
-    optionB: { value: "1", unit: "wk", desc: "Intuitive interface design" }
-  },
-  {
-    title: "ROI Timeline",
-    optionA: { value: "4", unit: "y", desc: "Standard enterprise timeline" },
-    optionB: { value: "8", unit: "m", desc: "Accelerated market entry" }
-  }
-];
-var defaultActions = [
-  {
-    label: "Get Started",
-    href: "#",
-    variant: "default",
-    size: "lg",
-    iconAfter: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-  }
-];
-var defaultFootnotes = [
-  "* Varies based on specific requirements and complexity",
-  "^ Deployment time may vary depending on integration requirements",
-  "# Additional costs may apply for premium features"
-];
 function ComparisonMetricsRows({
-  heading = "Compare Cloud vs On-site Infrastructure",
+  heading,
   description,
   optionALabel = "Traditional",
   optionBLabel = "Cloud-Native",
-  metrics = defaultMetrics,
+  metrics,
   metricsSlot,
-  footnotes = defaultFootnotes,
-  actions = defaultActions,
+  footnotes,
+  actions,
   actionsSlot,
   className,
   containerClassName,
@@ -589,6 +448,7 @@ function ComparisonMetricsRows({
 }) {
   const renderMetrics = () => {
     if (metricsSlot) return metricsSlot;
+    if (!metrics || metrics.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("col-span-4 rounded-xl bg-background shadow-sm md:col-span-8 lg:col-span-10 lg:col-start-2", metricsClassName), children: metrics.map((row, index) => /* @__PURE__ */ jsx(
       "div",
       {
@@ -647,7 +507,7 @@ function ComparisonMetricsRows({
     ] }) }),
     renderMetrics(),
     /* @__PURE__ */ jsx("div", { className: "col-span-4 md:col-span-8 lg:col-span-10 lg:col-start-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes.map((note, idx) => /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
+      /* @__PURE__ */ jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes?.map((note, idx) => /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
       renderActions()
     ] }) })
   ] }) });