import { jsxs as d, Fragment as m, jsx as e } from "react/jsx-runtime";
import { useState as r } from "react";
import { H as u, C as a, a as t, bu as n, P as v, A as h, c as p } from "../index-sdOMz8GW.js";
import { ToggleLeft as b, LayoutGrid as f, List as g, Columns3 as w } from "lucide-react";
import "react-router-dom";
import "react-dom";
function N(i) {
  const [o, s] = r("tab1");
  return /* @__PURE__ */ e("div", { className: "w-full max-w-lg mx-auto", children: /* @__PURE__ */ e(
    n,
    {
      ...i,
      value: o,
      onChange: s,
      options: [
        { label: "General", value: "tab1" },
        { label: "Privacy", value: "tab2" },
        { label: "Advanced", value: "tab3" }
      ]
    }
  ) });
}
const A = () => {
  const [i, o] = r("general"), [s, c] = r("grid");
  return /* @__PURE__ */ d(m, { children: [
    /* @__PURE__ */ e(
      u,
      {
        title: "SegmentedControl",
        description: "A macOS-style segmented control (tab bar) with animated sliding indicator, icon+text options, keyboard navigation, size variants, and full-width mode.",
        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-teal-500 via-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg border border-teal-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(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "With Icons", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center", children: /* @__PURE__ */ e(
      n,
      {
        value: s,
        onChange: c,
        options: [
          { label: "Grid", value: "grid", icon: /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5" }) },
          { label: "List", value: "list", icon: /* @__PURE__ */ e(g, { className: "w-3.5 h-3.5" }) },
          { label: "Column", value: "column", icon: /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5" }) }
        ]
      }
    ) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Text Only — Full Width", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      n,
      {
        value: i,
        onChange: o,
        fullWidth: !0,
        options: [
          { label: "General", value: "general" },
          { label: "Privacy", value: "privacy" },
          { label: "Security", value: "security" },
          { label: "Advanced", value: "advanced" }
        ]
      }
    ) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 space-y-4", children: ["sm", "md", "lg"].map((l) => /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
      /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-8", children: l }),
      /* @__PURE__ */ e(
        n,
        {
          size: l,
          value: "a",
          onChange: () => {
          },
          options: [
            { label: "Alpha", value: "a" },
            { label: "Beta", value: "b" },
            { label: "Gamma", value: "c" }
          ]
        }
      )
    ] }, l)) }) }) }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Disabled Option", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center", children: /* @__PURE__ */ e(
      n,
      {
        value: "on",
        onChange: () => {
        },
        options: [
          { label: "On", value: "on" },
          { label: "Off", value: "off" },
          { label: "Unavailable", value: "na", disabled: !0 }
        ]
      }
    ) }) }) }),
    /* @__PURE__ */ e(
      v,
      {
        componentName: "MacOSSegmentedControl",
        defaultValues: {
          size: "md",
          fullWidth: !1
        },
        controlOverrides: [
          { name: "size", type: "select", options: ["sm", "md", "lg"], description: "Control size" },
          { name: "fullWidth", type: "boolean", description: "Stretch to fill container width" }
        ],
        includeProps: ["size", "fullWidth"],
        excludeProps: ["className", "options", "value", "onChange"],
        children: (l) => /* @__PURE__ */ e(N, { ...l })
      }
    ),
    /* @__PURE__ */ e(h, { componentName: "MacOSSegmentedControl" }),
    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      p,
      {
        language: "tsx",
        code: `import { MacOSSegmentedControl } from '@e-burgos/tucu-ui';

function TabsDemo() {
  const [value, setValue] = useState('general');

  return (
    <MacOSSegmentedControl
      value={value}
      onChange={setValue}
      size="md"        // 'sm' | 'md' | 'lg'
      fullWidth={false}
      options={[
        { label: 'General', value: 'general' },
        { label: 'Privacy', value: 'privacy', icon: <LockIcon /> },
        { label: 'Disabled', value: 'x', disabled: true },
      ]}
    />
  );
}`
      }
    ) }) }) })
  ] });
};
export {
  A as MacOSSegmentedControlSection,
  A as default
};
