"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),t=require("../index-DEZRGktf.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const h=()=>{const[l,s]=o.useState(!1),[r,n]=o.useState(!1),[c,i]=o.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"TabModal",description:`A modal dialog with built-in tab navigation, header with icon/badge,
          expandable footer, and mobile-first responsive design.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-orange-500 to-amber-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.SquareStack,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Tabs"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open TabModal (Tabs)"}),r&&e.jsx(t.TabModal,{icon:a.Activity,title:"Dashboard",subtitle:"View your activity and stats",badgeHeader:"LIVE",badgeHeaderClassName:"text-green-600 bg-green-100 border-green-300",tabs:[{icon:a.BarChart3,name:"Overview",content:e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h5",children:"Overview Tab"}),e.jsx(t.Typography,{tag:"p",children:"This is the overview content with charts and metrics."})]})},{icon:a.Settings,name:"Settings",content:e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h5",children:"Settings Tab"}),e.jsx(t.Typography,{tag:"p",children:"Configure your preferences here."})]})}],footerLabel:"Last updated: 2 minutes ago",successButton:{label:"Save",onClick:()=>n(!1)},onClose:()=>n(!1)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Direct Content"}),e.jsx(t.Button,{onClick:()=>i(!0),children:"Open TabModal (Content)"}),c&&e.jsx(t.TabModal,{icon:a.Settings,title:"Preferences",subtitle:"Manage your account settings",content:e.jsx("div",{className:"space-y-4",children:e.jsxs(t.Typography,{tag:"p",children:["When you pass the ",e.jsx("code",{children:"content"})," prop directly, the tab bar is hidden and this content fills the body."]})}),onClose:()=>i(!1)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Minimal (No Tabs, No Content)"}),e.jsx(t.Button,{onClick:()=>s(!0),children:"Open Minimal TabModal"}),l&&e.jsx(t.TabModal,{title:"Confirmation",successButton:{label:"Confirm",onClick:()=>s(!1)},closeButton:{label:"Cancel",onClick:()=>s(!1)},onClose:()=>s(!1)})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"TabModal",title:"TabModal Playground",defaultValues:{title:"Modal Title",subtitle:"Modal subtitle",footerLabel:"Footer text",closeLabel:"Cancel"},excludeProps:["onClose","tabs","content","icon","className","closeButton","successButton","badgeHeader","badgeHeaderClassName"],children:d=>e.jsx(t.TabModal,{...d,onClose:()=>{},tabs:[{title:"Tab 1",content:e.jsx(t.Typography,{tag:"p",children:"Content 1"})},{title:"Tab 2",content:e.jsx(t.Typography,{tag:"p",children:"Content 2"})}]})}),e.jsx(t.AutoPropsTable,{componentName:"TabModal"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { TabModal } from '@e-burgos/tucu-ui';
import { Activity, BarChart3, Settings } from 'lucide-react';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open</button>
      {isOpen && (
        <TabModal
          icon={Activity}
          title="Dashboard"
          subtitle="Activity overview"
          badgeHeader="LIVE"
          tabs={[
            {
              icon: BarChart3,
              name: 'Overview',
              content: <div>Overview content</div>,
            },
            {
              icon: Settings,
              name: 'Settings',
              content: <div>Settings content</div>,
            },
          ]}
          footerLabel="Last updated: 2 min ago"
          successButton={{ label: 'Save', onClick: () => setIsOpen(false) }}
          onClose={() => setIsOpen(false)}
        />
      )}
    </>
  );
}

// Direct content (no tabs)
<TabModal
  title="Preferences"
  content={<div>Direct body content</div>}
  onClose={() => setIsOpen(false)}
/>

// With expandable footer label
<TabModal
  title="Details"
  content={<div>Body</div>}
  footerLabel="Long description that expands on click..."
  onClose={() => setIsOpen(false)}
/>`})})})})]})};exports.default=h;
