@stfrigerio/sito-template 0.1.36 → 0.1.37

package/storybook-static/assets/TextInput.stories-CtvOb60q.js

@@ -0,0 +1,203 @@
+import{j as e,r as l}from"./iframe-BUaP2gIF.js";import{T as r}from"./TextInput-ZGg8LTL_.js";import"./preload-helper-C1FmrZbK.js";const re={title:"Atoms/TextInput",component:r,parameters:{layout:"centered",docs:{description:{component:"A simple wrapper around Input component for text input with controlled state management."}}},tags:["autodocs"],argTypes:{label:{control:"text",description:"Label text for the input"},value:{control:"text",description:"Current value of the input"},placeholder:{control:"text",description:"Placeholder text"},error:{control:"text",description:"Error message to display"},type:{control:"select",options:["text","email","password","tel","url"],description:"Input type"},required:{control:"boolean",description:"Whether the input is required"},onChange:{action:"changed"},onFocus:{action:"focused"},onBlur:{action:"blurred"}}},d={args:{label:"Name",value:"",placeholder:"Enter your name",onChange:()=>{}}},i={args:{label:"Username",value:"john_doe",placeholder:"Enter username",onChange:()=>{}}},p={args:{label:"Email Address",value:"",type:"email",placeholder:"john.doe@example.com",onChange:()=>{}}},u={args:{label:"Password",value:"",type:"password",placeholder:"Enter password",onChange:()=>{}}},m={args:{label:"Phone Number",value:"",type:"tel",placeholder:"+1 (555) 123-4567",onChange:()=>{}}},c={args:{label:"Required Field",value:"",placeholder:"This field is required",required:!0,onChange:()=>{}}},h={args:{label:"Email",value:"invalid-email",type:"email",error:"Please enter a valid email address",onChange:()=>{}}},g={args:{label:"Full Name",value:"",placeholder:"Enter your full name",onChange:()=>{}},render:()=>{const[n,v]=l.useState(""),[o,w]=l.useState(""),[a,t]=l.useState("");return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",width:"300px"},children:[e.jsx(r,{label:"Full Name",value:n,onChange:v,placeholder:"Enter your full name"}),e.jsx(r,{label:"Email",type:"email",value:o,onChange:w,placeholder:"john.doe@example.com"}),e.jsx(r,{label:"Password",type:"password",value:a,onChange:t,placeholder:"Enter password"}),e.jsxs("div",{style:{marginTop:"1rem",padding:"1rem",background:"#f5f5f5",borderRadius:"4px"},children:[e.jsx("p",{style:{margin:0,fontSize:"0.875rem"},children:e.jsx("strong",{children:"Form Values:"})}),e.jsxs("ul",{style:{margin:"0.5rem 0 0",paddingLeft:"1.5rem",fontSize:"0.875rem"},children:[e.jsxs("li",{children:["Name: ",n||"(empty)"]}),e.jsxs("li",{children:["Email: ",o||"(empty)"]}),e.jsxs("li",{children:["Password: ",a?"•".repeat(a.length):"(empty)"]})]})]})]})},parameters:{controls:{disable:!0}}},x={args:{label:"Username",value:"",placeholder:"Enter username",required:!0,onChange:()=>{}},render:()=>{const[n,v]=l.useState(""),[o,w]=l.useState(""),[a,t]=l.useState({}),Y=()=>{const s={};n||(s.username="Username is required"),o?o.length<6&&(s.password="Password must be at least 6 characters"):s.password="Password is required",t(s)};return e.jsxs("div",{style:{padding:"2rem",background:"#fff",border:"1px solid #e0e0e0",borderRadius:"8px",maxWidth:"400px"},children:[e.jsx("h3",{style:{marginTop:0,marginBottom:"1.5rem"},children:"Login"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[e.jsx(r,{label:"Username",value:n,onChange:s=>{v(s),a.username&&t(y=>({...y,username:void 0}))},placeholder:"Enter username",error:a.username,required:!0}),e.jsx(r,{label:"Password",type:"password",value:o,onChange:s=>{w(s),a.password&&t(y=>({...y,password:void 0}))},placeholder:"Enter password",error:a.password,required:!0}),e.jsx("button",{type:"button",onClick:Y,style:{padding:"0.75rem 1rem",backgroundColor:"#007bff",color:"white",border:"none",borderRadius:"4px",cursor:"pointer",marginTop:"0.5rem"},children:"Login"})]})]})},parameters:{controls:{disable:!0}}},b={args:{label:"Text Input",value:"",placeholder:"Regular text",onChange:()=>{}},render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",width:"300px"},children:[e.jsx(r,{label:"Text Input",value:"",onChange:()=>{},placeholder:"Regular text"}),e.jsx(r,{label:"Email Input",type:"email",value:"",onChange:()=>{},placeholder:"email@example.com"}),e.jsx(r,{label:"Password Input",type:"password",value:"",onChange:()=>{},placeholder:"Password"}),e.jsx(r,{label:"Phone Input",type:"tel",value:"",onChange:()=>{},placeholder:"+1 (555) 123-4567"}),e.jsx(r,{label:"URL Input",type:"url",value:"",onChange:()=>{},placeholder:"https://example.com"}),e.jsx(r,{label:"Required Field",required:!0,value:"",onChange:()=>{},placeholder:"Required"}),e.jsx(r,{label:"With Error",error:"This field has an error",value:"",onChange:()=>{}})]}),parameters:{controls:{disable:!0}}};var f,E,C;d.parameters={...d.parameters,docs:{...(f=d.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  args: {
+    label: 'Name',
+    value: '',
+    placeholder: 'Enter your name',
+    onChange: () => {}
+  }
+}`,...(C=(E=d.parameters)==null?void 0:E.docs)==null?void 0:C.source}}};var j,P,T;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  args: {
+    label: 'Username',
+    value: 'john_doe',
+    placeholder: 'Enter username',
+    onChange: () => {}
+  }
+}`,...(T=(P=i.parameters)==null?void 0:P.docs)==null?void 0:T.source}}};var I,S,q;p.parameters={...p.parameters,docs:{...(I=p.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  args: {
+    label: 'Email Address',
+    value: '',
+    type: 'email',
+    placeholder: 'john.doe@example.com',
+    onChange: () => {}
+  }
+}`,...(q=(S=p.parameters)==null?void 0:S.docs)==null?void 0:q.source}}};var R,F,N;u.parameters={...u.parameters,docs:{...(R=u.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    label: 'Password',
+    value: '',
+    type: 'password',
+    placeholder: 'Enter password',
+    onChange: () => {}
+  }
+}`,...(N=(F=u.parameters)==null?void 0:F.docs)==null?void 0:N.source}}};var U,L,W;m.parameters={...m.parameters,docs:{...(U=m.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  args: {
+    label: 'Phone Number',
+    value: '',
+    type: 'tel',
+    placeholder: '+1 (555) 123-4567',
+    onChange: () => {}
+  }
+}`,...(W=(L=m.parameters)==null?void 0:L.docs)==null?void 0:W.source}}};var k,D,A;c.parameters={...c.parameters,docs:{...(k=c.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  args: {
+    label: 'Required Field',
+    value: '',
+    placeholder: 'This field is required',
+    required: true,
+    onChange: () => {}
+  }
+}`,...(A=(D=c.parameters)==null?void 0:D.docs)==null?void 0:A.source}}};var z,V,_;h.parameters={...h.parameters,docs:{...(z=h.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    label: 'Email',
+    value: 'invalid-email',
+    type: 'email',
+    error: 'Please enter a valid email address',
+    onChange: () => {}
+  }
+}`,...(_=(V=h.parameters)==null?void 0:V.docs)==null?void 0:_.source}}};var B,O,G;g.parameters={...g.parameters,docs:{...(B=g.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  args: {
+    label: 'Full Name',
+    value: '',
+    placeholder: 'Enter your full name',
+    onChange: () => {}
+  },
+  render: () => {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      width: '300px'
+    }}>
+                <TextInput label="Full Name" value={name} onChange={setName} placeholder="Enter your full name" />
+                <TextInput label="Email" type="email" value={email} onChange={setEmail} placeholder="john.doe@example.com" />
+                <TextInput label="Password" type="password" value={password} onChange={setPassword} placeholder="Enter password" />
+                <div style={{
+        marginTop: '1rem',
+        padding: '1rem',
+        background: '#f5f5f5',
+        borderRadius: '4px'
+      }}>
+                    <p style={{
+          margin: 0,
+          fontSize: '0.875rem'
+        }}>
+                        <strong>Form Values:</strong>
+                    </p>
+                    <ul style={{
+          margin: '0.5rem 0 0',
+          paddingLeft: '1.5rem',
+          fontSize: '0.875rem'
+        }}>
+                        <li>Name: {name || '(empty)'}</li>
+                        <li>Email: {email || '(empty)'}</li>
+                        <li>Password: {password ? '•'.repeat(password.length) : '(empty)'}</li>
+                    </ul>
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(G=(O=g.parameters)==null?void 0:O.docs)==null?void 0:G.source}}};var H,J,K;x.parameters={...x.parameters,docs:{...(H=x.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    label: 'Username',
+    value: '',
+    placeholder: 'Enter username',
+    required: true,
+    onChange: () => {}
+  },
+  render: () => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [errors, setErrors] = useState<{
+      username?: string;
+      password?: string;
+    }>({});
+    const handleSubmit = () => {
+      const newErrors: {
+        username?: string;
+        password?: string;
+      } = {};
+      if (!username) newErrors.username = 'Username is required';
+      if (!password) newErrors.password = 'Password is required';else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';
+      setErrors(newErrors);
+    };
+    return <div style={{
+      padding: '2rem',
+      background: '#fff',
+      border: '1px solid #e0e0e0',
+      borderRadius: '8px',
+      maxWidth: '400px'
+    }}>
+                <h3 style={{
+        marginTop: 0,
+        marginBottom: '1.5rem'
+      }}>Login</h3>
+                <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem'
+      }}>
+                    <TextInput label="Username" value={username} onChange={value => {
+          setUsername(value);
+          if (errors.username) setErrors(prev => ({
+            ...prev,
+            username: undefined
+          }));
+        }} placeholder="Enter username" error={errors.username} required />
+                    <TextInput label="Password" type="password" value={password} onChange={value => {
+          setPassword(value);
+          if (errors.password) setErrors(prev => ({
+            ...prev,
+            password: undefined
+          }));
+        }} placeholder="Enter password" error={errors.password} required />
+                    <button type="button" onClick={handleSubmit} style={{
+          padding: '0.75rem 1rem',
+          backgroundColor: '#007bff',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          marginTop: '0.5rem'
+        }}>
+                        Login
+                    </button>
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(K=(J=x.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var M,Q,X;b.parameters={...b.parameters,docs:{...(M=b.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    label: 'Text Input',
+    value: '',
+    placeholder: 'Regular text',
+    onChange: () => {}
+  },
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    width: '300px'
+  }}>
+            <TextInput label="Text Input" value="" onChange={() => {}} placeholder="Regular text" />
+            <TextInput label="Email Input" type="email" value="" onChange={() => {}} placeholder="email@example.com" />
+            <TextInput label="Password Input" type="password" value="" onChange={() => {}} placeholder="Password" />
+            <TextInput label="Phone Input" type="tel" value="" onChange={() => {}} placeholder="+1 (555) 123-4567" />
+            <TextInput label="URL Input" type="url" value="" onChange={() => {}} placeholder="https://example.com" />
+            <TextInput label="Required Field" required value="" onChange={() => {}} placeholder="Required" />
+            <TextInput label="With Error" error="This field has an error" value="" onChange={() => {}} />
+        </div>,
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(X=(Q=b.parameters)==null?void 0:Q.docs)==null?void 0:X.source}}};const ae=["Default","WithValue","Email","Password","Phone","Required","WithError","Interactive","LoginForm","AllTypes"];export{b as AllTypes,d as Default,p as Email,g as Interactive,x as LoginForm,u as Password,m as Phone,c as Required,h as WithError,i as WithValue,ae as __namedExportsOrder,re as default};

package/storybook-static/assets/ThemeSwitcher-XCVQ6hhy.css

@@ -0,0 +1 @@
+._button_2917u_1{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:all var(--transition-base);font-size:var(--font-size-base)}._button_2917u_1:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover)}._iconWrapper_2917u_20{display:flex;align-items:center;justify-content:center;width:20px;height:20px}._label_2917u_28{font-weight:var(--font-weight-medium)}._toggle_2917u_33{display:flex;align-items:center;gap:var(--spacing-sm);background:none;border:none;cursor:pointer;padding:0}._toggleTrack_2917u_43{width:48px;height:24px;border-radius:var(--radius-full);padding:2px;display:flex;align-items:center;transition:background-color var(--transition-base)}._toggleThumb_2917u_53{width:20px;height:20px;background:var(--color-surface);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}._dropdown_2917u_65{position:relative}._dropdownTrigger_2917u_69{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:all var(--transition-base)}._dropdownTrigger_2917u_69:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover)}._dropdown_2917u_65:hover ._dropdownMenu_2917u_87,._dropdown_2917u_65:focus-within ._dropdownMenu_2917u_87{display:block}._dropdownMenu_2917u_87{display:none;position:absolute;top:100%;right:0;margin-top:var(--spacing-xs);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:200px;z-index:var(--z-index-dropdown)}._dropdownItem_2917u_106{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);text-align:left}._dropdownItem_2917u_106:hover{background:var(--color-background-secondary)}._dropdownItem_2917u_106._active_2917u_124{background:var(--color-primary);color:var(--color-text-inverse)}._dropdownItem_2917u_106:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}._dropdownItem_2917u_106:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}._icon_2917u_20{width:20px;display:flex;align-items:center;justify-content:center}._text_2917u_144{flex:1}

package/storybook-static/assets/ThemeSwitcher.stories-BvkX1SDm.js

@@ -0,0 +1,62 @@
+import{r as p,j as e}from"./iframe-BUaP2gIF.js";import{j as L,i as S}from"./index-5bdJXrkD.js";import{m as l}from"./proxy-9Y4F2rF8.js";import"./preload-helper-C1FmrZbK.js";const U=p.createContext(void 0),Y=()=>{const r=p.useContext(U);if(!r)throw new Error("useTheme must be used within a ThemeProvider");return r},X=({children:r,defaultTheme:m="light",storageKey:s="app-theme"})=>{const[i,g]=p.useState(()=>{const t=localStorage.getItem(s);return t&&["light","dark","lossito","lossito-dark","dmood","dmood-dark"].includes(t)?t:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":m}),v=t=>{g(t),localStorage.setItem(s,t)},n=()=>{const t=["light","dark","lossito","lossito-dark","dmood","dmood-dark"],w=(t.indexOf(i)+1)%t.length;v(t[w])};return p.useEffect(()=>{const t=document.documentElement;t.setAttribute("data-theme",i),i.includes("dark")?t.classList.add("dark"):t.classList.remove("dark")},[i]),p.useEffect(()=>{const t=window.matchMedia("(prefers-color-scheme: dark)"),d=w=>{localStorage.getItem(s)||g(w.matches?"dark":"light")};return t.addEventListener("change",d),()=>t.removeEventListener("change",d)},[s]),e.jsx(U.Provider,{value:{theme:i,setTheme:v,toggleTheme:n},children:r})};X.__docgenInfo={description:"",methods:[],displayName:"ThemeProvider",props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},defaultTheme:{required:!1,tsType:{name:"union",raw:"'light' | 'dark' | 'lossito' | 'lossito-dark' | 'dmood' | 'dmood-dark'",elements:[{name:"literal",value:"'light'"},{name:"literal",value:"'dark'"},{name:"literal",value:"'lossito'"},{name:"literal",value:"'lossito-dark'"},{name:"literal",value:"'dmood'"},{name:"literal",value:"'dmood-dark'"}]},description:"",defaultValue:{value:"'light'",computed:!1}},storageKey:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'app-theme'",computed:!1}}}};const Z="_button_2917u_1",K="_iconWrapper_2917u_20",ee="_label_2917u_28",te="_toggle_2917u_33",ae="_toggleTrack_2917u_43",oe="_toggleThumb_2917u_53",re="_dropdown_2917u_65",se="_dropdownTrigger_2917u_69",ne="_dropdownMenu_2917u_87",le="_dropdownItem_2917u_106",ie="_active_2917u_124",de="_icon_2917u_20",ce="_text_2917u_144",o={button:Z,iconWrapper:K,label:ee,toggle:te,toggleTrack:ae,toggleThumb:oe,dropdown:re,dropdownTrigger:se,dropdownMenu:ne,dropdownItem:le,active:ie,icon:de,text:ce},h=({variant:r="button",showLabel:m=!1,className:s="",currentTheme:i,onThemeChange:g,themes:v})=>{const n=(()=>{try{return Y()}catch{return null}})(),t=i??(n==null?void 0:n.theme)??"light",d=g??(n==null?void 0:n.setTheme)??(()=>{}),c=v??[{value:"light",label:"Light",icon:e.jsx(S,{})},{value:"dark",label:"Dark",icon:e.jsx(L,{})},{value:"lossito",label:"Lossito Light",icon:"✨"},{value:"lossito-dark",label:"Lossito Dark",icon:"🌑"},{value:"dmood",label:"Dmood Light",icon:"💙"},{value:"dmood-dark",label:"Dmood Dark",icon:"🌌"}],j=c.findIndex(a=>a.value===t),u=c[j]??c[0];if(r==="toggle"){const a=t.includes("dark");return e.jsxs(l.button,{className:`${o.toggle} ${s}`,onClick:()=>d(a?"light":"dark"),whileTap:{scale:.95},"aria-label":"Toggle theme",children:[e.jsx(l.div,{className:o.toggleTrack,animate:{backgroundColor:a?"var(--color-primary)":"var(--color-border)"},children:e.jsx(l.div,{className:o.toggleThumb,animate:{x:a?24:0},transition:{type:"spring",stiffness:500,damping:30},children:a?e.jsx(L,{size:14}):e.jsx(S,{size:14})})}),m&&e.jsx("span",{className:o.label,children:a?"Dark":"Light"})]})}return r==="dropdown"?e.jsxs("div",{className:`${o.dropdown} ${s}`,children:[e.jsxs(l.button,{className:o.dropdownTrigger,whileTap:{scale:.98},children:[u.icon,m&&e.jsx("span",{className:o.label,children:u.label})]}),e.jsx(l.div,{className:o.dropdownMenu,initial:{opacity:0,y:-10},animate:{opacity:1,y:0},children:c.map(a=>e.jsxs(l.button,{className:`${o.dropdownItem} ${t===a.value?o.active:""}`,onClick:()=>d(a.value),whileHover:{x:4},whileTap:{scale:.98},children:[e.jsx("span",{className:o.icon,children:a.icon}),e.jsx("span",{className:o.text,children:a.label})]},a.value))})]}):e.jsxs(l.button,{className:`${o.button} ${s}`,onClick:()=>{const a=(j+1)%c.length;d(c[a].value)},whileTap:{scale:.95},whileHover:{scale:1.05},"aria-label":`Current theme: ${u.label}. Click to change.`,children:[e.jsx(l.div,{initial:{rotate:-180,opacity:0},animate:{rotate:0,opacity:1},exit:{rotate:180,opacity:0},transition:{duration:.3},className:o.iconWrapper,children:u.icon},t),m&&e.jsx("span",{className:o.label,children:u.label})]})};h.__docgenInfo={description:"",methods:[],displayName:"ThemeSwitcher",props:{variant:{required:!1,tsType:{name:"union",raw:"'button' | 'dropdown' | 'toggle'",elements:[{name:"literal",value:"'button'"},{name:"literal",value:"'dropdown'"},{name:"literal",value:"'toggle'"}]},description:"",defaultValue:{value:"'button'",computed:!1}},showLabel:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},className:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},currentTheme:{required:!1,tsType:{name:"string"},description:""},onThemeChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(theme: string) => void",signature:{arguments:[{type:{name:"string"},name:"theme"}],return:{name:"void"}}},description:""},themes:{required:!1,tsType:{name:"Array",elements:[{name:"ThemeOption"}],raw:"ThemeOption[]"},description:""}}};const me=({children:r})=>e.jsx(X,{defaultTheme:"light",children:r}),ve={title:"Molecules/ThemeSwitcher",component:h,decorators:[r=>e.jsx(me,{children:e.jsx("div",{style:{padding:"2rem"},children:e.jsx(r,{})})})],parameters:{layout:"centered"},argTypes:{variant:{control:{type:"select"},options:["button","dropdown","toggle"]},showLabel:{control:{type:"boolean"}}}},b={args:{variant:"button",showLabel:!1}},x={args:{variant:"button",showLabel:!0}},f={args:{variant:"toggle",showLabel:!1}},T={args:{variant:"toggle",showLabel:!0}},_={args:{variant:"dropdown",showLabel:!1}},y={args:{variant:"dropdown",showLabel:!0}},k={render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"2rem",alignItems:"center"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"1rem",color:"var(--color-text)"},children:"Button Variant"}),e.jsx(h,{variant:"button",showLabel:!0})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"1rem",color:"var(--color-text)"},children:"Toggle Variant"}),e.jsx(h,{variant:"toggle",showLabel:!0})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"1rem",color:"var(--color-text)"},children:"Dropdown Variant"}),e.jsx(h,{variant:"dropdown",showLabel:!0})]})]})};var I,N,D;b.parameters={...b.parameters,docs:{...(I=b.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  args: {
+    variant: 'button',
+    showLabel: false
+  }
+}`,...(D=(N=b.parameters)==null?void 0:N.docs)==null?void 0:D.source}}};var V,B,C;x.parameters={...x.parameters,docs:{...(V=x.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  args: {
+    variant: 'button',
+    showLabel: true
+  }
+}`,...(C=(B=x.parameters)==null?void 0:B.docs)==null?void 0:C.source}}};var W,M,q;f.parameters={...f.parameters,docs:{...(W=f.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    variant: 'toggle',
+    showLabel: false
+  }
+}`,...(q=(M=f.parameters)==null?void 0:M.docs)==null?void 0:q.source}}};var E,$,O;T.parameters={...T.parameters,docs:{...(E=T.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  args: {
+    variant: 'toggle',
+    showLabel: true
+  }
+}`,...(O=($=T.parameters)==null?void 0:$.docs)==null?void 0:O.source}}};var R,P,z;_.parameters={..._.parameters,docs:{...(R=_.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    variant: 'dropdown',
+    showLabel: false
+  }
+}`,...(z=(P=_.parameters)==null?void 0:P.docs)==null?void 0:z.source}}};var A,F,H;y.parameters={...y.parameters,docs:{...(A=y.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  args: {
+    variant: 'dropdown',
+    showLabel: true
+  }
+}`,...(H=(F=y.parameters)==null?void 0:F.docs)==null?void 0:H.source}}};var Q,G,J;k.parameters={...k.parameters,docs:{...(Q=k.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2rem',
+    alignItems: 'center'
+  }}>
+            <div>
+                <h3 style={{
+        marginBottom: '1rem',
+        color: 'var(--color-text)'
+      }}>Button Variant</h3>
+                <ThemeSwitcher variant="button" showLabel />
+            </div>
+            
+            <div>
+                <h3 style={{
+        marginBottom: '1rem',
+        color: 'var(--color-text)'
+      }}>Toggle Variant</h3>
+                <ThemeSwitcher variant="toggle" showLabel />
+            </div>
+            
+            <div>
+                <h3 style={{
+        marginBottom: '1rem',
+        color: 'var(--color-text)'
+      }}>Dropdown Variant</h3>
+                <ThemeSwitcher variant="dropdown" showLabel />
+            </div>
+        </div>
+}`,...(J=(G=k.parameters)==null?void 0:G.docs)==null?void 0:J.source}}};const we=["Button","ButtonWithLabel","Toggle","ToggleWithLabel","Dropdown","DropdownWithLabel","MultipleVariants"];export{b as Button,x as ButtonWithLabel,_ as Dropdown,y as DropdownWithLabel,k as MultipleVariants,f as Toggle,T as ToggleWithLabel,we as __namedExportsOrder,ve as default};

package/storybook-static/assets/TimeInput-C3enPYoV.css

@@ -0,0 +1 @@
+._modalOverlay_1ux3k_2{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:_fadeIn_1ux3k_1 .2s ease}@keyframes _fadeIn_1ux3k_1{0%{opacity:0}to{opacity:1}}._modalContent_1ux3k_22{background:var(--color-background);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:90%;max-width:400px;max-height:80vh;display:flex;flex-direction:column;animation:_slideUp_1ux3k_1 .3s ease}@keyframes _slideUp_1ux3k_1{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}._modalHeader_1ux3k_45{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}._modalHeader_1ux3k_45 h3{margin:0;font-size:var(--font-size-lg);color:var(--color-text)}._closeButton_1ux3k_59{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-base)}._closeButton_1ux3k_59:hover{background:var(--color-background-secondary);color:var(--color-text)}._timeDisplay_1ux3k_77{text-align:center;font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);padding:var(--spacing-lg);color:var(--color-primary);font-family:SF Mono,Monaco,monospace;letter-spacing:.1em}._pickerContainer_1ux3k_87{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-lg);justify-content:center;align-items:center}._pickerColumn_1ux3k_95{flex:1;max-width:150px}._pickerLabel_1ux3k_100{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.05em}._pickerScroll_1ux3k_109{height:200px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xs);background:var(--color-background-secondary)}._pickerScroll_1ux3k_109::-webkit-scrollbar{width:6px}._pickerScroll_1ux3k_109::-webkit-scrollbar-track{background:var(--color-background-tertiary);border-radius:3px}._pickerScroll_1ux3k_109::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}._pickerScroll_1ux3k_109::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}._pickerItem_1ux3k_136{display:block;width:100%;padding:var(--spacing-sm);background:none;border:none;cursor:pointer;font-size:var(--font-size-base);color:var(--color-text);transition:all var(--transition-base);border-radius:var(--radius-sm)}._pickerItem_1ux3k_136:hover{background:var(--color-background-tertiary)}._pickerItem_1ux3k_136._selected_1ux3k_153{background:var(--color-primary);color:#fff;font-weight:var(--font-weight-semibold)}._pickerDivider_1ux3k_159{font-size:var(--font-size-2xl);color:var(--color-text-secondary);font-weight:var(--font-weight-bold);padding:0 var(--spacing-sm)}._modalActions_1ux3k_166{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);border-top:1px solid var(--color-border)}._cancelButton_1ux3k_173,._confirmButton_1ux3k_174{flex:1;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-base);border:none}._cancelButton_1ux3k_173{background:var(--color-background-secondary);color:var(--color-text)}._cancelButton_1ux3k_173:hover{background:var(--color-background-tertiary)}._confirmButton_1ux3k_174{background:var(--color-primary);color:#fff}._confirmButton_1ux3k_174:hover{background:var(--color-primary-hover)}[data-theme=dark] ._modalContent_1ux3k_22{background:var(--color-background-secondary)}@media (max-width: 768px){._modalContent_1ux3k_22{width:95%;max-width:none}._pickerScroll_1ux3k_109{height:150px}}._timeInput_1yluz_1{margin-bottom:var(--spacing-lg)}._label_1yluz_5{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:var(--letter-spacing-wide)}._required_1yluz_14{color:var(--color-error);margin-left:4px}._inputWrapper_1yluz_19{position:relative;display:flex;align-items:stretch;background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base);min-height:44px}._inputWrapper_1yluz_19:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-sm)}._inputWrapper_1yluz_19:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #7c3aed1a}._textInput_1yluz_41{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;font-size:var(--font-size-lg);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;color:var(--color-text);outline:none;min-height:44px}._textInput_1yluz_41::placeholder{color:var(--color-text-secondary);opacity:.6}._clockButton_1yluz_58{display:flex;align-items:center;justify-content:center;background:var(--color-primary);border:none;color:#fff;cursor:pointer;padding:0;min-width:44px;width:44px;height:auto;flex-shrink:0;transition:background var(--transition-base)}._clockButton_1yluz_58:hover:not(:disabled){background:var(--color-primary-hover)}._clockButton_1yluz_58:active:not(:disabled){transform:scale(.95)}._clockButton_1yluz_58:disabled{opacity:.5;cursor:not-allowed}._error_1yluz_88 ._inputWrapper_1yluz_19{border-color:var(--color-error)}._error_1yluz_88 ._label_1yluz_5{color:var(--color-error)}._success_1yluz_97 ._inputWrapper_1yluz_19{border-color:var(--color-success)}._loading_1yluz_102 ._inputWrapper_1yluz_19{position:relative;overflow:hidden}._loading_1yluz_102 ._inputWrapper_1yluz_19:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(124,58,237,.1),transparent);animation:_shimmer_1yluz_1 2s infinite;pointer-events:none}@keyframes _shimmer_1yluz_1{to{left:100%}}._disabled_1yluz_131 ._inputWrapper_1yluz_19{background:var(--color-background-tertiary);cursor:not-allowed}._disabled_1yluz_131 ._textInput_1yluz_41{color:var(--color-text-tertiary);cursor:not-allowed}[data-theme=dark] ._inputWrapper_1yluz_19{background:var(--color-background-secondary);border-color:var(--color-border)}[data-theme=dark] ._inputWrapper_1yluz_19:focus-within{border-color:var(--color-primary-light);box-shadow:0 0 0 3px #a78bfa1a}@media (max-width: 768px){._textInput_1yluz_41{font-size:var(--font-size-xl)}._clockButton_1yluz_58{min-width:48px;height:48px}}

package/storybook-static/assets/TimeInput.stories-BchhRfKo.js

@@ -0,0 +1,50 @@
+import{r as S,j as e}from"./iframe-BUaP2gIF.js";import{q as se,t as ae}from"./index-5bdJXrkD.js";import"./preload-helper-C1FmrZbK.js";const ne="_modalOverlay_1ux3k_2",oe="_modalContent_1ux3k_22",le="_modalHeader_1ux3k_45",ie="_closeButton_1ux3k_59",ce="_timeDisplay_1ux3k_77",ue="_pickerContainer_1ux3k_87",de="_pickerColumn_1ux3k_95",me="_pickerLabel_1ux3k_100",pe="_pickerScroll_1ux3k_109",ge="_pickerItem_1ux3k_136",he="_selected_1ux3k_153",_e="_pickerDivider_1ux3k_159",fe="_modalActions_1ux3k_166",ke="_cancelButton_1ux3k_173",xe="_confirmButton_1ux3k_174",r={modalOverlay:ne,modalContent:oe,modalHeader:le,closeButton:ie,timeDisplay:ce,pickerContainer:ue,pickerColumn:de,pickerLabel:me,pickerScroll:pe,pickerItem:ge,selected:he,pickerDivider:_e,modalActions:fe,cancelButton:ke,confirmButton:xe};function Q({isOpen:y,onClose:c,value:l,onChange:N}){const[j,q]=l?l.split(":").map(Number):[12,0],[m,g]=S.useState(j),[i,u]=S.useState(q);S.useEffect(()=>{if(l){const[o,s]=l.split(":").map(Number);g(o),u(s)}},[l]);const h=()=>{const o=m.toString().padStart(2,"0"),s=i.toString().padStart(2,"0");N(`${o}:${s}`),c()};return y?e.jsx("div",{className:r.modalOverlay,onClick:c,children:e.jsxs("div",{className:r.modalContent,onClick:o=>o.stopPropagation(),children:[e.jsxs("div",{className:r.modalHeader,children:[e.jsx("h3",{children:"Select Time"}),e.jsx("button",{className:r.closeButton,onClick:c,"aria-label":"Close",children:e.jsx(se,{})})]}),e.jsxs("div",{className:r.timeDisplay,children:[m.toString().padStart(2,"0"),":",i.toString().padStart(2,"0")]}),e.jsxs("div",{className:r.pickerContainer,children:[e.jsxs("div",{className:r.pickerColumn,children:[e.jsx("div",{className:r.pickerLabel,children:"Hours"}),e.jsx("div",{className:r.pickerScroll,children:Array.from({length:24},(o,s)=>e.jsx("button",{className:`${r.pickerItem} ${m===s?r.selected:""}`,onClick:()=>g(s),children:s.toString().padStart(2,"0")},s))})]}),e.jsx("div",{className:r.pickerDivider,children:":"}),e.jsxs("div",{className:r.pickerColumn,children:[e.jsx("div",{className:r.pickerLabel,children:"Minutes"}),e.jsx("div",{className:r.pickerScroll,children:Array.from({length:60},(o,s)=>e.jsx("button",{className:`${r.pickerItem} ${i===s?r.selected:""}`,onClick:()=>u(s),children:s.toString().padStart(2,"0")},s))})]})]}),e.jsxs("div",{className:r.modalActions,children:[e.jsx("button",{className:r.cancelButton,onClick:c,children:"Cancel"}),e.jsx("button",{className:r.confirmButton,onClick:h,children:"Confirm"})]})]})}):null}Q.__docgenInfo={description:"",methods:[],displayName:"TimePickerModal",props:{isOpen:{required:!0,tsType:{name:"boolean"},description:""},onClose:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},value:{required:!0,tsType:{name:"string"},description:""},onChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(time: string) => void",signature:{arguments:[{type:{name:"string"},name:"time"}],return:{name:"void"}}},description:""}}};const be="_timeInput_1yluz_1",Ce="_label_1yluz_5",ve="_required_1yluz_14",Se="_inputWrapper_1yluz_19",ye="_textInput_1yluz_41",Ne="_clockButton_1yluz_58",je="_error_1yluz_88",qe="_success_1yluz_97",Ie="_loading_1yluz_102",Te="_disabled_1yluz_131",n={timeInput:be,label:Ce,required:ve,inputWrapper:Se,textInput:ye,clockButton:Ne,error:je,success:qe,loading:Ie,disabled:Te};function U({label:y,value:c,onChange:l,placeholder:N="14:30",onFocus:j,onBlur:q,error:m=!1,success:g=!1,loading:i=!1,disabled:u=!1,required:h=!1}){const[o,s]=S.useState(!1),Y=a=>{if(!a)return"";let t=a.replace(/[^\d:]/g,"");if((t.match(/:/g)||[]).length>1&&(t=t.replace(/:/g,""),t.length>=3&&(t=t.substring(0,2)+":"+t.substring(2))),(t.length===3&&!t.includes(":")||t.length===4&&!t.includes(":"))&&(t=t.substring(0,2)+":"+t.substring(2)),t.includes(":")){const I=t.split(":");let p=I[0],d=I[1]||"";p=p.substring(0,2),p.length===2&&parseInt(p)>23&&(p="23"),d=d.substring(0,2),d.length===2&&parseInt(d)>59&&(d="59"),t=p+(d.length>0?":"+d:":")}return t.substring(0,5)},Z=a=>{const t=Y(a);l(t)},ee=()=>{!u&&!i&&s(!0)},te=()=>{const a=[n.timeInput];return m&&a.push(n.error),g&&a.push(n.success),i&&a.push(n.loading),u&&a.push(n.disabled),a.join(" ")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:te(),children:[e.jsxs("label",{className:n.label,children:[y,h&&e.jsx("span",{className:n.required,children:"*"})]}),e.jsxs("div",{className:n.inputWrapper,children:[e.jsx("input",{type:"text",value:c,onChange:a=>Z(a.target.value),onFocus:j,onBlur:q,placeholder:N,className:n.textInput,maxLength:5,disabled:u||i,"aria-invalid":m,"aria-required":h,inputMode:"numeric",pattern:"[0-9:]*"}),e.jsx("button",{type:"button",onClick:ee,className:n.clockButton,title:"Open time picker",disabled:u||i,"aria-label":"Open time picker",children:e.jsx(ae,{size:20})})]})]}),e.jsx(Q,{isOpen:o,onClose:()=>s(!1),value:c,onChange:l})]})}U.__docgenInfo={description:"",methods:[],displayName:"TimeInput",props:{placeholder:{defaultValue:{value:'"14:30"',computed:!1},required:!1},error:{defaultValue:{value:"false",computed:!1},required:!1},success:{defaultValue:{value:"false",computed:!1},required:!1},loading:{defaultValue:{value:"false",computed:!1},required:!1},disabled:{defaultValue:{value:"false",computed:!1},required:!1},required:{defaultValue:{value:"false",computed:!1},required:!1}}};const Le={title:"Molecules/TimeInput",component:U,parameters:{layout:"centered",docs:{description:{component:"A time picker component with both manual text input and native time picker support. Formats time in 24-hour format."}}},tags:["autodocs"],argTypes:{label:{control:"text",description:"Label text for the time input"},value:{control:"text",description:"Current time value in HH:MM format"},placeholder:{control:"text",description:"Placeholder text"},onChange:{action:"changed"},onFocus:{action:"focused"},onBlur:{action:"blurred"}}},_={args:{label:"Meeting Time",value:"",placeholder:"14:30",onChange:()=>{}}},f={args:{label:"Appointment Time",value:"09:30",placeholder:"14:30",onChange:()=>{}}},k={args:{label:"Error State",value:"25:00",onChange:()=>{},error:!0}},x={args:{label:"Success State",value:"14:30",onChange:()=>{},success:!0}},b={args:{label:"Loading State",value:"14:30",onChange:()=>{},loading:!0}},C={args:{label:"Disabled State",value:"14:30",onChange:()=>{},disabled:!0}},v={args:{label:"Required Field",value:"",onChange:()=>{},required:!0}};var T,B,D;_.parameters={..._.parameters,docs:{...(T=_.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  args: {
+    label: 'Meeting Time',
+    value: '',
+    placeholder: '14:30',
+    onChange: () => {}
+  }
+}`,...(D=(B=_.parameters)==null?void 0:B.docs)==null?void 0:D.source}}};var M,z,L;f.parameters={...f.parameters,docs:{...(M=f.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    label: 'Appointment Time',
+    value: '09:30',
+    placeholder: '14:30',
+    onChange: () => {}
+  }
+}`,...(L=(z=f.parameters)==null?void 0:z.docs)==null?void 0:L.source}}};var H,W,A;k.parameters={...k.parameters,docs:{...(H=k.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    label: 'Error State',
+    value: '25:00',
+    onChange: () => {},
+    error: true
+  }
+}`,...(A=(W=k.parameters)==null?void 0:W.docs)==null?void 0:A.source}}};var O,E,V;x.parameters={...x.parameters,docs:{...(O=x.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  args: {
+    label: 'Success State',
+    value: '14:30',
+    onChange: () => {},
+    success: true
+  }
+}`,...(V=(E=x.parameters)==null?void 0:E.docs)==null?void 0:V.source}}};var F,$,P;b.parameters={...b.parameters,docs:{...(F=b.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    label: 'Loading State',
+    value: '14:30',
+    onChange: () => {},
+    loading: true
+  }
+}`,...(P=($=b.parameters)==null?void 0:$.docs)==null?void 0:P.source}}};var w,R,X;C.parameters={...C.parameters,docs:{...(w=C.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  args: {
+    label: 'Disabled State',
+    value: '14:30',
+    onChange: () => {},
+    disabled: true
+  }
+}`,...(X=(R=C.parameters)==null?void 0:R.docs)==null?void 0:X.source}}};var G,J,K;v.parameters={...v.parameters,docs:{...(G=v.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  args: {
+    label: 'Required Field',
+    value: '',
+    onChange: () => {},
+    required: true
+  }
+}`,...(K=(J=v.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};const He=["Default","WithValue","WithError","WithSuccess","Loading","Disabled","Required"];export{_ as Default,C as Disabled,b as Loading,v as Required,k as WithError,x as WithSuccess,f as WithValue,He as __namedExportsOrder,Le as default};

package/storybook-static/assets/Toggle-BQ2KHBDr.js

@@ -0,0 +1,39 @@
+import{j as t}from"./iframe-BUaP2gIF.js";const d="_toggleContainer_y5eyt_1",h="_toggleButton_y5eyt_11",m="_active_y5eyt_27",e={toggleContainer:d,toggleButton:h,active:m};function f(l){const{isOn:o,onToggle:n,leftLabel:i,rightLabel:g,leftIcon:a,rightIcon:r,className:c,style:p}=l,s={display:"flex",alignItems:"center",justifyContent:"center",...p};return t.jsxs("div",{className:`${e.toggleContainer} ${c||""}`,children:[t.jsxs("button",{className:`${e.toggleButton} ${o?"":e.active}`,onClick:()=>n(!1),style:s,children:[a,i]}),t.jsxs("button",{className:`${e.toggleButton} ${o?e.active:""}`,onClick:()=>n(!0),style:s,children:[r,g]})]})}f.__docgenInfo={description:`Toggle Component
+
+@component
+@description
+A two-state toggle switch component that allows users to choose between two options.
+Displays as a segmented control with smooth animations and hover effects. 
+Supports both text labels and icons for each option.
+
+@example
+// Basic toggle with labels
+<Toggle 
+  isOn={darkMode}
+  onToggle={setDarkMode}
+  leftLabel="Light"
+  rightLabel="Dark"
+/>
+
+@example
+// Toggle with icons
+<Toggle 
+  isOn={viewMode === 'grid'}
+  onToggle={(isGrid) => setViewMode(isGrid ? 'grid' : 'list')}
+  leftIcon={<ListIcon />}
+  rightIcon={<GridIcon />}
+  leftLabel="List"
+  rightLabel="Grid"
+/>
+
+@example
+// Simple on/off toggle
+<Toggle 
+  isOn={notifications}
+  onToggle={setNotifications}
+  leftLabel="Off"
+  rightLabel="On"
+/>
+
+@param {ToggleProps} props - The props for the Toggle component
+@returns {JSX.Element} The rendered Toggle component`,methods:[],displayName:"Toggle"};export{f as T};

package/storybook-static/assets/Toggle-DhKq5lh5.css

@@ -0,0 +1 @@
+._toggleContainer_y5eyt_1{display:inline-flex;background:var(--color-background-secondary);border-radius:var(--radius-md);padding:4px;gap:0;border:1px solid var(--color-border);transition:all var(--transition-base)}._toggleButton_y5eyt_11{display:flex;align-items:center;gap:6px;padding:var(--spacing-xs) var(--spacing-sm);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:all var(--transition-base);-webkit-user-select:none;user-select:none}._toggleButton_y5eyt_11:hover:not(._active_y5eyt_27){color:var(--color-text);background:var(--color-background-tertiary)}._toggleButton_y5eyt_11._active_y5eyt_27{background:var(--color-background);color:var(--color-primary);box-shadow:var(--shadow-sm);font-weight:var(--font-weight-semibold)}._toggleButton_y5eyt_11._active_y5eyt_27:hover{background:var(--color-background);color:var(--color-primary-hover)}._toggleButton_y5eyt_11 svg{width:16px;height:16px}._toggleButton_y5eyt_11:disabled{opacity:.5;cursor:not-allowed}._toggleButton_y5eyt_11:disabled:hover{background:transparent;color:var(--color-text-secondary)}._toggleButton_y5eyt_11:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}[data-theme*=dark] ._toggleContainer_y5eyt_1{background:var(--color-background-tertiary);border-color:var(--color-border)}[data-theme*=dark] ._toggleButton_y5eyt_11._active_y5eyt_27{background:var(--color-background-secondary);box-shadow:var(--shadow-md)}@media (max-width: 640px){._toggleButton_y5eyt_11{padding:var(--spacing-xs) var(--spacing-xs);font-size:var(--font-size-xs)}}

package/storybook-static/assets/Toggle.stories-BUSZc6m3.js

@@ -0,0 +1,194 @@
+import{j as e,r as h}from"./iframe-BUaP2gIF.js";import{T as a}from"./Toggle-BQ2KHBDr.js";import{i as o,j as r,k as q,l as H}from"./index-5bdJXrkD.js";import"./preload-helper-C1FmrZbK.js";const X={title:"Atoms/Toggle",component:a,parameters:{layout:"centered",docs:{description:{component:"A two-state toggle button component with optional labels and icons."}}},tags:["autodocs"],argTypes:{isOn:{control:"boolean",description:"Current state of the toggle"},leftLabel:{control:"text",description:"Label for the left (off) state"},rightLabel:{control:"text",description:"Label for the right (on) state"},onToggle:{action:"toggled"}}},l={args:{isOn:!1,leftLabel:"Off",rightLabel:"On",onToggle:()=>{}}},i={args:{isOn:!1,onToggle:()=>{}}},g={args:{isOn:!1,leftIcon:e.jsx(r,{}),rightIcon:e.jsx(o,{}),onToggle:()=>{}}},c={args:{isOn:!1,leftLabel:"Light",rightLabel:"Dark",leftIcon:e.jsx(o,{}),rightIcon:e.jsx(r,{}),onToggle:()=>{}}},d={args:{isOn:!1,leftLabel:"Grid",rightLabel:"List",leftIcon:e.jsx(H,{}),rightIcon:e.jsx(q,{}),onToggle:()=>{}}},f={args:{isOn:!1,leftLabel:"Disabled",rightLabel:"Enabled",onToggle:()=>{}},render:()=>{const[t,s]=h.useState(!1);return e.jsx(a,{isOn:t,onToggle:s,leftLabel:"Disabled",rightLabel:"Enabled"})}},m={args:{isOn:!1,leftLabel:"Light",rightLabel:"Dark",leftIcon:e.jsx(o,{}),rightIcon:e.jsx(r,{}),onToggle:()=>{}},render:()=>{const[t,s]=h.useState(!1);return e.jsxs("div",{style:{padding:"2rem",background:t?"#1a1a1a":"#ffffff",color:t?"#ffffff":"#000000",borderRadius:"8px",transition:"all 0.3s ease"},children:[e.jsx("h3",{style:{marginBottom:"1rem"},children:"Theme Switcher"}),e.jsx(a,{isOn:t,onToggle:s,leftLabel:"Light",rightLabel:"Dark",leftIcon:e.jsx(o,{}),rightIcon:e.jsx(r,{})}),e.jsxs("p",{style:{marginTop:"1rem"},children:["Current theme: ",t?"Dark":"Light"]})]})},parameters:{controls:{disable:!0}}},p={args:{isOn:!1,leftLabel:"Small",rightLabel:"Large",onToggle:()=>{}},render:()=>{const[t,s]=h.useState(!1);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"2rem",alignItems:"center"},children:[e.jsxs("div",{children:[e.jsx("h4",{style:{marginBottom:"1rem"},children:"Custom Size with Style Prop"}),e.jsx(a,{isOn:t,onToggle:s,leftLabel:"Small",rightLabel:"Large",style:{fontSize:"18px",padding:"16px 20px",minWidth:"200px"}})]}),e.jsxs("div",{children:[e.jsx("h4",{style:{marginBottom:"1rem"},children:"Custom Class Name"}),e.jsx(a,{isOn:t,onToggle:s,leftLabel:"Custom",rightLabel:"Styled",className:"custom-toggle-class"})]})]})},parameters:{controls:{disable:!0}}},u={args:{isOn:!1,leftLabel:"Off",rightLabel:"On",onToggle:()=>{}},render:()=>{const[t,s]=h.useState({notifications:!0,darkMode:!1,autoSave:!0,compactView:!1});return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",minWidth:"300px"},children:[e.jsx("span",{children:"Notifications"}),e.jsx(a,{isOn:t.notifications,onToggle:n=>s({...t,notifications:n}),leftLabel:"Off",rightLabel:"On"})]}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("span",{children:"Dark Mode"}),e.jsx(a,{isOn:t.darkMode,onToggle:n=>s({...t,darkMode:n}),leftIcon:e.jsx(o,{}),rightIcon:e.jsx(r,{})})]}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("span",{children:"Auto Save"}),e.jsx(a,{isOn:t.autoSave,onToggle:n=>s({...t,autoSave:n}),leftLabel:"Manual",rightLabel:"Auto"})]}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("span",{children:"View Mode"}),e.jsx(a,{isOn:t.compactView,onToggle:n=>s({...t,compactView:n}),leftIcon:e.jsx(H,{}),rightIcon:e.jsx(q,{}),leftLabel:"Grid",rightLabel:"List",style:{fontSize:"14px"}})]})]})},parameters:{controls:{disable:!0}}};var b,L,x;l.parameters={...l.parameters,docs:{...(b=l.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Off',
+    rightLabel: 'On',
+    onToggle: () => {}
+  }
+}`,...(x=(L=l.parameters)==null?void 0:L.docs)==null?void 0:x.source}}};var O,T,S;i.parameters={...i.parameters,docs:{...(O=i.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    onToggle: () => {}
+  }
+}`,...(S=(T=i.parameters)==null?void 0:T.docs)==null?void 0:S.source}}};var y,I,j;g.parameters={...g.parameters,docs:{...(y=g.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftIcon: <FiMoon />,
+    rightIcon: <FiSun />,
+    onToggle: () => {}
+  }
+}`,...(j=(I=g.parameters)==null?void 0:I.docs)==null?void 0:j.source}}};var v,D,k;c.parameters={...c.parameters,docs:{...(v=c.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Light',
+    rightLabel: 'Dark',
+    leftIcon: <FiSun />,
+    rightIcon: <FiMoon />,
+    onToggle: () => {}
+  }
+}`,...(k=(D=c.parameters)==null?void 0:D.docs)==null?void 0:k.source}}};var w,C,M;d.parameters={...d.parameters,docs:{...(w=d.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Grid',
+    rightLabel: 'List',
+    leftIcon: <FiGrid />,
+    rightIcon: <FiList />,
+    onToggle: () => {}
+  }
+}`,...(M=(C=d.parameters)==null?void 0:C.docs)==null?void 0:M.source}}};var F,V,W;f.parameters={...f.parameters,docs:{...(F=f.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Disabled',
+    rightLabel: 'Enabled',
+    onToggle: () => {}
+  },
+  render: () => {
+    const [isOn, setIsOn] = useState(false);
+    return <Toggle isOn={isOn} onToggle={setIsOn} leftLabel="Disabled" rightLabel="Enabled" />;
+  }
+}`,...(W=(V=f.parameters)==null?void 0:V.docs)==null?void 0:W.source}}};var A,E,G;m.parameters={...m.parameters,docs:{...(A=m.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Light',
+    rightLabel: 'Dark',
+    leftIcon: <FiSun />,
+    rightIcon: <FiMoon />,
+    onToggle: () => {}
+  },
+  render: () => {
+    const [isDark, setIsDark] = useState(false);
+    return <div style={{
+      padding: '2rem',
+      background: isDark ? '#1a1a1a' : '#ffffff',
+      color: isDark ? '#ffffff' : '#000000',
+      borderRadius: '8px',
+      transition: 'all 0.3s ease'
+    }}>
+                <h3 style={{
+        marginBottom: '1rem'
+      }}>Theme Switcher</h3>
+                <Toggle isOn={isDark} onToggle={setIsDark} leftLabel="Light" rightLabel="Dark" leftIcon={<FiSun />} rightIcon={<FiMoon />} />
+                <p style={{
+        marginTop: '1rem'
+      }}>
+                    Current theme: {isDark ? 'Dark' : 'Light'}
+                </p>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(G=(E=m.parameters)==null?void 0:E.docs)==null?void 0:G.source}}};var z,B,N;p.parameters={...p.parameters,docs:{...(z=p.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Small',
+    rightLabel: 'Large',
+    onToggle: () => {}
+  },
+  render: () => {
+    const [isOn, setIsOn] = useState(false);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem',
+      alignItems: 'center'
+    }}>
+                <div>
+                    <h4 style={{
+          marginBottom: '1rem'
+        }}>Custom Size with Style Prop</h4>
+                    <Toggle isOn={isOn} onToggle={setIsOn} leftLabel="Small" rightLabel="Large" style={{
+          fontSize: '18px',
+          padding: '16px 20px',
+          minWidth: '200px'
+        }} />
+                </div>
+                <div>
+                    <h4 style={{
+          marginBottom: '1rem'
+        }}>Custom Class Name</h4>
+                    <Toggle isOn={isOn} onToggle={setIsOn} leftLabel="Custom" rightLabel="Styled" className="custom-toggle-class" />
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(N=(B=p.parameters)==null?void 0:B.docs)==null?void 0:N.source}}};var R,P,_;u.parameters={...u.parameters,docs:{...(R=u.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Off',
+    rightLabel: 'On',
+    onToggle: () => {}
+  },
+  render: () => {
+    const [settings, setSettings] = useState({
+      notifications: true,
+      darkMode: false,
+      autoSave: true,
+      compactView: false
+    });
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem'
+    }}>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        minWidth: '300px'
+      }}>
+                    <span>Notifications</span>
+                    <Toggle isOn={settings.notifications} onToggle={value => setSettings({
+          ...settings,
+          notifications: value
+        })} leftLabel="Off" rightLabel="On" />
+                </div>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}>
+                    <span>Dark Mode</span>
+                    <Toggle isOn={settings.darkMode} onToggle={value => setSettings({
+          ...settings,
+          darkMode: value
+        })} leftIcon={<FiSun />} rightIcon={<FiMoon />} />
+                </div>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}>
+                    <span>Auto Save</span>
+                    <Toggle isOn={settings.autoSave} onToggle={value => setSettings({
+          ...settings,
+          autoSave: value
+        })} leftLabel="Manual" rightLabel="Auto" />
+                </div>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}>
+                    <span>View Mode</span>
+                    <Toggle isOn={settings.compactView} onToggle={value => setSettings({
+          ...settings,
+          compactView: value
+        })} leftIcon={<FiGrid />} rightIcon={<FiList />} leftLabel="Grid" rightLabel="List" style={{
+          fontSize: '14px'
+        }} />
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(_=(P=u.parameters)==null?void 0:P.docs)==null?void 0:_.source}}};const Y=["Default","WithoutLabels","WithIcons","WithLabelsAndIcons","ViewToggle","Interactive","ThemeToggle","CustomStyling","MultipleToggles"];export{p as CustomStyling,l as Default,f as Interactive,u as MultipleToggles,m as ThemeToggle,d as ViewToggle,g as WithIcons,c as WithLabelsAndIcons,i as WithoutLabels,Y as __namedExportsOrder,X as default};