@opensite/ui 0.3.4 → 0.4.1

package/dist/cta-workflow-tabs.cjs

@@ -1036,54 +1036,12 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultActions = [
-  { label: "Get Started", href: "#", variant: "default", size: "lg" },
-  { label: "Learn More", href: "#", variant: "outline", size: "lg" }
-];
-var defaultTabs = [
-  {
-    id: "design",
-    label: "Design",
-    iconName: "lucide/palette",
-    heading: "Design with ease",
-    description: "Create beautiful interfaces with our intuitive design tools. No coding required.",
-    stats: [
-      { value: "50+", label: "Templates" },
-      { value: "100+", label: "Components" }
-    ],
-    image: imagePlaceholders[13]
-  },
-  {
-    id: "develop",
-    label: "Develop",
-    iconName: "lucide/code",
-    heading: "Develop faster",
-    description: "Write clean, maintainable code with our powerful development tools.",
-    stats: [
-      { value: "10x", label: "Faster" },
-      { value: "99%", label: "Less bugs" }
-    ],
-    image: imagePlaceholders[14]
-  },
-  {
-    id: "deploy",
-    label: "Deploy",
-    iconName: "lucide/rocket",
-    heading: "Deploy instantly",
-    description: "Ship to production with one click. Automatic scaling and monitoring included.",
-    stats: [
-      { value: "1-click", label: "Deploy" },
-      { value: "99.9%", label: "Uptime" }
-    ],
-    image: imagePlaceholders[15]
-  }
-];
 function CtaWorkflowTabs({
-  heading = "Build your workflow",
-  description = "From design to deployment, we've got you covered. Choose your path and start building today.",
-  actions = defaultActions,
+  heading,
+  description,
+  actions,
   actionsSlot,
-  tabs = defaultTabs,
+  tabs,
   tabsSlot,
   className,
   containerClassName,
@@ -1102,8 +1060,8 @@ function CtaWorkflowTabs({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [activeTab, setActiveTab] = React__namespace.useState(tabs[0]?.id || "");
-  const activeTabData = tabs.find((tab) => tab.id === activeTab) || tabs[0];
+  const [activeTab, setActiveTab] = React__namespace.useState(tabs?.[0]?.id || "");
+  const activeTabData = tabs?.find((tab) => tab.id === activeTab) || tabs?.[0];
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;

package/dist/cta-workflow-tabs.js

@@ -1015,54 +1015,12 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultActions = [
-  { label: "Get Started", href: "#", variant: "default", size: "lg" },
-  { label: "Learn More", href: "#", variant: "outline", size: "lg" }
-];
-var defaultTabs = [
-  {
-    id: "design",
-    label: "Design",
-    iconName: "lucide/palette",
-    heading: "Design with ease",
-    description: "Create beautiful interfaces with our intuitive design tools. No coding required.",
-    stats: [
-      { value: "50+", label: "Templates" },
-      { value: "100+", label: "Components" }
-    ],
-    image: imagePlaceholders[13]
-  },
-  {
-    id: "develop",
-    label: "Develop",
-    iconName: "lucide/code",
-    heading: "Develop faster",
-    description: "Write clean, maintainable code with our powerful development tools.",
-    stats: [
-      { value: "10x", label: "Faster" },
-      { value: "99%", label: "Less bugs" }
-    ],
-    image: imagePlaceholders[14]
-  },
-  {
-    id: "deploy",
-    label: "Deploy",
-    iconName: "lucide/rocket",
-    heading: "Deploy instantly",
-    description: "Ship to production with one click. Automatic scaling and monitoring included.",
-    stats: [
-      { value: "1-click", label: "Deploy" },
-      { value: "99.9%", label: "Uptime" }
-    ],
-    image: imagePlaceholders[15]
-  }
-];
 function CtaWorkflowTabs({
-  heading = "Build your workflow",
-  description = "From design to deployment, we've got you covered. Choose your path and start building today.",
-  actions = defaultActions,
+  heading,
+  description,
+  actions,
   actionsSlot,
-  tabs = defaultTabs,
+  tabs,
   tabsSlot,
   className,
   containerClassName,
@@ -1081,8 +1039,8 @@ function CtaWorkflowTabs({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [activeTab, setActiveTab] = React.useState(tabs[0]?.id || "");
-  const activeTabData = tabs.find((tab) => tab.id === activeTab) || tabs[0];
+  const [activeTab, setActiveTab] = React.useState(tabs?.[0]?.id || "");
+  const activeTabData = tabs?.find((tab) => tab.id === activeTab) || tabs?.[0];
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;

package/dist/expandable-case-study-cards.cjs

@@ -532,37 +532,8 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    id: "item-1",
-    title: "Case study 1",
-    href: "#",
-    image: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
-    company: "Company Name",
-    badges: ["Commercial", "Multiloan"]
-  },
-  {
-    id: "item-2",
-    title: "Case study 2",
-    href: "#",
-    image: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
-    company: "Company Name",
-    badges: ["Enterprise"]
-  },
-  {
-    id: "item-3",
-    title: "Case study 3",
-    href: "#",
-    image: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
-    company: "Company Name",
-    badges: ["Startup"]
-  }
-];
 function ExpandableCaseStudyCards({
-  items = defaultItems,
+  items,
   itemsSlot,
   className,
   containerClassName,
@@ -578,7 +549,7 @@ function ExpandableCaseStudyCards({
   patternClassName,
   optixFlowConfig
 }) {
-  const [selection, setSelection] = React.useState(items[0]?.id);
+  const [selection, setSelection] = React.useState(items?.[0]?.id);
   const renderItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;

package/dist/expandable-case-study-cards.js

@@ -511,37 +511,8 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    id: "item-1",
-    title: "Case study 1",
-    href: "#",
-    image: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
-    company: "Company Name",
-    badges: ["Commercial", "Multiloan"]
-  },
-  {
-    id: "item-2",
-    title: "Case study 2",
-    href: "#",
-    image: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
-    company: "Company Name",
-    badges: ["Enterprise"]
-  },
-  {
-    id: "item-3",
-    title: "Case study 3",
-    href: "#",
-    image: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-    logo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png",
-    company: "Company Name",
-    badges: ["Startup"]
-  }
-];
 function ExpandableCaseStudyCards({
-  items = defaultItems,
+  items,
   itemsSlot,
   className,
   containerClassName,
@@ -557,7 +528,7 @@ function ExpandableCaseStudyCards({
   patternClassName,
   optixFlowConfig
 }) {
-  const [selection, setSelection] = useState(items[0]?.id);
+  const [selection, setSelection] = useState(items?.[0]?.id);
   const renderItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;

package/dist/faq-badge-support.cjs

@@ -1027,56 +1027,14 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    id: "faq-1",
-    question: "What is a FAQ?",
-    answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
-  },
-  {
-    id: "faq-2",
-    question: "What is the purpose of a FAQ?",
-    answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
-  },
-  {
-    id: "faq-3",
-    question: "How do I create a FAQ?",
-    answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
-  },
-  {
-    id: "faq-4",
-    question: "What are the benefits of a FAQ?",
-    answer: "The benefits of a FAQ include providing quick and easy access to information, reducing the number of support requests, and improving the overall user experience."
-  },
-  {
-    id: "faq-5",
-    question: "How should I organize my FAQ?",
-    answer: "You should organize your FAQ in a logical manner, grouping related questions together and ordering them from most basic to more advanced topics."
-  },
-  {
-    id: "faq-6",
-    question: "How long should FAQ answers be?",
-    answer: "FAQ answers should be concise and to the point, typically a few sentences or a short paragraph is sufficient for most questions."
-  },
-  {
-    id: "faq-7",
-    question: "Should I include links in my FAQ?",
-    answer: "Yes, including links to more detailed information or related resources can be very helpful for users who want to learn more about a particular topic."
-  }
-];
-var defaultSupportAction = {
-  label: "Contact support",
-  href: "#",
-  variant: "outline"
-};
 function FaqBadgeSupport({
-  badge = "FAQ",
-  heading = "Frequently asked questions",
-  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
-  items = defaultItems,
+  badge,
+  heading,
+  description,
+  items,
   itemsSlot,
   supportText = "Still have questions?",
-  supportAction = defaultSupportAction,
+  supportAction,
   supportSlot,
   background = "white",
   spacing = "lg",

package/dist/faq-badge-support.js

@@ -1004,56 +1004,14 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    id: "faq-1",
-    question: "What is a FAQ?",
-    answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
-  },
-  {
-    id: "faq-2",
-    question: "What is the purpose of a FAQ?",
-    answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
-  },
-  {
-    id: "faq-3",
-    question: "How do I create a FAQ?",
-    answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
-  },
-  {
-    id: "faq-4",
-    question: "What are the benefits of a FAQ?",
-    answer: "The benefits of a FAQ include providing quick and easy access to information, reducing the number of support requests, and improving the overall user experience."
-  },
-  {
-    id: "faq-5",
-    question: "How should I organize my FAQ?",
-    answer: "You should organize your FAQ in a logical manner, grouping related questions together and ordering them from most basic to more advanced topics."
-  },
-  {
-    id: "faq-6",
-    question: "How long should FAQ answers be?",
-    answer: "FAQ answers should be concise and to the point, typically a few sentences or a short paragraph is sufficient for most questions."
-  },
-  {
-    id: "faq-7",
-    question: "Should I include links in my FAQ?",
-    answer: "Yes, including links to more detailed information or related resources can be very helpful for users who want to learn more about a particular topic."
-  }
-];
-var defaultSupportAction = {
-  label: "Contact support",
-  href: "#",
-  variant: "outline"
-};
 function FaqBadgeSupport({
-  badge = "FAQ",
-  heading = "Frequently asked questions",
-  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
-  items = defaultItems,
+  badge,
+  heading,
+  description,
+  items,
   itemsSlot,
   supportText = "Still have questions?",
-  supportAction = defaultSupportAction,
+  supportAction,
   supportSlot,
   background = "white",
   spacing = "lg",

package/dist/faq-bordered-badge.cjs

@@ -587,49 +587,12 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    id: "faq-1",
-    question: "What is a FAQ?",
-    answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
-  },
-  {
-    id: "faq-2",
-    question: "What is the purpose of a FAQ?",
-    answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
-  },
-  {
-    id: "faq-3",
-    question: "How do I create a FAQ?",
-    answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
-  },
-  {
-    id: "faq-4",
-    question: "What are the benefits of a FAQ?",
-    answer: "The benefits of a FAQ include providing quick and easy access to information, reducing the number of support requests, and improving the overall user experience."
-  },
-  {
-    id: "faq-5",
-    question: "How should I organize my FAQ?",
-    answer: "You should organize your FAQ in a logical manner, grouping related questions together and ordering them from most basic to more advanced topics."
-  },
-  {
-    id: "faq-6",
-    question: "How long should FAQ answers be?",
-    answer: "FAQ answers should be concise and to the point, typically a few sentences or a short paragraph is sufficient for most questions."
-  },
-  {
-    id: "faq-7",
-    question: "Should I include links in my FAQ?",
-    answer: "Yes, including links to more detailed information or related resources can be very helpful for users who want to learn more about a particular topic."
-  }
-];
 function FaqBorderedBadge({
-  badge = "FAQ",
+  badge,
   badgeIcon = "lucide/circle-help",
-  heading = "Frequently asked questions",
-  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
-  items = defaultItems,
+  heading,
+  description,
+  items,
   itemsSlot,
   background = "white",
   spacing = "lg",

package/dist/faq-bordered-badge.js

@@ -565,49 +565,12 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    id: "faq-1",
-    question: "What is a FAQ?",
-    answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
-  },
-  {
-    id: "faq-2",
-    question: "What is the purpose of a FAQ?",
-    answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
-  },
-  {
-    id: "faq-3",
-    question: "How do I create a FAQ?",
-    answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
-  },
-  {
-    id: "faq-4",
-    question: "What are the benefits of a FAQ?",
-    answer: "The benefits of a FAQ include providing quick and easy access to information, reducing the number of support requests, and improving the overall user experience."
-  },
-  {
-    id: "faq-5",
-    question: "How should I organize my FAQ?",
-    answer: "You should organize your FAQ in a logical manner, grouping related questions together and ordering them from most basic to more advanced topics."
-  },
-  {
-    id: "faq-6",
-    question: "How long should FAQ answers be?",
-    answer: "FAQ answers should be concise and to the point, typically a few sentences or a short paragraph is sufficient for most questions."
-  },
-  {
-    id: "faq-7",
-    question: "Should I include links in my FAQ?",
-    answer: "Yes, including links to more detailed information or related resources can be very helpful for users who want to learn more about a particular topic."
-  }
-];
 function FaqBorderedBadge({
-  badge = "FAQ",
+  badge,
   badgeIcon = "lucide/circle-help",
-  heading = "Frequently asked questions",
-  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
-  items = defaultItems,
+  heading,
+  description,
+  items,
   itemsSlot,
   background = "white",
   spacing = "lg",

package/dist/faq-card-categories.cjs

@@ -599,67 +599,10 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultCategories = [
-  {
-    title: "General",
-    items: [
-      {
-        id: "general-1",
-        question: "What is a FAQ?",
-        answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
-      },
-      {
-        id: "general-2",
-        question: "What is the purpose of a FAQ?",
-        answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
-      },
-      {
-        id: "general-3",
-        question: "How do I create a FAQ?",
-        answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
-      }
-    ]
-  },
-  {
-    title: "Billing",
-    items: [
-      {
-        id: "billing-1",
-        question: "What payment methods do you accept?",
-        answer: "We accept all major credit cards, PayPal, and bank transfers for annual subscriptions."
-      },
-      {
-        id: "billing-2",
-        question: "Can I get a refund?",
-        answer: "Yes, we offer a 30-day money-back guarantee for all our plans. If you're not satisfied, contact our support team for a full refund."
-      },
-      {
-        id: "billing-3",
-        question: "How do I cancel my subscription?",
-        answer: "You can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period."
-      }
-    ]
-  },
-  {
-    title: "Support",
-    items: [
-      {
-        id: "support-1",
-        question: "How do I contact support?",
-        answer: "You can reach our support team via email at support@example.com or through our live chat feature available on our website."
-      },
-      {
-        id: "support-2",
-        question: "What are your support hours?",
-        answer: "Our support team is available Monday through Friday, 9am to 6pm EST. We also offer 24/7 support for enterprise customers."
-      }
-    ]
-  }
-];
 function FaqCardCategories({
-  heading = "Frequently asked questions",
-  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
-  categories = defaultCategories,
+  heading,
+  description,
+  categories,
   categoriesSlot,
   background = "white",
   spacing = "lg",

package/dist/faq-card-categories.js

@@ -577,67 +577,10 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultCategories = [
-  {
-    title: "General",
-    items: [
-      {
-        id: "general-1",
-        question: "What is a FAQ?",
-        answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
-      },
-      {
-        id: "general-2",
-        question: "What is the purpose of a FAQ?",
-        answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
-      },
-      {
-        id: "general-3",
-        question: "How do I create a FAQ?",
-        answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
-      }
-    ]
-  },
-  {
-    title: "Billing",
-    items: [
-      {
-        id: "billing-1",
-        question: "What payment methods do you accept?",
-        answer: "We accept all major credit cards, PayPal, and bank transfers for annual subscriptions."
-      },
-      {
-        id: "billing-2",
-        question: "Can I get a refund?",
-        answer: "Yes, we offer a 30-day money-back guarantee for all our plans. If you're not satisfied, contact our support team for a full refund."
-      },
-      {
-        id: "billing-3",
-        question: "How do I cancel my subscription?",
-        answer: "You can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period."
-      }
-    ]
-  },
-  {
-    title: "Support",
-    items: [
-      {
-        id: "support-1",
-        question: "How do I contact support?",
-        answer: "You can reach our support team via email at support@example.com or through our live chat feature available on our website."
-      },
-      {
-        id: "support-2",
-        question: "What are your support hours?",
-        answer: "Our support team is available Monday through Friday, 9am to 6pm EST. We also offer 24/7 support for enterprise customers."
-      }
-    ]
-  }
-];
 function FaqCardCategories({
-  heading = "Frequently asked questions",
-  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
-  categories = defaultCategories,
+  heading,
+  description,
+  categories,
   categoriesSlot,
   background = "white",
   spacing = "lg",

package/dist/faq-categorized-sections.cjs

@@ -553,52 +553,10 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultCategories = [
-  {
-    title: "General",
-    items: [
-      {
-        id: "general-1",
-        question: "What is a FAQ?",
-        answer: "A FAQ is a list of frequently asked questions and answers on a particular topic."
-      },
-      {
-        id: "general-2",
-        question: "What is the purpose of a FAQ?",
-        answer: "The purpose of a FAQ is to provide answers to common questions and help users find the information they need quickly and easily."
-      },
-      {
-        id: "general-3",
-        question: "How do I create a FAQ?",
-        answer: "To create a FAQ, you need to compile a list of common questions and answers on a particular topic and organize them in a clear and easy-to-navigate format."
-      }
-    ]
-  },
-  {
-    title: "Billing",
-    items: [
-      {
-        id: "billing-1",
-        question: "What payment methods do you accept?",
-        answer: "We accept all major credit cards, PayPal, and bank transfers for annual subscriptions."
-      },
-      {
-        id: "billing-2",
-        question: "Can I get a refund?",
-        answer: "Yes, we offer a 30-day money-back guarantee for all our plans. If you're not satisfied, contact our support team for a full refund."
-      },
-      {
-        id: "billing-3",
-        question: "How do I cancel my subscription?",
-        answer: "You can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period."
-      }
-    ]
-  }
-];
 function FaqCategorizedSections({
-  heading = "Frequently asked questions",
-  description = "Find answers to common questions about our products. Can't find what you're looking for? Contact our support team.",
-  categories = defaultCategories,
+  heading,
+  description,
+  categories,
   categoriesSlot,
   background = "white",
   spacing = "lg",