import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
import { H as n, C as s, a as l, T as t, ag as o, P as r, A as d, c } from "../index-sdOMz8GW.js";
import { Sparkles as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const C = () => /* @__PURE__ */ a(m, { children: [
  /* @__PURE__ */ e(
    n,
    {
      title: "Logo",
      description: `A flexible logo component that automatically adapts to light/dark mode
          and supports various sizes and configurations.`,
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Default Logo (uses defaults)" }),
      /* @__PURE__ */ e(o, {})
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Names" }),
      /* @__PURE__ */ e(o, { name: "Custom", secondName: "App" })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
      /* @__PURE__ */ a("div", { className: "flex items-center gap-4 flex-wrap", children: [
        /* @__PURE__ */ e(o, { name: "TUCU", size: "small" }),
        /* @__PURE__ */ e(o, { name: "TUCU", size: "medium" }),
        /* @__PURE__ */ e(o, { name: "TUCU", size: "large" }),
        /* @__PURE__ */ e(o, { name: "TUCU", size: "xlarge" })
      ] })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Custom Link Path" }),
      /* @__PURE__ */ e(o, { name: "TUCU", path: "/home" })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Isotype Mode (First Letters Only)" }),
      /* @__PURE__ */ e(o, { name: "TUCU", secondName: "UI", isoType: !0 })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
      /* @__PURE__ */ e(
        o,
        {
          name: "TUCU",
          className: "opacity-80 hover:opacity-100 transition-opacity"
        }
      )
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Logo Component" }),
      /* @__PURE__ */ e(
        o,
        {
          name: "MY",
          secondName: "APP",
          logo: /* @__PURE__ */ e("div", { className: "w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg", children: "M" })
        }
      )
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Advanced Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Logo with SVG Icon" }),
      /* @__PURE__ */ e(
        o,
        {
          name: "COMPANY",
          secondName: "LLC",
          logo: /* @__PURE__ */ a(
            "svg",
            {
              width: "64",
              height: "64",
              viewBox: "0 0 64 64",
              fill: "none",
              xmlns: "http://www.w3.org/2000/svg",
              className: "rounded-lg",
              children: [
                /* @__PURE__ */ e(
                  "rect",
                  {
                    width: "64",
                    height: "64",
                    rx: "12",
                    fill: "url(#gradient)"
                  }
                ),
                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a(
                  "linearGradient",
                  {
                    id: "gradient",
                    x1: "0",
                    y1: "0",
                    x2: "64",
                    y2: "64",
                    children: [
                      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#3B82F6" }),
                      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#8B5CF6" })
                    ]
                  }
                ) }),
                /* @__PURE__ */ e("path", { d: "M32 20L40 28L32 36L24 28L32 20Z", fill: "white" }),
                /* @__PURE__ */ e(
                  "path",
                  {
                    d: "M20 32L28 40L36 32L28 24L20 32Z",
                    fill: "white",
                    opacity: "0.8"
                  }
                )
              ]
            }
          )
        }
      )
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Logo with Image" }),
      /* @__PURE__ */ e(
        o,
        {
          name: "COMPANY",
          secondName: "",
          logo: /* @__PURE__ */ e("div", { className: "w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20", children: "C" })
        }
      )
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Only Primary Name" }),
      /* @__PURE__ */ e(o, { name: "MYAPP", secondName: "" })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Only Secondary Name" }),
      /* @__PURE__ */ e(o, { name: "", secondName: "BRAND" })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    r,
    {
      componentName: "Logo",
      defaultValues: {
        name: "Tucu",
        secondName: "UI",
        size: "medium",
        isoType: !1
      },
      excludeProps: ["path", "logo", "preset"],
      children: (i) => /* @__PURE__ */ e(o, { ...i })
    }
  ),
  /* @__PURE__ */ e(d, { componentName: "Logo" }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    c,
    {
      language: "tsx",
      code: `import { Logo } from '@e-burgos/tucu-ui';

// Default usage (uses "TUCU" and "UI" as defaults)
<Logo />

// Custom names
<Logo name="Custom" secondName="App" />

// Different sizes
<Logo name="TUCU" size="small" />
<Logo name="TUCU" size="medium" />
<Logo name="TUCU" size="large" />
<Logo name="TUCU" size="xlarge" />

// With custom link path
<Logo name="TUCU" path="/home" />

// Isotype mode (shows only first letters)
<Logo name="TUCU" secondName="UI" isoType />

// With custom CSS classes
<Logo 
  name="TUCU" 
  className="opacity-80 hover:opacity-100 transition-opacity" 
/>

// With custom logo component (ReactNode)
<Logo
  name="MY"
  secondName="APP"
  logo={
    <div className="w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg">
      M
    </div>
  }
/>

// With custom SVG logo
<Logo
  name="COMPANY"
  secondName="LLC"
  logo={
    <svg
      width="64"
      height="64"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="rounded-lg"
    >
      <rect
        width="64"
        height="64"
        rx="12"
        fill="url(#gradient)"
      />
      <defs>
        <linearGradient
          id="gradient"
          x1="0"
          y1="0"
          x2="64"
          y2="64"
        >
          <stop offset="0%" stopColor="#3B82F6" />
          <stop offset="100%" stopColor="#8B5CF6" />
        </linearGradient>
      </defs>
      <path d="M32 20L40 28L32 36L24 28L32 20Z" fill="white" />
      <path
        d="M20 32L28 40L36 32L28 24L20 32Z"
        fill="white"
        opacity="0.8"
      />
    </svg>
  }
/>

// Custom logo with image/div component
<Logo
  name="COMPANY"
  secondName=""
  logo={
    <div className="w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20">
      C
    </div>
  }
/>

// Only primary name (empty secondName)
<Logo name="MYAPP" secondName="" />

// Only secondary name (empty name)
<Logo name="" secondName="BRAND" />

// The component automatically:
// - Adapts to light/dark mode
// - Shows TucuUiLogo icon when no custom logo is provided
// - Defaults to "TUCU" and "UI" if names are undefined
// - Handles empty strings for name or secondName`
    }
  ) }) }) })
] });
export {
  C as default
};
