@opensite/ui 0.3.4 → 0.4.1

package/dist/comparison-table-tabs.cjs

@@ -258,54 +258,11 @@ function TabsTrigger({
     }
   );
 }
-var defaultFeatures = [
-  "Initial cost",
-  "Scalability",
-  "Performance",
-  "Maintenance",
-  "Data recovery",
-  "Lifespan"
-];
-var defaultModels = [
-  {
-    name: "SSD",
-    attributes: [
-      { value: "Medium to high", status: "negative" },
-      { value: "Limited by size", status: "neutral" },
-      { value: "Very fast", status: "positive" },
-      { value: "Low maintenance", status: "positive" },
-      { value: "Challenging", status: "negative" },
-      { value: "5-7 years", status: "neutral" }
-    ]
-  },
-  {
-    name: "Cloud Storage",
-    attributes: [
-      { value: "Pay-as-you-go", status: "positive" },
-      { value: "Unlimited scaling", status: "positive" },
-      { value: "Depends on connection", status: "neutral" },
-      { value: "Managed service", status: "positive" },
-      { value: "Provider dependent", status: "neutral" },
-      { value: "Indefinite", status: "positive" }
-    ]
-  },
-  {
-    name: "NAS",
-    attributes: [
-      { value: "High upfront", status: "negative" },
-      { value: "Expandable", status: "positive" },
-      { value: "Network limited", status: "neutral" },
-      { value: "Regular upkeep", status: "negative" },
-      { value: "Built-in redundancy", status: "positive" },
-      { value: "7-10 years", status: "positive" }
-    ]
-  }
-];
 function ComparisonTableTabs({
   heading,
   description,
-  features = defaultFeatures,
-  models = defaultModels,
+  features,
+  models,
   tableSlot,
   className,
   containerClassName,
@@ -316,7 +273,7 @@ function ComparisonTableTabs({
   tableHeaderClassName,
   tableCellClassName
 }) {
-  const [selectedTab, setSelectedTab] = React.useState(models[0]?.name || "");
+  const [selectedTab, setSelectedTab] = React.useState(models?.[0]?.name || "");
   const renderStatusIcon = (status) => {
     if (status === "positive") {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-700" }) });
@@ -328,6 +285,7 @@ function ComparisonTableTabs({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!models || models.length === 0 || !features || features.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Tabs,

package/dist/comparison-table-tabs.js

@@ -236,54 +236,11 @@ function TabsTrigger({
     }
   );
 }
-var defaultFeatures = [
-  "Initial cost",
-  "Scalability",
-  "Performance",
-  "Maintenance",
-  "Data recovery",
-  "Lifespan"
-];
-var defaultModels = [
-  {
-    name: "SSD",
-    attributes: [
-      { value: "Medium to high", status: "negative" },
-      { value: "Limited by size", status: "neutral" },
-      { value: "Very fast", status: "positive" },
-      { value: "Low maintenance", status: "positive" },
-      { value: "Challenging", status: "negative" },
-      { value: "5-7 years", status: "neutral" }
-    ]
-  },
-  {
-    name: "Cloud Storage",
-    attributes: [
-      { value: "Pay-as-you-go", status: "positive" },
-      { value: "Unlimited scaling", status: "positive" },
-      { value: "Depends on connection", status: "neutral" },
-      { value: "Managed service", status: "positive" },
-      { value: "Provider dependent", status: "neutral" },
-      { value: "Indefinite", status: "positive" }
-    ]
-  },
-  {
-    name: "NAS",
-    attributes: [
-      { value: "High upfront", status: "negative" },
-      { value: "Expandable", status: "positive" },
-      { value: "Network limited", status: "neutral" },
-      { value: "Regular upkeep", status: "negative" },
-      { value: "Built-in redundancy", status: "positive" },
-      { value: "7-10 years", status: "positive" }
-    ]
-  }
-];
 function ComparisonTableTabs({
   heading,
   description,
-  features = defaultFeatures,
-  models = defaultModels,
+  features,
+  models,
   tableSlot,
   className,
   containerClassName,
@@ -294,7 +251,7 @@ function ComparisonTableTabs({
   tableHeaderClassName,
   tableCellClassName
 }) {
-  const [selectedTab, setSelectedTab] = useState(models[0]?.name || "");
+  const [selectedTab, setSelectedTab] = useState(models?.[0]?.name || "");
   const renderStatusIcon = (status) => {
     if (status === "positive") {
       return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-700" }) });
@@ -306,6 +263,7 @@ function ComparisonTableTabs({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!models || models.length === 0 || !features || features.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Tabs,

package/dist/comparison-table-tooltips.cjs

@@ -152,43 +152,12 @@ function TooltipContent({
     }
   ) });
 }
-var defaultRows = [
-  { feature: "Design System", optionA: "Modern, Utility-first", optionB: "Classic, Component-based" },
-  { feature: "Customization", optionA: "Highly customizable", optionB: "Limited by default" },
-  { feature: "Dark Mode", optionA: "Built-in", optionB: "Requires extra setup" },
-  { feature: "TypeScript Support", optionA: "First-class", optionB: "Partial" },
-  { feature: "Accessibility", optionA: "Focus on a11y", optionB: "Basic" },
-  { feature: "Component Count", optionA: "30+", optionB: "25+" },
-  { feature: "License", optionA: "MIT", optionB: "MIT" },
-  {
-    feature: "Premium Components",
-    optionA: "Available",
-    optionB: {
-      value: "Not included",
-      tooltip: {
-        title: "Premium Only",
-        content: "Some advanced components are only available in paid versions or require third-party libraries."
-      }
-    }
-  },
-  {
-    feature: "Figma Kit",
-    optionA: "Yes",
-    optionB: {
-      value: "No",
-      tooltip: {
-        title: "Figma Kit Unavailable",
-        content: "Does not provide an official Figma kit, but community kits may exist."
-      }
-    }
-  }
-];
 function ComparisonTableTooltips({
-  heading = "Compare Us",
-  description = "A modern framework for building websites that is better than the competition.",
+  heading,
+  description,
   optionALabel = "Our Solution",
   optionBLabel = "Alternative",
-  rows = defaultRows,
+  rows,
   tableSlot,
   className,
   containerClassName,
@@ -225,6 +194,7 @@ function ComparisonTableTooltips({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: tableHeaderClassName }),

package/dist/comparison-table-tooltips.js

@@ -130,43 +130,12 @@ function TooltipContent({
     }
   ) });
 }
-var defaultRows = [
-  { feature: "Design System", optionA: "Modern, Utility-first", optionB: "Classic, Component-based" },
-  { feature: "Customization", optionA: "Highly customizable", optionB: "Limited by default" },
-  { feature: "Dark Mode", optionA: "Built-in", optionB: "Requires extra setup" },
-  { feature: "TypeScript Support", optionA: "First-class", optionB: "Partial" },
-  { feature: "Accessibility", optionA: "Focus on a11y", optionB: "Basic" },
-  { feature: "Component Count", optionA: "30+", optionB: "25+" },
-  { feature: "License", optionA: "MIT", optionB: "MIT" },
-  {
-    feature: "Premium Components",
-    optionA: "Available",
-    optionB: {
-      value: "Not included",
-      tooltip: {
-        title: "Premium Only",
-        content: "Some advanced components are only available in paid versions or require third-party libraries."
-      }
-    }
-  },
-  {
-    feature: "Figma Kit",
-    optionA: "Yes",
-    optionB: {
-      value: "No",
-      tooltip: {
-        title: "Figma Kit Unavailable",
-        content: "Does not provide an official Figma kit, but community kits may exist."
-      }
-    }
-  }
-];
 function ComparisonTableTooltips({
-  heading = "Compare Us",
-  description = "A modern framework for building websites that is better than the competition.",
+  heading,
+  description,
   optionALabel = "Our Solution",
   optionBLabel = "Alternative",
-  rows = defaultRows,
+  rows,
   tableSlot,
   className,
   containerClassName,
@@ -203,6 +172,7 @@ function ComparisonTableTooltips({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableHead, { className: tableHeaderClassName }),

package/dist/comparison-table-two-column.cjs

@@ -136,45 +136,10 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var defaultRows = [
-  {
-    label: "Onboarding",
-    optionA: "1-2 days",
-    optionB: "30 days"
-  },
-  {
-    label: "Price Range",
-    optionA: "10%",
-    optionB: "50-60%"
-  },
-  {
-    label: "Quality Score",
-    optionA: "Top 3%",
-    optionB: "Varies"
-  },
-  {
-    label: "Verification",
-    optionA: "Multi-step verification process",
-    optionB: "Basic check",
-    hasIcon: true
-  },
-  {
-    label: "Adaptability",
-    optionA: "Fully flexible",
-    optionB: "Limited",
-    hasIcon: true
-  },
-  {
-    label: "Support",
-    optionA: "24/7 dedicated team",
-    optionB: "Limited hours",
-    hasIcon: true
-  }
-];
 function ComparisonTableTwoColumn({
-  heading = "Compare us with others.",
+  heading,
   description,
-  rows = defaultRows,
+  rows,
   tableSlot,
   optionALogo,
   optionALogoAlt = "Option A logo",
@@ -194,9 +159,10 @@ function ComparisonTableTwoColumn({
 }) {
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("-mr-4 overflow-x-auto", tableWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-2xl overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-3 [&>:last-child_div]:rounded-b-md [&>div:nth-last-child(-n+3)]:rounded-b-md [&>div:nth-last-child(-n+3)]:border-b-0", tableGridClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center rounded-t-md bg-green-100 p-3 md:p-4", optionACellClassName), children: optionALogo ? /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center rounded-t-md bg-success/10 p-3 md:p-4", optionACellClassName), children: optionALogo ? /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: optionALogo,
@@ -204,8 +170,8 @@ function ComparisonTableTwoColumn({
           className: "h-7 md:h-8",
           optixFlowConfig
         }
-      ) : typeof optionALabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-green-800", children: optionALabel }) : optionALabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center rounded-t-md bg-red-100 p-3 md:p-4", optionBCellClassName), children: optionBLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+      ) : typeof optionALabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-success", children: optionALabel }) : optionALabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center rounded-t-md bg-destructive/10 p-3 md:p-4", optionBCellClassName), children: optionBLogo ? /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: optionBLogo,
@@ -213,27 +179,27 @@ function ComparisonTableTwoColumn({
           className: "h-7 md:h-8",
           optixFlowConfig
         }
-      ) : typeof optionBLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-red-800", children: optionBLabel }) : optionBLabel }),
+      ) : typeof optionBLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-destructive", children: optionBLabel }) : optionBLabel }),
       rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg", children: row.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-green-50 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-success/5 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           row.hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
               name: "lucide/circle-check-big",
               size: 20,
-              className: "text-green-600"
+              className: "text-success"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base md:text-lg", children: row.optionA })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-red-50 p-3 md:p-6", optionBCellClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-destructive/5 p-3 md:p-6", optionBCellClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           row.hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
               name: "lucide/octagon-x",
               size: 20,
-              className: "text-red-600"
+              className: "text-destructive"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base md:text-lg", children: row.optionB })

package/dist/comparison-table-two-column.js

@@ -114,45 +114,10 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var defaultRows = [
-  {
-    label: "Onboarding",
-    optionA: "1-2 days",
-    optionB: "30 days"
-  },
-  {
-    label: "Price Range",
-    optionA: "10%",
-    optionB: "50-60%"
-  },
-  {
-    label: "Quality Score",
-    optionA: "Top 3%",
-    optionB: "Varies"
-  },
-  {
-    label: "Verification",
-    optionA: "Multi-step verification process",
-    optionB: "Basic check",
-    hasIcon: true
-  },
-  {
-    label: "Adaptability",
-    optionA: "Fully flexible",
-    optionB: "Limited",
-    hasIcon: true
-  },
-  {
-    label: "Support",
-    optionA: "24/7 dedicated team",
-    optionB: "Limited hours",
-    hasIcon: true
-  }
-];
 function ComparisonTableTwoColumn({
-  heading = "Compare us with others.",
+  heading,
   description,
-  rows = defaultRows,
+  rows,
   tableSlot,
   optionALogo,
   optionALogoAlt = "Option A logo",
@@ -172,9 +137,10 @@ function ComparisonTableTwoColumn({
 }) {
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("-mr-4 overflow-x-auto", tableWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "min-w-2xl overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-3 [&>:last-child_div]:rounded-b-md [&>div:nth-last-child(-n+3)]:rounded-b-md [&>div:nth-last-child(-n+3)]:border-b-0", tableGridClassName), children: [
       /* @__PURE__ */ jsx("div", { className: "p-4" }),
-      /* @__PURE__ */ jsx("div", { className: cn("flex items-center rounded-t-md bg-green-100 p-3 md:p-4", optionACellClassName), children: optionALogo ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: cn("flex items-center rounded-t-md bg-success/10 p-3 md:p-4", optionACellClassName), children: optionALogo ? /* @__PURE__ */ jsx(
         Img,
         {
           src: optionALogo,
@@ -182,8 +148,8 @@ function ComparisonTableTwoColumn({
           className: "h-7 md:h-8",
           optixFlowConfig
         }
-      ) : typeof optionALabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-green-800", children: optionALabel }) : optionALabel }),
-      /* @__PURE__ */ jsx("div", { className: cn("flex items-center rounded-t-md bg-red-100 p-3 md:p-4", optionBCellClassName), children: optionBLogo ? /* @__PURE__ */ jsx(
+      ) : typeof optionALabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-success", children: optionALabel }) : optionALabel }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex items-center rounded-t-md bg-destructive/10 p-3 md:p-4", optionBCellClassName), children: optionBLogo ? /* @__PURE__ */ jsx(
         Img,
         {
           src: optionBLogo,
@@ -191,27 +157,27 @@ function ComparisonTableTwoColumn({
           className: "h-7 md:h-8",
           optixFlowConfig
         }
-      ) : typeof optionBLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-red-800", children: optionBLabel }) : optionBLabel }),
+      ) : typeof optionBLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-destructive", children: optionBLabel }) : optionBLabel }),
       rows.map((row, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg", children: row.label }),
-        /* @__PURE__ */ jsx("div", { className: cn("border-b bg-green-50 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("border-b bg-success/5 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           row.hasIcon && /* @__PURE__ */ jsx(
             DynamicIcon,
             {
               name: "lucide/circle-check-big",
               size: 20,
-              className: "text-green-600"
+              className: "text-success"
             }
           ),
           /* @__PURE__ */ jsx("span", { className: "text-base md:text-lg", children: row.optionA })
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: cn("border-b bg-red-50 p-3 md:p-6", optionBCellClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("border-b bg-destructive/5 p-3 md:p-6", optionBCellClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           row.hasIcon && /* @__PURE__ */ jsx(
             DynamicIcon,
             {
               name: "lucide/octagon-x",
               size: 20,
-              className: "text-red-600"
+              className: "text-destructive"
             }
           ),
           /* @__PURE__ */ jsx("span", { className: "text-base md:text-lg", children: row.optionB })