import { jsxs as i, Fragment as t, jsx as e } from "react/jsx-runtime";
import { H as d, C as s, a as l, T as r, K as a, P as n, A as o, c as m } from "../index-sdOMz8GW.js";
import { Award as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => /* @__PURE__ */ i(t, { children: [
  /* @__PURE__ */ e(
    d,
    {
      title: "Badge",
      description: `A badge component for displaying status indicators and labels with
          various styles and sizes.`,
      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-teal-500 to-emerald-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__ */ i("div", { className: "space-y-6", children: [
    /* @__PURE__ */ i("div", { children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Status Badges" }),
      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
        /* @__PURE__ */ e(a, { status: "active", children: "Active" }),
        /* @__PURE__ */ e(a, { status: "inactive", children: "Inactive" }),
        /* @__PURE__ */ e(a, { status: "pending", children: "Pending" }),
        /* @__PURE__ */ e(a, { status: "default", children: "Default" })
      ] })
    ] }),
    /* @__PURE__ */ i("div", { children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Status Indicators (Dots Only)" }),
      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(a, { status: "active", withDot: !0 }),
          /* @__PURE__ */ e("span", { className: "text-sm", children: "Online" })
        ] }),
        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(a, { status: "inactive", withDot: !0 }),
          /* @__PURE__ */ e("span", { className: "text-sm", children: "Offline" })
        ] }),
        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(a, { status: "pending", withDot: !0 }),
          /* @__PURE__ */ e("span", { className: "text-sm", children: "Away" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ i("div", { children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Dot Indicator" }),
      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
        /* @__PURE__ */ e(a, { status: "active", withDot: !0, children: "Active" }),
        /* @__PURE__ */ e(a, { status: "inactive", withDot: !0, children: "Inactive" }),
        /* @__PURE__ */ e(a, { status: "pending", withDot: !0, children: "Pending" })
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
    /* @__PURE__ */ e(a, { color: "primary", children: "Primary" }),
    /* @__PURE__ */ e(a, { color: "success", children: "Success" }),
    /* @__PURE__ */ e(a, { color: "info", children: "Info" }),
    /* @__PURE__ */ e(a, { color: "warning", children: "Warning" }),
    /* @__PURE__ */ e(a, { color: "danger", children: "Danger" }),
    /* @__PURE__ */ e(a, { color: "gray", children: "Gray" })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
    /* @__PURE__ */ e(a, { size: "tiny", color: "primary", children: "Tiny" }),
    /* @__PURE__ */ e(a, { size: "small", color: "primary", children: "Small" }),
    /* @__PURE__ */ e(a, { size: "medium", color: "primary", children: "Medium" }),
    /* @__PURE__ */ e(a, { size: "large", color: "primary", children: "Large" })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "space-y-4", children: [
    /* @__PURE__ */ i("div", { children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Solid" }),
      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
        /* @__PURE__ */ e(a, { variant: "solid", color: "primary", children: "Primary" }),
        /* @__PURE__ */ e(a, { variant: "solid", color: "success", children: "Success" }),
        /* @__PURE__ */ e(a, { variant: "solid", color: "danger", children: "Danger" })
      ] })
    ] }),
    /* @__PURE__ */ i("div", { children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Soft" }),
      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
        /* @__PURE__ */ e(a, { variant: "soft", color: "primary", children: "Primary" }),
        /* @__PURE__ */ e(a, { variant: "soft", color: "success", children: "Success" }),
        /* @__PURE__ */ e(a, { variant: "soft", color: "danger", children: "Danger" })
      ] })
    ] }),
    /* @__PURE__ */ i("div", { children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Outline" }),
      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
        /* @__PURE__ */ e(a, { variant: "outline", color: "primary", children: "Primary" }),
        /* @__PURE__ */ e(a, { variant: "outline", color: "success", children: "Success" }),
        /* @__PURE__ */ e(a, { variant: "outline", color: "danger", children: "Danger" })
      ] })
    ] }),
    /* @__PURE__ */ i("div", { children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Ghost" }),
      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
        /* @__PURE__ */ e(a, { variant: "ghost", color: "primary", children: "Primary" }),
        /* @__PURE__ */ e(a, { variant: "ghost", color: "success", children: "Success" }),
        /* @__PURE__ */ e(a, { variant: "ghost", color: "danger", children: "Danger" })
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Shapes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
    /* @__PURE__ */ e(a, { shape: "rounded", color: "primary", children: "Rounded" }),
    /* @__PURE__ */ e(a, { shape: "pill", color: "success", children: "Pill" }),
    /* @__PURE__ */ e(a, { shape: "circle", color: "danger", size: "large", withDot: !0 })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    n,
    {
      componentName: "Badge",
      defaultValues: {
        variant: "solid",
        size: "small",
        shape: "pill",
        color: "primary",
        withDot: !1
      },
      excludeProps: ["status"],
      children: (c) => /* @__PURE__ */ e(a, { ...c, children: "Badge" })
    }
  ),
  /* @__PURE__ */ e(o, { componentName: "Badge" }),
  /* @__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(
    m,
    {
      language: "tsx",
      code: `import { Badge } from '@e-burgos/tucu-ui';

// Basic usage with status
<Badge status="active">Active</Badge>
<Badge status="inactive">Inactive</Badge>
<Badge status="pending">Pending</Badge>

// Status indicators (dots only)
<Badge status="active" withDot />
<Badge status="inactive" withDot />

// With dot indicator and text
<Badge status="active" withDot>Active</Badge>

// Different colors
<Badge color="primary">Primary</Badge>
<Badge color="success">Success</Badge>
<Badge color="info">Info</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>

// Different sizes
<Badge size="tiny">Tiny</Badge>
<Badge size="small">Small</Badge>
<Badge size="medium">Medium</Badge>
<Badge size="large">Large</Badge>

// Different variants
<Badge variant="solid" color="primary">Solid</Badge>
<Badge variant="soft" color="success">Soft</Badge>
<Badge variant="outline" color="danger">Outline</Badge>
<Badge variant="ghost" color="info">Ghost</Badge>

// Different shapes
<Badge shape="rounded">Rounded</Badge>
<Badge shape="pill">Pill</Badge>
<Badge shape="circle" withDot />

// Combinations
<Badge 
  color="success" 
  variant="soft" 
  size="medium"
  shape="pill"
  withDot
>
  Online
</Badge>`
    }
  ) }) }) })
] });
export {
  w as default
};
