import { jsxs as e, Fragment as g, jsx as l } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as v, C as a, a as t, T as i, t as o, P as N, A as f, c as G } from "../index-sdOMz8GW.js";
import { CircleDot as w } from "lucide-react";
import "react-router-dom";
import "react-dom";
const P = () => {
  const [c, p] = d(""), [m, u] = d("starter"), h = [
    { label: "Primary", color: "primary" },
    { label: "Secondary", color: "secondary" },
    { label: "Danger", color: "danger" },
    { label: "Info", color: "info" },
    { label: "Success", color: "success" },
    { label: "Warning", color: "warning" }
  ], b = [
    { label: "Small", size: "sm" },
    { label: "Medium", size: "md" },
    { label: "Large", size: "lg" },
    { label: "Extra Large", size: "xl" }
  ], n = [
    { value: "male", label: "Male" },
    { value: "female", label: "Female" },
    { value: "other", label: "Other" }
  ];
  return /* @__PURE__ */ e(g, { children: [
    /* @__PURE__ */ l(
      v,
      {
        title: "RadioGroup",
        description: "A group of radio buttons for selecting one option from multiple choices.",
        icon: /* @__PURE__ */ l("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-indigo-500/50", children: /* @__PURE__ */ l(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__ */ l(a, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Basic RadioGroup" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Gender",
            options: n,
            value: c,
            onChange: (r) => p(r)
          }
        )
      ] }),
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Size",
            helperText: "Select your preferred size",
            options: [
              { value: "small", label: "Small" },
              { value: "medium", label: "Medium" },
              { value: "large", label: "Large" }
            ]
          }
        )
      ] }),
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "With Error" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Priority",
            error: "Please select a priority",
            options: [
              { value: "low", label: "Low" },
              { value: "high", label: "High" }
            ]
          }
        )
      ] }),
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Status",
            disabled: !0,
            options: [
              { value: "active", label: "Active" },
              { value: "inactive", label: "Inactive" }
            ]
          }
        )
      ] }),
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Horizontal Layout" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Direction",
            direction: "horizontal",
            options: [
              { value: "vertical", label: "Vertical" },
              { value: "horizontal", label: "Horizontal" }
            ]
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ l(a, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Ghost Variant",
            variant: "ghost",
            options: [
              { value: "opt1", label: "Option 1" },
              { value: "opt2", label: "Option 2" }
            ]
          }
        )
      ] }),
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Solid" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Solid Variant",
            variant: "solid",
            options: [
              { value: "opt1", label: "Option 1" },
              { value: "opt2", label: "Option 2" }
            ]
          }
        )
      ] }),
      /* @__PURE__ */ e(a, { className: "p-4", children: [
        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Transparent" }),
        /* @__PURE__ */ l(
          o,
          {
            label: "Transparent Variant",
            variant: "transparent",
            options: [
              { value: "opt1", label: "Option 1" },
              { value: "opt2", label: "Option 2" }
            ]
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ l(a, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: h.map(({ label: r, color: s }) => /* @__PURE__ */ e(a, { className: "p-4", children: [
      /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: r }),
      /* @__PURE__ */ l(
        o,
        {
          label: `${r} Group`,
          color: s,
          options: n
        }
      )
    ] }, s)) }) }) }) }),
    /* @__PURE__ */ l(a, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: b.map(({ label: r, size: s }) => /* @__PURE__ */ e(a, { className: "p-4", children: [
      /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: r }),
      /* @__PURE__ */ l(
        o,
        {
          label: `${r} Group`,
          size: s,
          options: n
        }
      )
    ] }, s)) }) }) }) }),
    /* @__PURE__ */ l(
      N,
      {
        componentName: "RadioGroup",
        defaultValues: {
          label: "Preview RadioGroup",
          variant: "ghost",
          color: "primary",
          size: "md",
          labelPlacement: "end",
          disabled: !1,
          helperText: "",
          error: "",
          direction: "vertical",
          gap: "md"
        },
        includeProps: [
          "label",
          "variant",
          "color",
          "size",
          "labelPlacement",
          "disabled",
          "helperText",
          "error",
          "direction",
          "gap"
        ],
        excludeProps: [
          "options",
          "value",
          "defaultValue",
          "children",
          "onChange"
        ],
        children: (r) => /* @__PURE__ */ l("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ l(
          o,
          {
            ...r,
            options: [
              { value: "starter", label: "Starter" },
              { value: "growth", label: "Growth" },
              { value: "scale", label: "Scale" }
            ],
            value: m,
            onChange: (s) => u(String(s))
          }
        ) })
      }
    ),
    /* @__PURE__ */ l(f, { componentName: "RadioGroup" }),
    /* @__PURE__ */ l(a, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l(
      G,
      {
        language: "TS",
        code: `import { RadioGroup } from '@e-burgos/tucu-ui';

const options = [
  { value: 'male', label: 'Male' },
  { value: 'female', label: 'Female' },
  { value: 'other', label: 'Other' },
];

<RadioGroup
  label="Gender"
  options={options}
  value={value}
  onChange={(value) => setValue(value)}
/>

// Variants
<RadioGroup label="Ghost" variant="ghost" options={options} />
<RadioGroup label="Solid" variant="solid" options={options} />
<RadioGroup label="Transparent" variant="transparent" options={options} />

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

// Sizes
<RadioGroup label="Small" size="sm" options={options} />
<RadioGroup label="Medium" size="md" options={options} />
<RadioGroup label="Large" size="lg" options={options} />
<RadioGroup label="Extra Large" size="xl" options={options} />

// Layout
<RadioGroup label="Horizontal" direction="horizontal" options={options} />
<RadioGroup label="Vertical" direction="vertical" options={options} />`
      }
    ) }) }) })
  ] });
};
export {
  P as default
};
