import { jsxs as t, Fragment as T, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as b, C as l, a as i, T as r, w as s, P as w, A as N, c as f } from "../index-sdOMz8GW.js";
import { ToggleRight as B, Save as h } from "lucide-react";
import "react-router-dom";
import "react-dom";
const W = () => {
  const [a, n] = d(!1), [g, m] = d(!0), k = [
    { 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, p] = d({
    primary: !0,
    secondary: !0,
    danger: !0,
    info: !0,
    success: !0,
    warning: !0
  }), C = (o) => () => {
    p((c) => ({
      ...c,
      [o]: !c[o]
    }));
  };
  return /* @__PURE__ */ t(T, { children: [
    /* @__PURE__ */ e(
      b,
      {
        title: "ToggleBar",
        description: "A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles.",
        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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50", children: /* @__PURE__ */ e(B, { 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(l, { 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__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ t(l, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic ToggleBar" }),
        /* @__PURE__ */ e(
          s,
          {
            title: "Enable Notifications",
            checked: a,
            onChange: () => n(!a)
          }
        )
      ] }),
      /* @__PURE__ */ t(l, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Subtitle" }),
        /* @__PURE__ */ e(
          s,
          {
            title: "Dark Mode",
            subTitle: "Switch between light and dark themes",
            checked: a,
            onChange: () => n(!a)
          }
        )
      ] }),
      /* @__PURE__ */ t(l, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Icon" }),
        /* @__PURE__ */ e(
          s,
          {
            title: "Auto Save",
            subTitle: "Automatically save your work",
            icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }),
            checked: a,
            onChange: () => n(!a)
          }
        )
      ] }),
      /* @__PURE__ */ t(l, { className: "p-4", children: [
        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Children" }),
        /* @__PURE__ */ e(
          s,
          {
            title: "Advanced Settings",
            subTitle: "Show advanced configuration options",
            checked: a,
            onChange: () => n(!a),
            children: /* @__PURE__ */ e("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ e(
              r,
              {
                tag: "p",
                className: "text-sm text-gray-600 dark:text-gray-400",
                children: "Additional content appears here when toggle is enabled."
              }
            ) })
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(l, { 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 md:grid-cols-2 xl:grid-cols-3", children: k.map(({ label: o, color: c }) => /* @__PURE__ */ t(l, { className: "p-4", children: [
      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: o }),
      /* @__PURE__ */ e(
        s,
        {
          title: `${o} Toggle`,
          subTitle: "Toggle with inherited Switch color",
          color: c,
          checked: u[c],
          onChange: C(c)
        }
      )
    ] }, c)) }) }) }) }),
    /* @__PURE__ */ e(
      w,
      {
        componentName: "ToggleBar",
        defaultValues: {
          title: "Preview ToggleBar",
          subTitle: "Use the controls to adjust the component",
          color: "primary"
        },
        includeProps: ["title", "subTitle", "color"],
        excludeProps: ["checked", "onChange", "icon", "children"],
        children: (o) => /* @__PURE__ */ e("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ e(
          s,
          {
            ...o,
            icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }),
            checked: g,
            onChange: () => m((c) => !c)
          }
        ) })
      }
    ),
    /* @__PURE__ */ e(N, { componentName: "ToggleBar" }),
    /* @__PURE__ */ e(l, { 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(
      f,
      {
        language: "tsx",
        code: `import { ToggleBar, LucideIcons } from '@e-burgos/tucu-ui';

const [checked, setChecked] = useState(false);

// Basic usage
<ToggleBar
  title="Enable Notifications"
  checked={checked}
  onChange={() => setChecked(!checked)}
/>

// With subtitle
<ToggleBar
  title="Dark Mode"
  subTitle="Switch between light and dark themes"
  checked={checked}
  onChange={() => setChecked(!checked)}
/>

// With icon
<ToggleBar
  title="Auto Save"
  icon={<LucideIcons.Save className="w-5 h-5" />}
  checked={checked}
  onChange={() => setChecked(!checked)}
/>

// Colors
<ToggleBar title="Primary" color="primary" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Secondary" color="secondary" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Danger" color="danger" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Info" color="info" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Success" color="success" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Warning" color="warning" checked={checked} onChange={() => setChecked(!checked)} />

// With children
<ToggleBar
  title="Advanced Settings"
  checked={checked}
  onChange={() => setChecked(!checked)}
>
  <div className="mt-4">
    <p>Additional content here</p>
  </div>
</ToggleBar>`
      }
    ) }) }) })
  ] });
};
export {
  W as default
};
