@stfrigerio/sito-template 0.1.37 → 0.1.39

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

@@ -0,0 +1,436 @@
+import{j as n,r as C}from"./iframe-Cz1R6gKZ.js";import{N as a}from"./NumberStepper-CWsYbCdm.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-DOpt9DfD.js";import"./proxy-CAwOFzsk.js";import"./MotionConfigContext-C_Ro_xsO.js";import"./index-CIvCfZMj.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/Orb-CS8T832d.css

@@ -0,0 +1 @@
+._orb-container_r9fzx_1{position:relative;z-index:0;width:100%;min-height:100vh}._orb-container_r9fzx_1 canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0}

package/storybook-static/assets/Orb.stories-CDw4x9GM.js

@@ -0,0 +1,177 @@
+import{r as E,j as D}from"./iframe-Cz1R6gKZ.js";import{R as P,P as U,V as g,M as W}from"./Mesh-CwXV3WjE.js";import{T as X}from"./Triangle-64ffRKNB.js";import"./preload-helper-C1FmrZbK.js";const Y={"orb-container":"_orb-container_r9fzx_1"};function j({hue:o=0,hoverIntensity:a=.2,rotateOnHover:n=!0,forceHoverState:c=!1,backgroundColor:i="#000000"}){const l=E.useRef(null),h=`
+    precision highp float;
+    attribute vec2 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `,m=`
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    uniform vec3 backgroundColor;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+
+      float bgLuminance = dot(backgroundColor, vec3(0.299, 0.587, 0.114));
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float innerFade = smoothstep(r0 * 0.8, r0 * 0.95, len);
+      v0 *= mix(innerFade, 1.0, bgLuminance * 0.7);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 colBase = mix(color1, color2, cl);
+      float fadeAmount = mix(1.0, 0.1, bgLuminance);
+      
+      vec3 darkCol = mix(color3, colBase, v0);
+      darkCol = (darkCol + v1) * v2 * v3;
+      darkCol = clamp(darkCol, 0.0, 1.0);
+      
+      vec3 lightCol = (colBase + v1) * mix(1.0, v2 * v3, fadeAmount);
+      lightCol = mix(backgroundColor, lightCol, v0);
+      lightCol = clamp(lightCol, 0.0, 1.0);
+      
+      vec3 finalCol = mix(darkCol, lightCol, bgLuminance);
+      
+      return extractAlpha(finalCol);
+    }
+
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;return E.useEffect(()=>{const t=l.current;if(!t)return;const v=new P({alpha:!0,premultipliedAlpha:!1}),e=v.gl;e.clearColor(0,0,0,0),t.appendChild(e.canvas);const s=new X(e),u=new U(e,{vertex:h,fragment:m,uniforms:{iTime:{value:0},iResolution:{value:new g(e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height)},hue:{value:o},hover:{value:0},rot:{value:0},hoverIntensity:{value:a},backgroundColor:{value:H(i)}}}),B=new W(e,{geometry:s,program:u});function x(){if(!t)return;const r=window.devicePixelRatio||1,d=t.clientWidth,f=t.clientHeight;v.setSize(d*r,f*r),e.canvas.style.width=d+"px",e.canvas.style.height=f+"px",u.uniforms.iResolution.value.set(e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height)}window.addEventListener("resize",x),x();let p=0,C=0,w=0;const S=.3,R=r=>{const d=t.getBoundingClientRect(),f=r.clientX-d.left,F=r.clientY-d.top,z=d.width,A=d.height,L=Math.min(z,A),K=z/2,O=A/2,k=(f-K)/L*2,T=(F-O)/L*2;Math.sqrt(k*k+T*T)<.8?p=1:p=0},I=()=>{p=0};t.addEventListener("mousemove",R),t.addEventListener("mouseleave",I);let b;const q=r=>{b=requestAnimationFrame(q);const d=(r-C)*.001;C=r,u.uniforms.iTime.value=r*.001,u.uniforms.hue.value=o,u.uniforms.hoverIntensity.value=a,u.uniforms.backgroundColor.value=H(i);const f=c?1:p;u.uniforms.hover.value+=(f-u.uniforms.hover.value)*.1,n&&f>.5&&(w+=d*S),u.uniforms.rot.value=w,v.render({scene:B})};return b=requestAnimationFrame(q),()=>{var r;cancelAnimationFrame(b),window.removeEventListener("resize",x),t.removeEventListener("mousemove",R),t.removeEventListener("mouseleave",I),t.removeChild(e.canvas),(r=e.getExtension("WEBGL_lose_context"))==null||r.loseContext()}},[o,a,n,c,i]),D.jsx("div",{ref:l,className:`${Y["orb-container"]}`})}function N(o,a,n){let c,i,l;if(a===0)c=i=l=n;else{const h=(v,e,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<.16666666666666666?v+(e-v)*6*s:s<.5?e:s<.6666666666666666?v+(e-v)*(.6666666666666666-s)*6:v),m=n<.5?n*(1+a):n+a-n*a,t=2*n-m;c=h(t,m,o+1/3),i=h(t,m,o),l=h(t,m,o-1/3)}return new g(c,i,l)}function H(o){if(o.startsWith("#")){const c=parseInt(o.slice(1,3),16)/255,i=parseInt(o.slice(3,5),16)/255,l=parseInt(o.slice(5,7),16)/255;return new g(c,i,l)}const a=o.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(a)return new g(parseInt(a[1])/255,parseInt(a[2])/255,parseInt(a[3])/255);const n=o.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);if(n){const c=parseInt(n[1])/360,i=parseInt(n[2])/100,l=parseInt(n[3])/100;return N(c,i,l)}return new g(0,0,0)}j.__docgenInfo={description:"",methods:[],displayName:"Orb",props:{hue:{defaultValue:{value:"0",computed:!1},required:!1},hoverIntensity:{defaultValue:{value:"0.2",computed:!1},required:!1},rotateOnHover:{defaultValue:{value:"true",computed:!1},required:!1},forceHoverState:{defaultValue:{value:"false",computed:!1},required:!1},backgroundColor:{defaultValue:{value:"'#000000'",computed:!1},required:!1}}};const Z={title:"ReactBits/Backgrounds/Orb",component:j,parameters:{layout:"fullscreen"},tags:["autodocs"]},y={args:{hue:0,hoverIntensity:.2,rotateOnHover:!0,forceHoverState:!1,backgroundColor:"#000000"}};var _,M,V;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  args: {
+    hue: 0,
+    hoverIntensity: 0.2,
+    rotateOnHover: true,
+    forceHoverState: false,
+    backgroundColor: '#000000'
+  }
+}`,...(V=(M=y.parameters)==null?void 0:M.docs)==null?void 0:V.source}}};const ee=["Default"];export{y as Default,ee as __namedExportsOrder,Z as default};

package/storybook-static/assets/OrbitImages-DqsOGdeH.css

@@ -0,0 +1 @@
+._orbit-container_tujj3_1{position:relative;margin-left:auto;margin-right:auto}._orbit-scaling-container_tujj3_7{width:100%;min-height:100vh;position:relative}._orbit-scaling-container--responsive_tujj3_13{position:absolute;left:50%;top:50%;transform-origin:center center}._orbit-rotation-wrapper_tujj3_20{width:100%;min-height:100vh;transform-origin:center center;position:relative}._orbit-path-svg_tujj3_27{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}._orbit-item_tujj3_33{position:absolute;will-change:transform;-webkit-user-select:none;user-select:none}._orbit-center-content_tujj3_39{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10}._orbit-image_tujj3_48{width:100%;min-height:100vh;object-fit:contain}