@opensite/ui 0.3.4 → 0.4.1

package/dist/comparison-ai-models.cjs

@@ -212,108 +212,11 @@ function TableCell({ className, ...props }) {
     }
   );
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  openaiIcon: "https://cdn.ing/assets/files/record/286236/w11q4i7pq5v2xbaysb4glfeqiel9",
-  claudeIcon: "https://cdn.ing/assets/files/record/286237/id772bsaby7c6wq1nk3ox7ywbgkp",
-  geminiIcon: "https://cdn.ing/assets/files/record/286238/kozl1uiskp6sqq1k5ku69s23lw27"};
-var defaultModels = {
-  modelA: {
-    name: "GPT-4o",
-    icon: blockBrandedIconsAndPlaceholders.openaiIcon,
-    iconAlt: "OpenAI",
-    summary: [
-      "Response latency: 1.2s (best)",
-      "Code accuracy: 94% (neutral)",
-      "Reasoning score: 91/100 (neutral)",
-      "Input cost: $3.50/1M tokens (worst)",
-      "Rate limit: 50K RPM (neutral)"
-    ],
-    hoverColor: "red"
-  },
-  modelB: {
-    name: "Claude 3.5",
-    icon: blockBrandedIconsAndPlaceholders.claudeIcon,
-    iconAlt: "Claude",
-    summary: [
-      "Response latency: 1.8s (neutral)",
-      "Code accuracy: 95% (best)",
-      "Reasoning score: 92/100 (best)",
-      "Input cost: $3.00/1M tokens (neutral)",
-      "Rate limit: 40K RPM (worst)"
-    ],
-    hoverColor: "blue"
-  },
-  modelC: {
-    name: "Gemini Pro 1.5",
-    icon: blockBrandedIconsAndPlaceholders.geminiIcon,
-    iconAlt: "Gemini",
-    summary: [
-      "Context window: 2M tokens (best)",
-      "Input cost: $1.25/1M tokens (best)",
-      "Output cost: $5.00/1M tokens (best)",
-      "Rate limit: 60K RPM (best)",
-      "Free tier: Generous (best)"
-    ],
-    hoverColor: "green"
-  }
-};
-var defaultComparisonData = [
-  {
-    metric: "Context Window",
-    modelA: { value: "128K tokens", status: "worst" },
-    modelB: { value: "200K tokens", status: "neutral" },
-    modelC: { value: "2M tokens", status: "best" }
-  },
-  {
-    metric: "Response Speed",
-    modelA: { value: "1.2 sec", status: "best" },
-    modelB: { value: "1.8 sec", status: "neutral" },
-    modelC: { value: "2.2 sec", status: "worst" }
-  },
-  {
-    metric: "Code Generation",
-    modelA: { value: "94%", status: "neutral" },
-    modelB: { value: "95%", status: "best" },
-    modelC: { value: "88%", status: "worst" }
-  },
-  {
-    metric: "Reasoning Score",
-    modelA: { value: "91/100", status: "neutral" },
-    modelB: { value: "92/100", status: "best" },
-    modelC: { value: "86/100", status: "worst" }
-  },
-  {
-    metric: "Input Tokens",
-    modelA: { value: "$3.50/1M", status: "worst" },
-    modelB: { value: "$3.00/1M", status: "neutral" },
-    modelC: { value: "$1.25/1M", status: "best" }
-  },
-  {
-    metric: "Output Tokens",
-    modelA: { value: "$14.00/1M", status: "neutral" },
-    modelB: { value: "$15.00/1M", status: "worst" },
-    modelC: { value: "$5.00/1M", status: "best" }
-  },
-  {
-    metric: "Rate Limit",
-    modelA: { value: "50K RPM", status: "neutral" },
-    modelB: { value: "40K RPM", status: "worst" },
-    modelC: { value: "60K RPM", status: "best" }
-  },
-  {
-    metric: "Free Tier",
-    modelA: { value: "Very Limited", status: "worst" },
-    modelB: { value: "Limited", status: "neutral" },
-    modelC: { value: "Generous", status: "best" }
-  }
-];
 function ComparisonAiModels({
   heading,
   description,
-  models = defaultModels,
-  comparisonData = defaultComparisonData,
+  models,
+  comparisonData,
   tableSlot,
   analysisSlot,
   className,
@@ -328,10 +231,10 @@ function ComparisonAiModels({
   const [hoveredModel, setHoveredModel] = React.useState(null);
   const renderStatusIcon = (status) => {
     if (status === "best") {
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-600" });
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" });
     }
     if (status === "worst") {
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-red-600" });
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-destructive" });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "text-muted-foreground" });
   };
@@ -339,9 +242,9 @@ function ComparisonAiModels({
     const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
     let statusClass = "";
     if (status === "best") {
-      statusClass = "bg-green-50 text-green-600 dark:bg-green-950/20";
+      statusClass = "bg-green-50 text-success dark:bg-green-950/20";
     } else if (status === "worst") {
-      statusClass = "bg-red-50 text-red-600 dark:bg-red-950/20";
+      statusClass = "bg-red-50 text-destructive dark:bg-red-950/20";
     } else {
       statusClass = "bg-muted/50 text-foreground";
     }
@@ -364,6 +267,7 @@ function ComparisonAiModels({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!models || !comparisonData || comparisonData.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden border border-border/50 bg-background/50 backdrop-blur-sm", tableWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: tableClassName, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/50", children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-foreground", children: "Metric" }),
@@ -430,6 +334,7 @@ function ComparisonAiModels({
   };
   const renderAnalysis = () => {
     if (analysisSlot) return analysisSlot;
+    if (!models) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative mt-8 border border-border/50 bg-muted/20 p-6", analysisClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-4 font-mono text-sm font-semibold tracking-wider text-foreground uppercase", children: "Technical Analysis" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 font-mono text-xs text-muted-foreground", children: [

package/dist/comparison-ai-models.js

@@ -191,108 +191,11 @@ function TableCell({ className, ...props }) {
     }
   );
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  openaiIcon: "https://cdn.ing/assets/files/record/286236/w11q4i7pq5v2xbaysb4glfeqiel9",
-  claudeIcon: "https://cdn.ing/assets/files/record/286237/id772bsaby7c6wq1nk3ox7ywbgkp",
-  geminiIcon: "https://cdn.ing/assets/files/record/286238/kozl1uiskp6sqq1k5ku69s23lw27"};
-var defaultModels = {
-  modelA: {
-    name: "GPT-4o",
-    icon: blockBrandedIconsAndPlaceholders.openaiIcon,
-    iconAlt: "OpenAI",
-    summary: [
-      "Response latency: 1.2s (best)",
-      "Code accuracy: 94% (neutral)",
-      "Reasoning score: 91/100 (neutral)",
-      "Input cost: $3.50/1M tokens (worst)",
-      "Rate limit: 50K RPM (neutral)"
-    ],
-    hoverColor: "red"
-  },
-  modelB: {
-    name: "Claude 3.5",
-    icon: blockBrandedIconsAndPlaceholders.claudeIcon,
-    iconAlt: "Claude",
-    summary: [
-      "Response latency: 1.8s (neutral)",
-      "Code accuracy: 95% (best)",
-      "Reasoning score: 92/100 (best)",
-      "Input cost: $3.00/1M tokens (neutral)",
-      "Rate limit: 40K RPM (worst)"
-    ],
-    hoverColor: "blue"
-  },
-  modelC: {
-    name: "Gemini Pro 1.5",
-    icon: blockBrandedIconsAndPlaceholders.geminiIcon,
-    iconAlt: "Gemini",
-    summary: [
-      "Context window: 2M tokens (best)",
-      "Input cost: $1.25/1M tokens (best)",
-      "Output cost: $5.00/1M tokens (best)",
-      "Rate limit: 60K RPM (best)",
-      "Free tier: Generous (best)"
-    ],
-    hoverColor: "green"
-  }
-};
-var defaultComparisonData = [
-  {
-    metric: "Context Window",
-    modelA: { value: "128K tokens", status: "worst" },
-    modelB: { value: "200K tokens", status: "neutral" },
-    modelC: { value: "2M tokens", status: "best" }
-  },
-  {
-    metric: "Response Speed",
-    modelA: { value: "1.2 sec", status: "best" },
-    modelB: { value: "1.8 sec", status: "neutral" },
-    modelC: { value: "2.2 sec", status: "worst" }
-  },
-  {
-    metric: "Code Generation",
-    modelA: { value: "94%", status: "neutral" },
-    modelB: { value: "95%", status: "best" },
-    modelC: { value: "88%", status: "worst" }
-  },
-  {
-    metric: "Reasoning Score",
-    modelA: { value: "91/100", status: "neutral" },
-    modelB: { value: "92/100", status: "best" },
-    modelC: { value: "86/100", status: "worst" }
-  },
-  {
-    metric: "Input Tokens",
-    modelA: { value: "$3.50/1M", status: "worst" },
-    modelB: { value: "$3.00/1M", status: "neutral" },
-    modelC: { value: "$1.25/1M", status: "best" }
-  },
-  {
-    metric: "Output Tokens",
-    modelA: { value: "$14.00/1M", status: "neutral" },
-    modelB: { value: "$15.00/1M", status: "worst" },
-    modelC: { value: "$5.00/1M", status: "best" }
-  },
-  {
-    metric: "Rate Limit",
-    modelA: { value: "50K RPM", status: "neutral" },
-    modelB: { value: "40K RPM", status: "worst" },
-    modelC: { value: "60K RPM", status: "best" }
-  },
-  {
-    metric: "Free Tier",
-    modelA: { value: "Very Limited", status: "worst" },
-    modelB: { value: "Limited", status: "neutral" },
-    modelC: { value: "Generous", status: "best" }
-  }
-];
 function ComparisonAiModels({
   heading,
   description,
-  models = defaultModels,
-  comparisonData = defaultComparisonData,
+  models,
+  comparisonData,
   tableSlot,
   analysisSlot,
   className,
@@ -307,10 +210,10 @@ function ComparisonAiModels({
   const [hoveredModel, setHoveredModel] = useState(null);
   const renderStatusIcon = (status) => {
     if (status === "best") {
-      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-600" });
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" });
     }
     if (status === "worst") {
-      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-red-600" });
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-destructive" });
     }
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "text-muted-foreground" });
   };
@@ -318,9 +221,9 @@ function ComparisonAiModels({
     const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
     let statusClass = "";
     if (status === "best") {
-      statusClass = "bg-green-50 text-green-600 dark:bg-green-950/20";
+      statusClass = "bg-green-50 text-success dark:bg-green-950/20";
     } else if (status === "worst") {
-      statusClass = "bg-red-50 text-red-600 dark:bg-red-950/20";
+      statusClass = "bg-red-50 text-destructive dark:bg-red-950/20";
     } else {
       statusClass = "bg-muted/50 text-foreground";
     }
@@ -343,6 +246,7 @@ function ComparisonAiModels({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!models || !comparisonData || comparisonData.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden border border-border/50 bg-background/50 backdrop-blur-sm", tableWrapperClassName), children: /* @__PURE__ */ jsxs(Table, { className: tableClassName, children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "border-border/50", children: [
         /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-foreground", children: "Metric" }),
@@ -409,6 +313,7 @@ function ComparisonAiModels({
   };
   const renderAnalysis = () => {
     if (analysisSlot) return analysisSlot;
+    if (!models) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("relative mt-8 border border-border/50 bg-muted/20 p-6", analysisClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx("h4", { className: "mb-4 font-mono text-sm font-semibold tracking-wider text-foreground uppercase", children: "Technical Analysis" }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3 font-mono text-xs text-muted-foreground", children: [

package/dist/comparison-feature-cards.cjs

@@ -158,37 +158,11 @@ function Separator({
     }
   );
 }
-var defaultProductA = {
-  name: "Product A",
-  highlighted: true,
-  features: [
-    { text: "Basic Plan Available", included: true },
-    { text: "Unlimited Users", included: true },
-    { text: "Advanced Features", included: true },
-    { text: "Partner Program", included: true },
-    { text: "Live Events", included: true },
-    { text: "Community Access", included: true },
-    { text: "Premium Support", included: true }
-  ]
-};
-var defaultProductB = {
-  name: "Product B",
-  highlighted: false,
-  features: [
-    { text: "Basic Plan Available", included: true },
-    { text: "Unlimited Users", included: true },
-    { text: "Basic Features", included: true },
-    { text: "Partner Program", included: false },
-    { text: "Live Events", included: false },
-    { text: "Community Access", included: false },
-    { text: "Premium Support", included: false }
-  ]
-};
 function ComparisonFeatureCards({
-  heading = "Product A vs. Product B: Making the Right Choice",
-  description = "Product A isn't just an alternative to Product B. It offers enhanced features and capabilities, making it easier to achieve your goals with a modern, intuitive interface designed for today's needs.",
-  productA = defaultProductA,
-  productB = defaultProductB,
+  heading,
+  description,
+  productA,
+  productB,
   cardsSlot,
   suitabilityTitle = "Who is Product B suitable for?",
   suitabilityDescription = "Product B is a reliable solution designed for basic needs and smaller teams. It provides essential functionality for those getting started or requiring fundamental features. While it offers a straightforward interface, it may lack some of the advanced capabilities needed for scaling operations or handling complex workflows.",
@@ -259,6 +233,7 @@ function ComparisonFeatureCards({
   );
   const renderCards = () => {
     if (cardsSlot) return cardsSlot;
+    if (!productA || !productB) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       renderCard(productA, productA.highlighted ?? true),
       renderCard(productB, productB.highlighted ?? false)

package/dist/comparison-feature-cards.js

@@ -135,37 +135,11 @@ function Separator({
     }
   );
 }
-var defaultProductA = {
-  name: "Product A",
-  highlighted: true,
-  features: [
-    { text: "Basic Plan Available", included: true },
-    { text: "Unlimited Users", included: true },
-    { text: "Advanced Features", included: true },
-    { text: "Partner Program", included: true },
-    { text: "Live Events", included: true },
-    { text: "Community Access", included: true },
-    { text: "Premium Support", included: true }
-  ]
-};
-var defaultProductB = {
-  name: "Product B",
-  highlighted: false,
-  features: [
-    { text: "Basic Plan Available", included: true },
-    { text: "Unlimited Users", included: true },
-    { text: "Basic Features", included: true },
-    { text: "Partner Program", included: false },
-    { text: "Live Events", included: false },
-    { text: "Community Access", included: false },
-    { text: "Premium Support", included: false }
-  ]
-};
 function ComparisonFeatureCards({
-  heading = "Product A vs. Product B: Making the Right Choice",
-  description = "Product A isn't just an alternative to Product B. It offers enhanced features and capabilities, making it easier to achieve your goals with a modern, intuitive interface designed for today's needs.",
-  productA = defaultProductA,
-  productB = defaultProductB,
+  heading,
+  description,
+  productA,
+  productB,
   cardsSlot,
   suitabilityTitle = "Who is Product B suitable for?",
   suitabilityDescription = "Product B is a reliable solution designed for basic needs and smaller teams. It provides essential functionality for those getting started or requiring fundamental features. While it offers a straightforward interface, it may lack some of the advanced capabilities needed for scaling operations or handling complex workflows.",
@@ -236,6 +210,7 @@ function ComparisonFeatureCards({
   );
   const renderCards = () => {
     if (cardsSlot) return cardsSlot;
+    if (!productA || !productB) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       renderCard(productA, productA.highlighted ?? true),
       renderCard(productB, productB.highlighted ?? false)

package/dist/comparison-feature-grid.cjs

@@ -135,77 +135,12 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var defaultFeatures = [
-  {
-    icon: "lucide/layout-dashboard",
-    label: "Design System",
-    description: "Modern, utility-first vs classic, component-based.",
-    optionA: true,
-    optionB: true
-  },
-  {
-    icon: "lucide/settings-2",
-    label: "Customization",
-    description: "Highly customizable vs limited by default.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/moon",
-    label: "Dark Mode",
-    description: "Built-in dark mode vs requires extra setup.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/type",
-    label: "TypeScript Support",
-    description: "First-class TypeScript support vs partial support.",
-    optionA: true,
-    optionB: "partial"
-  },
-  {
-    icon: "lucide/accessibility",
-    label: "Accessibility",
-    description: "Focus on accessibility (a11y) vs basic support.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/list-checks",
-    label: "Component Count",
-    description: "30+ components vs 25+ components.",
-    optionA: true,
-    optionB: true
-  },
-  {
-    icon: "lucide/badge-check",
-    label: "License",
-    description: "MIT license for both.",
-    optionA: true,
-    optionB: true
-  },
-  {
-    icon: "lucide/gem",
-    label: "Premium Components",
-    description: "Premium components available vs not included.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/figma",
-    label: "Figma Kit",
-    description: "Official Figma kit available vs not available.",
-    optionA: true,
-    optionB: false
-  }
-];
 function ComparisonFeatureGrid({
-  heading = "Compare Us",
-  description = "A modern framework for building websites that is better than the competition.",
+  heading,
+  description,
   optionALabel = "Our Solution",
   optionBLabel = "Alternative",
-  features = defaultFeatures,
+  features,
   gridSlot,
   className,
   containerClassName,
@@ -217,15 +152,16 @@ function ComparisonFeatureGrid({
 }) {
   const renderStatusIcon = (status) => {
     if (status === true) {
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-green-600" });
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-success" });
     }
     if (status === "partial") {
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-yellow-500" });
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-accent" });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20, className: "text-destructive" });
   };
   const renderGrid = () => {
     if (gridSlot) return gridSlot;
+    if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl divide-y divide-border overflow-x-auto rounded-lg border-border bg-background shadow", gridWrapperClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("hidden rounded-t-lg bg-muted text-left text-base font-semibold text-foreground sm:flex", gridHeaderClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 px-6 py-4" }),

package/dist/comparison-feature-grid.js

@@ -113,77 +113,12 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var defaultFeatures = [
-  {
-    icon: "lucide/layout-dashboard",
-    label: "Design System",
-    description: "Modern, utility-first vs classic, component-based.",
-    optionA: true,
-    optionB: true
-  },
-  {
-    icon: "lucide/settings-2",
-    label: "Customization",
-    description: "Highly customizable vs limited by default.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/moon",
-    label: "Dark Mode",
-    description: "Built-in dark mode vs requires extra setup.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/type",
-    label: "TypeScript Support",
-    description: "First-class TypeScript support vs partial support.",
-    optionA: true,
-    optionB: "partial"
-  },
-  {
-    icon: "lucide/accessibility",
-    label: "Accessibility",
-    description: "Focus on accessibility (a11y) vs basic support.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/list-checks",
-    label: "Component Count",
-    description: "30+ components vs 25+ components.",
-    optionA: true,
-    optionB: true
-  },
-  {
-    icon: "lucide/badge-check",
-    label: "License",
-    description: "MIT license for both.",
-    optionA: true,
-    optionB: true
-  },
-  {
-    icon: "lucide/gem",
-    label: "Premium Components",
-    description: "Premium components available vs not included.",
-    optionA: true,
-    optionB: false
-  },
-  {
-    icon: "lucide/figma",
-    label: "Figma Kit",
-    description: "Official Figma kit available vs not available.",
-    optionA: true,
-    optionB: false
-  }
-];
 function ComparisonFeatureGrid({
-  heading = "Compare Us",
-  description = "A modern framework for building websites that is better than the competition.",
+  heading,
+  description,
   optionALabel = "Our Solution",
   optionBLabel = "Alternative",
-  features = defaultFeatures,
+  features,
   gridSlot,
   className,
   containerClassName,
@@ -195,15 +130,16 @@ function ComparisonFeatureGrid({
 }) {
   const renderStatusIcon = (status) => {
     if (status === true) {
-      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-green-600" });
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-success" });
     }
     if (status === "partial") {
-      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-yellow-500" });
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20, className: "text-accent" });
     }
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20, className: "text-destructive" });
   };
   const renderGrid = () => {
     if (gridSlot) return gridSlot;
+    if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl divide-y divide-border overflow-x-auto rounded-lg border-border bg-background shadow", gridWrapperClassName), children: [
       /* @__PURE__ */ jsxs("div", { className: cn("hidden rounded-t-lg bg-muted text-left text-base font-semibold text-foreground sm:flex", gridHeaderClassName), children: [
         /* @__PURE__ */ jsx("div", { className: "w-16 px-6 py-4" }),

package/dist/comparison-grid-badges.cjs

@@ -169,46 +169,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,
@@ -220,6 +186,7 @@ function ComparisonGridBadges({
 }) {
   const renderFeatures = () => {
     if (featuresSlot) return featuresSlot;
+    if (!features || features.length === 0) return null;
     return features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {