import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
import { H as b, C as i, a as n, T as a, at as l, ar as s, y as g, P as u, A as y, c as x } from "../index-sdOMz8GW.js";
import { Hash as f, Home as d, BarChart as m, FileText as h, Settings as c, User as v, Bell as N } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const U = () => {
  const o = [
    { title: "Overview", path: "overview" },
    { title: "Details", path: "details" },
    { title: "Settings", path: "settings" }
  ];
  return /* @__PURE__ */ t(p, { children: [
    /* @__PURE__ */ e(
      b,
      {
        title: "ParamTab",
        description: `A powerful tab component that automatically syncs with URL query
          parameters and switches to a dropdown selector on mobile devices for
          optimal responsive behavior.`,
        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-purple-600 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(f, { 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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Variants", 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: "Underline Variant (Default)" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
            children: "Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."
          }
        ),
        /* @__PURE__ */ t(l, { tabMenu: o, variant: "underline", children: [
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ e(
              a,
              {
                tag: "h3",
                className: "text-base font-semibold mb-2",
                children: "Overview Dashboard"
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Main dashboard content with key metrics and overview information. The URL parameter updates to ?view=overview when this tab is active."
              }
            )
          ] }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ e(
              a,
              {
                tag: "h3",
                className: "text-base font-semibold mb-2",
                children: "Detailed Information"
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Comprehensive details and in-depth analysis. URL parameter: ?view=details"
              }
            )
          ] }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ e(
              a,
              {
                tag: "h3",
                className: "text-base font-semibold mb-2",
                children: "Configuration Settings"
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Manage your preferences and application settings. URL parameter: ?view=settings"
              }
            )
          ] }) })
        ] })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Pills Variant with Icons" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
            children: "Modern rounded pills with icon support for enhanced visual clarity."
          }
        ),
        /* @__PURE__ */ t(l, { tabMenu: [
          {
            title: "Dashboard",
            path: "dashboard",
            icon: /* @__PURE__ */ e(d, { size: 16 })
          },
          {
            title: "Analytics",
            path: "analytics",
            icon: /* @__PURE__ */ e(m, { size: 16 })
          },
          {
            title: "Reports",
            path: "reports",
            icon: /* @__PURE__ */ e(h, { size: 16 })
          },
          {
            title: "Settings",
            path: "settings",
            icon: /* @__PURE__ */ e(c, { size: 16 })
          }
        ], variant: "pills", size: "medium", children: [
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
              /* @__PURE__ */ e(d, { className: "text-brand", size: 24 }),
              /* @__PURE__ */ e(
                a,
                {
                  tag: "h3",
                  className: "text-base font-semibold",
                  children: "Dashboard Home"
                }
              )
            ] }),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Welcome to your dashboard! Here you'll find a summary of your most important information."
              }
            )
          ] }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
              /* @__PURE__ */ e(m, { className: "text-brand", size: 24 }),
              /* @__PURE__ */ e(
                a,
                {
                  tag: "h3",
                  className: "text-base font-semibold",
                  children: "Analytics Overview"
                }
              )
            ] }),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Track your performance with detailed analytics and insights."
              }
            )
          ] }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
              /* @__PURE__ */ e(h, { className: "text-brand", size: 24 }),
              /* @__PURE__ */ e(
                a,
                {
                  tag: "h3",
                  className: "text-base font-semibold",
                  children: "Reports Center"
                }
              )
            ] }),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Generate and view comprehensive reports for your data."
              }
            )
          ] }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
              /* @__PURE__ */ e(c, { className: "text-brand", size: 24 }),
              /* @__PURE__ */ e(
                a,
                {
                  tag: "h3",
                  className: "text-base font-semibold",
                  children: "Application Settings"
                }
              )
            ] }),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Customize your application preferences and configuration."
              }
            )
          ] }) })
        ] })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Bordered Variant" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
            children: "Distinct bordered style with highlighted selection state."
          }
        ),
        /* @__PURE__ */ t(l, { tabMenu: [
          {
            title: "Profile",
            path: "profile",
            icon: /* @__PURE__ */ e(v, { size: 16 })
          },
          {
            title: "Notifications",
            path: "notifications",
            icon: /* @__PURE__ */ e(N, { size: 16 })
          },
          {
            title: "Settings",
            path: "settings",
            icon: /* @__PURE__ */ e(c, { size: 16 })
          }
        ], variant: "bordered", children: [
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ e(
              a,
              {
                tag: "h3",
                className: "text-base font-semibold mb-2",
                children: "User Profile"
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Manage your personal information and profile settings."
              }
            )
          ] }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ e(
              a,
              {
                tag: "h3",
                className: "text-base font-semibold mb-2",
                children: "Notifications"
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Configure how and when you receive notifications."
              }
            )
          ] }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(i, { className: "p-6", children: [
            /* @__PURE__ */ e(
              a,
              {
                tag: "h3",
                className: "text-base font-semibold mb-2",
                children: "Account Settings"
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                tag: "p",
                className: "text-gray-600 dark:text-gray-400",
                children: "Manage your account security and privacy settings."
              }
            )
          ] }) })
        ] })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Solid Variant (Small Size)" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
            children: "Compact solid background style perfect for space-constrained layouts."
          }
        ),
        /* @__PURE__ */ t(l, { tabMenu: o, variant: "solid", size: "small", children: [
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
            a,
            {
              tag: "p",
              className: "text-gray-600 dark:text-gray-400",
              children: "Compact overview content with small tab size."
            }
          ) }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
            a,
            {
              tag: "p",
              className: "text-gray-600 dark:text-gray-400",
              children: "Detailed information in a compact format."
            }
          ) }) }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "p-6", children: /* @__PURE__ */ e(
            a,
            {
              tag: "p",
              className: "text-gray-600 dark:text-gray-400",
              children: "Settings panel with space-efficient design."
            }
          ) }) })
        ] })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Key Features", 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__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "link", children: "🔗" }),
          " ",
          "URL Synchronization"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
            children: "Automatically syncs tab state with URL query parameters (e.g., ?view=overview). This enables:"
          }
        ),
        /* @__PURE__ */ t("ul", { className: "list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4", children: [
          /* @__PURE__ */ e("li", { children: "Deep linking to specific tabs" }),
          /* @__PURE__ */ e("li", { children: "Browser back/forward navigation" }),
          /* @__PURE__ */ e("li", { children: "Shareable URLs with selected tab state" }),
          /* @__PURE__ */ e("li", { children: "Bookmark support for specific views" })
        ] })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "mobile", children: "📱" }),
          " ",
          "Responsive Mobile Adaptation"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
            children: "Automatically switches to TabSelect dropdown on mobile devices (xs, sm breakpoints) for optimal space usage and better UX."
          }
        ),
        /* @__PURE__ */ e(i, { 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:" }),
          " Resize your browser window to see the automatic switch between tab bar and dropdown selector!"
        ] }) })
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "styles", children: "🎨" }),
          " ",
          "Multiple Style Variants"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Choose from 4 distinct visual styles (underline, pills, bordered, solid) and 3 sizes (small, medium, large) to match your design system."
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
          /* @__PURE__ */ e("span", { role: "img", "aria-label": "icons", children: "✨" }),
          " ",
          "Icon Support"
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Add icons to tabs for better visual communication and improved scannability. Works seamlessly with Lucide Icons."
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "TabMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      g,
      {
        columns: [
          {
            key: "prop",
            label: "Prop",
            render: (r) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: r })
          },
          {
            key: "type",
            label: "Type",
            render: (r) => /* @__PURE__ */ e("code", { className: "text-xs", children: r })
          },
          {
            key: "default",
            label: "Default",
            render: (r) => r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r })
          },
          {
            key: "description",
            label: "Description",
            className: "text-gray-600 dark:text-gray-400"
          }
        ],
        data: [
          {
            prop: "title",
            type: "React.ReactNode",
            default: "required",
            description: "Tab label (can be text, JSX, or components)"
          },
          {
            prop: "path",
            type: "string",
            default: "required",
            description: 'Unique path for URL parameter (e.g., "overview")'
          },
          {
            prop: "icon",
            type: "React.ReactNode",
            default: "-",
            description: "Optional icon to display before tab label"
          }
        ],
        maxRows: 10,
        resizable: !1
      }
    ) }) }) }),
    /* @__PURE__ */ e(
      u,
      {
        componentName: "ParamTab",
        title: "ParamTab Playground",
        defaultValues: {
          variant: "solid",
          size: "medium",
          showMobileSelect: !1
        },
        excludeProps: ["tabMenu", "tabListClassName"],
        children: (r) => /* @__PURE__ */ e(
          l,
          {
            ...r,
            tabMenu: [
              { title: "Tab 1", path: "#tab1" },
              { title: "Tab 2", path: "#tab2" },
              { title: "Tab 3", path: "#tab3" }
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ e(y, { componentName: "ParamTab" }),
    /* @__PURE__ */ e(i, { 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(
      x,
      {
        language: "tsx",
        code: `import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
import { Home, Settings, User } from 'lucide-react';

// Basic usage with URL sync
function BasicExample() {
const tabMenu = [
  { title: 'Overview', path: 'overview' },
  { title: 'Details', path: 'details' },
  { title: 'Settings', path: 'settings' },
];

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

// Pills variant with icons
function PillsWithIcons() {
  const tabMenu = [
    {
      title: 'Dashboard',
      path: 'dashboard',
      icon: <Home size={16} />,
    },
    {
      title: 'Profile',
      path: 'profile',
      icon: <User size={16} />,
    },
    {
      title: 'Settings',
      path: 'settings',
      icon: <Settings size={16} />,
    },
  ];

  return (
    <ParamTab tabMenu={tabMenu} variant="pills" size="medium">
      <TabPanel>Dashboard content</TabPanel>
      <TabPanel>Profile content</TabPanel>
      <TabPanel>Settings content</TabPanel>
    </ParamTab>
  );
}

// Bordered variant
function BorderedExample() {
  const tabMenu = [
    { title: 'Tab 1', path: 'tab1' },
    { title: 'Tab 2', path: 'tab2' },
  ];

  return (
    <ParamTab tabMenu={tabMenu} variant="bordered">
      <TabPanel>Content 1</TabPanel>
      <TabPanel>Content 2</TabPanel>
    </ParamTab>
  );
}

// Solid variant with small size
function CompactExample() {
  const tabMenu = [
    { title: 'View 1', path: 'view1' },
    { title: 'View 2', path: 'view2' },
  ];

  return (
    <ParamTab tabMenu={tabMenu} variant="solid" size="small">
      <TabPanel>Compact content 1</TabPanel>
      <TabPanel>Compact content 2</TabPanel>
    </ParamTab>
  );
}

// How it works:
// 1. Component reads current URL parameter (?view=overview)
// 2. Matches it with tabMenu path to set active tab
// 3. When user clicks tab, URL updates automatically
// 4. On mobile (xs, sm), shows TabSelect dropdown
// 5. On desktop, shows regular tab bar
// 6. Browser back/forward buttons work seamlessly`
      }
    ) }) }) })
  ] });
};
export {
  U as default
};
