@opensite/ui 0.3.3 → 0.4.0

package/README.md

@@ -13,6 +13,22 @@ Foundational UI component library for the OpenSite Semantic Site Builder ecosyst
 - 🧩 **shadcn/ui Compatible**: Built on shadcn/ui foundations with Tailwind CSS v4
 - 🔧 **Flexible**: Support for both default Tailwind styles and custom semantic builder styles
 
+
+## OpenSite Component UI Showcase
+
+> Below you can see the wide range of layouts that are available automatically, enabling a modern UI experience for users. And since the component was specifically engineered for our Semantic UI engine, in addition to the default layout and style variants.
+
+<p>
+  <br />
+  <div align="center">
+    <img src="https://github.com/user-attachments/assets/ea33b462-1970-4485-908a-e7ac9a7aa1b8" alt="ShadCN and Tailwind Lightbox Library" width="100%">
+  </div>
+  <br />
+</p>
+<br />
+<p></p>
+
+
 ## Installation
 
 ```bash

package/dist/about-company-profile.cjs

@@ -450,30 +450,19 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultAchievements = [
-  { label: "Companies", value: "300+" },
-  { label: "Projects Finalized", value: "800+" },
-  { label: "Happy Customers", value: "99%" },
-  { label: "Recognized Awards", value: "10+" }
-];
-var defaultBreakout = {
-  title: "Hundreds of blocks at Opensite AI",
-  description: "Providing businesses with effective tools to improve workflows, boost efficiency, and encourage growth.",
-  action: { label: "Discover more", href: "https://opensite.ai", variant: "outline" }
-};
 function AboutCompanyProfile({
-  title = "About Us",
-  description = "Opensite AI is a passionate team dedicated to creating innovative solutions that empower businesses to thrive in the digital age.",
+  title,
+  description,
   mainImage,
   secondaryImage,
-  breakout = defaultBreakout,
+  breakout,
   breakoutSlot,
-  companiesTitle = "Valued by clients worldwide",
+  companiesTitle,
   companies,
   companiesSlot,
-  achievementsTitle = "Our Achievements in Numbers",
-  achievementsDescription = "Providing businesses with effective tools to improve workflows, boost efficiency, and encourage growth.",
-  achievements = defaultAchievements,
+  achievementsTitle,
+  achievementsDescription,
+  achievements,
   achievementsSlot,
   className,
   containerClassName,

package/dist/about-company-profile.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface BreakoutConfig {

package/dist/about-company-profile.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface BreakoutConfig {

package/dist/about-company-profile.js

@@ -428,30 +428,19 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultAchievements = [
-  { label: "Companies", value: "300+" },
-  { label: "Projects Finalized", value: "800+" },
-  { label: "Happy Customers", value: "99%" },
-  { label: "Recognized Awards", value: "10+" }
-];
-var defaultBreakout = {
-  title: "Hundreds of blocks at Opensite AI",
-  description: "Providing businesses with effective tools to improve workflows, boost efficiency, and encourage growth.",
-  action: { label: "Discover more", href: "https://opensite.ai", variant: "outline" }
-};
 function AboutCompanyProfile({
-  title = "About Us",
-  description = "Opensite AI is a passionate team dedicated to creating innovative solutions that empower businesses to thrive in the digital age.",
+  title,
+  description,
   mainImage,
   secondaryImage,
-  breakout = defaultBreakout,
+  breakout,
   breakoutSlot,
-  companiesTitle = "Valued by clients worldwide",
+  companiesTitle,
   companies,
   companiesSlot,
-  achievementsTitle = "Our Achievements in Numbers",
-  achievementsDescription = "Providing businesses with effective tools to improve workflows, boost efficiency, and encourage growth.",
-  achievements = defaultAchievements,
+  achievementsTitle,
+  achievementsDescription,
+  achievements,
   achievementsSlot,
   className,
   containerClassName,

package/dist/about-developer-profile.cjs

@@ -450,146 +450,17 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-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;
-}
-var defaultSkills = [
-  "React",
-  "TypeScript",
-  "Node.js",
-  "Python",
-  "AWS",
-  "Docker"
-];
-var defaultSocialLinks = [
-  { icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/github", size: 24 }), href: "#", "aria-label": "GitHub" },
-  { icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/linkedin", size: 24 }), href: "#", "aria-label": "LinkedIn" },
-  { icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/twitter", size: 24 }), href: "#", "aria-label": "Twitter" }
-];
-var defaultActions = [
-  {
-    label: "Get in Touch",
-    href: "#",
-    size: "lg",
-    variant: "default",
-    iconAfter: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/mail", size: 16, className: "ml-2" })
-  }
-];
 function AboutDeveloperProfile({
-  name = "Alex Johnson",
-  role = "Full-Stack Developer",
-  bio = `I'm a passionate full-stack developer with over 8 years of experience building web applications. I specialize in React, TypeScript, and Node.js, with a strong focus on creating performant and accessible user experiences.
-
-When I'm not coding, you can find me contributing to open-source projects, writing technical blog posts, or exploring new technologies. I believe in continuous learning and sharing knowledge with the developer community.`,
+  name,
+  role,
+  bio,
   avatar,
-  skills = defaultSkills,
+  skills,
   skillsSlot,
-  skillsTitle = "Skills & Technologies",
-  socialLinks = defaultSocialLinks,
+  skillsTitle,
+  socialLinks,
   socialLinksSlot,
-  actions = defaultActions,
+  actions,
   actionsSlot,
   className,
   containerClassName,

package/dist/about-developer-profile.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface AboutDeveloperProfileProps {

package/dist/about-developer-profile.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface AboutDeveloperProfileProps {

package/dist/about-developer-profile.js

@@ -428,146 +428,17 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-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;
-}
-var defaultSkills = [
-  "React",
-  "TypeScript",
-  "Node.js",
-  "Python",
-  "AWS",
-  "Docker"
-];
-var defaultSocialLinks = [
-  { icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/github", size: 24 }), href: "#", "aria-label": "GitHub" },
-  { icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/linkedin", size: 24 }), href: "#", "aria-label": "LinkedIn" },
-  { icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/twitter", size: 24 }), href: "#", "aria-label": "Twitter" }
-];
-var defaultActions = [
-  {
-    label: "Get in Touch",
-    href: "#",
-    size: "lg",
-    variant: "default",
-    iconAfter: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/mail", size: 16, className: "ml-2" })
-  }
-];
 function AboutDeveloperProfile({
-  name = "Alex Johnson",
-  role = "Full-Stack Developer",
-  bio = `I'm a passionate full-stack developer with over 8 years of experience building web applications. I specialize in React, TypeScript, and Node.js, with a strong focus on creating performant and accessible user experiences.
-
-When I'm not coding, you can find me contributing to open-source projects, writing technical blog posts, or exploring new technologies. I believe in continuous learning and sharing knowledge with the developer community.`,
+  name,
+  role,
+  bio,
   avatar,
-  skills = defaultSkills,
+  skills,
   skillsSlot,
-  skillsTitle = "Skills & Technologies",
-  socialLinks = defaultSocialLinks,
+  skillsTitle,
+  socialLinks,
   socialLinksSlot,
-  actions = defaultActions,
+  actions,
   actionsSlot,
   className,
   containerClassName,

package/dist/about-developer-story.cjs

@@ -555,38 +555,25 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var defaultStats = [
-  { value: "200+", label: "Projects Completed" },
-  { value: "50+", label: "Happy Clients" },
-  { value: "10+", label: "Years Experience" }
-];
-var defaultActions = [
-  { label: "Get Started", href: "#", variant: "default", size: "lg" },
-  { label: "Learn More", href: "#", variant: "outline", size: "lg" }
-];
 function AboutDeveloperStory({
   className,
   containerClassName,
-  title = "Developer-Focused Solutions for Modern Teams",
+  title,
   titleClassName,
-  description = "We build tools that developers love. Our platform provides the flexibility and power you need to create exceptional applications.",
+  description,
   descriptionClassName,
-  actions = defaultActions,
+  actions,
   actionsSlot,
   actionsClassName,
   logos,
   logosSlot,
   logosClassName,
-  stats = defaultStats,
+  stats,
   statsSlot,
   statsClassName,
-  storyTitle = "Our Story",
+  storyTitle,
   storyTitleClassName,
-  storyContent = `We started with a simple idea: make development easier for everyone. Over the years, we've grown into a team of passionate developers who understand the challenges you face.
-
-Our platform is built by developers, for developers. We know what it takes to build great software, and we've created tools that help you do it faster and better.
-
-Today, we serve thousands of developers worldwide, helping them build everything from simple websites to complex enterprise applications.`,
+  storyContent,
   storyContentClassName,
   storyImage,
   storyImageClassName,

package/dist/about-developer-story.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface AboutDeveloperStoryProps {

package/dist/about-developer-story.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface AboutDeveloperStoryProps {

package/dist/about-developer-story.js

@@ -533,38 +533,25 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var defaultStats = [
-  { value: "200+", label: "Projects Completed" },
-  { value: "50+", label: "Happy Clients" },
-  { value: "10+", label: "Years Experience" }
-];
-var defaultActions = [
-  { label: "Get Started", href: "#", variant: "default", size: "lg" },
-  { label: "Learn More", href: "#", variant: "outline", size: "lg" }
-];
 function AboutDeveloperStory({
   className,
   containerClassName,
-  title = "Developer-Focused Solutions for Modern Teams",
+  title,
   titleClassName,
-  description = "We build tools that developers love. Our platform provides the flexibility and power you need to create exceptional applications.",
+  description,
   descriptionClassName,
-  actions = defaultActions,
+  actions,
   actionsSlot,
   actionsClassName,
   logos,
   logosSlot,
   logosClassName,
-  stats = defaultStats,
+  stats,
   statsSlot,
   statsClassName,
-  storyTitle = "Our Story",
+  storyTitle,
   storyTitleClassName,
-  storyContent = `We started with a simple idea: make development easier for everyone. Over the years, we've grown into a team of passionate developers who understand the challenges you face.
-
-Our platform is built by developers, for developers. We know what it takes to build great software, and we've created tools that help you do it faster and better.
-
-Today, we serve thousands of developers worldwide, helping them build everything from simple websites to complex enterprise applications.`,
+  storyContent,
   storyContentClassName,
   storyImage,
   storyImageClassName,

package/dist/about-interactive-tabs.cjs

@@ -31,36 +31,10 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var defaultTabs = [
-  {
-    id: "work",
-    label: "Our Work",
-    content: {
-      title: "Crafting Digital Experiences",
-      description: "We create beautiful, functional digital products that help businesses grow. From web applications to mobile apps, our portfolio showcases our commitment to excellence and innovation."
-    }
-  },
-  {
-    id: "process",
-    label: "Our Process",
-    content: {
-      title: "How We Build",
-      description: "Our iterative approach combines design thinking with agile development. We start with discovery, move through design and development, and deliver products that exceed expectations."
-    }
-  },
-  {
-    id: "values",
-    label: "Our Values",
-    content: {
-      title: "What Drives Us",
-      description: "Quality, transparency, and collaboration are at the heart of everything we do. We believe in building lasting relationships with our clients through honest communication and exceptional work."
-    }
-  }
-];
 function AboutInteractiveTabs({
-  title = "Discover Our Story",
-  subtitle = "Learn more about who we are and what we do",
-  tabs = defaultTabs,
+  title,
+  subtitle,
+  tabs,
   tabsSlot,
   className,
   containerClassName,

package/dist/about-interactive-tabs.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface TabItem {

package/dist/about-interactive-tabs.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { O as OptixFlowConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface TabItem {

package/dist/about-interactive-tabs.js

@@ -9,36 +9,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var defaultTabs = [
-  {
-    id: "work",
-    label: "Our Work",
-    content: {
-      title: "Crafting Digital Experiences",
-      description: "We create beautiful, functional digital products that help businesses grow. From web applications to mobile apps, our portfolio showcases our commitment to excellence and innovation."
-    }
-  },
-  {
-    id: "process",
-    label: "Our Process",
-    content: {
-      title: "How We Build",
-      description: "Our iterative approach combines design thinking with agile development. We start with discovery, move through design and development, and deliver products that exceed expectations."
-    }
-  },
-  {
-    id: "values",
-    label: "Our Values",
-    content: {
-      title: "What Drives Us",
-      description: "Quality, transparency, and collaboration are at the heart of everything we do. We believe in building lasting relationships with our clients through honest communication and exceptional work."
-    }
-  }
-];
 function AboutInteractiveTabs({
-  title = "Discover Our Story",
-  subtitle = "Learn more about who we are and what we do",
-  tabs = defaultTabs,
+  title,
+  subtitle,
+  tabs,
   tabsSlot,
   className,
   containerClassName,