import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
import { H as t, C as s, a as r, T as d, a0 as a, P as n, A as c, c as m } from "../index-sdOMz8GW.js";
import { Rows3 as u } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const y = () => /* @__PURE__ */ l(i, { children: [
  /* @__PURE__ */ e(
    t,
    {
      title: "KeyValueRow",
      description: `A simple row component for displaying label-value pairs, ideal for
          detail panels, summaries, and settings views.`,
      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-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { 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(r, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
    /* @__PURE__ */ l(s, { className: "p-4", children: [
      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "Basic Usage" }),
      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
        /* @__PURE__ */ e(a, { label: "Name", value: "John Doe" }),
        /* @__PURE__ */ e(a, { label: "Email", value: "john@example.com" }),
        /* @__PURE__ */ e(a, { label: "Role", value: "Administrator" }),
        /* @__PURE__ */ e(a, { label: "Status", value: "Active" })
      ] })
    ] }),
    /* @__PURE__ */ l(s, { className: "p-4", children: [
      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "Monospace & Accent" }),
      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
        /* @__PURE__ */ e(a, { label: "Balance", value: "$12,450.00", mono: !0 }),
        /* @__PURE__ */ e(a, { label: "Interest Rate", value: "3.5%", mono: !0, accent: !0 }),
        /* @__PURE__ */ e(a, { label: "Account ID", value: "ACC-0042891", mono: !0 }),
        /* @__PURE__ */ e(
          a,
          {
            label: "Next Payment",
            value: "Jun 15, 2026",
            accent: !0
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ l(s, { className: "p-4 md:col-span-2", children: [
      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "With Custom Values (ReactNode)" }),
      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
        /* @__PURE__ */ e(
          a,
          {
            label: "Health",
            value: /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-1.5 text-green-500 text-xs font-medium", children: [
              /* @__PURE__ */ e("span", { className: "h-2 w-2 rounded-full bg-green-500" }),
              "Healthy"
            ] })
          }
        ),
        /* @__PURE__ */ e(
          a,
          {
            label: "Progress",
            value: /* @__PURE__ */ e("div", { className: "w-24 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "h-full w-3/4 bg-brand rounded-full" }) })
          }
        ),
        /* @__PURE__ */ e(
          a,
          {
            label: "Tags",
            value: /* @__PURE__ */ l("div", { className: "flex gap-1", children: [
              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 text-[10px] rounded bg-brand/10 text-brand", children: "React" }),
              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 text-[10px] rounded bg-blue-500/10 text-blue-500", children: "TypeScript" })
            ] })
          }
        )
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    n,
    {
      componentName: "KeyValueRow",
      title: "KeyValueRow Playground",
      defaultValues: {
        label: "Status",
        value: "Active",
        accent: !1,
        mono: !1
      },
      excludeProps: ["className"],
      children: (o) => /* @__PURE__ */ e(a, { ...o })
    }
  ),
  /* @__PURE__ */ e(c, { componentName: "KeyValueRow" }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { 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 { KeyValueRow } from '@e-burgos/tucu-ui';

// Basic
<KeyValueRow label="Name" value="John Doe" />

// Monospace numbers
<KeyValueRow label="Balance" value="$12,450.00" mono />

// Accent color
<KeyValueRow label="Rate" value="3.5%" mono accent />

// Custom ReactNode value
<KeyValueRow
  label="Status"
  value={<span className="text-green-500">Active</span>}
/>`
    }
  ) }) }) })
] });
export {
  y as default
};
