@stfrigerio/sito-template 0.1.37 → 0.1.39

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

@@ -1,62 +0,0 @@
-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.stories-BchhRfKo.js

@@ -1,50 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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.stories-BUSZc6m3.js

@@ -1,194 +0,0 @@
-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};

package/storybook-static/assets/ToggleButton-Dl6hvkJv.js

@@ -1,32 +0,0 @@
-import{j as a}from"./iframe-BUaP2gIF.js";import{m as t}from"./proxy-9Y4F2rF8.js";import{A as c}from"./index-CZs7_DA6.js";const z="_button_1iiwz_1",k="_background_1iiwz_33",T="_content_1iiwz_49",x="_iconWrapper_1iiwz_58",j="_icon_1iiwz_58",A="_label_1iiwz_75",C="_hideMobile_1iiwz_81",N="_checkmark_1iiwz_86",q="_ripple_1iiwz_101",B="_small_1iiwz_119",V="_large_1iiwz_133",W="_active_1iiwz_148",R="_outlined_1iiwz_154",S="_filled_1iiwz_168",L="_ghost_1iiwz_179",M="_active-primary_1iiwz_196",P="_active-secondary_1iiwz_202",I="_active-success_1iiwz_208",D="_active-danger_1iiwz_214",E="_active-warning_1iiwz_220",F="_animation-scale_1iiwz_258",Y="_scaleAnimation_1iiwz_1",$="_animation-rotate_1iiwz_262",H="_rotateAnimation_1iiwz_1",J="_animation-flip_1iiwz_266",O="_flipAnimation_1iiwz_1",X="_disabled_1iiwz_298",e={button:z,background:k,content:T,iconWrapper:x,icon:j,label:A,hideMobile:C,checkmark:N,ripple:q,small:B,large:V,default:"_default_1iiwz_148",active:W,outlined:R,filled:S,ghost:L,"active-primary":"_active-primary_1iiwz_196",activePrimary:M,"active-secondary":"_active-secondary_1iiwz_202",activeSecondary:P,"active-success":"_active-success_1iiwz_208",activeSuccess:I,"active-danger":"_active-danger_1iiwz_214",activeDanger:D,"active-warning":"_active-warning_1iiwz_220",activeWarning:E,"animation-scale":"_animation-scale_1iiwz_258",animationScale:F,scaleAnimation:Y,"animation-rotate":"_animation-rotate_1iiwz_262",animationRotate:$,rotateAnimation:H,"animation-flip":"_animation-flip_1iiwz_266",animationFlip:J,flipAnimation:O,disabled:X},G=({active:i,onClick:r,icon:n,label:l,disabled:o=!1,size:m="medium",variant:d="default",activeColor:u="primary",showCheckmark:p=!1,animation:s="scale",className:_="",tooltip:v,hideLabelOnMobile:f=!1})=>{const g=[e.button,e[m],e[d],i&&e.active,i&&e[`active-${u}`],o&&e.disabled,s!=="none"&&e[`animation-${s}`],_].filter(Boolean).join(" "),h=[e.label,f&&e.hideMobile].filter(Boolean).join(" "),w={scale:{inactive:{scale:1},active:{scale:[1,1.2,1]}},rotate:{inactive:{rotate:0},active:{rotate:360}},flip:{inactive:{rotateY:0},active:{rotateY:180}},none:{inactive:{},active:{}}},y={hidden:{scale:0,opacity:0,rotate:-90},visible:{scale:1,opacity:1,rotate:0,transition:{type:"spring",stiffness:500,damping:25}}},b={inactive:{scale:0,opacity:0},active:{scale:1,opacity:1,transition:{type:"spring",stiffness:400,damping:20}}};return a.jsxs(t.button,{className:g,onClick:r,disabled:o,whileHover:o?void 0:{scale:1.05},whileTap:o?void 0:{scale:.95},title:v,"aria-pressed":i,"aria-label":l,children:[a.jsx(t.div,{className:e.background,variants:b,initial:"inactive",animate:i?"active":"inactive"}),a.jsxs("div",{className:e.content,children:[n&&a.jsx(t.div,{className:e.iconWrapper,variants:w[s],initial:"inactive",animate:i?"active":"inactive",transition:{duration:.3},children:typeof n=="string"?a.jsx("span",{className:e.icon,children:n}):a.jsx("div",{className:e.icon,children:n})}),l&&a.jsx("span",{className:h,children:l}),a.jsx(c,{children:p&&i&&a.jsx(t.div,{className:e.checkmark,variants:y,initial:"hidden",animate:"visible",exit:"hidden",children:a.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:a.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})})})})]}),a.jsx(c,{children:i&&a.jsx(t.div,{className:e.ripple,initial:{scale:0,opacity:.5},animate:{scale:2,opacity:0},exit:{scale:0,opacity:0},transition:{duration:.6}})})]})};G.__docgenInfo={description:`ToggleButton Component
-
-@component
-@description
-A toggle button component that can be activated/deactivated with a click.
-Different from a toggle switch, this is a button with on/off states.
-Perfect for boolean habits tracking or feature toggles.
-
-@example
-// Basic usage
-<ToggleButton
-  active={isActive}
-  onClick={() => setIsActive(!isActive)}
-  icon="🦷"
-  label="Teeth"
-/>
-
-@example
-// With custom styling and animation
-<ToggleButton
-  active={isEnabled}
-  onClick={handleToggle}
-  icon={<CustomIcon />}
-  label="Feature"
-  variant="filled"
-  activeColor="success"
-  animation="flip"
-  showCheckmark
-/>
-
-@param {ToggleButtonProps} props - The props for the ToggleButton component
-@returns {JSX.Element} The rendered ToggleButton component`,methods:[],displayName:"ToggleButton",props:{active:{required:!0,tsType:{name:"boolean"},description:"Whether the button is active/selected"},onClick:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Click handler"},icon:{required:!1,tsType:{name:"union",raw:"string | React.ReactNode",elements:[{name:"string"},{name:"ReactReactNode",raw:"React.ReactNode"}]},description:"Icon or emoji to display"},label:{required:!1,tsType:{name:"string"},description:"Label text"},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the button is disabled",defaultValue:{value:"false",computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'small' | 'medium' | 'large'",elements:[{name:"literal",value:"'small'"},{name:"literal",value:"'medium'"},{name:"literal",value:"'large'"}]},description:"Size variant",defaultValue:{value:"'medium'",computed:!1}},variant:{required:!1,tsType:{name:"union",raw:"'default' | 'outlined' | 'filled' | 'ghost'",elements:[{name:"literal",value:"'default'"},{name:"literal",value:"'outlined'"},{name:"literal",value:"'filled'"},{name:"literal",value:"'ghost'"}]},description:"Visual variant",defaultValue:{value:"'default'",computed:!1}},activeColor:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'success' | 'danger' | 'warning'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'success'"},{name:"literal",value:"'danger'"},{name:"literal",value:"'warning'"}]},description:"Color when active",defaultValue:{value:"'primary'",computed:!1}},showCheckmark:{required:!1,tsType:{name:"boolean"},description:"Show a checkmark when active",defaultValue:{value:"false",computed:!1}},animation:{required:!1,tsType:{name:"union",raw:"'scale' | 'rotate' | 'flip' | 'none'",elements:[{name:"literal",value:"'scale'"},{name:"literal",value:"'rotate'"},{name:"literal",value:"'flip'"},{name:"literal",value:"'none'"}]},description:"Animation type for state change",defaultValue:{value:"'scale'",computed:!1}},className:{required:!1,tsType:{name:"string"},description:"Custom className",defaultValue:{value:"''",computed:!1}},tooltip:{required:!1,tsType:{name:"string"},description:"Tooltip text"},hideLabelOnMobile:{required:!1,tsType:{name:"boolean"},description:"Whether to show the label on mobile",defaultValue:{value:"false",computed:!1}}}};export{G as T};

package/storybook-static/assets/ToggleButton-gfPoPxTQ.css

@@ -1 +0,0 @@
-._button_1iiwz_1{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);color:var(--color-text-secondary);font-family:var(--font-family-primary);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);overflow:hidden;outline:none;-webkit-user-select:none;user-select:none}._button_1iiwz_1:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._button_1iiwz_1:hover:not(:disabled){border-color:var(--color-primary-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}._background_1iiwz_33{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));z-index:0;border-radius:calc(var(--radius-lg) - 2px)}._content_1iiwz_49{position:relative;z-index:1;display:flex;align-items:center;gap:var(--spacing-sm)}._iconWrapper_1iiwz_58{display:flex;align-items:center;justify-content:center;position:relative}._icon_1iiwz_58{font-size:var(--font-size-xl);line-height:1;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-base)}._label_1iiwz_75{font-size:var(--font-size-base);letter-spacing:var(--letter-spacing-normal);transition:all var(--transition-base)}._hideMobile_1iiwz_81{display:inline}._checkmark_1iiwz_86{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:currentColor}._checkmark_1iiwz_86 svg{width:100%;height:100%}._ripple_1iiwz_101{position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent);transform:translate(-50%,-50%);pointer-events:none;z-index:0}._small_1iiwz_119{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}._small_1iiwz_119 ._icon_1iiwz_58{font-size:var(--font-size-base)}._small_1iiwz_119 ._checkmark_1iiwz_86{width:12px;height:12px}._large_1iiwz_133{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}._large_1iiwz_133 ._icon_1iiwz_58{font-size:var(--font-size-2xl)}._large_1iiwz_133 ._checkmark_1iiwz_86{width:20px;height:20px}._default_1iiwz_148._active_1iiwz_148{background:var(--color-primary);border-color:var(--color-primary);color:#fff}._outlined_1iiwz_154{background:transparent}._outlined_1iiwz_154._active_1iiwz_148{border-color:var(--color-primary);color:var(--color-primary);background:transparent}._outlined_1iiwz_154 ._background_1iiwz_33{background:#7c3aed1a}._filled_1iiwz_168{background:var(--color-background-secondary);border-color:transparent}._filled_1iiwz_168._active_1iiwz_148{background:var(--color-primary);border-color:var(--color-primary);color:#fff}._ghost_1iiwz_179{background:transparent;border-color:transparent}._ghost_1iiwz_179:hover:not(:disabled){background:var(--color-background-secondary);border-color:transparent}._ghost_1iiwz_179._active_1iiwz_148{background:var(--color-primary-lighter);color:var(--color-primary);border-color:transparent}._active-primary_1iiwz_196._active_1iiwz_148{background:var(--color-primary);border-color:var(--color-primary);color:#fff}._active-secondary_1iiwz_202._active_1iiwz_148{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}._active-success_1iiwz_208._active_1iiwz_148{background:var(--color-success, #10b981);border-color:var(--color-success, #10b981);color:#fff}._active-danger_1iiwz_214._active_1iiwz_148{background:var(--color-danger, #ef4444);border-color:var(--color-danger, #ef4444);color:#fff}._active-warning_1iiwz_220._active_1iiwz_148{background:var(--color-warning, #f59e0b);border-color:var(--color-warning, #f59e0b);color:#fff}._outlined_1iiwz_154._active-primary_1iiwz_196._active_1iiwz_148{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}._outlined_1iiwz_154._active-secondary_1iiwz_202._active_1iiwz_148{background:transparent;border-color:var(--color-secondary);color:var(--color-secondary)}._outlined_1iiwz_154._active-success_1iiwz_208._active_1iiwz_148{background:transparent;border-color:var(--color-success, #10b981);color:var(--color-success, #10b981)}._outlined_1iiwz_154._active-danger_1iiwz_214._active_1iiwz_148{background:transparent;border-color:var(--color-danger, #ef4444);color:var(--color-danger, #ef4444)}._outlined_1iiwz_154._active-warning_1iiwz_220._active_1iiwz_148{background:transparent;border-color:var(--color-warning, #f59e0b);color:var(--color-warning, #f59e0b)}._animation-scale_1iiwz_258._active_1iiwz_148 ._iconWrapper_1iiwz_58{animation:_scaleAnimation_1iiwz_1 .3s ease-in-out}._animation-rotate_1iiwz_262._active_1iiwz_148 ._iconWrapper_1iiwz_58{animation:_rotateAnimation_1iiwz_1 .5s ease-in-out}._animation-flip_1iiwz_266._active_1iiwz_148 ._iconWrapper_1iiwz_58{animation:_flipAnimation_1iiwz_1 .5s ease-in-out}@keyframes _scaleAnimation_1iiwz_1{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes _rotateAnimation_1iiwz_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes _flipAnimation_1iiwz_1{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}._disabled_1iiwz_298{opacity:.5;cursor:not-allowed}._disabled_1iiwz_298:hover{transform:none;box-shadow:none;border-color:var(--color-border)}[data-theme=dark] ._button_1iiwz_1{background:var(--color-background-secondary);border-color:var(--color-border)}[data-theme=dark] ._outlined_1iiwz_154{background:transparent}[data-theme=dark] ._outlined_1iiwz_154._active_1iiwz_148{border-color:var(--color-primary-light);color:var(--color-primary-light)}[data-theme=dark] ._outlined_1iiwz_154 ._background_1iiwz_33{background:#a78bfa26}[data-theme=dark] ._filled_1iiwz_168{background:var(--color-background-tertiary)}[data-theme=dark] ._ghost_1iiwz_179:hover:not(:disabled){background:var(--color-background-tertiary)}[data-theme=dark] ._ghost_1iiwz_179._active_1iiwz_148{background:#a78bfa33;color:var(--color-primary-light)}@media (max-width: 768px){._hideMobile_1iiwz_81{display:none}._button_1iiwz_1{padding:var(--spacing-sm)}._small_1iiwz_119{padding:var(--spacing-xs)}._large_1iiwz_133{padding:var(--spacing-md)}}

package/storybook-static/assets/ToggleButton.stories-BKN4zU3N.js

@@ -1,143 +0,0 @@
-import{j as e,r as o}from"./iframe-BUaP2gIF.js";import{T as a}from"./ToggleButton-Dl6hvkJv.js";import"./preload-helper-C1FmrZbK.js";import"./proxy-9Y4F2rF8.js";import"./index-CZs7_DA6.js";const ie={title:"Atoms/ToggleButton",component:a,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{active:{control:"boolean",description:"Whether the button is active/selected"},onClick:{action:"clicked",description:"Click handler"},icon:{control:"text",description:"Icon or emoji to display"},label:{control:"text",description:"Label text"},disabled:{control:"boolean",description:"Whether the button is disabled"},size:{control:{type:"select"},options:["small","medium","large"],description:"Size variant"},variant:{control:{type:"select"},options:["default","outlined","filled","ghost"],description:"Visual variant"},activeColor:{control:{type:"select"},options:["primary","secondary","success","danger","warning"],description:"Color when active"},showCheckmark:{control:"boolean",description:"Show a checkmark when active"},animation:{control:{type:"select"},options:["scale","rotate","flip","none"],description:"Animation type for state change"},tooltip:{control:"text",description:"Tooltip text"},hideLabelOnMobile:{control:"boolean",description:"Whether to hide the label on mobile"}}},b=t=>{const[n,s]=o.useState(t.active||!1);return e.jsx(a,{...t,active:n,onClick:()=>{var l;s(!n),(l=t.onClick)==null||l.call(t)}})},m={render:t=>e.jsx(b,{...t}),args:{active:!1,icon:"🦷",label:"Teeth"}},p={render:t=>e.jsx(b,{...t}),args:{active:!1,icon:"✅",label:"Complete",showCheckmark:!0}},g={render:()=>{const[t,n]=o.useState(!1),[s,l]=o.useState(!1),[i,c]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(a,{active:t,onClick:()=>n(!t),icon:"🐁",label:"Small",size:"small"}),e.jsx(a,{active:s,onClick:()=>l(!s),icon:"🐕",label:"Medium",size:"medium"}),e.jsx(a,{active:i,onClick:()=>c(!i),icon:"🐘",label:"Large",size:"large"})]})}},v={render:()=>{const[t,n]=o.useState(!1),[s,l]=o.useState(!1),[i,c]=o.useState(!1),[r,u]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>n(!t),icon:"🎨",label:"Default",variant:"default"}),e.jsx(a,{active:s,onClick:()=>l(!s),icon:"📝",label:"Outlined",variant:"outlined"}),e.jsx(a,{active:i,onClick:()=>c(!i),icon:"🎯",label:"Filled",variant:"filled"}),e.jsx(a,{active:r,onClick:()=>u(!r),icon:"👻",label:"Ghost",variant:"ghost"})]})}},f={render:()=>{const[t,n]=o.useState(!1),[s,l]=o.useState(!1),[i,c]=o.useState(!1),[r,u]=o.useState(!1),[d,y]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>n(!t),icon:"💜",label:"Primary",activeColor:"primary"}),e.jsx(a,{active:s,onClick:()=>l(!s),icon:"💚",label:"Secondary",activeColor:"secondary"}),e.jsx(a,{active:i,onClick:()=>c(!i),icon:"✅",label:"Success",activeColor:"success"}),e.jsx(a,{active:r,onClick:()=>u(!r),icon:"⚠️",label:"Danger",activeColor:"danger"}),e.jsx(a,{active:d,onClick:()=>y(!d),icon:"🔔",label:"Warning",activeColor:"warning"})]})}},k={render:()=>{const[t,n]=o.useState(!1),[s,l]=o.useState(!1),[i,c]=o.useState(!1),[r,u]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>n(!t),icon:"🎈",label:"Scale",animation:"scale"}),e.jsx(a,{active:s,onClick:()=>l(!s),icon:"🌀",label:"Rotate",animation:"rotate"}),e.jsx(a,{active:i,onClick:()=>c(!i),icon:"🔄",label:"Flip",animation:"flip"}),e.jsx(a,{active:r,onClick:()=>u(!r),icon:"⏸️",label:"None",animation:"none"})]})}},C={render:()=>{const[t,n]=o.useState(!1),[s,l]=o.useState(!1),[i,c]=o.useState(!1),[r,u]=o.useState(!1),[d,y]=o.useState(!1);return e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(120px, 1fr))",gap:"12px",maxWidth:"400px"},children:[e.jsx(a,{active:t,onClick:()=>n(!t),icon:"🦷",label:"Teeth",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:s,onClick:()=>l(!s),icon:"🚿",label:"Shower",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:i,onClick:()=>c(!i),icon:"🧘",label:"Meditate",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:r,onClick:()=>u(!r),icon:"💊",label:"Vitamins",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:d,onClick:()=>y(!d),icon:"💪",label:"Exercise",variant:"outlined",activeColor:"success",showCheckmark:!0})]})}},h={render:()=>{const[t,n]=o.useState(!1),[s,l]=o.useState(!1),[i,c]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"12px"},children:[e.jsx(a,{active:t,onClick:()=>n(!t),icon:"❤️",tooltip:"Add to favorites",activeColor:"danger",animation:"scale"}),e.jsx(a,{active:s,onClick:()=>l(!s),icon:"🔖",tooltip:"Bookmark",activeColor:"primary",animation:"flip"}),e.jsx(a,{active:i,onClick:()=>c(!i),icon:"🔔",tooltip:"Enable notifications",activeColor:"warning",animation:"rotate"})]})}},S={render:t=>e.jsx(b,{...t}),args:{active:!0,icon:"🔒",label:"Disabled",disabled:!0}},x={render:()=>{const[t,n]=o.useState(!1),[s,l]=o.useState(!1),[i,c]=o.useState(!1),[r,u]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>n(!t),icon:"🎨",label:"Primary",variant:"outlined",activeColor:"primary",showCheckmark:!0}),e.jsx(a,{active:s,onClick:()=>l(!s),icon:"🎭",label:"Secondary",variant:"outlined",activeColor:"secondary",showCheckmark:!0}),e.jsx(a,{active:i,onClick:()=>c(!i),icon:"✨",label:"Success",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:r,onClick:()=>u(!r),icon:"🚨",label:"Danger",variant:"outlined",activeColor:"danger",showCheckmark:!0})]})}};var w,T,j;m.parameters={...m.parameters,docs:{...(w=m.parameters)==null?void 0:w.docs,source:{originalSource:`{
-  render: args => <ToggleButtonWrapper {...args} />,
-  args: {
-    active: false,
-    icon: '🦷',
-    label: 'Teeth'
-  }
-}`,...(j=(T=m.parameters)==null?void 0:T.docs)==null?void 0:j.source}}};var B,W,D;p.parameters={...p.parameters,docs:{...(B=p.parameters)==null?void 0:B.docs,source:{originalSource:`{
-  render: args => <ToggleButtonWrapper {...args} />,
-  args: {
-    active: false,
-    icon: '✅',
-    label: 'Complete',
-    showCheckmark: true
-  }
-}`,...(D=(W=p.parameters)==null?void 0:W.docs)==null?void 0:D.source}}};var F,M,O;g.parameters={...g.parameters,docs:{...(F=g.parameters)==null?void 0:F.docs,source:{originalSource:`{
-  render: () => {
-    const [small, setSmall] = useState(false);
-    const [medium, setMedium] = useState(false);
-    const [large, setLarge] = useState(false);
-    return <div style={{
-      display: 'flex',
-      gap: '16px',
-      alignItems: 'center'
-    }}>
-                <ToggleButton active={small} onClick={() => setSmall(!small)} icon="🐁" label="Small" size="small" />
-                <ToggleButton active={medium} onClick={() => setMedium(!medium)} icon="🐕" label="Medium" size="medium" />
-                <ToggleButton active={large} onClick={() => setLarge(!large)} icon="🐘" label="Large" size="large" />
-            </div>;
-  }
-}`,...(O=(M=g.parameters)==null?void 0:M.docs)==null?void 0:O.source}}};var z,E,P;v.parameters={...v.parameters,docs:{...(z=v.parameters)==null?void 0:z.docs,source:{originalSource:`{
-  render: () => {
-    const [default1, setDefault1] = useState(false);
-    const [outlined, setOutlined] = useState(false);
-    const [filled, setFilled] = useState(false);
-    const [ghost, setGhost] = useState(false);
-    return <div style={{
-      display: 'flex',
-      gap: '16px',
-      flexWrap: 'wrap'
-    }}>
-                <ToggleButton active={default1} onClick={() => setDefault1(!default1)} icon="🎨" label="Default" variant="default" />
-                <ToggleButton active={outlined} onClick={() => setOutlined(!outlined)} icon="📝" label="Outlined" variant="outlined" />
-                <ToggleButton active={filled} onClick={() => setFilled(!filled)} icon="🎯" label="Filled" variant="filled" />
-                <ToggleButton active={ghost} onClick={() => setGhost(!ghost)} icon="👻" label="Ghost" variant="ghost" />
-            </div>;
-  }
-}`,...(P=(E=v.parameters)==null?void 0:E.docs)==null?void 0:P.source}}};var A,N,V;f.parameters={...f.parameters,docs:{...(A=f.parameters)==null?void 0:A.docs,source:{originalSource:`{
-  render: () => {
-    const [primary, setPrimary] = useState(false);
-    const [secondary, setSecondary] = useState(false);
-    const [success, setSuccess] = useState(false);
-    const [danger, setDanger] = useState(false);
-    const [warning, setWarning] = useState(false);
-    return <div style={{
-      display: 'flex',
-      gap: '16px',
-      flexWrap: 'wrap'
-    }}>
-                <ToggleButton active={primary} onClick={() => setPrimary(!primary)} icon="💜" label="Primary" activeColor="primary" />
-                <ToggleButton active={secondary} onClick={() => setSecondary(!secondary)} icon="💚" label="Secondary" activeColor="secondary" />
-                <ToggleButton active={success} onClick={() => setSuccess(!success)} icon="✅" label="Success" activeColor="success" />
-                <ToggleButton active={danger} onClick={() => setDanger(!danger)} icon="⚠️" label="Danger" activeColor="danger" />
-                <ToggleButton active={warning} onClick={() => setWarning(!warning)} icon="🔔" label="Warning" activeColor="warning" />
-            </div>;
-  }
-}`,...(V=(N=f.parameters)==null?void 0:N.docs)==null?void 0:V.source}}};var L,R,G;k.parameters={...k.parameters,docs:{...(L=k.parameters)==null?void 0:L.docs,source:{originalSource:`{
-  render: () => {
-    const [scale, setScale] = useState(false);
-    const [rotate, setRotate] = useState(false);
-    const [flip, setFlip] = useState(false);
-    const [none, setNone] = useState(false);
-    return <div style={{
-      display: 'flex',
-      gap: '16px',
-      flexWrap: 'wrap'
-    }}>
-                <ToggleButton active={scale} onClick={() => setScale(!scale)} icon="🎈" label="Scale" animation="scale" />
-                <ToggleButton active={rotate} onClick={() => setRotate(!rotate)} icon="🌀" label="Rotate" animation="rotate" />
-                <ToggleButton active={flip} onClick={() => setFlip(!flip)} icon="🔄" label="Flip" animation="flip" />
-                <ToggleButton active={none} onClick={() => setNone(!none)} icon="⏸️" label="None" animation="none" />
-            </div>;
-  }
-}`,...(G=(R=k.parameters)==null?void 0:R.docs)==null?void 0:G.source}}};var I,H,_;C.parameters={...C.parameters,docs:{...(I=C.parameters)==null?void 0:I.docs,source:{originalSource:`{
-  render: () => {
-    const [teeth, setTeeth] = useState(false);
-    const [shower, setShower] = useState(false);
-    const [meditation, setMeditation] = useState(false);
-    const [vitamins, setVitamins] = useState(false);
-    const [exercise, setExercise] = useState(false);
-    return <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
-      gap: '12px',
-      maxWidth: '400px'
-    }}>
-                <ToggleButton active={teeth} onClick={() => setTeeth(!teeth)} icon="🦷" label="Teeth" variant="outlined" activeColor="success" showCheckmark />
-                <ToggleButton active={shower} onClick={() => setShower(!shower)} icon="🚿" label="Shower" variant="outlined" activeColor="success" showCheckmark />
-                <ToggleButton active={meditation} onClick={() => setMeditation(!meditation)} icon="🧘" label="Meditate" variant="outlined" activeColor="success" showCheckmark />
-                <ToggleButton active={vitamins} onClick={() => setVitamins(!vitamins)} icon="💊" label="Vitamins" variant="outlined" activeColor="success" showCheckmark />
-                <ToggleButton active={exercise} onClick={() => setExercise(!exercise)} icon="💪" label="Exercise" variant="outlined" activeColor="success" showCheckmark />
-            </div>;
-  }
-}`,...(_=(H=C.parameters)==null?void 0:H.docs)==null?void 0:_.source}}};var q,J,K;h.parameters={...h.parameters,docs:{...(q=h.parameters)==null?void 0:q.docs,source:{originalSource:`{
-  render: () => {
-    const [favorite, setFavorite] = useState(false);
-    const [bookmark, setBookmark] = useState(false);
-    const [notification, setNotification] = useState(false);
-    return <div style={{
-      display: 'flex',
-      gap: '12px'
-    }}>
-                <ToggleButton active={favorite} onClick={() => setFavorite(!favorite)} icon="❤️" tooltip="Add to favorites" activeColor="danger" animation="scale" />
-                <ToggleButton active={bookmark} onClick={() => setBookmark(!bookmark)} icon="🔖" tooltip="Bookmark" activeColor="primary" animation="flip" />
-                <ToggleButton active={notification} onClick={() => setNotification(!notification)} icon="🔔" tooltip="Enable notifications" activeColor="warning" animation="rotate" />
-            </div>;
-  }
-}`,...(K=(J=h.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var Q,U,X;S.parameters={...S.parameters,docs:{...(Q=S.parameters)==null?void 0:Q.docs,source:{originalSource:`{
-  render: args => <ToggleButtonWrapper {...args} />,
-  args: {
-    active: true,
-    icon: '🔒',
-    label: 'Disabled',
-    disabled: true
-  }
-}`,...(X=(U=S.parameters)==null?void 0:U.docs)==null?void 0:X.source}}};var Y,Z,$;x.parameters={...x.parameters,docs:{...(Y=x.parameters)==null?void 0:Y.docs,source:{originalSource:`{
-  render: () => {
-    const [primary, setPrimary] = useState(false);
-    const [secondary, setSecondary] = useState(false);
-    const [success, setSuccess] = useState(false);
-    const [danger, setDanger] = useState(false);
-    return <div style={{
-      display: 'flex',
-      gap: '16px',
-      flexWrap: 'wrap'
-    }}>
-                <ToggleButton active={primary} onClick={() => setPrimary(!primary)} icon="🎨" label="Primary" variant="outlined" activeColor="primary" showCheckmark />
-                <ToggleButton active={secondary} onClick={() => setSecondary(!secondary)} icon="🎭" label="Secondary" variant="outlined" activeColor="secondary" showCheckmark />
-                <ToggleButton active={success} onClick={() => setSuccess(!success)} icon="✨" label="Success" variant="outlined" activeColor="success" showCheckmark />
-                <ToggleButton active={danger} onClick={() => setDanger(!danger)} icon="🚨" label="Danger" variant="outlined" activeColor="danger" showCheckmark />
-            </div>;
-  }
-}`,...($=(Z=x.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};const ne=["Default","WithCheckmark","DifferentSizes","Variants","ActiveColors","AnimationTypes","BooleanHabits","IconOnly","Disabled","OutlinedWithColors"];export{f as ActiveColors,k as AnimationTypes,C as BooleanHabits,m as Default,g as DifferentSizes,S as Disabled,h as IconOnly,x as OutlinedWithColors,v as Variants,p as WithCheckmark,ne as __namedExportsOrder,ie as default};