negodesign 0.0.78 → 0.0.80

package/dist/docs/components.js

@@ -16,26 +16,26 @@ export const categories = [
     "Login / Security",
     "Full Pages",
 ];
-const navButtonExample = `import { Menu } from "negodesign"
-
-<Menu
-  isBorder
-  isLightSwitch
-  isLanguageSwitcher
-  logo={{ label: "Negoturismo" }}
-  navMenuButton={{
-    textButtonLogin: "Sign in",
-    textButtonRegister: "Register",
-    onclickButtonLogin: () => {},
-    onclickButtonRegister: () => {},
-    buttonClass: "bg-primary text-white",
-  }}
-  navMenu={{
-    links: [
-      { label: "Home", url: "/", icon: Home01Icon },
-      { label: "Accommodation", url: "/hospedagem", icon: Hotel01Icon },
-    ],
-  }}
+const navButtonExample = `import { Menu } from "negodesign"
+
+<Menu
+  isBorder
+  isLightSwitch
+  isLanguageSwitcher
+  logo={{ label: "Negoturismo" }}
+  navMenuButton={{
+    textButtonLogin: "Sign in",
+    textButtonRegister: "Register",
+    onclickButtonLogin: () => {},
+    onclickButtonRegister: () => {},
+    buttonClass: "bg-primary text-white",
+  }}
+  navMenu={{
+    links: [
+      { label: "Home", url: "/", icon: Home01Icon },
+      { label: "Accommodation", url: "/hospedagem", icon: Hotel01Icon },
+    ],
+  }}
 />`;
 export const components = [
     {
@@ -65,12 +65,12 @@ export const components = [
         examples: [
             {
                 title: "Search Field",
-                code: `import { SearchInput } from "negodesign"
-
-<SearchInput
-  variant={1}
-  placeholder="Search..."
-  onSubmit={(q) => console.log(q)}
+                code: `import { SearchInput } from "negodesign"
+
+<SearchInput
+  variant={1}
+  placeholder="Search..."
+  onSubmit={(q) => console.log(q)}
 />`,
             },
         ],
@@ -93,14 +93,14 @@ export const components = [
         examples: [
             {
                 title: "Simple Hero",
-                code: `import { SimpleHero } from "negodesign"
-
-<SimpleHero
-  title="Find your ideal stay"
-  subTitle="Welcome"
-  description="Verified hotels, guest houses and apartments."
-  image="/images/hero.jpg"
-  buttons={[{ label: "Explore", variant: "default" }]}
+                code: `import { SimpleHero } from "negodesign"
+
+<SimpleHero
+  title="Find your ideal stay"
+  subTitle="Welcome"
+  description="Verified hotels, guest houses and apartments."
+  image="/images/hero.jpg"
+  buttons={[{ label: "Explore", variant: "default" }]}
 />`,
                 href: "/hero",
             },
@@ -127,24 +127,24 @@ export const components = [
         examples: [
             {
                 title: "Carousel Hero",
-                code: `import { CarouselHero } from "negodesign"
-
-<CarouselHero
-  titleClass="md:text-2xl lg:text-4xl"
-  descriptionClass="text-xs md:text-lg"
-  simpleMenu={{
-    logo: { url: "/", label: "Negoturismo", className: "text-white" },
-    links: [{ label: "Accommodation", url: "#", icon: Hotel01Icon }],
-    isLanguageSwitcher: false,
-    isLightSwitch: false,
-  }}
-  items={[
-    {
-      title: "Find your ideal stay",
-      description: "Verified hotels, guest houses and apartments.",
-      image: "https://images.unsplash.com/photo-1566073771259",
-    },
-  ]}
+                code: `import { CarouselHero } from "negodesign"
+
+<CarouselHero
+  titleClass="md:text-2xl lg:text-4xl"
+  descriptionClass="text-xs md:text-lg"
+  simpleMenu={{
+    logo: { url: "/", label: "Negoturismo", className: "text-white" },
+    links: [{ label: "Accommodation", url: "#", icon: Hotel01Icon }],
+    isLanguageSwitcher: false,
+    isLightSwitch: false,
+  }}
+  items={[
+    {
+      title: "Find your ideal stay",
+      description: "Verified hotels, guest houses and apartments.",
+      image: "https://images.unsplash.com/photo-1566073771259",
+    },
+  ]}
 />`,
                 href: "/hero/carousel",
             },
@@ -174,14 +174,14 @@ export const components = [
         examples: [
             {
                 title: "CTA Image Banner",
-                code: `import { CtaCardImageBanner } from "negodesign"
-
-<CtaCardImageBanner
-  title="Let's get in touch"
-  description="Talk to us and discover the best offers."
-  primaryText="Contact"
-  primaryHref="#"
-  imageSrc="/images/banner.jpg"
+                code: `import { CtaCardImageBanner } from "negodesign"
+
+<CtaCardImageBanner
+  title="Let's get in touch"
+  description="Talk to us and discover the best offers."
+  primaryText="Contact"
+  primaryHref="#"
+  imageSrc="/images/banner.jpg"
 />`,
                 href: "/banner",
             },
@@ -212,13 +212,13 @@ export const components = [
         examples: [
             {
                 title: "Notification Banner",
-                code: `import { NotificationBanner } from "negodesign"
-
-<NotificationBanner
-  strongText="New"
-  description="New offers available!"
-  ctaText="View offers"
-  onDismiss={() => console.log("dismissed")}
+                code: `import { NotificationBanner } from "negodesign"
+
+<NotificationBanner
+  strongText="New"
+  description="New offers available!"
+  ctaText="View offers"
+  onDismiss={() => console.log("dismissed")}
 />`,
             },
         ],
@@ -245,14 +245,14 @@ export const components = [
         examples: [
             {
                 title: "Ad Banner",
-                code: `import { AdCardBanner } from "negodesign"
-
-<AdCardBanner
-  tagText="This ad could be yours."
-  titleHighlight="This ad"
-  titleMain="could be yours."
-  buttonText="Learn more"
-  onClickButton={() => console.log("clicked")}
+                code: `import { AdCardBanner } from "negodesign"
+
+<AdCardBanner
+  tagText="This ad could be yours."
+  titleHighlight="This ad"
+  titleMain="could be yours."
+  buttonText="Learn more"
+  onClickButton={() => console.log("clicked")}
 />`,
                 href: "/banner/cad-add",
             },
@@ -278,13 +278,13 @@ export const components = [
         examples: [
             {
                 title: "CTA Banner",
-                code: `import { CtaCardBanner } from "negodesign"
-
-<CtaCardBanner
-  title="Let's get in touch"
-  description="We have the ideal solution for you."
-  primaryText="Contact"
-  secondaryText="Learn more"
+                code: `import { CtaCardBanner } from "negodesign"
+
+<CtaCardBanner
+  title="Let's get in touch"
+  description="We have the ideal solution for you."
+  primaryText="Contact"
+  secondaryText="Learn more"
 />`,
                 href: "/banner/card-contact-cta",
             },
@@ -312,16 +312,16 @@ export const components = [
         examples: [
             {
                 title: "Media Card",
-                code: `import { CardMedia } from "negodesign"
-
-<CardMedia
-  {...item}
-  variant={2}
-  isImageButtonMaximized
-  isVideoButtonMaximized
-  onFavoriteClick={(id) => console.log(id)}
-  onButtonProfile={(id) => console.log(id)}
-  onButtonDetails={(id) => console.log(id)}
+                code: `import { CardMedia } from "negodesign"
+
+<CardMedia
+  {...item}
+  variant={2}
+  isImageButtonMaximized
+  isVideoButtonMaximized
+  onFavoriteClick={(id) => console.log(id)}
+  onButtonProfile={(id) => console.log(id)}
+  onButtonDetails={(id) => console.log(id)}
 />`,
                 href: "/card/media",
             },
@@ -359,13 +359,13 @@ export const components = [
         examples: [
             {
                 title: "Profile Card",
-                code: `import { CardProfile } from "negodesign"
-
-<CardProfile
-  {...item}
-  variant={1}
-  onFavoriteClick={(id) => console.log(id)}
-  onWhatsappClick={(id) => console.log(id)}
+                code: `import { CardProfile } from "negodesign"
+
+<CardProfile
+  {...item}
+  variant={1}
+  onFavoriteClick={(id) => console.log(id)}
+  onWhatsappClick={(id) => console.log(id)}
 />`,
                 href: "/card/profile",
             },
@@ -400,16 +400,16 @@ export const components = [
         examples: [
             {
                 title: "Badge Carousel",
-                code: `import { CarouselBadge } from "negodesign"
-
-<CarouselBadge
-  orientation="horizontal"
-  itemStyle="BORDER"
-  items={[
-    { label: "Hotels", value: "hotel", icon: Hotel01Icon },
-    { label: "Pensions", value: "pensao", icon: BedDoubleIcon },
-  ]}
-  onClick={(value) => console.log(value)}
+                code: `import { CarouselBadge } from "negodesign"
+
+<CarouselBadge
+  orientation="horizontal"
+  itemStyle="BORDER"
+  items={[
+    { label: "Hotels", value: "hotel", icon: Hotel01Icon },
+    { label: "Pensions", value: "pensao", icon: BedDoubleIcon },
+  ]}
+  onClick={(value) => console.log(value)}
 />`,
                 href: "/carousel/badge",
             },
@@ -441,18 +441,18 @@ export const components = [
         examples: [
             {
                 title: "Highlights Carousel",
-                code: `import { CarouselHighlights } from "negodesign"
-
-<CarouselHighlights
-  varient={2}
-  headerProps={{
-    title: "Highlights",
-    description: "The best organizations",
-    onButtonViewAll: () => {},
-  }}
-  items={highlights}
-  onClickBtn={(id) => console.log(id)}
-  onClickFavorite={(id) => console.log(id)}
+                code: `import { CarouselHighlights } from "negodesign"
+
+<CarouselHighlights
+  varient={2}
+  headerProps={{
+    title: "Highlights",
+    description: "The best organizations",
+    onButtonViewAll: () => {},
+  }}
+  items={highlights}
+  onClickBtn={(id) => console.log(id)}
+  onClickFavorite={(id) => console.log(id)}
 />`,
                 href: "/carousel/highlights",
             },
@@ -479,16 +479,16 @@ export const components = [
         examples: [
             {
                 title: "Promotion Carousel",
-                code: `import { CarouselPromotion } from "negodesign"
-
-<CarouselPromotion
-  items={promotions}
-  headerProps={{
-    title: "Promotions",
-    onButtonViewAll: () => {},
-  }}
-  onClickBuy={(id) => console.log(id)}
-  onClickShop={(id) => console.log(id)}
+                code: `import { CarouselPromotion } from "negodesign"
+
+<CarouselPromotion
+  items={promotions}
+  headerProps={{
+    title: "Promotions",
+    onButtonViewAll: () => {},
+  }}
+  onClickBuy={(id) => console.log(id)}
+  onClickShop={(id) => console.log(id)}
 />`,
                 href: "/carousel/promotion",
             },
@@ -515,15 +515,15 @@ export const components = [
         examples: [
             {
                 title: "Media Grid",
-                code: `import { CarouselGridMedia } from "negodesign"
-
-<CarouselGridMedia
-  items={media}
-  headerProps={{
-    title: "Explore",
-    onButtonViewAll: () => {},
-  }}
-  onFavoriteClick={(id) => console.log(id)}
+                code: `import { CarouselGridMedia } from "negodesign"
+
+<CarouselGridMedia
+  items={media}
+  headerProps={{
+    title: "Explore",
+    onButtonViewAll: () => {},
+  }}
+  onFavoriteClick={(id) => console.log(id)}
 />`,
                 href: "/carousel/grid/media",
             },
@@ -554,14 +554,14 @@ export const components = [
         examples: [
             {
                 title: "Simple Grid",
-                code: `import { ItemsSimpleGrid } from "negodesign"
-
-<ItemsSimpleGrid
-  variant={1}
-  items={[
-    { icon: Coffee03Icon, title: "Coffee", description: "Start your day right" },
-  ]}
-  onClick={(id) => console.log(id)}
+                code: `import { ItemsSimpleGrid } from "negodesign"
+
+<ItemsSimpleGrid
+  variant={1}
+  items={[
+    { icon: Coffee03Icon, title: "Coffee", description: "Start your day right" },
+  ]}
+  onClick={(id) => console.log(id)}
 />`,
                 href: "/grid/simple",
             },
@@ -585,13 +585,13 @@ export const components = [
         examples: [
             {
                 title: "Panel Grid",
-                code: `import { ItemsPanel } from "negodesign"
-
-<ItemsPanel
-  style="grid"
-  variant={1}
-  items={items}
-  onClick={(id) => console.log(id)}
+                code: `import { ItemsPanel } from "negodesign"
+
+<ItemsPanel
+  style="grid"
+  variant={1}
+  items={items}
+  onClick={(id) => console.log(id)}
 />`,
                 href: "/grid/panel",
             },
@@ -617,53 +617,53 @@ export const components = [
             {
                 title: "Variant 1 — Centered Grid",
                 href: "/modal",
-                code: `import { ModalGridSelection } from "negodesign"
-
-let isOpen = $state(false);
-let selected = $state(null);
-
-<ModalGridSelection
-  bind:isOpen
-  bind:selectedCard={selected}
-  title="What will you be using this for?"
-  subtitle="We'll use this to recommend you our personalized features"
-  totalSteps={3}
-  currentStep={1}
-  cards={[
-    { title: "Student", description: "You're here to impress your teachers.", icon: "nd-cap-icon" },
-    { title: "Business", description: "You're here to grow your brand.", icon: "nd-briefcase-icon" },
-    { title: "Personal", description: "You're here to make anything.", icon: "nd-user-icon" },
-  ]}
-  onSelect={(card) => console.log(card)}
-  onBack={() => console.log("back")}
-  onContinue={() => console.log("continue")}
+                code: `import { ModalGridSelection } from "negodesign"
+
+let isOpen = $state(false);
+let selected = $state(null);
+
+<ModalGridSelection
+  bind:isOpen
+  bind:selectedCard={selected}
+  title="What will you be using this for?"
+  subtitle="We'll use this to recommend you our personalized features"
+  totalSteps={3}
+  currentStep={1}
+  cards={[
+    { title: "Student", description: "You're here to impress your teachers.", icon: "nd-cap-icon" },
+    { title: "Business", description: "You're here to grow your brand.", icon: "nd-briefcase-icon" },
+    { title: "Personal", description: "You're here to make anything.", icon: "nd-user-icon" },
+  ]}
+  onSelect={(card) => console.log(card)}
+  onBack={() => console.log("back")}
+  onContinue={() => console.log("continue")}
 />`,
             },
             {
                 title: "Variant 2 — Dark Grid with Categories",
-                code: `import { ModalGridSelection } from "negodesign"
-
-let isOpen = $state(false);
-let selected = $state(null);
-
-<ModalGridSelection
-  variant={2}
-  bind:isOpen
-  bind:selectedCard={selected}
-  title="What are you planning to use this app for?"
-  categories={[
-    { label: "Marketing", value: "marketing" },
-    { label: "Product", value: "product" },
-    { label: "Engineering", value: "engineering" },
-  ]}
-  cards={[
-    { title: "Work Stuff", description: "Just the usual boring work stuff.", icon: "nd-briefcase-icon" },
-    { title: "UI/UX Design", description: "Design apps and prototypes.", icon: "nd-palette-icon" },
-    { title: "Finance", description: "Because I need money.", icon: "nd-money-icon" },
-    { title: "Productivity", description: "Sometimes we need to be productive.", icon: "nd-clock-icon" },
-  ]}
-  onSelect={(card) => console.log(card)}
-  onContinue={() => console.log("continue")}
+                code: `import { ModalGridSelection } from "negodesign"
+
+let isOpen = $state(false);
+let selected = $state(null);
+
+<ModalGridSelection
+  variant={2}
+  bind:isOpen
+  bind:selectedCard={selected}
+  title="What are you planning to use this app for?"
+  categories={[
+    { label: "Marketing", value: "marketing" },
+    { label: "Product", value: "product" },
+    { label: "Engineering", value: "engineering" },
+  ]}
+  cards={[
+    { title: "Work Stuff", description: "Just the usual boring work stuff.", icon: "nd-briefcase-icon" },
+    { title: "UI/UX Design", description: "Design apps and prototypes.", icon: "nd-palette-icon" },
+    { title: "Finance", description: "Because I need money.", icon: "nd-money-icon" },
+    { title: "Productivity", description: "Sometimes we need to be productive.", icon: "nd-clock-icon" },
+  ]}
+  onSelect={(card) => console.log(card)}
+  onContinue={() => console.log("continue")}
 />`,
             },
         ],
@@ -698,27 +698,27 @@ let selected = $state(null);
             {
                 title: "Modal Badge Selection",
                 href: "/modal",
-                code: `import { ModalBadgeSelection } from "negodesign"
-
-let isOpen = $state(false);
-let selected = $state(null);
-
-<ModalBadgeSelection
-  bind:isOpen
-  bind:selectedBadge={selected}
-  title="What team are you currently on?"
-  subtitle="Please select one answer only."
-  totalSteps={5}
-  currentStep={2}
-  badges={[
-    { label: "Marketing", value: "marketing" },
-    { label: "Engineering", value: "engineering" },
-    { label: "Design", value: "design" },
-    { label: "Operations", value: "operations" },
-  ]}
-  onSelect={(badge) => console.log(badge)}
-  onContinue={() => console.log("continue")}
-  onSkip={() => console.log("skip")}
+                code: `import { ModalBadgeSelection } from "negodesign"
+
+let isOpen = $state(false);
+let selected = $state(null);
+
+<ModalBadgeSelection
+  bind:isOpen
+  bind:selectedBadge={selected}
+  title="What team are you currently on?"
+  subtitle="Please select one answer only."
+  totalSteps={5}
+  currentStep={2}
+  badges={[
+    { label: "Marketing", value: "marketing" },
+    { label: "Engineering", value: "engineering" },
+    { label: "Design", value: "design" },
+    { label: "Operations", value: "operations" },
+  ]}
+  onSelect={(badge) => console.log(badge)}
+  onContinue={() => console.log("continue")}
+  onSkip={() => console.log("skip")}
 />`,
             },
         ],
@@ -750,44 +750,44 @@ let selected = $state(null);
             {
                 title: "Modal Share Selection",
                 href: "/modal",
-                code: `import { ModalShareSelection } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalShareSelection
-  bind:isOpen
-  title="Share this design"
-  linkValue="https://example.com/design/123"
-  isWhatsapp
-  isInstagram
-  isFacebook
-  isTwitter
-  isLinkedin
-  isPinterest
-  isTumblr
-  onShare={(network) => console.log(network)}
-  onCopy={(link) => console.log(link)}
+                code: `import { ModalShareSelection } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalShareSelection
+  bind:isOpen
+  title="Share this design"
+  linkValue="https://example.com/design/123"
+  isWhatsapp
+  isInstagram
+  isFacebook
+  isTwitter
+  isLinkedin
+  isPinterest
+  isTumblr
+  onShare={(network) => console.log(network)}
+  onCopy={(link) => console.log(link)}
 />`,
             },
             {
                 title: "Modal Share Selection — custom networks",
-                code: `import { ModalShareSelection } from "negodesign"
-import type { ModelSocialShare } from "negodesign"
-
-let isOpen = $state(false);
-
-const networks: ModelSocialShare[] = [
-  { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
-  { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
-];
-
-<ModalShareSelection
-  bind:isOpen
-  title="Share this design"
-  linkValue="https://example.com/design/123"
-  {networks}
-  onShare={(network) => console.log(network)}
-  onCopy={(link) => console.log(link)}
+                code: `import { ModalShareSelection } from "negodesign"
+import type { ModelSocialShare } from "negodesign"
+
+let isOpen = $state(false);
+
+const networks: ModelSocialShare[] = [
+  { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
+  { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
+];
+
+<ModalShareSelection
+  bind:isOpen
+  title="Share this design"
+  linkValue="https://example.com/design/123"
+  {networks}
+  onShare={(network) => console.log(network)}
+  onCopy={(link) => console.log(link)}
 />`,
             },
         ],
@@ -824,17 +824,17 @@ const networks: ModelSocialShare[] = [
             {
                 title: "Modal Notification",
                 href: "/modal",
-                code: `import { ModalNotification } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalNotification
-  bind:isOpen
-  title="Be the first to know when new content is available"
-  description="Sign up to receive tips and tricks on how to create online designs that make people take action."
-  placeholder="Your email address"
-  buttonText="Sign me up"
-  onSubmit={(email) => console.log(email)}
+                code: `import { ModalNotification } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalNotification
+  bind:isOpen
+  title="Be the first to know when new content is available"
+  description="Sign up to receive tips and tricks on how to create online designs that make people take action."
+  placeholder="Your email address"
+  buttonText="Sign me up"
+  onSubmit={(email) => console.log(email)}
 />`,
             },
         ],
@@ -862,16 +862,16 @@ let isOpen = $state(false);
             {
                 title: "Modal Feedback",
                 href: "/modal",
-                code: `import { ModalFeedback } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalFeedback
-  bind:isOpen
-  title="Your Feedback"
-  icon="🔥"
-  onSubmit={(content, images) => console.log(content, images)}
-  onAddImage={() => console.log("add image")}
+                code: `import { ModalFeedback } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalFeedback
+  bind:isOpen
+  title="Your Feedback"
+  icon="🔥"
+  onSubmit={(content, images) => console.log(content, images)}
+  onAddImage={() => console.log("add image")}
 />`,
             },
         ],
@@ -902,22 +902,22 @@ let isOpen = $state(false);
             {
                 title: "Form with multiple input types",
                 href: "/form",
-                code: `import { Form } from "negodesign"
-
-<Form
-  onSubmit={(data) => console.log(data)}
-  submitText="Save"
-  inputs={[
-    { type: "text", name: "name", label: "Full Name", placeholder: "John Doe", required: true },
-    { type: "email", name: "email", label: "Email", placeholder: "john@example.com", required: true },
-    { type: "select", name: "role", label: "Role", options: [
-      { value: "ADMIN", label: "Admin" },
-      { value: "USER", label: "User" },
-    ]},
-    { type: "toggle", name: "active", label: "Active", description: "Enable this account" },
-    { type: "textarea", name: "bio", label: "Bio", placeholder: "Tell us about yourself", fill: true },
-    { type: "badges", name: "tags", label: "Tags", placeholder: "Add tags...", suggestions: ["React", "Svelte", "Vue"] },
-  ]}
+                code: `import { Form } from "negodesign"
+
+<Form
+  onSubmit={(data) => console.log(data)}
+  submitText="Save"
+  inputs={[
+    { type: "text", name: "name", label: "Full Name", placeholder: "John Doe", required: true },
+    { type: "email", name: "email", label: "Email", placeholder: "john@example.com", required: true },
+    { type: "select", name: "role", label: "Role", options: [
+      { value: "ADMIN", label: "Admin" },
+      { value: "USER", label: "User" },
+    ]},
+    { type: "toggle", name: "active", label: "Active", description: "Enable this account" },
+    { type: "textarea", name: "bio", label: "Bio", placeholder: "Tell us about yourself", fill: true },
+    { type: "badges", name: "tags", label: "Tags", placeholder: "Add tags...", suggestions: ["React", "Svelte", "Vue"] },
+  ]}
 />`,
             },
         ],
@@ -943,22 +943,22 @@ let isOpen = $state(false);
             {
                 title: "Modal Form",
                 href: "/modal",
-                code: `import { ModalForm } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalForm
-  bind:isOpen
-  title="Edit Profile"
-  subtitle="Update your personal information"
-  submitText="Save Changes"
-  inputs={[
-    { type: "text", name: "name", label: "Name", value: "John Doe", required: true },
-    { type: "email", name: "email", label: "Email", value: "john@example.com" },
-    { type: "toggle", name: "newsletter", label: "Newsletter", description: "Receive updates" },
-  ]}
-  onSubmit={(data) => console.log(data)}
-  onCancel={() => console.log("cancelled")}
+                code: `import { ModalForm } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalForm
+  bind:isOpen
+  title="Edit Profile"
+  subtitle="Update your personal information"
+  submitText="Save Changes"
+  inputs={[
+    { type: "text", name: "name", label: "Name", value: "John Doe", required: true },
+    { type: "email", name: "email", label: "Email", value: "john@example.com" },
+    { type: "toggle", name: "newsletter", label: "Newsletter", description: "Receive updates" },
+  ]}
+  onSubmit={(data) => console.log(data)}
+  onCancel={() => console.log("cancelled")}
 />`,
             },
         ],
@@ -990,21 +990,21 @@ let isOpen = $state(false);
             {
                 title: "Modal Upload",
                 href: "/modal",
-                code: `import { ModalUpload } from "negodesign"
-import type { UploadFile } from "negodesign"
-
-let isOpen = $state(false);
-let files = $state<UploadFile[]>([]);
-
-<ModalUpload
-  bind:isOpen
-  bind:files
-  acceptedFormats="csv, xlsx, xls"
-  multiple
-  onFilesSelected={(f) => console.log("selected", f)}
-  onUpload={(f) => console.log("upload", f)}
-  onRemoveFile={(id) => console.log("remove", id)}
-  onDownload={() => console.log("download sample")}
+                code: `import { ModalUpload } from "negodesign"
+import type { UploadFile } from "negodesign"
+
+let isOpen = $state(false);
+let files = $state<UploadFile[]>([]);
+
+<ModalUpload
+  bind:isOpen
+  bind:files
+  acceptedFormats="csv, xlsx, xls"
+  multiple
+  onFilesSelected={(f) => console.log("selected", f)}
+  onUpload={(f) => console.log("upload", f)}
+  onRemoveFile={(id) => console.log("remove", id)}
+  onDownload={() => console.log("download sample")}
 />`,
             },
         ],
@@ -1037,25 +1037,25 @@ let files = $state<UploadFile[]>([]);
         examples: [
             {
                 title: "Modal Core",
-                code: `import { ModalCore } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalCore
-  bind:isOpen
-  title="Custom Modal"
-  subtitle="With custom content"
-  totalSteps={3}
-  currentStep={1}
-  showProgress
-  showBack
-  showSkip
-  onContinue={() => console.log("continue")}
-  onSkip={() => console.log("skip")}
->
-  {#snippet content()}
-    <p>Your custom content here</p>
-  {/snippet}
+                code: `import { ModalCore } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalCore
+  bind:isOpen
+  title="Custom Modal"
+  subtitle="With custom content"
+  totalSteps={3}
+  currentStep={1}
+  showProgress
+  showBack
+  showSkip
+  onContinue={() => console.log("continue")}
+  onSkip={() => console.log("skip")}
+>
+  {#snippet content()}
+    <p>Your custom content here</p>
+  {/snippet}
 </ModalCore>`,
             },
         ],
@@ -1091,18 +1091,18 @@ let isOpen = $state(false);
             {
                 title: "Modal Map",
                 href: "/modal",
-                code: `import { ModalMap } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalMap
-  bind:isOpen
-  title="Location"
-  address="211 Throop Ave Brooklyn, New York City"
-  description="New York is served by three airports."
-  onSearch={(q) => console.log(q)}
-  onApply={(addr, desc) => console.log(addr, desc)}
-  onCancel={() => console.log("cancel")}
+                code: `import { ModalMap } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalMap
+  bind:isOpen
+  title="Location"
+  address="211 Throop Ave Brooklyn, New York City"
+  description="New York is served by three airports."
+  onSearch={(q) => console.log(q)}
+  onApply={(addr, desc) => console.log(addr, desc)}
+  onCancel={() => console.log("cancel")}
 />`,
             },
         ],
@@ -1140,17 +1140,17 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Footer",
-                code: `import { Footer } from "negodesign"
-
-<Footer
-  isNewsletter={true}
-  items={[
-    { title: "Solutions", items: [{ text: "Marketing" }] },
-  ]}
-  socialsMedia={[
-    { icon: "facebook", text: "Facebook", href: "#" },
-  ]}
-  companyName="Negoturismo"
+                code: `import { Footer } from "negodesign"
+
+<Footer
+  isNewsletter={true}
+  items={[
+    { title: "Solutions", items: [{ text: "Marketing" }] },
+  ]}
+  socialsMedia={[
+    { icon: "facebook", text: "Facebook", href: "#" },
+  ]}
+  companyName="Negoturismo"
 />`,
                 href: "/footer",
             },
@@ -1177,15 +1177,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Admin Panel",
-                code: `import { AdminPanel } from "negodesign"
-
-<AdminPanel>
-  {#snippet appsidebar()}
-    <MenuBarSidebar {user} {menus} {menusButtons} />
-  {/snippet}
-  {#snippet content()}
-    <AdminContent>...content...</AdminContent>
-  {/snippet}
+                code: `import { AdminPanel } from "negodesign"
+
+<AdminPanel>
+  {#snippet appsidebar()}
+    <MenuBarSidebar {user} {menus} {menusButtons} />
+  {/snippet}
+  {#snippet content()}
+    <AdminContent>...content...</AdminContent>
+  {/snippet}
 </AdminPanel>`,
                 href: "/admin/01",
             },
@@ -1206,13 +1206,13 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Data Table",
-                code: `import { DataTableCore } from "negodesign"
-
-<DataTableCore
-  items={rows}
-  config={columns}
-  columnFilter="name"
-  actions={RowActions}
+                code: `import { DataTableCore } from "negodesign"
+
+<DataTableCore
+  items={rows}
+  config={columns}
+  columnFilter="name"
+  actions={RowActions}
 />`,
                 href: "/datatable/01",
             },
@@ -1234,12 +1234,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Sidebar",
-                code: `import { MenuBarSidebar } from "negodesign"
-
-<MenuBarSidebar
-  {menus}
-  {user}
-  {menusButtons}
+                code: `import { MenuBarSidebar } from "negodesign"
+
+<MenuBarSidebar
+  {menus}
+  {user}
+  {menusButtons}
 />`,
             },
         ],
@@ -1262,15 +1262,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Login Page",
-                code: `import { PageLogin } from "negodesign"
-
-<PageLogin
-  title="Negodesign"
-  formType="EMAIL_PASSWORD"
-  carousel={[
-    { title: "Welcome", description: "Access your account", buttonText: "Sign in" },
-  ]}
-  onSubmit={(credential) => console.log(credential)}
+                code: `import { PageLogin } from "negodesign"
+
+<PageLogin
+  title="Negodesign"
+  formType="EMAIL_PASSWORD"
+  carousel={[
+    { title: "Welcome", description: "Access your account", buttonText: "Sign in" },
+  ]}
+  onSubmit={(credential) => console.log(credential)}
 />`,
                 href: "/login/admin/01",
             },
@@ -1297,36 +1297,36 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Register Page — All Fields",
-                code: `import { PageRegister } from "negodesign"
-
-<PageRegister
-  title="Negodesign"
-  fields={{
-    isName: true,
-    isEmail: true,
-    isPassword: true,
-    isConfirmPassword: true,
-    isBirthday: true,
-    isGender: true,
-    isPhone: true,
-  }}
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageRegister } from "negodesign"
+
+<PageRegister
+  title="Negodesign"
+  fields={{
+    isName: true,
+    isEmail: true,
+    isPassword: true,
+    isConfirmPassword: true,
+    isBirthday: true,
+    isGender: true,
+    isPhone: true,
+  }}
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/register/admin/01",
             },
             {
                 title: "Register Page — Minimal (email + password)",
-                code: `import { PageRegister } from "negodesign"
-
-<PageRegister
-  variant={2}
-  title="Negodesign"
-  fields={{
-    isEmail: true,
-    isPassword: true,
-    isConfirmPassword: true,
-  }}
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageRegister } from "negodesign"
+
+<PageRegister
+  variant={2}
+  title="Negodesign"
+  fields={{
+    isEmail: true,
+    isPassword: true,
+    isConfirmPassword: true,
+  }}
+  onSubmit={(data) => console.log(data)}
 />`,
             },
         ],
@@ -1354,13 +1354,13 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Company Profile",
-                code: `import { CompanyProfile } from "negodesign"
-
-<CompanyProfile
-  data={data}
-  isLoading={false}
-  onWhatsapp={(id) => console.log(id)}
-  onEmail={(id) => console.log(id)}
+                code: `import { CompanyProfile } from "negodesign"
+
+<CompanyProfile
+  data={data}
+  isLoading={false}
+  onWhatsapp={(id) => console.log(id)}
+  onEmail={(id) => console.log(id)}
 />`,
                 href: "/company-profile",
             },
@@ -1384,14 +1384,14 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Privacy Policy",
-                code: `import { PrivacyPolicyOrTermsOfUse } from "negodesign"
-
-<PrivacyPolicyOrTermsOfUse
-  variant={1}
-  title="Privacy Policy"
-  lastUpdated="August 15, 2026"
-  breadcrumb={[{ label: "Home", href: "/" }]}
-  sections={[{ id: "intro", title: "Introduction", blocks: [] }]}
+                code: `import { PrivacyPolicyOrTermsOfUse } from "negodesign"
+
+<PrivacyPolicyOrTermsOfUse
+  variant={1}
+  title="Privacy Policy"
+  lastUpdated="August 15, 2026"
+  breadcrumb={[{ label: "Home", href: "/" }]}
+  sections={[{ id: "intro", title: "Introduction", blocks: [] }]}
 />`,
                 href: "/privacy-policy-or-terms-of-use",
             },
@@ -1416,15 +1416,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Product Details",
-                code: `import { ProductDetails } from "negodesign"
-
-<ProductDetails
-  varient={1}
-  data={productData}
-  isLoading={false}
-  onBuy={(id) => alert("Buy " + id)}
-  onFavorite={(id) => alert("Favorite " + id)}
-  onCart={(id) => alert("Cart " + id)}
+                code: `import { ProductDetails } from "negodesign"
+
+<ProductDetails
+  varient={1}
+  data={productData}
+  isLoading={false}
+  onBuy={(id) => alert("Buy " + id)}
+  onFavorite={(id) => alert("Favorite " + id)}
+  onCart={(id) => alert("Cart " + id)}
 />`,
                 href: "/product-details/01",
             },
@@ -1450,15 +1450,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "User Profile",
-                code: `import { ProfileUser } from "negodesign"
-
-<ProfileUser
-  varient={1}
-  data={userData}
-  isLoading={false}
-  onLoginAsUser={(id) => alert(id)}
-  onAddAddress={() => alert("Add")}
-  onChangePassword={(p) => alert(JSON.stringify(p))}
+                code: `import { ProfileUser } from "negodesign"
+
+<ProfileUser
+  varient={1}
+  data={userData}
+  isLoading={false}
+  onLoginAsUser={(id) => alert(id)}
+  onAddAddress={() => alert("Add")}
+  onChangePassword={(p) => alert(JSON.stringify(p))}
 />`,
                 href: "/profile-user/01",
             },
@@ -1486,17 +1486,17 @@ let isOpen = $state(false);
             {
                 title: "Tab Underline",
                 href: "/tab",
-                code: `import { TabUnderline } from "negodesign"
-
-<TabUnderline
-  items={[
-    { label: "Tab 1", value: "tab1" },
-    { label: "Tab 2", value: "tab2" },
-  ]}
-  contents={{
-    tab1: () => <p>Content 1</p>,
-    tab2: () => <p>Content 2</p>,
-  }}
+                code: `import { TabUnderline } from "negodesign"
+
+<TabUnderline
+  items={[
+    { label: "Tab 1", value: "tab1" },
+    { label: "Tab 2", value: "tab2" },
+  ]}
+  contents={{
+    tab1: () => <p>Content 1</p>,
+    tab2: () => <p>Content 2</p>,
+  }}
 />`,
             },
         ],
@@ -1516,14 +1516,14 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Empty State",
-                code: `import { NotFoundEmpty } from "negodesign"
-
-<NotFoundEmpty
-  title="No results found"
-  description="Try adjusting your search or filter to find what you're looking for."
-  showAction
-  actionLabel="Clear filters"
-  onAction={() => console.log("clear")}
+                code: `import { NotFoundEmpty } from "negodesign"
+
+<NotFoundEmpty
+  title="No results found"
+  description="Try adjusting your search or filter to find what you're looking for."
+  showAction
+  actionLabel="Clear filters"
+  onAction={() => console.log("clear")}
 />`,
             },
         ],
@@ -1548,11 +1548,11 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Admin Content",
-                code: `import { AdminContent } from "negodesign"
-
-<AdminContent>
-  <h1>Dashboard</h1>
-  <p>Content goes here</p>
+                code: `import { AdminContent } from "negodesign"
+
+<AdminContent>
+  <h1>Dashboard</h1>
+  <p>Content goes here</p>
 </AdminContent>`,
             },
         ],
@@ -1570,12 +1570,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Email",
-                code: `import { InputEmail } from "negodesign"
-
-<InputEmail
-  label="Email"
-  placeholder="john@example.com"
-  bind:value={email}
+                code: `import { InputEmail } from "negodesign"
+
+<InputEmail
+  label="Email"
+  placeholder="john@example.com"
+  bind:value={email}
 />`,
             },
         ],
@@ -1595,12 +1595,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Phone",
-                code: `import { InputPhone } from "negodesign"
-
-<InputPhone
-  label="Phone"
-  placeholder="+1 234 567 890"
-  bind:value={phone}
+                code: `import { InputPhone } from "negodesign"
+
+<InputPhone
+  label="Phone"
+  placeholder="+1 234 567 890"
+  bind:value={phone}
 />`,
             },
         ],
@@ -1620,12 +1620,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Password",
-                code: `import { InputPassword } from "negodesign"
-
-<InputPassword
-  label="Password"
-  placeholder="Enter your password"
-  bind:value={password}
+                code: `import { InputPassword } from "negodesign"
+
+<InputPassword
+  label="Password"
+  placeholder="Enter your password"
+  bind:value={password}
 />`,
             },
         ],
@@ -1645,12 +1645,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Username",
-                code: `import { InputUsername } from "negodesign"
-
-<InputUsername
-  label="Username"
-  placeholder="john_doe"
-  bind:value={username}
+                code: `import { InputUsername } from "negodesign"
+
+<InputUsername
+  label="Username"
+  placeholder="john_doe"
+  bind:value={username}
 />`,
             },
         ],
@@ -1660,6 +1660,81 @@ let isOpen = $state(false);
             { name: "placeholder", type: "string", description: "Placeholder text" },
         ],
     },
+    {
+        slug: "input-calendar",
+        name: "InputCalendar",
+        category: "Form Inputs",
+        description: "Date input with a reusable popover calendar (month and year selectors). Opens a calendar card on click; the value is bound as an ISO `yyyy-mm-dd` string and displayed in the localized format.",
+        path: "src/lib/components/ui/form/ui/input-calendar.svelte",
+        importPath: "InputCalendar",
+        examples: [
+            {
+                title: "Input Calendar",
+                href: "/input-calendar",
+                code: `import { InputCalendar } from "negodesign"
+
+<script lang="ts">
+  let birthDate = $state("");
+</script>
+
+<InputCalendar
+  label="Birth date"
+  placeholder="dd/mm/yyyy"
+  bind:value={birthDate}
+/>`,
+            },
+        ],
+        props: [
+            { name: "value", type: "string", description: "Bound value as ISO yyyy-mm-dd" },
+            { name: "label", type: "string", description: "Field label" },
+            { name: "placeholder", type: "string", description: "Placeholder text" },
+            { name: "labelClass", type: "string", description: "Label CSS class" },
+            { name: "inputClass", type: "string", description: "Trigger CSS class" },
+            { name: "isLabel", type: "boolean", description: "Renders the label wrapper", default: "true" },
+            { name: "isIcon", type: "boolean", description: "Shows the calendar icon on the left", default: "true" },
+            { name: "placeholderClass", type: "string", description: "Trigger text CSS class" },
+            { name: "min", type: "string", description: "Minimum accepted date (ISO yyyy-mm-dd)" },
+            { name: "max", type: "string", description: "Maximum accepted date (ISO yyyy-mm-dd)" },
+            { name: "disabled", type: "boolean", description: "Disables the trigger", default: "false" },
+        ],
+    },
+    {
+        slug: "input-calendar-interval",
+        name: "InputCalendarInterval",
+        category: "Form Inputs",
+        description: "Date range input built on the same reusable calendar card as InputCalendar. The popover opens two calendars (start and end) side by side on desktop and stacked on mobile, and always guarantees the start date is less than or equal to the end date.",
+        path: "src/lib/components/ui/form/ui/input-calendar-interval.svelte",
+        importPath: "InputCalendarInterval",
+        examples: [
+            {
+                title: "Input Calendar Interval",
+                href: "/input-calendar-interval",
+                code: `import { InputCalendarInterval } from "negodesign"
+
+<script lang="ts">
+  let startDate = $state("");
+  let endDate = $state("");
+</script>
+
+<InputCalendarInterval
+  label="Travel period"
+  bind:startValue={startDate}
+  bind:endValue={endDate}
+/>`,
+            },
+        ],
+        props: [
+            { name: "startValue", type: "string", description: "Bound start date as ISO yyyy-mm-dd" },
+            { name: "endValue", type: "string", description: "Bound end date as ISO yyyy-mm-dd" },
+            { name: "label", type: "string", description: "Field label" },
+            { name: "isLabel", type: "boolean", description: "Renders the label wrapper", default: "true" },
+            { name: "isIcon", type: "boolean", description: "Shows the calendar icon on the left", default: "true" },
+            { name: "labelClass", type: "string", description: "Label CSS class" },
+            { name: "inputClass", type: "string", description: "Trigger CSS class" },
+            { name: "placeholder", type: "string", description: "Placeholder text when empty" },
+            { name: "disabled", type: "boolean", description: "Disables the trigger", default: "false" },
+        ],
+    },
     {
         slug: "page-forget-password",
         name: "PageForgetPassword",
@@ -1670,11 +1745,11 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Forget Password Page",
-                code: `import { PageForgetPassword } from "negodesign"
-
-<PageForgetPassword
-  title="Negodesign"
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageForgetPassword } from "negodesign"
+
+<PageForgetPassword
+  title="Negodesign"
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/login/forget-password/01",
             },
@@ -1695,10 +1770,10 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Reset Password Page",
-                code: `import { PageResetPassword } from "negodesign"
-
-<PageResetPassword
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageResetPassword } from "negodesign"
+
+<PageResetPassword
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/login/reset-password/01",
             },
@@ -1717,10 +1792,10 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "OTP Verification Page",
-                code: `import { PageOtpVerification } from "negodesign"
-
-<PageOtpVerification
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageOtpVerification } from "negodesign"
+
+<PageOtpVerification
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/login/otp/01",
             },
@@ -1740,26 +1815,26 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Tailored Logistics Cards",
-                code: `import { Section01 } from "negodesign"
-import {
-  ShoppingBag01Icon,
-  FactoryIcon,
-  Stethoscope02Icon,
-  ComputerNetworkIcon,
-} from "@hugeicons/core-free-icons";
-
-<Section01
-  title="Tailored Logistics for Every Business"
-  description="At /XION, we understand that every industry has unique logistics challenges."
-  items={[
-    { id: "1", icon: ShoppingBag01Icon, title: "Retail & E-commerce", description: "Streamline your fulfillment process." },
-    { id: "2", icon: FactoryIcon, title: "Manufacturing", description: "Optimize your supply chain.", isActive: true },
-    { id: "3", icon: Stethoscope02Icon, title: "Healthcare & Pharmacy", description: "Ensure the safe delivery of products." },
-    { id: "4", icon: ComputerNetworkIcon, title: "Technology & Electronics", description: "Handle high-value, sensitive products." },
-  ]}
-  onSelect={(id) => console.log(id)}
-  onPrev={() => console.log("prev")}
-  onNext={() => console.log("next")}
+                code: `import { Section01 } from "negodesign"
+import {
+  ShoppingBag01Icon,
+  FactoryIcon,
+  Stethoscope02Icon,
+  ComputerNetworkIcon,
+} from "@hugeicons/core-free-icons";
+
+<Section01
+  title="Tailored Logistics for Every Business"
+  description="At /XION, we understand that every industry has unique logistics challenges."
+  items={[
+    { id: "1", icon: ShoppingBag01Icon, title: "Retail & E-commerce", description: "Streamline your fulfillment process." },
+    { id: "2", icon: FactoryIcon, title: "Manufacturing", description: "Optimize your supply chain.", isActive: true },
+    { id: "3", icon: Stethoscope02Icon, title: "Healthcare & Pharmacy", description: "Ensure the safe delivery of products." },
+    { id: "4", icon: ComputerNetworkIcon, title: "Technology & Electronics", description: "Handle high-value, sensitive products." },
+  ]}
+  onSelect={(id) => console.log(id)}
+  onPrev={() => console.log("prev")}
+  onNext={() => console.log("next")}
 />`,
                 href: "/section/01",
             },
@@ -1787,19 +1862,19 @@ import {
         examples: [
             {
                 title: "Innovation Features Section",
-                code: `import { Section02 } from "negodesign"
-
-<Section02
-  title="Innovation that Moves Your Business"
-  description="We leverage the latest technology to improve the way we manage your shipments."
-  image="/images/container.jpg"
-  imageAlt="Shipping container"
-  features={[
-    { title: "Real-Time Tracking", description: "Stay up-to-date with your shipments from pick-up to delivery.", link: "/tracking", linkLabel: "Learn More" },
-    { title: "Data Analytics", description: "Gain insights into your supply chain.", link: "/analytics" },
-    { title: "Automated Updates", description: "Receive timely notifications about your shipments.", link: "/updates" },
-    { title: "Secure Portal", description: "Access your account anytime with our secure online portal.", link: "/portal" },
-  ]}
+                code: `import { Section02 } from "negodesign"
+
+<Section02
+  title="Innovation that Moves Your Business"
+  description="We leverage the latest technology to improve the way we manage your shipments."
+  image="/images/container.jpg"
+  imageAlt="Shipping container"
+  features={[
+    { title: "Real-Time Tracking", description: "Stay up-to-date with your shipments from pick-up to delivery.", link: "/tracking", linkLabel: "Learn More" },
+    { title: "Data Analytics", description: "Gain insights into your supply chain.", link: "/analytics" },
+    { title: "Automated Updates", description: "Receive timely notifications about your shipments.", link: "/updates" },
+    { title: "Secure Portal", description: "Access your account anytime with our secure online portal.", link: "/portal" },
+  ]}
 />`,
                 href: "/section/02",
             },
@@ -1826,23 +1901,23 @@ import {
         examples: [
             {
                 title: "Solutions Section",
-                code: `import { Section03 } from "negodesign"
-import {
-  Globe01Icon,
-  CustomServiceIcon,
-  ArtificialIntelligence02Icon,
-  Award01Icon,
-} from "@hugeicons/core-free-icons";
-
-<Section03
-  title="We specialize in providing reliable and efficient solutions"
-  description="Whether you need to streamline your supply chain, improve delivery times, or expand your reach globally, we're here to help you achieve your goals with precision and speed."
-  items={[
-    { id: "1", icon: Globe01Icon, title: "Global Reach", description: "With a network, we ensure that your business can reach new markets effortlessly." },
-    { id: "2", icon: CustomServiceIcon, title: "Custom Solutions", description: "We don't believe in a one-size-fits-all. We design logistics solutions tailored to your business needs." },
-    { id: "3", icon: ArtificialIntelligence02Icon, title: "Technology-Driven", description: "Our cutting-edge technology enables real-time tracking, data analytics, and seamless coordination." },
-    { id: "4", icon: Award01Icon, title: "Proven Expertise", description: "With over 10 years in the logistics industry, we have mastered the art of moving goods efficiently." },
-  ]}
+                code: `import { Section03 } from "negodesign"
+import {
+  Globe01Icon,
+  CustomServiceIcon,
+  ArtificialIntelligence02Icon,
+  Award01Icon,
+} from "@hugeicons/core-free-icons";
+
+<Section03
+  title="We specialize in providing reliable and efficient solutions"
+  description="Whether you need to streamline your supply chain, improve delivery times, or expand your reach globally, we're here to help you achieve your goals with precision and speed."
+  items={[
+    { id: "1", icon: Globe01Icon, title: "Global Reach", description: "With a network, we ensure that your business can reach new markets effortlessly." },
+    { id: "2", icon: CustomServiceIcon, title: "Custom Solutions", description: "We don't believe in a one-size-fits-all. We design logistics solutions tailored to your business needs." },
+    { id: "3", icon: ArtificialIntelligence02Icon, title: "Technology-Driven", description: "Our cutting-edge technology enables real-time tracking, data analytics, and seamless coordination." },
+    { id: "4", icon: Award01Icon, title: "Proven Expertise", description: "With over 10 years in the logistics industry, we have mastered the art of moving goods efficiently." },
+  ]}
 />`,
                 href: "/section/03",
             },