import { jsxs as t, Fragment as N, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { H as f, C as l, a as n, T as a, as as i, y, P as S, A as w, c as v } from "../index-sdOMz8GW.js";
import { ChevronDown as T, Home as I, User as k, Settings as M } from "lucide-react";
import "react-router-dom";
import "react-dom";
const H = () => {
  const [o, b] = d(0), [m, g] = d(0), [r, x] = d(0), p = [
    { title: "Dashboard", path: "dashboard" },
    { title: "Analytics", path: "analytics" },
    { title: "Reports", path: "reports" },
    { title: "Settings", path: "settings" }
  ], h = [
    {
      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e(I, { size: 16 }),
        "Home"
      ] }),
      path: "home"
    },
    {
      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e(k, { size: 16 }),
        "Profile"
      ] }),
      path: "profile"
    },
    {
      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e(M, { size: 16 }),
        "Settings"
      ] }),
      path: "settings"
    }
  ], c = [
    { title: "Orders", path: "orders" },
    { title: "Products", path: "products" },
    { title: "Customers", path: "customers" },
    { title: "Analytics", path: "analytics" },
    { title: "Marketing", path: "marketing" },
    { title: "Reports", path: "reports" },
    { title: "Integrations", path: "integrations" },
    { title: "Settings", path: "settings" }
  ], u = [
    {
      prop: "title",
      type: "React.ReactNode",
      default: "required",
      description: "Tab label (can be text, JSX, or components)"
    },
    {
      prop: "path",
      type: "string",
      default: "required",
      description: "Unique identifier/route path for the tab"
    }
  ];
  return /* @__PURE__ */ t(N, { children: [
    /* @__PURE__ */ e(
      f,
      {
        title: "TabSelect",
        description: `A mobile-friendly dropdown tab selector with smooth animations and
          transitions, designed for responsive tab navigation in constrained
          spaces.`,
        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(T, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic TabSelect" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
            children: "Standard dropdown selector with text options. Click to expand and select a tab."
          }
        ),
        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
          i,
          {
            tabMenu: p,
            selectedTabIndex: o,
            onChange: b
          }
        ) }),
        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
          "Selected:",
          " ",
          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: p[o].title })
        ] }) })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Icons" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
            children: "Enhanced dropdown with icon support for better visual clarity."
          }
        ),
        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
          i,
          {
            tabMenu: h,
            selectedTabIndex: m,
            onChange: g
          }
        ) }),
        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
          "Current selection:",
          " ",
          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: h[m].path })
        ] }) })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Many Options" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
            children: "Handles large lists efficiently with scrollable dropdown."
          }
        ),
        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
          i,
          {
            tabMenu: c,
            selectedTabIndex: r,
            onChange: x
          }
        ) }),
        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
          "Selected option:",
          " ",
          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: c[r].title }),
          " ",
          "(",
          r + 1,
          " of ",
          c.length,
          ")"
        ] }) })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Use Cases", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Mobile Navigation" }),
        /* @__PURE__ */ t(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
            children: [
              "Perfect for replacing horizontal tab bars on mobile devices where space is limited.",
              /* @__PURE__ */ e("code", { className: "ml-1 text-xs border border-border px-2 py-1 rounded", children: "ParamTab" }),
              " ",
              "automatically switches to TabSelect on mobile breakpoints."
            ]
          }
        ),
        /* @__PURE__ */ e(l, { className: "p-4 bg-blue-50 dark:bg-blue-900/20", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "tip", children: "💡" }),
          " ",
          /* @__PURE__ */ e("span", { className: "font-semibold", children: "Tip:" }),
          " Use TabSelect when you have 4+ tabs and limited horizontal space."
        ] }) })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Form Filters" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
            children: "Use as a filter selector in forms and data tables to switch between different views or data categories."
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Settings Panels" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Navigate between different settings sections in a compact, accessible dropdown format."
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Features", 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__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "palette", children: "🎨" }),
          " ",
          "Smooth Animations"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Chevron rotation and dropdown transitions with translate-y effects."
          }
        )
      ] }),
      /* @__PURE__ */ t(l, { className: "p-4", children: [
        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "moon", children: "🌙" }),
          " ",
          "Dark Mode"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Full dark mode support with automatic theme adaptation."
          }
        )
      ] }),
      /* @__PURE__ */ t(l, { className: "p-4", children: [
        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "lightning", children: "⚡" }),
          " ",
          "Performance"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Optimized rendering with proper key management for large lists."
          }
        )
      ] }),
      /* @__PURE__ */ t(l, { className: "p-4", children: [
        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "target", children: "🎯" }),
          " ",
          "Accessibility"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Keyboard navigation and focus management built-in."
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "TabSelectMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      y,
      {
        columns: [
          {
            key: "prop",
            label: "Prop",
            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s ?? "") })
          },
          {
            key: "type",
            label: "Type",
            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(s ?? "") })
          },
          {
            key: "default",
            label: "Default",
            render: (s) => s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: String(s ?? "") })
          },
          {
            key: "description",
            label: "Description",
            render: (s) => /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s ?? "") })
          }
        ],
        data: u
      }
    ) }) }) }),
    /* @__PURE__ */ e(
      S,
      {
        componentName: "TabSelect",
        title: "TabSelect Playground",
        defaultValues: {
          selectedTabIndex: 0
        },
        excludeProps: ["onChange", "tabMenu"],
        children: (s) => /* @__PURE__ */ e(
          i,
          {
            ...s,
            onChange: () => {
            },
            tabMenu: [
              { title: "Option A" },
              { title: "Option B" },
              { title: "Option C" }
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ e(w, { componentName: "TabSelect" }),
    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      v,
      {
        language: "tsx",
        code: `import { TabSelect } from '@e-burgos/tucu-ui';
import { useState } from 'react';
import { Home, Settings, User } from 'lucide-react';

// Basic usage
function BasicExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const tabMenu = [
    { title: 'Dashboard', path: 'dashboard' },
    { title: 'Analytics', path: 'analytics' },
    { title: 'Reports', path: 'reports' },
    { title: 'Settings', path: 'settings' },
  ];

  return (
    <TabSelect
      tabMenu={tabMenu}
      selectedTabIndex={selectedIndex}
      onChange={setSelectedIndex}
    />
  );
}

// With icons
function IconExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const tabMenu = [
    { 
      title: (
        <span className="flex items-center gap-2">
          <Home size={16} />
          Home
        </span>
      ), 
      path: 'home' 
    },
    { 
      title: (
        <span className="flex items-center gap-2">
          <User size={16} />
          Profile
        </span>
      ), 
      path: 'profile' 
    },
  ];

  return (
    <TabSelect
      tabMenu={tabMenu}
      selectedTabIndex={selectedIndex}
      onChange={setSelectedIndex}
    />
  );
}

// Integration with ParamTab
// ParamTab automatically uses TabSelect on mobile devices
import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';

function ResponsiveTabs() {
  const tabMenu = [
    { title: 'Overview', path: 'overview' },
    { title: 'Details', path: 'details' },
    { title: 'Settings', path: 'settings' },
  ];

  return (
    <ParamTab tabMenu={tabMenu}>
      <TabPanel>Overview content</TabPanel>
      <TabPanel>Details content</TabPanel>
      <TabPanel>Settings content</TabPanel>
    </ParamTab>
  );
}

// Custom styling
function CustomExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const tabMenu = [
    { title: 'Option 1', path: 'opt1' },
    { title: 'Option 2', path: 'opt2' },
  ];

  return (
    <div className="max-w-md">
      <TabSelect
        tabMenu={tabMenu}
        selectedTabIndex={selectedIndex}
        onChange={(index) => {
          console.log('Selected:', tabMenu[index].path);
          setSelectedIndex(index);
        }}
      />
    </div>
  );
}`
      }
    ) }) }) })
  ] });
};
export {
  H as default
};
