"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("../index-DEZRGktf.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const u=()=>{const[l,t]=o.useState(!1),[n,d]=o.useState(!0),i=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],[h,g]=o.useState({primary:!0,secondary:!0,danger:!0,info:!0,success:!0,warning:!0}),m=s=>()=>{g(c=>({...c,[s]:!c[s]}))};return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"ToggleBar",description:"A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50",children:e.jsx(r.ToggleRight,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic ToggleBar"}),e.jsx(a.ToggleBar,{title:"Enable Notifications",checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Subtitle"}),e.jsx(a.ToggleBar,{title:"Dark Mode",subTitle:"Switch between light and dark themes",checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Icon"}),e.jsx(a.ToggleBar,{title:"Auto Save",subTitle:"Automatically save your work",icon:e.jsx(r.Save,{className:"w-5 h-5"}),checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Children"}),e.jsx(a.ToggleBar,{title:"Advanced Settings",subTitle:"Show advanced configuration options",checked:l,onChange:()=>t(!l),children:e.jsx("div",{className:"mt-4 space-y-2",children:e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Additional content appears here when toggle is enabled."})})})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",children:i.map(({label:s,color:c})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:s}),e.jsx(a.ToggleBar,{title:`${s} Toggle`,subTitle:"Toggle with inherited Switch color",color:c,checked:h[c],onChange:m(c)})]},c))})})})}),e.jsx(a.PropPlayground,{componentName:"ToggleBar",defaultValues:{title:"Preview ToggleBar",subTitle:"Use the controls to adjust the component",color:"primary"},includeProps:["title","subTitle","color"],excludeProps:["checked","onChange","icon","children"],children:s=>e.jsx("div",{className:"w-full max-w-2xl",children:e.jsx(a.ToggleBar,{...s,icon:e.jsx(r.Save,{className:"w-5 h-5"}),checked:n,onChange:()=>d(c=>!c)})})}),e.jsx(a.AutoPropsTable,{componentName:"ToggleBar"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { ToggleBar, LucideIcons } from '@e-burgos/tucu-ui';

const [checked, setChecked] = useState(false);

// Basic usage
<ToggleBar
  title="Enable Notifications"
  checked={checked}
  onChange={() => setChecked(!checked)}
/>

// With subtitle
<ToggleBar
  title="Dark Mode"
  subTitle="Switch between light and dark themes"
  checked={checked}
  onChange={() => setChecked(!checked)}
/>

// With icon
<ToggleBar
  title="Auto Save"
  icon={<LucideIcons.Save className="w-5 h-5" />}
  checked={checked}
  onChange={() => setChecked(!checked)}
/>

// Colors
<ToggleBar title="Primary" color="primary" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Secondary" color="secondary" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Danger" color="danger" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Info" color="info" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Success" color="success" checked={checked} onChange={() => setChecked(!checked)} />
<ToggleBar title="Warning" color="warning" checked={checked} onChange={() => setChecked(!checked)} />

// With children
<ToggleBar
  title="Advanced Settings"
  checked={checked}
  onChange={() => setChecked(!checked)}
>
  <div className="mt-4">
    <p>Additional content here</p>
  </div>
</ToggleBar>`})})})})]})};exports.default=u;
