import { jsxs as l, Fragment as r, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as h, C as o, a as i, bI as a, c as u, P as v, A as b } from "../index-sdOMz8GW.js";
import { ToggleLeft as p, List as g, Grid3x3 as x, Columns3 as f } from "lucide-react";
import "react-router-dom";
import "react-dom";
function C(t) {
  const [n, s] = d("day");
  return /* @__PURE__ */ e(
    a,
    {
      options: [
        { label: "Day", value: "day" },
        { label: "Week", value: "week" },
        { label: "Month", value: "month" }
      ],
      value: n,
      onChange: s,
      size: t.size,
      fullWidth: t.fullWidth
    }
  );
}
const z = () => {
  const [t, n] = d("list"), [s, m] = d("all");
  return /* @__PURE__ */ l(r, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "Segmented Control",
        description: "Glass-material segmented control with prominent backdrop for the active segment. Supports icons, sizes, full-width mode, and disabled options.",
        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(p, { 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(o, { children: /* @__PURE__ */ e(i, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-4 items-start", children: [
      /* @__PURE__ */ l("div", { children: [
        /* @__PURE__ */ e("span", { className: "text-[12px] text-(--macos-tahoe-text-muted) mb-1 block", children: "Small" }),
        /* @__PURE__ */ e(
          a,
          {
            size: "sm",
            options: [
              { label: "Day", value: "day" },
              { label: "Week", value: "week" },
              { label: "Month", value: "month" }
            ],
            value: "day",
            onChange: () => {
            }
          }
        )
      ] }),
      /* @__PURE__ */ l("div", { children: [
        /* @__PURE__ */ e("span", { className: "text-[12px] text-(--macos-tahoe-text-muted) mb-1 block", children: "Medium (default)" }),
        /* @__PURE__ */ e(
          a,
          {
            size: "md",
            options: [
              { label: "Day", value: "day" },
              { label: "Week", value: "week" },
              { label: "Month", value: "month" }
            ],
            value: "week",
            onChange: () => {
            }
          }
        )
      ] }),
      /* @__PURE__ */ l("div", { children: [
        /* @__PURE__ */ e("span", { className: "text-[12px] text-(--macos-tahoe-text-muted) mb-1 block", children: "Large" }),
        /* @__PURE__ */ e(
          a,
          {
            size: "lg",
            options: [
              { label: "Day", value: "day" },
              { label: "Week", value: "week" },
              { label: "Month", value: "month" }
            ],
            value: "month",
            onChange: () => {
            }
          }
        )
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ l(i, { title: "With Icons", className: "mt-2 mb-2", children: [
      /* @__PURE__ */ e(
        a,
        {
          options: [
            {
              label: "List",
              value: "list",
              icon: /* @__PURE__ */ e(g, { className: "h-3.5 w-3.5" })
            },
            {
              label: "Grid",
              value: "grid",
              icon: /* @__PURE__ */ e(x, { className: "h-3.5 w-3.5" })
            },
            {
              label: "Columns",
              value: "columns",
              icon: /* @__PURE__ */ e(f, { className: "h-3.5 w-3.5" })
            }
          ],
          value: t,
          onChange: n
        }
      ),
      /* @__PURE__ */ l("p", { className: "mt-2 text-[12px] text-(--macos-tahoe-text-muted)", children: [
        "Selected: ",
        t
      ] })
    ] }) }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(i, { title: "Full Width", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
      a,
      {
        fullWidth: !0,
        options: [
          { label: "All", value: "all" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" }
        ],
        value: s,
        onChange: m
      }
    ) }) }) }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(i, { title: "With Disabled Option", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
      a,
      {
        options: [
          { label: "Option A", value: "a" },
          { label: "Option B", value: "b", disabled: !0 },
          { label: "Option C", value: "c" }
        ],
        value: "a",
        onChange: () => {
        }
      }
    ) }) }),
    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
      u,
      {
        code: `import { MacOSTahoeSegmentedControl } from '@e-burgos/tucu-ui';

<MacOSTahoeSegmentedControl
  options={[
    { label: 'List', value: 'list', icon: <ListIcon /> },
    { label: 'Grid', value: 'grid', icon: <GridIcon /> },
  ]}
  value={view}
  onChange={setView}
  size="md"
  fullWidth={false}
/>`,
        language: "tsx"
      }
    ) }) }),
    /* @__PURE__ */ e(
      v,
      {
        componentName: "MacOSTahoeSegmentedControl",
        defaultValues: { size: "md", fullWidth: !1 },
        includeProps: ["size", "fullWidth"],
        excludeProps: ["className", "options", "value", "onChange"],
        children: (c) => /* @__PURE__ */ e(C, { ...c })
      }
    ),
    /* @__PURE__ */ e(b, { componentName: "MacOSTahoeSegmentedControl" })
  ] });
};
export {
  z as TahoeSegmentedControlSection,
  z as default
};
