import { jsxs as l, Fragment as g, jsx as e } from "react/jsx-runtime";
import { useState as n } from "react";
import { H as u, C as a, a as d, T as r, p as c, P as k, A as C, c as N } from "../index-sdOMz8GW.js";
import { CheckSquare as x } from "lucide-react";
import "react-router-dom";
import "react-dom";
const z = () => {
  const [i, h] = n(!1), [t, m] = n(!0), 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" }
  ], p = [
    { label: "Small", size: "sm" },
    { label: "Medium", size: "md" },
    { label: "Large", size: "lg" }
  ];
  return /* @__PURE__ */ l(g, { children: [
    /* @__PURE__ */ e(
      u,
      {
        title: "Checkbox",
        description: "A checkbox component for binary selections.",
        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg border border-green-500/50", children: /* @__PURE__ */ e(x, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { 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-4", children: [
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Checkbox" }),
        /* @__PURE__ */ e(
          c,
          {
            label: "I accept the terms and conditions",
            checked: i,
            onChange: (s) => h(s.target.checked)
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
        /* @__PURE__ */ e(
          c,
          {
            label: "Subscribe to newsletter",
            helperText: "Receive updates via email",
            checked: i,
            onChange: (s) => h(s.target.checked)
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Error" }),
        /* @__PURE__ */ e(
          c,
          {
            label: "Required checkbox",
            error: "This field is required"
          }
        )
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ e(c, { label: "Disabled option", disabled: !0 })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Variants", 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-3 gap-4", children: [
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
        /* @__PURE__ */ e(c, { label: "Ghost Variant", variant: "ghost" })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Solid" }),
        /* @__PURE__ */ e(c, { label: "Solid Variant", variant: "solid" })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Transparent" }),
        /* @__PURE__ */ e(c, { label: "Transparent Variant", variant: "transparent" })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: b.map(({ label: s, color: o }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: s }),
      /* @__PURE__ */ e(c, { label: `${s} Checkbox`, color: o })
    ] }, o)) }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: p.map(({ label: s, size: o }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: s }),
      /* @__PURE__ */ e(c, { label: `${s} Checkbox`, size: o })
    ] }, o)) }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Shapes", 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-4", children: [
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Rounded" }),
        /* @__PURE__ */ e(c, { label: "Rounded Shape", shape: "rounded" })
      ] }),
      /* @__PURE__ */ l(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Square (default)" }),
        /* @__PURE__ */ e(c, { label: "Square Shape", shape: "square" })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      k,
      {
        componentName: "Checkbox",
        defaultValues: {
          label: "Preview Checkbox",
          variant: "ghost",
          color: "primary",
          size: "md",
          shape: "square",
          helperText: "",
          error: "",
          disabled: !1
        },
        includeProps: [
          "label",
          "variant",
          "color",
          "size",
          "shape",
          "helperText",
          "error",
          "disabled"
        ],
        excludeProps: ["checked", "onChange"],
        children: (s) => /* @__PURE__ */ e(
          c,
          {
            ...s,
            checked: t,
            onChange: (o) => m(o.target.checked)
          }
        )
      }
    ),
    /* @__PURE__ */ e(C, { componentName: "Checkbox" }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      N,
      {
        language: "tsx",
        code: `import { Checkbox } from '@e-burgos/tucu-ui';

<Checkbox
  label="I accept the terms and conditions"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

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

// Shapes
<Checkbox label="Rounded" shape="rounded" />
<Checkbox label="Square" shape="square" />

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

// Sizes
<Checkbox label="Small" size="sm" />
<Checkbox label="Medium" size="md" />
<Checkbox label="Large" size="lg" />`
      }
    ) }) }) })
  ] });
};
export {
  z as default
};
