@opensite/ui 0.3.4 → 0.4.1

package/dist/timeline-stepper-animated.js

@@ -535,13 +535,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
-  placeholder2: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -904,28 +897,6 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultSteps = [
-  {
-    title: "Introduction",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder1,
-    description: "Welcome to our step-by-step guide. This introduction will help you get started with the process and understand what to expect."
-  },
-  {
-    title: "Personal Information",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder2,
-    description: "In this section, we'll collect some basic information about you to personalize your experience and provide better recommendations."
-  },
-  {
-    title: "Address Details",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder3,
-    description: "Please provide your address details so we can deliver your products to the right location and calculate shipping costs."
-  },
-  {
-    title: "Review & Submit",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder4,
-    description: "Take a moment to review all the information you've provided before finalizing your submission. You can go back to any step."
-  }
-];
 var ProcessBar = ({ currentStep, steps }) => /* @__PURE__ */ jsx("div", { className: "relative w-full scale-75", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: steps.map((step, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
   /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsx(
     motion.div,
@@ -1006,8 +977,8 @@ var NavButtons = ({ handlePrev, handleNext }) => /* @__PURE__ */ jsxs("div", { c
   )
 ] });
 function TimelineStepperAnimated({
-  heading = "Stepper",
-  steps = defaultSteps,
+  heading,
+  steps,
   initialStep = 1,
   className,
   containerClassName,
@@ -1026,16 +997,16 @@ function TimelineStepperAnimated({
   style,
   optixFlowConfig
 }) {
-  const safeInitialStep = steps.length > 0 ? Math.max(0, Math.min(initialStep, steps.length - 1)) : 0;
+  const safeInitialStep = (steps?.length ?? 0) > 0 ? Math.max(0, Math.min(initialStep, (steps?.length ?? 1) - 1)) : 0;
   const [currentStep, setCurrentStep] = useState(safeInitialStep);
   const handleNext = () => {
-    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
+    setCurrentStep((prev) => Math.min(prev + 1, (steps?.length ?? 1) - 1));
   };
   const handlePrev = () => {
     setCurrentStep((prev) => Math.max(prev - 1, 0));
   };
-  const safeCurrentStep = steps.length > 0 ? Math.max(0, Math.min(currentStep, steps.length - 1)) : 0;
-  if (steps.length === 0) {
+  const safeCurrentStep = (steps?.length ?? 0) > 0 ? Math.max(0, Math.min(currentStep, (steps?.length ?? 1) - 1)) : 0;
+  if (!steps || steps.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
       {

package/dist/timeline-tabbed-phases.cjs

@@ -639,13 +639,6 @@ function TabsContent({
     }
   );
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
-  placeholder2: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -1008,51 +1001,9 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultPhases = [
-  {
-    id: "phase1",
-    phase: "1",
-    title: "Initialize",
-    date: "02/03/2025",
-    heading: "How to Initialize",
-    description: "This phase covers the basics of getting started. Learn how to set up, configure, and prepare for the next steps. This phase covers the basics of getting started. Learn how to set up, configure, and prepare for the next steps.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder1,
-    imageAlt: "Phase 1 illustration"
-  },
-  {
-    id: "phase2",
-    phase: "2",
-    title: "Build",
-    date: "21/03/2025",
-    heading: "How to Build",
-    description: "In this phase, focus on structuring and building the core components. Understand best practices for development. In this phase, focus on structuring and building the core components. Understand best practices for development.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder2,
-    imageAlt: "Phase 2 illustration"
-  },
-  {
-    id: "phase3",
-    phase: "3",
-    title: "Test",
-    date: "06/04/2025",
-    heading: "How to Test",
-    description: "Testing ensures quality and reliability. Learn about debugging, fixing issues, and refining the project. Testing ensures quality and reliability. Learn about debugging, fixing issues, and refining the project.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder3,
-    imageAlt: "Phase 3 illustration"
-  },
-  {
-    id: "phase4",
-    phase: "4",
-    title: "Launch",
-    date: "14/04/2025",
-    heading: "How to Launch",
-    description: "The final phase focuses on optimization, deployment, and ensuring everything runs smoothly for release. The final phase focuses on optimization, deployment, and ensuring everything runs smoothly for release.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder4,
-    imageAlt: "Phase 4 illustration"
-  }
-];
 function TimelineTabbedPhases({
-  heading = "Just Four Phases",
-  phases = defaultPhases,
+  heading,
+  phases,
   downloadAction = {
     label: "Download the app",
     href: "#"
@@ -1105,7 +1056,7 @@ function TimelineTabbedPhases({
     }
     return null;
   };
-  if (phases.length === 0) {
+  if (!phases || phases.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {

package/dist/timeline-tabbed-phases.js

@@ -617,13 +617,6 @@ function TabsContent({
     }
   );
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
-  placeholder2: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -986,51 +979,9 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultPhases = [
-  {
-    id: "phase1",
-    phase: "1",
-    title: "Initialize",
-    date: "02/03/2025",
-    heading: "How to Initialize",
-    description: "This phase covers the basics of getting started. Learn how to set up, configure, and prepare for the next steps. This phase covers the basics of getting started. Learn how to set up, configure, and prepare for the next steps.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder1,
-    imageAlt: "Phase 1 illustration"
-  },
-  {
-    id: "phase2",
-    phase: "2",
-    title: "Build",
-    date: "21/03/2025",
-    heading: "How to Build",
-    description: "In this phase, focus on structuring and building the core components. Understand best practices for development. In this phase, focus on structuring and building the core components. Understand best practices for development.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder2,
-    imageAlt: "Phase 2 illustration"
-  },
-  {
-    id: "phase3",
-    phase: "3",
-    title: "Test",
-    date: "06/04/2025",
-    heading: "How to Test",
-    description: "Testing ensures quality and reliability. Learn about debugging, fixing issues, and refining the project. Testing ensures quality and reliability. Learn about debugging, fixing issues, and refining the project.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder3,
-    imageAlt: "Phase 3 illustration"
-  },
-  {
-    id: "phase4",
-    phase: "4",
-    title: "Launch",
-    date: "14/04/2025",
-    heading: "How to Launch",
-    description: "The final phase focuses on optimization, deployment, and ensuring everything runs smoothly for release. The final phase focuses on optimization, deployment, and ensuring everything runs smoothly for release.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder4,
-    imageAlt: "Phase 4 illustration"
-  }
-];
 function TimelineTabbedPhases({
-  heading = "Just Four Phases",
-  phases = defaultPhases,
+  heading,
+  phases,
   downloadAction = {
     label: "Download the app",
     href: "#"
@@ -1083,7 +1034,7 @@ function TimelineTabbedPhases({
     }
     return null;
   };
-  if (phases.length === 0) {
+  if (!phases || phases.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
       {

package/dist/timeline-two-column-featured.cjs

@@ -450,11 +450,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx",
-  placeholder5: "https://cdn.ing/assets/files/record/286205/e0az5aimgxvqa11grxzaok7fbsvr"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -817,49 +812,13 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultFeatures = [
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder4,
-    imageAlt: "Dedicated Support",
-    title: "Dedicated Support",
-    description: "Expanded operations to 5 new countries, reaching millions of new users."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Series B Funding",
-    title: "Series B Funding",
-    description: "Secured $50M in Series B funding to accelerate product development."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Product Launch",
-    title: "Product Launch",
-    description: "Successfully launched our flagship product to market."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Company Founded",
-    title: "Company Founded",
-    description: "Started with a vision to revolutionize the industry."
-  }
-];
-var defaultPrimaryAction = {
-  label: "Start Now",
-  href: "#",
-  variant: "default"
-};
-var defaultSecondaryAction = {
-  label: "Book a demo",
-  href: "#",
-  variant: "outline"
-};
 function TimelineTwoColumnFeatured({
-  heading = "Experience the difference with us",
-  description = "We believe in creating lasting partnerships with our clients, focusing on long-term success through collaborative innovation and dedicated support.",
-  primaryAction = defaultPrimaryAction,
-  secondaryAction = defaultSecondaryAction,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
   actionsSlot,
-  features = defaultFeatures,
+  features,
   className,
   containerClassName,
   headingClassName,
@@ -927,7 +886,7 @@ function TimelineTwoColumnFeatured({
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground md:text-xl", descriptionClassName), children: description }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-col gap-4 lg:flex-row", actionsClassName), children: renderActions() })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-12 md:gap-20", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border p-2", featureClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-12 md:gap-20", featuresClassName), children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border p-2", featureClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {

package/dist/timeline-two-column-featured.js

@@ -429,11 +429,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx",
-  placeholder5: "https://cdn.ing/assets/files/record/286205/e0az5aimgxvqa11grxzaok7fbsvr"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -796,49 +791,13 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultFeatures = [
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder4,
-    imageAlt: "Dedicated Support",
-    title: "Dedicated Support",
-    description: "Expanded operations to 5 new countries, reaching millions of new users."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Series B Funding",
-    title: "Series B Funding",
-    description: "Secured $50M in Series B funding to accelerate product development."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Product Launch",
-    title: "Product Launch",
-    description: "Successfully launched our flagship product to market."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Company Founded",
-    title: "Company Founded",
-    description: "Started with a vision to revolutionize the industry."
-  }
-];
-var defaultPrimaryAction = {
-  label: "Start Now",
-  href: "#",
-  variant: "default"
-};
-var defaultSecondaryAction = {
-  label: "Book a demo",
-  href: "#",
-  variant: "outline"
-};
 function TimelineTwoColumnFeatured({
-  heading = "Experience the difference with us",
-  description = "We believe in creating lasting partnerships with our clients, focusing on long-term success through collaborative innovation and dedicated support.",
-  primaryAction = defaultPrimaryAction,
-  secondaryAction = defaultSecondaryAction,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
   actionsSlot,
-  features = defaultFeatures,
+  features,
   className,
   containerClassName,
   headingClassName,
@@ -906,7 +865,7 @@ function TimelineTwoColumnFeatured({
           /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground md:text-xl", descriptionClassName), children: description }),
           /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-col gap-4 lg:flex-row", actionsClassName), children: renderActions() })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-12 md:gap-20", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border p-2", featureClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-12 md:gap-20", featuresClassName), children: features?.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border p-2", featureClassName), children: [
           /* @__PURE__ */ jsx(
             Img,
             {

package/dist/timeline-vertical-icon-dashed.cjs

@@ -497,25 +497,8 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultSteps = [
-  {
-    icon: "lucide/files",
-    title: "Data Integration",
-    description: "Connect your existing tools and platforms seamlessly. Our system automatically syncs and manages your data across all integrated services."
-  },
-  {
-    icon: "lucide/layout",
-    title: "Custom Configuration",
-    description: "Tailor the platform to your needs with our intuitive interface. Create powerful workflows without any technical knowledge required."
-  },
-  {
-    icon: "lucide/circle-arrow-out-up-right",
-    title: "Scale Your Business",
-    description: "Access comprehensive analytics and tools designed to help you grow. Monitor performance and make data-driven decisions effortlessly."
-  }
-];
 function TimelineVerticalIconDashed({
-  steps = defaultSteps,
+  steps,
   className,
   containerClassName,
   stepsClassName,
@@ -532,7 +515,7 @@ function TimelineVerticalIconDashed({
   id,
   style
 }) {
-  if (steps.length === 0) {
+  if (!steps || steps.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {

package/dist/timeline-vertical-icon-dashed.js

@@ -476,25 +476,8 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultSteps = [
-  {
-    icon: "lucide/files",
-    title: "Data Integration",
-    description: "Connect your existing tools and platforms seamlessly. Our system automatically syncs and manages your data across all integrated services."
-  },
-  {
-    icon: "lucide/layout",
-    title: "Custom Configuration",
-    description: "Tailor the platform to your needs with our intuitive interface. Create powerful workflows without any technical knowledge required."
-  },
-  {
-    icon: "lucide/circle-arrow-out-up-right",
-    title: "Scale Your Business",
-    description: "Access comprehensive analytics and tools designed to help you grow. Monitor performance and make data-driven decisions effortlessly."
-  }
-];
 function TimelineVerticalIconDashed({
-  steps = defaultSteps,
+  steps,
   className,
   containerClassName,
   stepsClassName,
@@ -511,7 +494,7 @@ function TimelineVerticalIconDashed({
   id,
   style
 }) {
-  if (steps.length === 0) {
+  if (!steps || steps.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -1596,6 +1596,11 @@
       "import": "./dist/hero-image-left-content.js",
       "require": "./dist/hero-image-left-content.cjs"
     },
+    "./blocks/hero/hero-image-slider": {
+      "types": "./dist/hero-image-slider.d.ts",
+      "import": "./dist/hero-image-slider.js",
+      "require": "./dist/hero-image-slider.cjs"
+    },
     "./blocks/hero/hero-innovation-image-grid": {
       "types": "./dist/hero-innovation-image-grid.d.ts",
       "import": "./dist/hero-innovation-image-grid.js",
@@ -3156,6 +3161,11 @@
       "import": "./dist/form-inputs.js",
       "require": "./dist/form-inputs.cjs"
     },
+    "./components/image-slider": {
+      "types": "./dist/image-slider.d.ts",
+      "import": "./dist/image-slider.js",
+      "require": "./dist/image-slider.cjs"
+    },
     "./components/input": {
       "types": "./dist/input.d.ts",
       "import": "./dist/input.js",