@stfrigerio/sito-template 0.1.57 → 0.1.59

package/storybook-static/assets/NumberStepper.stories-BvFwBEjt.js

@@ -1,436 +0,0 @@
-import{j as n,r as C}from"./iframe-B8pH-Lvr.js";import{N as a}from"./NumberStepper--0cJcLNZ.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-Bk2W5gkV.js";import"./proxy-BA3VZtN5.js";import"./MotionConfigContext-D5hZdVGx.js";import"./index-DBfrIdYd.js";const Qe={title:"Atoms/NumberStepper",component:a,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{value:{control:{type:"number"},description:"Current value of the stepper"},onChange:{action:"changed",description:"Callback when value changes"},min:{control:{type:"number"},description:"Minimum allowed value"},max:{control:{type:"number"},description:"Maximum allowed value"},step:{control:{type:"number"},description:"Step increment/decrement amount"},label:{control:"text",description:"Label text for the stepper"},icon:{control:"text",description:"Icon or emoji to display"},disabled:{control:"boolean",description:"Whether the stepper is disabled"},size:{control:{type:"select"},options:["small","medium","large"],description:"Size variant of the stepper"},variant:{control:{type:"select"},options:["default","outlined","filled","minimal","custom"],description:"Visual variant of the stepper"},showPlusMinus:{control:"boolean",description:"Show plus/minus icons instead of arrows"},allowKeyboard:{control:"boolean",description:"Allow keyboard navigation"}}},r=e=>{const[R,j]=C.useState(e.value||0);return n.jsx(a,{...e,value:R,onChange:o=>{var t;j(o),(t=e.onChange)==null||t.call(e,o)}})},s={render:e=>n.jsx(r,{...e}),args:{value:5,min:0,max:10,step:1}},i={render:e=>n.jsx(r,{...e}),args:{value:5,min:0,max:100,step:1,label:"Cigarettes",icon:"🚬"}},p={render:e=>n.jsx(r,{...e}),args:{value:1,min:1,max:99,step:1,label:"Quantity",icon:"📦",showPlusMinus:!0}},l={render:e=>n.jsx(r,{...e}),args:{value:20,min:16,max:30,step:.5,label:"Temperature",icon:"🌡️",variant:"filled"}},d={render:e=>n.jsx(r,{...e}),args:{value:3,min:0,max:10,step:1,size:"small",label:"Small"}},c={render:e=>n.jsx(r,{...e}),args:{value:50,min:0,max:100,step:10,size:"large",label:"Large",icon:"🎯"}},u={render:e=>n.jsx(r,{...e}),args:{value:25,min:0,max:100,step:5,variant:"outlined",label:"Progress",icon:"📊"}},m={render:e=>n.jsx(r,{...e}),args:{value:7,min:1,max:10,step:1,variant:"filled",label:"Rating",icon:"⭐"}},b={render:e=>n.jsx(r,{...e}),args:{value:5,min:0,max:10,step:1,disabled:!0,label:"Disabled"}},g={render:e=>n.jsx(r,{...e}),args:{value:0,step:1,label:"Unlimited",icon:"♾️"}},x={render:e=>n.jsx(r,{...e}),args:{value:1.5,min:0,max:5,step:.1,label:"Decimal",icon:"🔢"}},f={render:()=>{const[e,R]=C.useState(0),[j,o]=C.useState(0),[t,Me]=C.useState(7);return n.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[n.jsx(a,{value:e,onChange:R,min:0,max:10,step:1,label:"Glasses of Water",icon:"💧",variant:"filled"}),n.jsx(a,{value:j,onChange:o,min:0,max:120,step:15,label:"Exercise (minutes)",icon:"🏃",variant:"outlined"}),n.jsx(a,{value:t,onChange:Me,min:0,max:12,step:.5,label:"Hours of Sleep",icon:"😴"})]})}},S={render:e=>n.jsx(r,{...e}),args:{value:42,min:0,max:100,step:1,variant:"minimal",label:"Minimal Style"}},h={render:e=>n.jsx(r,{...e}),args:{value:5,min:0,max:10,step:1,label:"Custom Styled",icon:"🎨",customStyles:{container:{background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",padding:"20px",borderRadius:"16px",boxShadow:"0 10px 30px rgba(0,0,0,0.2)"},label:{color:"white",fontSize:"18px",fontWeight:"bold"},icon:{fontSize:"24px"},button:{background:"rgba(255,255,255,0.2)",color:"white",border:"1px solid rgba(255,255,255,0.3)",borderRadius:"8px"},buttonHover:{background:"rgba(255,255,255,0.3)",transform:"scale(1.1)"},value:{color:"white",fontSize:"24px",fontWeight:"bold",background:"transparent"},valueContainer:{background:"rgba(255,255,255,0.1)",borderRadius:"8px"}}}},v={render:e=>n.jsx(r,{...e}),args:{value:100,min:0,max:999,step:1,label:"Health Points",icon:"❤️",showPlusMinus:!0,customStyles:{container:{background:"#1a1a2e",border:"2px solid #16213e",borderRadius:"12px",padding:"16px"},header:{marginBottom:"12px"},label:{color:"#eaeaea",fontSize:"14px",textTransform:"uppercase",letterSpacing:"1px"},icon:{filter:"drop-shadow(0 0 10px rgba(255, 0, 0, 0.5))"},stepper:{background:"#0f3460",borderRadius:"8px",padding:"8px"},button:{background:"#e94560",color:"white",border:"none",borderRadius:"6px",transition:"all 0.3s ease"},buttonHover:{background:"#ff4666",boxShadow:"0 0 20px rgba(233, 69, 96, 0.5)"},value:{color:"#00ff00",fontSize:"28px",fontFamily:"monospace",fontWeight:"bold",textShadow:"0 0 10px rgba(0, 255, 0, 0.5)"}}}},y={render:e=>n.jsx(r,{...e}),args:{value:75,min:0,max:100,step:5,label:"Volume",icon:"🔊",customStyles:{container:{background:"#0a0a0a",border:"2px solid #00ffff",borderRadius:"20px",padding:"24px",boxShadow:"0 0 30px rgba(0, 255, 255, 0.3)"},label:{color:"#00ffff",fontSize:"16px",textTransform:"uppercase",textShadow:"0 0 10px rgba(0, 255, 255, 0.8)"},icon:{fontSize:"28px",filter:"drop-shadow(0 0 10px rgba(0, 255, 255, 0.5))"},button:{background:"transparent",color:"#ff00ff",border:"2px solid #ff00ff",borderRadius:"50%",width:"40px",height:"40px"},buttonHover:{background:"rgba(255, 0, 255, 0.2)",boxShadow:"0 0 20px rgba(255, 0, 255, 0.8)"},buttonIcon:{filter:"drop-shadow(0 0 5px currentColor)"},value:{color:"#ffff00",fontSize:"32px",fontWeight:"bold",textShadow:"0 0 15px rgba(255, 255, 0, 0.8)",background:"transparent"},valueContainer:{background:"rgba(255, 255, 255, 0.05)",border:"1px solid rgba(255, 255, 255, 0.2)",borderRadius:"10px"}}}},w={render:e=>n.jsx(r,{...e}),args:{value:5,min:0,max:10,step:1,label:"Vertical Layout",icon:"↕️",layout:"vertical",customStyles:{container:{background:"#f0f4f8",padding:"20px",borderRadius:"12px",minWidth:"200px"},header:{textAlign:"center",marginBottom:"16px"},stepper:{flexDirection:"column",gap:"12px"},button:{width:"100%",height:"40px"},valueContainer:{width:"100%",padding:"12px",background:"white",borderRadius:"8px"}}}},k={render:e=>n.jsx(r,{...e}),args:{value:3,min:1,max:5,step:1,label:"Star Rating",customButtons:{decrement:n.jsx("span",{style:{fontSize:"20px"},children:"👎"}),increment:n.jsx("span",{style:{fontSize:"20px"},children:"👍"})},customStyles:{button:{background:"transparent",border:"2px solid #ffd700",borderRadius:"50%",width:"50px",height:"50px"},buttonHover:{background:"rgba(255, 215, 0, 0.2)"},value:{fontSize:"24px",fontWeight:"bold",color:"#ffd700"}}}},W={render:e=>n.jsx(r,{...e}),args:{value:50,min:0,max:100,step:10,label:"Progress",icon:"📈",hideLimits:!1,customStyles:{limits:{display:"flex",justifyContent:"space-between",marginTop:"8px",fontSize:"12px",color:"#666"}}}},z={render:e=>n.jsx(r,{...e}),args:{value:25,min:0,max:100,step:5,label:"Discount %",icon:"🏷️",variant:"custom",customStyles:{container:{display:"flex",alignItems:"center",gap:"16px",background:"#fff3e0",padding:"12px 20px",borderRadius:"30px",border:"2px solid #ff9800"},header:{flex:1,marginBottom:0,display:"flex",alignItems:"center",gap:"8px"},label:{color:"#e65100",fontWeight:"bold"},stepper:{background:"white",borderRadius:"20px",padding:"4px",border:"1px solid #ffcc80"},button:{background:"#ff9800",color:"white",borderRadius:"50%",width:"32px",height:"32px",border:"none"},value:{color:"#e65100",fontWeight:"bold",fontSize:"18px"}}}};var N,D,L;s.parameters={...s.parameters,docs:{...(N=s.parameters)==null?void 0:N.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 5,
-    min: 0,
-    max: 10,
-    step: 1
-  }
-}`,...(L=(D=s.parameters)==null?void 0:D.docs)==null?void 0:L.source}}};var H,T,V;i.parameters={...i.parameters,docs:{...(H=i.parameters)==null?void 0:H.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 5,
-    min: 0,
-    max: 100,
-    step: 1,
-    label: 'Cigarettes',
-    icon: '🚬'
-  }
-}`,...(V=(T=i.parameters)==null?void 0:T.docs)==null?void 0:V.source}}};var M,P,B;p.parameters={...p.parameters,docs:{...(M=p.parameters)==null?void 0:M.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 1,
-    min: 1,
-    max: 99,
-    step: 1,
-    label: 'Quantity',
-    icon: '📦',
-    showPlusMinus: true
-  }
-}`,...(B=(P=p.parameters)==null?void 0:P.docs)==null?void 0:B.source}}};var I,E,A;l.parameters={...l.parameters,docs:{...(I=l.parameters)==null?void 0:I.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 20,
-    min: 16,
-    max: 30,
-    step: 0.5,
-    label: 'Temperature',
-    icon: '🌡️',
-    variant: 'filled'
-  }
-}`,...(A=(E=l.parameters)==null?void 0:E.docs)==null?void 0:A.source}}};var F,G,Q;d.parameters={...d.parameters,docs:{...(F=d.parameters)==null?void 0:F.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 3,
-    min: 0,
-    max: 10,
-    step: 1,
-    size: 'small',
-    label: 'Small'
-  }
-}`,...(Q=(G=d.parameters)==null?void 0:G.docs)==null?void 0:Q.source}}};var O,U,_;c.parameters={...c.parameters,docs:{...(O=c.parameters)==null?void 0:O.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 50,
-    min: 0,
-    max: 100,
-    step: 10,
-    size: 'large',
-    label: 'Large',
-    icon: '🎯'
-  }
-}`,...(_=(U=c.parameters)==null?void 0:U.docs)==null?void 0:_.source}}};var K,q,J;u.parameters={...u.parameters,docs:{...(K=u.parameters)==null?void 0:K.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 25,
-    min: 0,
-    max: 100,
-    step: 5,
-    variant: 'outlined',
-    label: 'Progress',
-    icon: '📊'
-  }
-}`,...(J=(q=u.parameters)==null?void 0:q.docs)==null?void 0:J.source}}};var X,Y,Z;m.parameters={...m.parameters,docs:{...(X=m.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 7,
-    min: 1,
-    max: 10,
-    step: 1,
-    variant: 'filled',
-    label: 'Rating',
-    icon: '⭐'
-  }
-}`,...(Z=(Y=m.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var $,ee,ne;b.parameters={...b.parameters,docs:{...($=b.parameters)==null?void 0:$.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 5,
-    min: 0,
-    max: 10,
-    step: 1,
-    disabled: true,
-    label: 'Disabled'
-  }
-}`,...(ne=(ee=b.parameters)==null?void 0:ee.docs)==null?void 0:ne.source}}};var re,ae,oe;g.parameters={...g.parameters,docs:{...(re=g.parameters)==null?void 0:re.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 0,
-    step: 1,
-    label: 'Unlimited',
-    icon: '♾️'
-  }
-}`,...(oe=(ae=g.parameters)==null?void 0:ae.docs)==null?void 0:oe.source}}};var te,se,ie;x.parameters={...x.parameters,docs:{...(te=x.parameters)==null?void 0:te.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 1.5,
-    min: 0,
-    max: 5,
-    step: 0.1,
-    label: 'Decimal',
-    icon: '🔢'
-  }
-}`,...(ie=(se=x.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};var pe,le,de;f.parameters={...f.parameters,docs:{...(pe=f.parameters)==null?void 0:pe.docs,source:{originalSource:`{
-  render: () => {
-    const [water, setWater] = useState(0);
-    const [exercise, setExercise] = useState(0);
-    const [sleep, setSleep] = useState(7);
-    return <div style={{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '20px'
-    }}>
-                <NumberStepper value={water} onChange={setWater} min={0} max={10} step={1} label="Glasses of Water" icon="💧" variant="filled" />
-                <NumberStepper value={exercise} onChange={setExercise} min={0} max={120} step={15} label="Exercise (minutes)" icon="🏃" variant="outlined" />
-                <NumberStepper value={sleep} onChange={setSleep} min={0} max={12} step={0.5} label="Hours of Sleep" icon="😴" />
-            </div>;
-  }
-}`,...(de=(le=f.parameters)==null?void 0:le.docs)==null?void 0:de.source}}};var ce,ue,me;S.parameters={...S.parameters,docs:{...(ce=S.parameters)==null?void 0:ce.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 42,
-    min: 0,
-    max: 100,
-    step: 1,
-    variant: 'minimal',
-    label: 'Minimal Style'
-  }
-}`,...(me=(ue=S.parameters)==null?void 0:ue.docs)==null?void 0:me.source}}};var be,ge,xe;h.parameters={...h.parameters,docs:{...(be=h.parameters)==null?void 0:be.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 5,
-    min: 0,
-    max: 10,
-    step: 1,
-    label: 'Custom Styled',
-    icon: '🎨',
-    customStyles: {
-      container: {
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        padding: '20px',
-        borderRadius: '16px',
-        boxShadow: '0 10px 30px rgba(0,0,0,0.2)'
-      },
-      label: {
-        color: 'white',
-        fontSize: '18px',
-        fontWeight: 'bold'
-      },
-      icon: {
-        fontSize: '24px'
-      },
-      button: {
-        background: 'rgba(255,255,255,0.2)',
-        color: 'white',
-        border: '1px solid rgba(255,255,255,0.3)',
-        borderRadius: '8px'
-      },
-      buttonHover: {
-        background: 'rgba(255,255,255,0.3)',
-        transform: 'scale(1.1)'
-      },
-      value: {
-        color: 'white',
-        fontSize: '24px',
-        fontWeight: 'bold',
-        background: 'transparent'
-      },
-      valueContainer: {
-        background: 'rgba(255,255,255,0.1)',
-        borderRadius: '8px'
-      }
-    }
-  }
-}`,...(xe=(ge=h.parameters)==null?void 0:ge.docs)==null?void 0:xe.source}}};var fe,Se,he;v.parameters={...v.parameters,docs:{...(fe=v.parameters)==null?void 0:fe.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 100,
-    min: 0,
-    max: 999,
-    step: 1,
-    label: 'Health Points',
-    icon: '❤️',
-    showPlusMinus: true,
-    customStyles: {
-      container: {
-        background: '#1a1a2e',
-        border: '2px solid #16213e',
-        borderRadius: '12px',
-        padding: '16px'
-      },
-      header: {
-        marginBottom: '12px'
-      },
-      label: {
-        color: '#eaeaea',
-        fontSize: '14px',
-        textTransform: 'uppercase',
-        letterSpacing: '1px'
-      },
-      icon: {
-        filter: 'drop-shadow(0 0 10px rgba(255, 0, 0, 0.5))'
-      },
-      stepper: {
-        background: '#0f3460',
-        borderRadius: '8px',
-        padding: '8px'
-      },
-      button: {
-        background: '#e94560',
-        color: 'white',
-        border: 'none',
-        borderRadius: '6px',
-        transition: 'all 0.3s ease'
-      },
-      buttonHover: {
-        background: '#ff4666',
-        boxShadow: '0 0 20px rgba(233, 69, 96, 0.5)'
-      },
-      value: {
-        color: '#00ff00',
-        fontSize: '28px',
-        fontFamily: 'monospace',
-        fontWeight: 'bold',
-        textShadow: '0 0 10px rgba(0, 255, 0, 0.5)'
-      }
-    }
-  }
-}`,...(he=(Se=v.parameters)==null?void 0:Se.docs)==null?void 0:he.source}}};var ve,ye,we;y.parameters={...y.parameters,docs:{...(ve=y.parameters)==null?void 0:ve.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 75,
-    min: 0,
-    max: 100,
-    step: 5,
-    label: 'Volume',
-    icon: '🔊',
-    customStyles: {
-      container: {
-        background: '#0a0a0a',
-        border: '2px solid #00ffff',
-        borderRadius: '20px',
-        padding: '24px',
-        boxShadow: '0 0 30px rgba(0, 255, 255, 0.3)'
-      },
-      label: {
-        color: '#00ffff',
-        fontSize: '16px',
-        textTransform: 'uppercase',
-        textShadow: '0 0 10px rgba(0, 255, 255, 0.8)'
-      },
-      icon: {
-        fontSize: '28px',
-        filter: 'drop-shadow(0 0 10px rgba(0, 255, 255, 0.5))'
-      },
-      button: {
-        background: 'transparent',
-        color: '#ff00ff',
-        border: '2px solid #ff00ff',
-        borderRadius: '50%',
-        width: '40px',
-        height: '40px'
-      },
-      buttonHover: {
-        background: 'rgba(255, 0, 255, 0.2)',
-        boxShadow: '0 0 20px rgba(255, 0, 255, 0.8)'
-      },
-      buttonIcon: {
-        filter: 'drop-shadow(0 0 5px currentColor)'
-      },
-      value: {
-        color: '#ffff00',
-        fontSize: '32px',
-        fontWeight: 'bold',
-        textShadow: '0 0 15px rgba(255, 255, 0, 0.8)',
-        background: 'transparent'
-      },
-      valueContainer: {
-        background: 'rgba(255, 255, 255, 0.05)',
-        border: '1px solid rgba(255, 255, 255, 0.2)',
-        borderRadius: '10px'
-      }
-    }
-  }
-}`,...(we=(ye=y.parameters)==null?void 0:ye.docs)==null?void 0:we.source}}};var ke,We,ze;w.parameters={...w.parameters,docs:{...(ke=w.parameters)==null?void 0:ke.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 5,
-    min: 0,
-    max: 10,
-    step: 1,
-    label: 'Vertical Layout',
-    icon: '↕️',
-    layout: 'vertical',
-    customStyles: {
-      container: {
-        background: '#f0f4f8',
-        padding: '20px',
-        borderRadius: '12px',
-        minWidth: '200px'
-      },
-      header: {
-        textAlign: 'center',
-        marginBottom: '16px'
-      },
-      stepper: {
-        flexDirection: 'column',
-        gap: '12px'
-      },
-      button: {
-        width: '100%',
-        height: '40px'
-      },
-      valueContainer: {
-        width: '100%',
-        padding: '12px',
-        background: 'white',
-        borderRadius: '8px'
-      }
-    }
-  }
-}`,...(ze=(We=w.parameters)==null?void 0:We.docs)==null?void 0:ze.source}}};var Ce,Re,je;k.parameters={...k.parameters,docs:{...(Ce=k.parameters)==null?void 0:Ce.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 3,
-    min: 1,
-    max: 5,
-    step: 1,
-    label: 'Star Rating',
-    customButtons: {
-      decrement: <span style={{
-        fontSize: '20px'
-      }}>👎</span>,
-      increment: <span style={{
-        fontSize: '20px'
-      }}>👍</span>
-    },
-    customStyles: {
-      button: {
-        background: 'transparent',
-        border: '2px solid #ffd700',
-        borderRadius: '50%',
-        width: '50px',
-        height: '50px'
-      },
-      buttonHover: {
-        background: 'rgba(255, 215, 0, 0.2)'
-      },
-      value: {
-        fontSize: '24px',
-        fontWeight: 'bold',
-        color: '#ffd700'
-      }
-    }
-  }
-}`,...(je=(Re=k.parameters)==null?void 0:Re.docs)==null?void 0:je.source}}};var Ne,De,Le;W.parameters={...W.parameters,docs:{...(Ne=W.parameters)==null?void 0:Ne.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 50,
-    min: 0,
-    max: 100,
-    step: 10,
-    label: 'Progress',
-    icon: '📈',
-    hideLimits: false,
-    customStyles: {
-      limits: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        marginTop: '8px',
-        fontSize: '12px',
-        color: '#666'
-      }
-    }
-  }
-}`,...(Le=(De=W.parameters)==null?void 0:De.docs)==null?void 0:Le.source}}};var He,Te,Ve;z.parameters={...z.parameters,docs:{...(He=z.parameters)==null?void 0:He.docs,source:{originalSource:`{
-  render: args => <NumberStepperWrapper {...args} />,
-  args: {
-    value: 25,
-    min: 0,
-    max: 100,
-    step: 5,
-    label: 'Discount %',
-    icon: '🏷️',
-    variant: 'custom',
-    customStyles: {
-      container: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '16px',
-        background: '#fff3e0',
-        padding: '12px 20px',
-        borderRadius: '30px',
-        border: '2px solid #ff9800'
-      },
-      header: {
-        flex: 1,
-        marginBottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px'
-      },
-      label: {
-        color: '#e65100',
-        fontWeight: 'bold'
-      },
-      stepper: {
-        background: 'white',
-        borderRadius: '20px',
-        padding: '4px',
-        border: '1px solid #ffcc80'
-      },
-      button: {
-        background: '#ff9800',
-        color: 'white',
-        borderRadius: '50%',
-        width: '32px',
-        height: '32px',
-        border: 'none'
-      },
-      value: {
-        color: '#e65100',
-        fontWeight: 'bold',
-        fontSize: '18px'
-      }
-    }
-  }
-}`,...(Ve=(Te=z.parameters)==null?void 0:Te.docs)==null?void 0:Ve.source}}};const Oe=["Default","WithLabelAndIcon","QuantitySelector","TemperatureControl","SmallSize","LargeSize","OutlinedVariant","FilledVariant","Disabled","NoLimits","DecimalStep","HabitTracking","MinimalVariant","CustomStyled","GamingStyle","NeonStyle","VerticalLayout","CustomButtons","WithLimitsDisplay","CompactHorizontalCustom"];export{z as CompactHorizontalCustom,k as CustomButtons,h as CustomStyled,x as DecimalStep,s as Default,b as Disabled,m as FilledVariant,v as GamingStyle,f as HabitTracking,c as LargeSize,S as MinimalVariant,y as NeonStyle,g as NoLimits,u as OutlinedVariant,p as QuantitySelector,d as SmallSize,l as TemperatureControl,w as VerticalLayout,i as WithLabelAndIcon,W as WithLimitsDisplay,Oe as __namedExportsOrder,Qe as default};

package/storybook-static/assets/PieChart-OfDGlJ4g.css

@@ -1 +0,0 @@
-._container_10542_1{background:var(--color-background-secondary);border-radius:var(--radius-lg);padding:var(--spacing-xl)}._title_10542_7{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-lg);text-align:center}._chartContainer_10542_15{display:flex;gap:var(--spacing-4xl);align-items:flex-start}._chart_10542_15{display:block;flex-shrink:0}._legend_10542_26{flex:1;min-width:200px}._legendItem_10542_31{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-sm);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);transition:var(--transition-base)}._legendItem_10542_31:hover{background:var(--color-surface-hover)}._legendColor_10542_45{width:16px;height:16px;border-radius:var(--radius-full);flex-shrink:0}._legendLabel_10542_52{flex:1;font-size:var(--font-size-sm);color:var(--color-text);font-weight:var(--font-weight-medium)}._legendValue_10542_59{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-semibold)}._tooltip_10542_65{background:var(--color-background);border:2px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text);box-shadow:var(--shadow-lg);pointer-events:none;z-index:1000}._tooltip_10542_65 div{margin:var(--spacing-xs) 0}._tooltip_10542_65 strong{color:var(--color-primary)}@media (max-width: 768px){._chartContainer_10542_15{flex-direction:column;gap:var(--space-4)}._legend_10542_26{min-width:auto}}

package/storybook-static/assets/PieChart.stories-XZqxh_GW.js

@@ -1,199 +0,0 @@
-import{r as F,j as v}from"./iframe-B8pH-Lvr.js";import{s as R,i as ue,c as me}from"./transform-BKmuZieF.js";import{a as de}from"./array-BKyUJesY.js";import{c as x}from"./path-CbwjOpE9.js";import{t as $,a as Q}from"./arc-DgcIQOLP.js";import"./preload-helper-C1FmrZbK.js";function pe(t,a){let l=0;if(a===void 0)for(let c of t)(c=+c)&&(l+=c);else{let c=-1;for(let f of t)(f=+a(f,++c,t))&&(l+=f)}return l}function ge(t,a){return a<t?-1:a>t?1:a>=t?0:NaN}function fe(t){return t}function ve(){var t=fe,a=ge,l=null,c=x(0),f=x($),w=x(0);function s(e){var r,i=(e=de(e)).length,d,T,C=0,S=new Array(i),u=new Array(i),_=+c.apply(this,arguments),h=Math.min($,Math.max(-$,f.apply(this,arguments)-_)),L,b=Math.min(Math.abs(h)/i,w.apply(this,arguments)),A=b*(h<0?-1:1),m;for(r=0;r<i;++r)(m=u[S[r]=r]=+t(e[r],r,e))>0&&(C+=m);for(a!=null?S.sort(function(n,o){return a(u[n],u[o])}):l!=null&&S.sort(function(n,o){return l(e[n],e[o])}),r=0,T=C?(h-i*A)/C:0;r<i;++r,_=L)d=S[r],m=u[d],L=_+(m>0?m*T:0)+A,u[d]={data:e[d],index:r,value:m,startAngle:_,endAngle:L,padAngle:b};return u}return s.value=function(e){return arguments.length?(t=typeof e=="function"?e:x(+e),s):t},s.sortValues=function(e){return arguments.length?(a=e,l=null,s):a},s.sort=function(e){return arguments.length?(l=e,a=null,s):l},s.startAngle=function(e){return arguments.length?(c=typeof e=="function"?e:x(+e),s):c},s.endAngle=function(e){return arguments.length?(f=typeof e=="function"?e:x(+e),s):f},s.padAngle=function(e){return arguments.length?(w=typeof e=="function"?e:x(+e),s):w},s}const he="_container_10542_1",be="_title_10542_7",ye="_chartContainer_10542_15",xe="_chart_10542_15",we="_legend_10542_26",Ce="_legendItem_10542_31",Se="_legendColor_10542_45",_e="_legendLabel_10542_52",Le="_legendValue_10542_59",Te="_tooltip_10542_65",p={container:he,title:be,chartContainer:ye,chart:xe,legend:we,legendItem:Ce,legendColor:Se,legendLabel:_e,legendValue:Le,tooltip:Te},g=["#6366f1","#8b5cf6","#06b6d4","#10b981","#f59e0b","#ef4444","#ec4899","#84cc16","#f97316","#3b82f6","#8b5cf6","#14b8a6","#f59e0b","#ef4444","#06b6d4","#10b981"],V=t=>{const a=me(t);if(!a)return"#ffffff";const l=a.rgb();return(.299*l.r+.587*l.g+.114*l.b)/255>.5?"#000000":"#ffffff"},ce=({data:t,width:a=400,height:l=400,title:c="Distribution",showLegend:f=!0,unit:w="items",centerLabel:s})=>{const e=F.useRef(null),r=Math.min(a,l)/2-20;return F.useEffect(()=>{if(!e.current||!t.length)return;const i=R(e.current);i.selectAll("*").remove();const d=i.append("g").attr("transform",`translate(${a/2},${l/2})`),T=ve().value(n=>n.value).sort(null),C=Q().innerRadius(r*.4).outerRadius(r).cornerRadius(4),S=Q().innerRadius(r*.7).outerRadius(r*.7),u=R("body").append("div").attr("class",p.tooltip).style("opacity",0).style("position","absolute"),_=T(t),h=pe(t,n=>n.value),L=d.selectAll(".arc").data(_).enter().append("g").attr("class","arc");L.append("path").attr("d",n=>C(n)).attr("fill",(n,o)=>n.data.color||g[o%g.length]).attr("stroke","var(--bg-primary)").attr("stroke-width",3).style("cursor","pointer").style("filter","drop-shadow(0 2px 8px rgba(0,0,0,0.15))").on("mouseover",function(n,o){const y=Q().innerRadius(r*.4).outerRadius(r*1.05).cornerRadius(4);R(this).transition().duration(200).attr("d",q=>y(q)).style("filter","drop-shadow(0 4px 12px rgba(0,0,0,0.25))"),u.transition().duration(200).style("opacity",1);const B=(o.data.value/h*100).toFixed(1);u.html(`
-                    <div><strong>${o.data.name}</strong></div>
-                    <div>Value: ${o.data.value.toLocaleString()}</div>
-                    <div>${B}% of total</div>
-                `).style("left",n.pageX+10+"px").style("top",n.pageY-28+"px")}).on("mouseout",function(n,o){R(this).transition().duration(200).attr("d",y=>C(y)).style("filter","drop-shadow(0 2px 8px rgba(0,0,0,0.15))"),u.transition().duration(500).style("opacity",0)});const b=t.map((n,o)=>n.color||g[o%g.length]),A=b.length>=2?ue.gamma(2.2)(b[0],b[1])(.5):b[0]||"#ffffff",m=V(A);return d.append("text").attr("text-anchor","middle").attr("alignment-baseline","middle").attr("font-size","20px").attr("font-weight","bold").attr("fill",m).style("text-shadow",m==="#ffffff"?"0 1px 3px rgba(0,0,0,0.5)":"0 1px 3px rgba(255,255,255,0.5)").text(s||"Total"),d.append("text").attr("text-anchor","middle").attr("alignment-baseline","middle").attr("y",22).attr("font-size","16px").attr("font-weight","600").attr("fill",m).style("text-shadow",m==="#ffffff"?"0 1px 2px rgba(0,0,0,0.4)":"0 1px 2px rgba(255,255,255,0.4)").text(`${h.toLocaleString()} ${w}`),L.filter(n=>n.endAngle-n.startAngle>.2).append("text").attr("transform",n=>`translate(${S.centroid(n)})`).attr("text-anchor","middle").attr("alignment-baseline","middle").attr("font-size","13px").attr("fill",(n,o)=>{const y=n.data.color||g[o%g.length];return V(y)}).attr("font-weight","600").style("pointer-events","none").style("text-shadow",(n,o)=>{const y=n.data.color||g[o%g.length];return`0 1px 2px ${V(y)==="#ffffff"?"rgba(0,0,0,0.4)":"rgba(255,255,255,0.4)"}`}).text(n=>{const o=n.data.value/h*100;return o>8?`${o.toFixed(0)}%`:""}),()=>{u.remove()}},[t,a,l,r,s,w]),v.jsxs("div",{className:p.container,children:[v.jsx("h3",{className:p.title,children:c}),v.jsxs("div",{className:p.chartContainer,children:[v.jsx("svg",{ref:e,width:a,height:l,className:p.chart}),f&&v.jsx("div",{className:p.legend,children:t.map((i,d)=>v.jsxs("div",{className:p.legendItem,children:[v.jsx("span",{className:p.legendColor,style:{backgroundColor:i.color||g[d%g.length]}}),v.jsx("span",{className:p.legendLabel,children:i.name}),v.jsx("span",{className:p.legendValue,children:i.value.toLocaleString()})]},i.name))})]})]})};ce.__docgenInfo={description:"",methods:[],displayName:"PieChart",props:{data:{required:!0,tsType:{name:"Array",elements:[{name:"PieDataPoint"}],raw:"PieDataPoint[]"},description:""},width:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"400",computed:!1}},height:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"400",computed:!1}},title:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'Distribution'",computed:!1}},showLegend:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},unit:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'items'",computed:!1}},centerLabel:{required:!1,tsType:{name:"string"},description:""}}};const Me={title:"Organisms/Charts/PieChart",component:ce,parameters:{layout:"centered"},argTypes:{width:{control:{type:"number",min:300,max:700,step:50}},height:{control:{type:"number",min:300,max:700,step:50}},title:{control:{type:"text"}},showLegend:{control:{type:"boolean"}}}},D={args:{data:[{name:"Work",value:40,color:"#7c3aed"},{name:"Sleep",value:30,color:"#3b82f6"},{name:"Personal",value:20,color:"#10b981"},{name:"Exercise",value:10,color:"#f59e0b"}],width:400,height:400,title:"Daily Time Distribution",showLegend:!1}},P={args:{data:[{name:"Frontend Development",value:35,color:"#8b5cf6"},{name:"Backend Development",value:25,color:"#3b82f6"},{name:"Meetings",value:15,color:"#10b981"},{name:"Code Review",value:10,color:"#f59e0b"},{name:"Documentation",value:8,color:"#ec4899"},{name:"Testing",value:7,color:"#14b8a6"}],width:500,height:500,title:"Project Time Allocation",showLegend:!0}},j={args:{data:[{name:"Q1 2024",value:25e4},{name:"Q2 2024",value:3e5},{name:"Q3 2024",value:28e4},{name:"Q4 2024",value:32e4}],width:450,height:450,title:"Quarterly Revenue Distribution",showLegend:!0}},k={args:{data:[{name:"Company A",value:35,color:"#dc2626"},{name:"Company B",value:28,color:"#2563eb"},{name:"Company C",value:18,color:"#16a34a"},{name:"Company D",value:12,color:"#f59e0b"},{name:"Others",value:7,color:"#6b7280"}],width:500,height:500,title:"Market Share Analysis",showLegend:!0}},M={args:{data:[{name:"Housing",value:1500,color:"#dc2626"},{name:"Food",value:600,color:"#f59e0b"},{name:"Transportation",value:400,color:"#3b82f6"},{name:"Entertainment",value:300,color:"#8b5cf6"},{name:"Utilities",value:200,color:"#10b981"},{name:"Healthcare",value:250,color:"#ec4899"},{name:"Savings",value:750,color:"#059669"}],width:550,height:550,title:"Monthly Expense Breakdown",showLegend:!0}},N={args:{data:[{name:"Yes",value:73,color:"#10b981"},{name:"No",value:27,color:"#ef4444"}],width:350,height:350,title:"Survey Results",showLegend:!1}},E={args:{data:[{name:"JavaScript",value:25},{name:"Python",value:20},{name:"Java",value:15},{name:"TypeScript",value:12},{name:"C++",value:8},{name:"C#",value:6},{name:"Go",value:5},{name:"Rust",value:4},{name:"Swift",value:3},{name:"Kotlin",value:2}],width:600,height:600,title:"Programming Language Usage",showLegend:!0}};var O,I,U;D.parameters={...D.parameters,docs:{...(O=D.parameters)==null?void 0:O.docs,source:{originalSource:`{
-  args: {
-    data: [{
-      name: 'Work',
-      value: 40,
-      color: '#7c3aed'
-    }, {
-      name: 'Sleep',
-      value: 30,
-      color: '#3b82f6'
-    }, {
-      name: 'Personal',
-      value: 20,
-      color: '#10b981'
-    }, {
-      name: 'Exercise',
-      value: 10,
-      color: '#f59e0b'
-    }],
-    width: 400,
-    height: 400,
-    title: 'Daily Time Distribution',
-    showLegend: false
-  }
-}`,...(U=(I=D.parameters)==null?void 0:I.docs)==null?void 0:U.source}}};var H,J,z;P.parameters={...P.parameters,docs:{...(H=P.parameters)==null?void 0:H.docs,source:{originalSource:`{
-  args: {
-    data: [{
-      name: 'Frontend Development',
-      value: 35,
-      color: '#8b5cf6'
-    }, {
-      name: 'Backend Development',
-      value: 25,
-      color: '#3b82f6'
-    }, {
-      name: 'Meetings',
-      value: 15,
-      color: '#10b981'
-    }, {
-      name: 'Code Review',
-      value: 10,
-      color: '#f59e0b'
-    }, {
-      name: 'Documentation',
-      value: 8,
-      color: '#ec4899'
-    }, {
-      name: 'Testing',
-      value: 7,
-      color: '#14b8a6'
-    }],
-    width: 500,
-    height: 500,
-    title: 'Project Time Allocation',
-    showLegend: true
-  }
-}`,...(z=(J=P.parameters)==null?void 0:J.docs)==null?void 0:z.source}}};var Y,G,K;j.parameters={...j.parameters,docs:{...(Y=j.parameters)==null?void 0:Y.docs,source:{originalSource:`{
-  args: {
-    data: [{
-      name: 'Q1 2024',
-      value: 250000
-    }, {
-      name: 'Q2 2024',
-      value: 300000
-    }, {
-      name: 'Q3 2024',
-      value: 280000
-    }, {
-      name: 'Q4 2024',
-      value: 320000
-    }],
-    width: 450,
-    height: 450,
-    title: 'Quarterly Revenue Distribution',
-    showLegend: true
-  }
-}`,...(K=(G=j.parameters)==null?void 0:G.docs)==null?void 0:K.source}}};var W,X,Z;k.parameters={...k.parameters,docs:{...(W=k.parameters)==null?void 0:W.docs,source:{originalSource:`{
-  args: {
-    data: [{
-      name: 'Company A',
-      value: 35,
-      color: '#dc2626'
-    }, {
-      name: 'Company B',
-      value: 28,
-      color: '#2563eb'
-    }, {
-      name: 'Company C',
-      value: 18,
-      color: '#16a34a'
-    }, {
-      name: 'Company D',
-      value: 12,
-      color: '#f59e0b'
-    }, {
-      name: 'Others',
-      value: 7,
-      color: '#6b7280'
-    }],
-    width: 500,
-    height: 500,
-    title: 'Market Share Analysis',
-    showLegend: true
-  }
-}`,...(Z=(X=k.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var ee,ne,te;M.parameters={...M.parameters,docs:{...(ee=M.parameters)==null?void 0:ee.docs,source:{originalSource:`{
-  args: {
-    data: [{
-      name: 'Housing',
-      value: 1500,
-      color: '#dc2626'
-    }, {
-      name: 'Food',
-      value: 600,
-      color: '#f59e0b'
-    }, {
-      name: 'Transportation',
-      value: 400,
-      color: '#3b82f6'
-    }, {
-      name: 'Entertainment',
-      value: 300,
-      color: '#8b5cf6'
-    }, {
-      name: 'Utilities',
-      value: 200,
-      color: '#10b981'
-    }, {
-      name: 'Healthcare',
-      value: 250,
-      color: '#ec4899'
-    }, {
-      name: 'Savings',
-      value: 750,
-      color: '#059669'
-    }],
-    width: 550,
-    height: 550,
-    title: 'Monthly Expense Breakdown',
-    showLegend: true
-  }
-}`,...(te=(ne=M.parameters)==null?void 0:ne.docs)==null?void 0:te.source}}};var ae,re,oe;N.parameters={...N.parameters,docs:{...(ae=N.parameters)==null?void 0:ae.docs,source:{originalSource:`{
-  args: {
-    data: [{
-      name: 'Yes',
-      value: 73,
-      color: '#10b981'
-    }, {
-      name: 'No',
-      value: 27,
-      color: '#ef4444'
-    }],
-    width: 350,
-    height: 350,
-    title: 'Survey Results',
-    showLegend: false
-  }
-}`,...(oe=(re=N.parameters)==null?void 0:re.docs)==null?void 0:oe.source}}};var le,se,ie;E.parameters={...E.parameters,docs:{...(le=E.parameters)==null?void 0:le.docs,source:{originalSource:`{
-  args: {
-    data: [{
-      name: 'JavaScript',
-      value: 25
-    }, {
-      name: 'Python',
-      value: 20
-    }, {
-      name: 'Java',
-      value: 15
-    }, {
-      name: 'TypeScript',
-      value: 12
-    }, {
-      name: 'C++',
-      value: 8
-    }, {
-      name: 'C#',
-      value: 6
-    }, {
-      name: 'Go',
-      value: 5
-    }, {
-      name: 'Rust',
-      value: 4
-    }, {
-      name: 'Swift',
-      value: 3
-    }, {
-      name: 'Kotlin',
-      value: 2
-    }],
-    width: 600,
-    height: 600,
-    title: 'Programming Language Usage',
-    showLegend: true
-  }
-}`,...(ie=(se=E.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};const Ne=["SimpleDistribution","ProjectTimeBreakdown","QuarterlyRevenue","MarketShare","ExpenseCategories","TwoCategories","ManyCategories"];export{M as ExpenseCategories,E as ManyCategories,k as MarketShare,P as ProjectTimeBreakdown,j as QuarterlyRevenue,D as SimpleDistribution,N as TwoCategories,Ne as __namedExportsOrder,Me as default};