import { jsxs as c, Fragment as w, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as C, C as a, a as i, T as r, u as l, P as u, A as f, c as N } from "../index-sdOMz8GW.js";
import { ToggleLeft as S } from "lucide-react";
import "react-router-dom";
import "react-dom";
const v = [
  { label: "Primary", color: "primary" },
  { label: "Secondary", color: "secondary" },
  { label: "Danger", color: "danger" },
  { label: "Info", color: "info" },
  { label: "Success", color: "success" },
  { label: "Warning", color: "warning" }
], D = () => {
  const [s, n] = d(!1), [t, m] = d(!0), [g, b] = d({
    primary: !0,
    secondary: !0,
    danger: !0,
    info: !0,
    success: !0,
    warning: !0
  }), p = (h) => (o) => {
    b((k) => ({
      ...k,
      [h]: o
    }));
  };
  return /* @__PURE__ */ c(w, { children: [
    /* @__PURE__ */ e(
      C,
      {
        title: "Switch",
        description: "A toggle switch component for binary on/off states.",
        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-emerald-500 via-green-500 to-lime-500 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50", children: /* @__PURE__ */ e(S, { 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(i, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ c("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Switch" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Enable notifications",
            checked: s,
            onChange: n
          }
        )
      ] }),
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Custom Labels" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Dark mode",
            onLabel: "ON",
            offLabel: "OFF",
            checked: s,
            onChange: n
          }
        )
      ] }),
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Auto-save",
            helperText: "Automatically save your work",
            checked: s,
            onChange: n
          }
        )
      ] }),
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Error" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Required switch",
            errorMessage: "This field is required",
            checked: s,
            onChange: n
          }
        )
      ] }),
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Disabled" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Disabled switch",
            disabled: !0,
            checked: s,
            onChange: n
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ c("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Ghost Variant",
            variant: "ghost",
            checked: s,
            onChange: n
          }
        )
      ] }),
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Solid" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Solid Variant",
            variant: "solid",
            checked: s,
            onChange: n
          }
        )
      ] }),
      /* @__PURE__ */ c(a, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Transparent" }),
        /* @__PURE__ */ e(
          l,
          {
            label: "Transparent Variant",
            variant: "transparent",
            checked: s,
            onChange: n
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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: v.map(({ label: h, color: o }) => /* @__PURE__ */ c(a, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: h }),
      /* @__PURE__ */ e(
        l,
        {
          label: `${h} Switch`,
          color: o,
          checked: g[o],
          onChange: p(o)
        }
      )
    ] }, o)) }) }) }) }),
    /* @__PURE__ */ e(
      u,
      {
        componentName: "Switch",
        defaultValues: {
          label: "Preview Switch",
          onLabel: "ON",
          offLabel: "OFF",
          variant: "ghost",
          color: "primary",
          helperText: "",
          errorMessage: "",
          disabled: !1
        },
        includeProps: [
          "label",
          "onLabel",
          "offLabel",
          "variant",
          "color",
          "helperText",
          "errorMessage",
          "disabled"
        ],
        excludeProps: ["checked", "onChange"],
        children: (h) => /* @__PURE__ */ e(
          l,
          {
            ...h,
            checked: t,
            onChange: m
          }
        )
      }
    ),
    /* @__PURE__ */ e(f, { componentName: "Switch" }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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 { Switch } from '@e-burgos/tucu-ui';

<Switch
  label="Enable notifications"
  checked={checked}
  onChange={setChecked}
/>

<Switch
  label="Dark mode"
  onLabel="ON"
  offLabel="OFF"
  checked={checked}
  onChange={setChecked}
/>

// Variants
<Switch label="Ghost" variant="ghost" checked={checked} onChange={setChecked} />
<Switch label="Solid" variant="solid" checked={checked} onChange={setChecked} />
<Switch label="Transparent" variant="transparent" checked={checked} onChange={setChecked} />

// Colors
<Switch label="Primary" color="primary" checked={checked} onChange={setChecked} />
<Switch label="Secondary" color="secondary" checked={checked} onChange={setChecked} />
<Switch label="Danger" color="danger" checked={checked} onChange={setChecked} />
<Switch label="Info" color="info" checked={checked} onChange={setChecked} />
<Switch label="Success" color="success" checked={checked} onChange={setChecked} />
<Switch label="Warning" color="warning" checked={checked} onChange={setChecked} />`
      }
    ) }) }) })
  ] });
};
export {
  D as default
};
