import { jsxs as i, Fragment as p, jsx as a } from "react/jsx-runtime";
import { useState as g } from "react";
import { H as v, C as l, a as d, T as o, s as r, P as N, A as f, c as R } from "../index-sdOMz8GW.js";
import { Circle as w } from "lucide-react";
import "react-router-dom";
import "react-dom";
const V = () => {
  const [c, n] = g(""), [m, h] = g("a"), b = [
    { label: "Primary", color: "primary" },
    { label: "Secondary", color: "secondary" },
    { label: "Danger", color: "danger" },
    { label: "Info", color: "info" },
    { label: "Success", color: "success" },
    { label: "Warning", color: "warning" }
  ], u = [
    { label: "Small", size: "sm" },
    { label: "Medium", size: "md" },
    { label: "Large", size: "lg" },
    { label: "Extra Large", size: "xl" }
  ];
  return /* @__PURE__ */ i(p, { children: [
    /* @__PURE__ */ a(
      v,
      {
        title: "Radio",
        description: "A single radio button component for binary choices.",
        icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50", children: /* @__PURE__ */ a(w, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ i(l, { className: "p-4", children: [
        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Basic Radio" }),
        /* @__PURE__ */ a(
          r,
          {
            label: "Option 1",
            value: "option1",
            checked: c === "option1",
            onChange: (e) => n(e.target.value)
          }
        )
      ] }),
      /* @__PURE__ */ i(l, { className: "p-4", children: [
        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ a(r, { label: "Disabled option", value: "disabled", disabled: !0 })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
      /* @__PURE__ */ i(l, { className: "p-4", children: [
        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
        /* @__PURE__ */ a(
          r,
          {
            label: "Ghost Variant",
            value: "ghost",
            variant: "ghost",
            checked: c === "ghost",
            onChange: (e) => n(e.target.value)
          }
        )
      ] }),
      /* @__PURE__ */ i(l, { className: "p-4", children: [
        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Solid" }),
        /* @__PURE__ */ a(
          r,
          {
            label: "Solid Variant",
            value: "solid",
            variant: "solid",
            checked: c === "solid",
            onChange: (e) => n(e.target.value)
          }
        )
      ] }),
      /* @__PURE__ */ i(l, { className: "p-4", children: [
        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Transparent" }),
        /* @__PURE__ */ a(
          r,
          {
            label: "Transparent Variant",
            value: "transparent",
            variant: "transparent",
            checked: c === "transparent",
            onChange: (e) => n(e.target.value)
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: b.map(({ label: e, color: s }) => /* @__PURE__ */ i(l, { className: "p-4", children: [
      /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: e }),
      /* @__PURE__ */ a(r, { label: `${e} Radio`, value: s, color: s })
    ] }, s)) }) }) }) }),
    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: u.map(({ label: e, size: s }) => /* @__PURE__ */ i(l, { className: "p-4", children: [
      /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: e }),
      /* @__PURE__ */ a(r, { label: `${e} Radio`, value: s, size: s })
    ] }, s)) }) }) }) }),
    /* @__PURE__ */ a(
      N,
      {
        componentName: "Radio",
        defaultValues: {
          label: "Preview Radio",
          variant: "ghost",
          color: "primary",
          size: "md",
          disabled: !1,
          labelPlacement: "end"
        },
        includeProps: [
          "label",
          "variant",
          "color",
          "size",
          "disabled",
          "labelPlacement"
        ],
        excludeProps: ["checked", "onChange", "value"],
        children: (e) => {
          const s = typeof e.label == "string" && e.label.length > 0 ? e.label : "Preview Radio";
          return /* @__PURE__ */ i("div", { className: "space-y-3", children: [
            /* @__PURE__ */ a(
              r,
              {
                ...e,
                label: `${s} A`,
                value: "a",
                checked: m === "a",
                onChange: (t) => h(t.target.value)
              }
            ),
            /* @__PURE__ */ a(
              r,
              {
                ...e,
                label: `${s} B`,
                value: "b",
                checked: m === "b",
                onChange: (t) => h(t.target.value)
              }
            )
          ] });
        }
      }
    ),
    /* @__PURE__ */ a(f, { componentName: "Radio" }),
    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
      R,
      {
        language: "tsx",
        code: `import { Radio } from '@e-burgos/tucu-ui';

<Radio
  label="Option 1"
  value="option1"
  checked={value === 'option1'}
  onChange={(e) => setValue(e.target.value)}
/>

// Variants
<Radio label="Ghost" variant="ghost" value="ghost" />
<Radio label="Solid" variant="solid" value="solid" />
<Radio label="Transparent" variant="transparent" value="transparent" />

// Colors
<Radio label="Primary" color="primary" />
<Radio label="Secondary" color="secondary" />
<Radio label="Danger" color="danger" />
<Radio label="Info" color="info" />
<Radio label="Success" color="success" />
<Radio label="Warning" color="warning" />

// Sizes
<Radio label="Small" size="sm" />
<Radio label="Medium" size="md" />
<Radio label="Large" size="lg" />
<Radio label="Extra Large" size="xl" />`
      }
    ) }) }) })
  ] });
};
export {
  V as default
};
