@stfrigerio/sito-template 0.1.36 → 0.1.39

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

@@ -0,0 +1,199 @@
+import{j as e,r as h}from"./iframe-Cz1R6gKZ.js";import{T as a}from"./Toggle-BZxwy2el.js";import{S as o,M as r}from"./sun-DeCJTUMz.js";import{c as J}from"./createLucideIcon-C7zEcVM7.js";import{L as F}from"./layout-grid-CE52it1h.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-DOpt9DfD.js";import"./proxy-CAwOFzsk.js";import"./MotionConfigContext-C_Ro_xsO.js";/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const K=[["path",{d:"M3 12h.01",key:"nlz23k"}],["path",{d:"M3 18h.01",key:"1tta3j"}],["path",{d:"M3 6h.01",key:"1rqtza"}],["path",{d:"M8 12h13",key:"1za7za"}],["path",{d:"M8 18h13",key:"1lx6n3"}],["path",{d:"M8 6h13",key:"ik3vkj"}]],H=J("list",K),ae={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(F,{}),rightIcon:e.jsx(H,{}),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(F,{}),rightIcon:e.jsx(H,{}),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 y,O,T;i.parameters={...i.parameters,docs:{...(y=i.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    onToggle: () => {}
+  }
+}`,...(T=(O=i.parameters)==null?void 0:O.docs)==null?void 0:T.source}}};var S,I,j;g.parameters={...g.parameters,docs:{...(S=g.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftIcon: <Moon />,
+    rightIcon: <Sun />,
+    onToggle: () => {}
+  }
+}`,...(j=(I=g.parameters)==null?void 0:I.docs)==null?void 0:j.source}}};var v,k,D;c.parameters={...c.parameters,docs:{...(v=c.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Light',
+    rightLabel: 'Dark',
+    leftIcon: <Sun />,
+    rightIcon: <Moon />,
+    onToggle: () => {}
+  }
+}`,...(D=(k=c.parameters)==null?void 0:k.docs)==null?void 0:D.source}}};var M,w,C;d.parameters={...d.parameters,docs:{...(M=d.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    isOn: false,
+    leftLabel: 'Grid',
+    rightLabel: 'List',
+    leftIcon: <LayoutGrid />,
+    rightIcon: <List />,
+    onToggle: () => {}
+  }
+}`,...(C=(w=d.parameters)==null?void 0:w.docs)==null?void 0:C.source}}};var z,V,W;f.parameters={...f.parameters,docs:{...(z=f.parameters)==null?void 0:z.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: <Sun />,
+    rightIcon: <Moon />,
+    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={<Sun />} rightIcon={<Moon />} />
+                <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 N,B,_;p.parameters={...p.parameters,docs:{...(N=p.parameters)==null?void 0:N.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
+    }
+  }
+}`,...(_=(B=p.parameters)==null?void 0:B.docs)==null?void 0:_.source}}};var R,P,q;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={<Sun />} rightIcon={<Moon />} />
+                </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={<LayoutGrid />} rightIcon={<List />} leftLabel="Grid" rightLabel="List" style={{
+          fontSize: '14px'
+        }} />
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(q=(P=u.parameters)==null?void 0:P.docs)==null?void 0:q.source}}};const ne=["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,ne as __namedExportsOrder,ae as default};

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

@@ -0,0 +1,32 @@
+import{j as a}from"./iframe-Cz1R6gKZ.js";import{u as S}from"./useSound-DOpt9DfD.js";import{m as i}from"./proxy-CAwOFzsk.js";import{A as c}from"./index-CIvCfZMj.js";const q="_button_1ddez_1",A="_background_1ddez_33",N="_content_1ddez_49",V="_iconWrapper_1ddez_58",B="_icon_1ddez_58",R="_label_1ddez_75",W="_hideMobile_1ddez_81",P="_checkmark_1ddez_86",L="_ripple_1ddez_101",M="_small_1ddez_119",I="_large_1ddez_133",$="_active_1ddez_148",D="_outlined_1ddez_154",E="_filled_1ddez_168",F="_ghost_1ddez_179",Y="_active-primary_1ddez_196",H="_active-secondary_1ddez_202",J="_active-success_1ddez_208",O="_active-danger_1ddez_214",X="_active-warning_1ddez_220",G="_animation-scale_1ddez_258",K="_scaleAnimation_1ddez_1",Q="_animation-rotate_1ddez_262",U="_rotateAnimation_1ddez_1",Z="_animation-flip_1ddez_266",ee="_flipAnimation_1ddez_1",ae="_disabled_1ddez_298",e={button:q,background:A,content:N,iconWrapper:V,icon:B,label:R,hideMobile:W,checkmark:P,ripple:L,small:M,large:I,default:"_default_1ddez_148",active:$,outlined:D,filled:E,ghost:F,"active-primary":"_active-primary_1ddez_196",activePrimary:Y,"active-secondary":"_active-secondary_1ddez_202",activeSecondary:H,"active-success":"_active-success_1ddez_208",activeSuccess:J,"active-danger":"_active-danger_1ddez_214",activeDanger:O,"active-warning":"_active-warning_1ddez_220",activeWarning:X,"animation-scale":"_animation-scale_1ddez_258",animationScale:G,scaleAnimation:K,"animation-rotate":"_animation-rotate_1ddez_262",animationRotate:Q,rotateAnimation:U,"animation-flip":"_animation-flip_1ddez_266",animationFlip:Z,flipAnimation:ee,disabled:ae},te=({active:t,onClick:d,icon:o,label:l,disabled:s=!1,size:m="medium",variant:u="default",activeColor:p="primary",showCheckmark:_=!1,animation:r="scale",className:v="",style:f={},color:n,tooltip:g,hideLabelOnMobile:h=!1,soundConfig:y})=>{const{handlers:b,playSound:z}=S(y),k=[e.button,e[m],e[u],t&&e.active,t&&e[`active-${p}`],s&&e.disabled,r!=="none"&&e[`animation-${r}`],v].filter(Boolean).join(" "),T=[e.label,h&&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:{}}},C={hidden:{scale:0,opacity:0,rotate:-90},visible:{scale:1,opacity:1,rotate:0,transition:{type:"spring",stiffness:500,damping:25}}},x={inactive:{scale:0,opacity:0},active:{scale:1,opacity:1,transition:{type:"spring",stiffness:400,damping:20}}},j={...f,...n&&{"--toggle-color":n,"--toggle-border-color":t?n:`${n}40`,"--toggle-bg-color":t?`${n}20`:"transparent"}};return a.jsxs(i.button,{className:k,style:j,onClick:()=>{z("toggle"),d()},disabled:s,whileHover:s?void 0:{scale:1.05},whileTap:s?void 0:{scale:.95},title:g,"aria-pressed":t,"aria-label":l,...b,children:[a.jsx(i.div,{className:e.background,variants:x,initial:"inactive",animate:t?"active":"inactive"}),a.jsxs("div",{className:e.content,children:[o&&a.jsx(i.div,{className:e.iconWrapper,variants:w[r],initial:"inactive",animate:t?"active":"inactive",transition:{duration:.3},children:typeof o=="string"?a.jsx("span",{className:e.icon,children:o}):a.jsx("div",{className:e.icon,children:o})}),l&&a.jsx("span",{className:T,children:l}),a.jsx(c,{children:_&&t&&a.jsx(i.div,{className:e.checkmark,variants:C,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:t&&a.jsx(i.div,{className:e.ripple,initial:{scale:0,opacity:.5},animate:{scale:2,opacity:0},exit:{scale:0,opacity:0},transition:{duration:.6}})})]})};te.__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}},style:{required:!1,tsType:{name:"ReactCSSProperties",raw:"React.CSSProperties"},description:"Custom inline styles",defaultValue:{value:"{}",computed:!1}},color:{required:!1,tsType:{name:"string"},description:"Custom color for border/background when active"},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}},soundConfig:{required:!1,tsType:{name:"ComponentSoundConfig"},description:"Sound configuration for interactions"}}};export{te as T};

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

@@ -0,0 +1 @@
+._button_1ddez_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(--toggle-border-color, var(--color-border));border-radius:var(--radius-lg);background:var(--toggle-bg-color, var(--color-background));color:var(--toggle-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_1ddez_1:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._button_1ddez_1:hover:not(:disabled){border-color:var(--color-primary-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}._background_1ddez_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_1ddez_49{position:relative;z-index:1;display:flex;align-items:center;gap:var(--spacing-sm)}._iconWrapper_1ddez_58{display:flex;align-items:center;justify-content:center;position:relative}._icon_1ddez_58{font-size:var(--font-size-xl);line-height:1;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-base)}._label_1ddez_75{font-size:var(--font-size-base);letter-spacing:var(--letter-spacing-normal);transition:all var(--transition-base)}._hideMobile_1ddez_81{display:inline}._checkmark_1ddez_86{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:currentColor}._checkmark_1ddez_86 svg{width:100%;height:100%}._ripple_1ddez_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_1ddez_119{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}._small_1ddez_119 ._icon_1ddez_58{font-size:var(--font-size-base)}._small_1ddez_119 ._checkmark_1ddez_86{width:12px;height:12px}._large_1ddez_133{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}._large_1ddez_133 ._icon_1ddez_58{font-size:var(--font-size-2xl)}._large_1ddez_133 ._checkmark_1ddez_86{width:20px;height:20px}._default_1ddez_148._active_1ddez_148{background:var(--toggle-color, var(--color-primary));border-color:var(--toggle-color, var(--color-primary));color:#fff}._outlined_1ddez_154{background:transparent}._outlined_1ddez_154._active_1ddez_148{border-color:var(--toggle-color, var(--color-primary));color:var(--toggle-color, var(--color-primary));background:transparent}._outlined_1ddez_154 ._background_1ddez_33{background:#7c3aed1a}._filled_1ddez_168{background:var(--color-background-secondary);border-color:transparent}._filled_1ddez_168._active_1ddez_148{background:var(--toggle-color, var(--color-primary));border-color:var(--toggle-color, var(--color-primary));color:#fff}._ghost_1ddez_179{background:transparent;border-color:transparent}._ghost_1ddez_179:hover:not(:disabled){background:var(--color-background-secondary);border-color:transparent}._ghost_1ddez_179._active_1ddez_148{background:var(--toggle-bg-color, var(--color-primary-lighter));color:var(--toggle-color, var(--color-primary));border-color:transparent}._active-primary_1ddez_196._active_1ddez_148{background:var(--color-primary);border-color:var(--color-primary);color:#fff}._active-secondary_1ddez_202._active_1ddez_148{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}._active-success_1ddez_208._active_1ddez_148{background:var(--color-success, #10b981);border-color:var(--color-success, #10b981);color:#fff}._active-danger_1ddez_214._active_1ddez_148{background:var(--color-danger, #ef4444);border-color:var(--color-danger, #ef4444);color:#fff}._active-warning_1ddez_220._active_1ddez_148{background:var(--color-warning, #f59e0b);border-color:var(--color-warning, #f59e0b);color:#fff}._outlined_1ddez_154._active-primary_1ddez_196._active_1ddez_148{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}._outlined_1ddez_154._active-secondary_1ddez_202._active_1ddez_148{background:transparent;border-color:var(--color-secondary);color:var(--color-secondary)}._outlined_1ddez_154._active-success_1ddez_208._active_1ddez_148{background:transparent;border-color:var(--color-success, #10b981);color:var(--color-success, #10b981)}._outlined_1ddez_154._active-danger_1ddez_214._active_1ddez_148{background:transparent;border-color:var(--color-danger, #ef4444);color:var(--color-danger, #ef4444)}._outlined_1ddez_154._active-warning_1ddez_220._active_1ddez_148{background:transparent;border-color:var(--color-warning, #f59e0b);color:var(--color-warning, #f59e0b)}._animation-scale_1ddez_258._active_1ddez_148 ._iconWrapper_1ddez_58{animation:_scaleAnimation_1ddez_1 .3s ease-in-out}._animation-rotate_1ddez_262._active_1ddez_148 ._iconWrapper_1ddez_58{animation:_rotateAnimation_1ddez_1 .5s ease-in-out}._animation-flip_1ddez_266._active_1ddez_148 ._iconWrapper_1ddez_58{animation:_flipAnimation_1ddez_1 .5s ease-in-out}@keyframes _scaleAnimation_1ddez_1{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes _rotateAnimation_1ddez_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes _flipAnimation_1ddez_1{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}._disabled_1ddez_298{opacity:.5;cursor:not-allowed}._disabled_1ddez_298:hover{transform:none;box-shadow:none;border-color:var(--color-border)}[data-theme=dark] ._button_1ddez_1{background:var(--color-background-secondary);border-color:var(--color-border)}[data-theme=dark] ._outlined_1ddez_154{background:transparent}[data-theme=dark] ._outlined_1ddez_154._active_1ddez_148{border-color:var(--color-primary-light);color:var(--color-primary-light)}[data-theme=dark] ._outlined_1ddez_154 ._background_1ddez_33{background:#a78bfa26}[data-theme=dark] ._filled_1ddez_168{background:var(--color-background-tertiary)}[data-theme=dark] ._ghost_1ddez_179:hover:not(:disabled){background:var(--color-background-tertiary)}[data-theme=dark] ._ghost_1ddez_179._active_1ddez_148{background:#a78bfa33;color:var(--color-primary-light)}@media (max-width: 768px){._hideMobile_1ddez_81{display:none}._button_1ddez_1{padding:var(--spacing-sm)}._small_1ddez_119{padding:var(--spacing-xs)}._large_1ddez_133{padding:var(--spacing-md)}}

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

@@ -0,0 +1,163 @@
+import{j as e,r as o}from"./iframe-Cz1R6gKZ.js";import{T as a}from"./ToggleButton-CijvK4iQ.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 ue={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"},color:{control:"color",description:"Custom color for border/background 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"}}},w=t=>{const[l,s]=o.useState(t.active||!1);return e.jsx(a,{...t,active:l,onClick:()=>{var n;s(!l),(n=t.onClick)==null||n.call(t)}})},p={render:t=>e.jsx(w,{...t}),args:{active:!1,icon:"🦷",label:"Teeth"}},g={render:t=>e.jsx(w,{...t}),args:{active:!1,icon:"✅",label:"Complete",showCheckmark:!0}},v={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(a,{active:t,onClick:()=>l(!t),icon:"🐁",label:"Small",size:"small"}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"🐕",label:"Medium",size:"medium"}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"🐘",label:"Large",size:"large"})]})}},f={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1),[c,d]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>l(!t),icon:"🎨",label:"Default",variant:"default"}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"📝",label:"Outlined",variant:"outlined"}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"🎯",label:"Filled",variant:"filled"}),e.jsx(a,{active:c,onClick:()=>d(!c),icon:"👻",label:"Ghost",variant:"ghost"})]})}},C={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1),[c,d]=o.useState(!1),[u,m]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>l(!t),icon:"💜",label:"Primary",activeColor:"primary"}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"💚",label:"Secondary",activeColor:"secondary"}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"✅",label:"Success",activeColor:"success"}),e.jsx(a,{active:c,onClick:()=>d(!c),icon:"⚠️",label:"Danger",activeColor:"danger"}),e.jsx(a,{active:u,onClick:()=>m(!u),icon:"🔔",label:"Warning",activeColor:"warning"})]})}},k={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1),[c,d]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>l(!t),icon:"🎈",label:"Scale",animation:"scale"}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"🌀",label:"Rotate",animation:"rotate"}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"🔄",label:"Flip",animation:"flip"}),e.jsx(a,{active:c,onClick:()=>d(!c),icon:"⏸️",label:"None",animation:"none"})]})}},S={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1),[c,d]=o.useState(!1),[u,m]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",maxWidth:"600px"},children:[e.jsx(a,{active:t,onClick:()=>l(!t),icon:"😢",label:"Sad",color:"#3b82f6"}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"😕",label:"Meh",color:"#8b5cf6"}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"😐",label:"Neutral",color:"#6b7280"}),e.jsx(a,{active:c,onClick:()=>d(!c),icon:"🙂",label:"Good",color:"#10b981"}),e.jsx(a,{active:u,onClick:()=>m(!u),icon:"😁",label:"Great",color:"#f59e0b"})]})}},x={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1),[c,d]=o.useState(!1),[u,m]=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:()=>l(!t),icon:"🦷",label:"Teeth",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"🚿",label:"Shower",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"🧘",label:"Meditate",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:c,onClick:()=>d(!c),icon:"💊",label:"Vitamins",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:u,onClick:()=>m(!u),icon:"💪",label:"Exercise",variant:"outlined",activeColor:"success",showCheckmark:!0})]})}},h={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"12px"},children:[e.jsx(a,{active:t,onClick:()=>l(!t),icon:"❤️",tooltip:"Add to favorites",activeColor:"danger",animation:"scale"}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"🔖",tooltip:"Bookmark",activeColor:"primary",animation:"flip"}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"🔔",tooltip:"Enable notifications",activeColor:"warning",animation:"rotate"})]})}},b={render:t=>e.jsx(w,{...t}),args:{active:!0,icon:"🔒",label:"Disabled",disabled:!0}},y={render:()=>{const[t,l]=o.useState(!1),[s,n]=o.useState(!1),[i,r]=o.useState(!1),[c,d]=o.useState(!1);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(a,{active:t,onClick:()=>l(!t),icon:"🎨",label:"Primary",variant:"outlined",activeColor:"primary",showCheckmark:!0}),e.jsx(a,{active:s,onClick:()=>n(!s),icon:"🎭",label:"Secondary",variant:"outlined",activeColor:"secondary",showCheckmark:!0}),e.jsx(a,{active:i,onClick:()=>r(!i),icon:"✨",label:"Success",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(a,{active:c,onClick:()=>d(!c),icon:"🚨",label:"Danger",variant:"outlined",activeColor:"danger",showCheckmark:!0})]})}};var T,j,B;p.parameters={...p.parameters,docs:{...(T=p.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  render: args => <ToggleButtonWrapper {...args} />,
+  args: {
+    active: false,
+    icon: '🦷',
+    label: 'Teeth'
+  }
+}`,...(B=(j=p.parameters)==null?void 0:j.docs)==null?void 0:B.source}}};var W,M,D;g.parameters={...g.parameters,docs:{...(W=g.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  render: args => <ToggleButtonWrapper {...args} />,
+  args: {
+    active: false,
+    icon: '✅',
+    label: 'Complete',
+    showCheckmark: true
+  }
+}`,...(D=(M=g.parameters)==null?void 0:M.docs)==null?void 0:D.source}}};var F,O,z;v.parameters={...v.parameters,docs:{...(F=v.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>;
+  }
+}`,...(z=(O=v.parameters)==null?void 0:O.docs)==null?void 0:z.source}}};var E,N,P;f.parameters={...f.parameters,docs:{...(E=f.parameters)==null?void 0:E.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=(N=f.parameters)==null?void 0:N.docs)==null?void 0:P.source}}};var A,G,V;C.parameters={...C.parameters,docs:{...(A=C.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=(G=C.parameters)==null?void 0:G.docs)==null?void 0:V.source}}};var L,R,I;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>;
+  }
+}`,...(I=(R=k.parameters)==null?void 0:R.docs)==null?void 0:I.source}}};var H,_,q;S.parameters={...S.parameters,docs:{...(H=S.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  render: () => {
+    const [mood1, setMood1] = useState(false);
+    const [mood2, setMood2] = useState(false);
+    const [mood3, setMood3] = useState(false);
+    const [mood4, setMood4] = useState(false);
+    const [mood5, setMood5] = useState(false);
+    return <div style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '12px',
+      maxWidth: '600px'
+    }}>
+                <ToggleButton active={mood1} onClick={() => setMood1(!mood1)} icon="😢" label="Sad" color="#3b82f6" />
+                <ToggleButton active={mood2} onClick={() => setMood2(!mood2)} icon="😕" label="Meh" color="#8b5cf6" />
+                <ToggleButton active={mood3} onClick={() => setMood3(!mood3)} icon="😐" label="Neutral" color="#6b7280" />
+                <ToggleButton active={mood4} onClick={() => setMood4(!mood4)} icon="🙂" label="Good" color="#10b981" />
+                <ToggleButton active={mood5} onClick={() => setMood5(!mood5)} icon="😁" label="Great" color="#f59e0b" />
+            </div>;
+  }
+}`,...(q=(_=S.parameters)==null?void 0:_.docs)==null?void 0:q.source}}};var J,K,Q;x.parameters={...x.parameters,docs:{...(J=x.parameters)==null?void 0:J.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>;
+  }
+}`,...(Q=(K=x.parameters)==null?void 0:K.docs)==null?void 0:Q.source}}};var U,X,Y;h.parameters={...h.parameters,docs:{...(U=h.parameters)==null?void 0:U.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>;
+  }
+}`,...(Y=(X=h.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};var Z,$,ee;b.parameters={...b.parameters,docs:{...(Z=b.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  render: args => <ToggleButtonWrapper {...args} />,
+  args: {
+    active: true,
+    icon: '🔒',
+    label: 'Disabled',
+    disabled: true
+  }
+}`,...(ee=($=b.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var te,ae,oe;y.parameters={...y.parameters,docs:{...(te=y.parameters)==null?void 0:te.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>;
+  }
+}`,...(oe=(ae=y.parameters)==null?void 0:ae.docs)==null?void 0:oe.source}}};const me=["Default","WithCheckmark","DifferentSizes","Variants","ActiveColors","AnimationTypes","CustomColors","BooleanHabits","IconOnly","Disabled","OutlinedWithColors"];export{C as ActiveColors,k as AnimationTypes,x as BooleanHabits,S as CustomColors,p as Default,v as DifferentSizes,b as Disabled,h as IconOnly,y as OutlinedWithColors,f as Variants,g as WithCheckmark,me as __namedExportsOrder,ue as default};

package/storybook-static/assets/Triangle-64ffRKNB.js

@@ -0,0 +1 @@
+import{G as r}from"./Mesh-CwXV3WjE.js";class t extends r{constructor(e,{attributes:a={}}={}){Object.assign(a,{position:{size:2,data:new Float32Array([-1,-1,3,-1,-1,3])},uv:{size:2,data:new Float32Array([0,0,2,0,0,2])}}),super(e,a)}}export{t as T};

package/storybook-static/assets/TrueFocus-C4c7GDsQ.css

@@ -0,0 +1 @@
+._focus-container_ngfrk_1{position:relative;display:flex;gap:1em;justify-content:center;align-items:center;flex-wrap:wrap;outline:none;-webkit-user-select:none;user-select:none}._focus-word_ngfrk_12{position:relative;font-size:3rem;font-weight:900;cursor:pointer;transition:filter .3s ease,color .3s ease;outline:none;-webkit-user-select:none;user-select:none}._focus-word_ngfrk_12._active_ngfrk_24{filter:blur(0)}._focus-frame_ngfrk_28{position:absolute;top:0;left:0;pointer-events:none;box-sizing:content-box;border:none}._corner_ngfrk_37{position:absolute;width:1rem;height:1rem;border:3px solid var(--border-color, #fff);filter:drop-shadow(0px 0px 4px var(--border-color, #fff));border-radius:3px;transition:none}._top-left_ngfrk_47{top:-10px;left:-10px;border-right:none;border-bottom:none}._top-right_ngfrk_54{top:-10px;right:-10px;border-left:none;border-bottom:none}._bottom-left_ngfrk_61{bottom:-10px;left:-10px;border-right:none;border-top:none}._bottom-right_ngfrk_68{bottom:-10px;right:-10px;border-left:none;border-top:none}

package/storybook-static/assets/TrueFocus.stories-DEScRjfz.js

@@ -0,0 +1,12 @@
+import{r as a,j as n}from"./iframe-Cz1R6gKZ.js";import{m as T}from"./proxy-CAwOFzsk.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-C_Ro_xsO.js";const V="_active_ngfrk_24",C="_corner_ngfrk_37",e={"focus-container":"_focus-container_ngfrk_1","focus-word":"_focus-word_ngfrk_12",active:V,"focus-frame":"_focus-frame_ngfrk_28",corner:C,"top-left":"_top-left_ngfrk_47","top-right":"_top-right_ngfrk_54","bottom-left":"_bottom-left_ngfrk_61","bottom-right":"_bottom-right_ngfrk_68"},$=({sentence:R="True Focus",separator:y=" ",manualMode:s=!1,blurAmount:g=5,borderColor:_="green",glowColor:h="rgba(0, 255, 0, 0.6)",animationDuration:u=.5,pauseBetweenAnimations:v=1})=>{const l=R.split(y),[o,i]=a.useState(0),[j,k]=a.useState(null),d=a.useRef(null),p=a.useRef([]),[c,q]=a.useState({x:0,y:0,width:0,height:0});a.useEffect(()=>{if(!s){const r=setInterval(()=>{i(t=>(t+1)%l.length)},(u+v)*1e3);return()=>clearInterval(r)}},[s,u,v,l.length]),a.useEffect(()=>{if(o===null||o===-1||!p.current[o]||!d.current)return;const r=d.current.getBoundingClientRect(),t=p.current[o].getBoundingClientRect();q({x:t.left-r.left,y:t.top-r.top,width:t.width,height:t.height})},[o,l.length]);const A=r=>{s&&(k(r),i(r))},F=()=>{s&&i(j)};return n.jsxs("div",{className:`${e["focus-container"]}`,ref:d,children:[l.map((r,t)=>{const m=t===o;return n.jsx("span",{ref:N=>p.current[t]=N,className:`${e["focus-word"]} ${s?"manual":""} ${m&&!s?e.active:""}`,style:{filter:s?m?"blur(0px)":`blur(${g}px)`:m?"blur(0px)":`blur(${g}px)`,"--border-color":_,"--glow-color":h,transition:`filter ${u}s ease`},onMouseEnter:()=>A(t),onMouseLeave:F,children:r},t)}),n.jsxs(T.div,{className:`${e["focus-frame"]}`,animate:{x:c.x,y:c.y,width:c.width,height:c.height,opacity:o>=0?1:0},transition:{duration:u},style:{"--border-color":_,"--glow-color":h},children:[n.jsx("span",{className:`${e.corner} ${e["top-left"]}`}),n.jsx("span",{className:`${e.corner} ${e["top-right"]}`}),n.jsx("span",{className:`${e.corner} ${e["bottom-left"]}`}),n.jsx("span",{className:`${e.corner} ${e["bottom-right"]}`})]})]})};$.__docgenInfo={description:"",methods:[],displayName:"TrueFocus",props:{sentence:{defaultValue:{value:"'True Focus'",computed:!1},required:!1},separator:{defaultValue:{value:"' '",computed:!1},required:!1},manualMode:{defaultValue:{value:"false",computed:!1},required:!1},blurAmount:{defaultValue:{value:"5",computed:!1},required:!1},borderColor:{defaultValue:{value:"'green'",computed:!1},required:!1},glowColor:{defaultValue:{value:"'rgba(0, 255, 0, 0.6)'",computed:!1},required:!1},animationDuration:{defaultValue:{value:"0.5",computed:!1},required:!1},pauseBetweenAnimations:{defaultValue:{value:"1",computed:!1},required:!1}}};const L={title:"ReactBits/TextAnimations/TrueFocus",component:$,parameters:{layout:"fullscreen"},tags:["autodocs"]},f={args:{sentence:"True Focus",separator:" ",manualMode:!1,blurAmount:5,borderColor:"green",glowColor:"rgba(0, 255, 0, 0.6)",animationDuration:.5,pauseBetweenAnimations:1}};var x,b,w;f.parameters={...f.parameters,docs:{...(x=f.parameters)==null?void 0:x.docs,source:{originalSource:`{
+  args: {
+    sentence: 'True Focus',
+    separator: ' ',
+    manualMode: false,
+    blurAmount: 5,
+    borderColor: 'green',
+    glowColor: 'rgba(0, 255, 0, 0.6)',
+    animationDuration: 0.5,
+    pauseBetweenAnimations: 1
+  }
+}`,...(w=(b=f.parameters)==null?void 0:b.docs)==null?void 0:w.source}}};const D=["Default"];export{f as Default,D as __namedExportsOrder,L as default};

package/storybook-static/assets/VariableProximity-E64p6UBv.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap";._variable-proximity_14yrm_3{font-family:Roboto Flex,sans-serif}._sr-only_14yrm_7{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

package/storybook-static/assets/VariableProximity.stories-DbTKbjW_.js

@@ -0,0 +1,14 @@
+import{r as l,j as m}from"./iframe-Cz1R6gKZ.js";import{m as T}from"./proxy-CAwOFzsk.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-C_Ro_xsO.js";const E={"variable-proximity":"_variable-proximity_14yrm_3","sr-only":"_sr-only_14yrm_7"};function W(e){l.useEffect(()=>{let r;const c=()=>{e(),r=requestAnimationFrame(c)};return r=requestAnimationFrame(c),()=>cancelAnimationFrame(r)},[e])}function O(e){const r=l.useRef({x:0,y:0});return l.useEffect(()=>{const c=(n,a)=>{if(e!=null&&e.current){const y=e.current.getBoundingClientRect();r.current={x:n-y.left,y:a-y.top}}else r.current={x:n,y:a}},p=n=>c(n.clientX,n.clientY),d=n=>{const a=n.touches[0];c(a.clientX,a.clientY)};return window.addEventListener("mousemove",p),window.addEventListener("touchmove",d),()=>{window.removeEventListener("mousemove",p),window.removeEventListener("touchmove",d)}},[e]),r}const x=l.forwardRef((e,r)=>{const{label:c,fromFontVariationSettings:p,toFontVariationSettings:d,containerRef:n,radius:a=50,falloff:y="linear",className:C="",onClick:z,style:A,...L}=e,V=l.useRef([]),b=l.useRef([]),h=O(n),w=l.useRef({x:null,y:null}),N=l.useMemo(()=>{const s=t=>new Map(t.split(",").map(i=>i.trim()).map(i=>{const[f,S]=i.split(" ");return[f.replace(/['"]/g,""),parseFloat(S)]})),o=s(p),u=s(d);return Array.from(o.entries()).map(([t,i])=>({axis:t,fromValue:i,toValue:u.get(t)??i}))},[p,d]),$=(s,o,u,t)=>Math.sqrt((u-s)**2+(t-o)**2),k=s=>{const o=Math.min(Math.max(1-s/a,0),1);switch(y){case"exponential":return o**2;case"gaussian":return Math.exp(-((s/(a/2))**2)/2);case"linear":default:return o}};W(()=>{if(!(n!=null&&n.current))return;const s=n.current.getBoundingClientRect(),{x:o,y:u}=h.current;w.current.x===o&&w.current.y===u||(w.current={x:o,y:u},V.current.forEach((t,i)=>{if(!t)return;const f=t.getBoundingClientRect(),S=f.left+f.width/2-s.left,I=f.top+f.height/2-s.top,P=$(h.current.x,h.current.y,S,I);if(P>=a){t.style.fontVariationSettings=p;return}const q=k(P),j=N.map(({axis:D,fromValue:F,toValue:X})=>{const Y=F+(X-F)*q;return`'${D}' ${Y}`}).join(", ");b.current[i]=j,t.style.fontVariationSettings=j}))});const v=c.split(" ");let B=0;return m.jsxs("span",{ref:r,className:`${C} ${E["variable-proximity"]}`,onClick:z,style:{display:"inline",...A},...L,children:[v.map((s,o)=>m.jsxs("span",{style:{display:"inline-block",whiteSpace:"nowrap"},children:[s.split("").map(u=>{const t=B++;return m.jsx(T.span,{ref:i=>{V.current[t]=i},style:{display:"inline-block",fontVariationSettings:b.current[t]},"aria-hidden":"true",children:u},t)}),o<v.length-1&&m.jsx("span",{style:{display:"inline-block"},children:" "})]},o)),m.jsx("span",{className:`${E["sr-only"]}`,children:c})]})});x.displayName="VariableProximity";x.__docgenInfo={description:"",methods:[],displayName:"VariableProximity"};const U={title:"ReactBits/TextAnimations/VariableProximity",component:x,parameters:{layout:"fullscreen"},tags:["autodocs"]},G=e=>{const r=l.useRef(null);return m.jsx("div",{ref:r,style:{position:"relative",width:"100%",height:"300px",display:"flex",alignItems:"center",justifyContent:"center",background:"#000"},children:m.jsx(x,{...e,containerRef:r})})},g={render:e=>m.jsx(G,{...e}),args:{label:"Variable Proximity",fromFontVariationSettings:"'wght' 400, 'opsz' 9",toFontVariationSettings:"'wght' 900, 'opsz' 40",radius:150,falloff:"linear",style:{fontSize:"3rem",color:"#fff"}}};var M,_,R;g.parameters={...g.parameters,docs:{...(M=g.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  render: args => <VariableProximityWrapper {...args} />,
+  args: {
+    label: 'Variable Proximity',
+    fromFontVariationSettings: "'wght' 400, 'opsz' 9",
+    toFontVariationSettings: "'wght' 900, 'opsz' 40",
+    radius: 150,
+    falloff: 'linear',
+    style: {
+      fontSize: '3rem',
+      color: '#fff'
+    }
+  }
+}`,...(R=(_=g.parameters)==null?void 0:_.docs)==null?void 0:R.source}}};const Z=["Default"];export{g as Default,Z as __namedExportsOrder,U as default};

package/storybook-static/assets/Vec2-Cf1C3GIc.js

@@ -0,0 +1 @@
+function p(r,t){return r[0]=t[0],r[1]=t[1],r}function x(r,t,e){return r[0]=t,r[1]=e,r}function u(r,t,e){return r[0]=t[0]+e[0],r[1]=t[1]+e[1],r}function c(r,t,e){return r[0]=t[0]-e[0],r[1]=t[1]-e[1],r}function o(r,t,e){return r[0]=t[0]*e[0],r[1]=t[1]*e[1],r}function q(r,t,e){return r[0]=t[0]/e[0],r[1]=t[1]/e[1],r}function h(r,t,e){return r[0]=t[0]*e,r[1]=t[1]*e,r}function g(r,t){var e=t[0]-r[0],n=t[1]-r[1];return Math.sqrt(e*e+n*n)}function M(r,t){var e=t[0]-r[0],n=t[1]-r[1];return e*e+n*n}function f(r){var t=r[0],e=r[1];return Math.sqrt(t*t+e*e)}function L(r){var t=r[0],e=r[1];return t*t+e*e}function A(r,t){return r[0]=-t[0],r[1]=-t[1],r}function D(r,t){return r[0]=1/t[0],r[1]=1/t[1],r}function z(r,t){var e=t[0],n=t[1],i=e*e+n*n;return i>0&&(i=1/Math.sqrt(i)),r[0]=t[0]*i,r[1]=t[1]*i,r}function w(r,t){return r[0]*t[0]+r[1]*t[1]}function l(r,t){return r[0]*t[1]-r[1]*t[0]}function E(r,t,e,n){var i=t[0],s=t[1];return r[0]=i+n*(e[0]-i),r[1]=s+n*(e[1]-s),r}function V(r,t,e,n,i){const s=Math.exp(-n*i);let y=t[0],d=t[1];return r[0]=e[0]+(y-e[0])*s,r[1]=e[1]+(d-e[1])*s,r}function j(r,t,e){var n=t[0],i=t[1];return r[0]=e[0]*n+e[3]*i+e[6],r[1]=e[1]*n+e[4]*i+e[7],r}function k(r,t,e){let n=t[0],i=t[1];return r[0]=e[0]*n+e[4]*i+e[12],r[1]=e[1]*n+e[5]*i+e[13],r}function v(r,t){return r[0]===t[0]&&r[1]===t[1]}class a extends Array{constructor(t=0,e=t){return super(t,e),this}get x(){return this[0]}get y(){return this[1]}set x(t){this[0]=t}set y(t){this[1]=t}set(t,e=t){return t.length?this.copy(t):(x(this,t,e),this)}copy(t){return p(this,t),this}add(t,e){return e?u(this,t,e):u(this,this,t),this}sub(t,e){return e?c(this,t,e):c(this,this,t),this}multiply(t){return t.length?o(this,this,t):h(this,this,t),this}divide(t){return t.length?q(this,this,t):h(this,this,1/t),this}inverse(t=this){return D(this,t),this}len(){return f(this)}distance(t){return t?g(this,t):f(this)}squaredLen(){return this.squaredDistance()}squaredDistance(t){return t?M(this,t):L(this)}negate(t=this){return A(this,t),this}cross(t,e){return e?l(t,e):l(this,t)}scale(t){return h(this,this,t),this}normalize(){return z(this,this),this}dot(t){return w(this,t)}equals(t){return v(this,t)}applyMatrix3(t){return j(this,this,t),this}applyMatrix4(t){return k(this,this,t),this}lerp(t,e){return E(this,this,t,e),this}smoothLerp(t,e,n){return V(this,this,t,e,n),this}clone(){return new a(this[0],this[1])}fromArray(t,e=0){return this[0]=t[e],this[1]=t[e+1],this}toArray(t=[],e=0){return t[e]=this[0],t[e+1]=this[1],t}}export{a as V};

package/storybook-static/assets/Waves-C7txy_IO.css

@@ -0,0 +1 @@
+._waves_vgm9y_1{position:absolute;top:0;left:0;margin:0;padding:0;width:100%;min-height:100vh;overflow:hidden}._waves_vgm9y_1:before{content:"";position:absolute;top:0;left:0;width:.5rem;height:.5rem;background:#160000;border-radius:50%;transform:translate3d(calc(var(-.5rem) - 50%),calc(var(50%) - 50%),0);will-change:transform}._waves-canvas_vgm9y_25{display:block;width:100%;min-height:100vh}

package/storybook-static/assets/Waves.stories-tLQsX0Mg.js

@@ -0,0 +1 @@
+import{r as i,j as J}from"./iframe-Cz1R6gKZ.js";import"./preload-helper-C1FmrZbK.js";const le="_waves_vgm9y_1",K={waves:le,"waves-canvas":"_waves-canvas_vgm9y_25"};class l{constructor(s,r,o){this.x=s,this.y=r,this.z=o}dot2(s,r){return this.x*s+this.y*r}}class ie{constructor(s=0){this.grad3=[new l(1,1,0),new l(-1,1,0),new l(1,-1,0),new l(-1,-1,0),new l(1,0,1),new l(-1,0,1),new l(1,0,-1),new l(-1,0,-1),new l(0,1,1),new l(0,-1,1),new l(0,1,-1),new l(0,-1,-1)],this.p=[151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180],this.perm=new Array(512),this.gradP=new Array(512),this.seed(s)}seed(s){s>0&&s<1&&(s*=65536),s=Math.floor(s),s<256&&(s|=s<<8);for(let r=0;r<256;r++){let o=r&1?this.p[r]^s&255:this.p[r]^s>>8&255;this.perm[r]=this.perm[r+256]=o,this.gradP[r]=this.gradP[r+256]=this.grad3[o%12]}}fade(s){return s*s*s*(s*(s*6-15)+10)}lerp(s,r,o){return(1-o)*s+o*r}perlin2(s,r){let o=Math.floor(s),f=Math.floor(r);s-=o,r-=f,o&=255,f&=255;const g=this.gradP[o+this.perm[f]].dot2(s,r),M=this.gradP[o+this.perm[f+1]].dot2(s,r-1),R=this.gradP[o+1+this.perm[f]].dot2(s-1,r),q=this.gradP[o+1+this.perm[f+1]].dot2(s-1,r-1),x=this.fade(s);return this.lerp(this.lerp(g,R,x),this.lerp(M,q,x),this.fade(r))}}const ee=({lineColor:p="black",backgroundColor:s="transparent",waveSpeedX:r=.0125,waveSpeedY:o=.005,waveAmpX:f=32,waveAmpY:g=16,xGap:M=10,yGap:R=32,friction:q=.925,tension:x=.005,maxCursorMove:A=100,style:te={},className:se=""})=>{const X=i.useRef(null),Y=i.useRef(null),$=i.useRef(null),w=i.useRef({width:0,height:0,left:0,top:0}),re=i.useRef(new ie(Math.random())),E=i.useRef([]),S=i.useRef({x:-10,y:0,lx:0,ly:0,sx:0,sy:0,v:0,vs:0,a:0,set:!1}),V=i.useRef({lineColor:p,waveSpeedX:r,waveSpeedY:o,waveAmpX:f,waveAmpY:g,friction:q,tension:x,maxCursorMove:A,xGap:M,yGap:R}),b=i.useRef(null);return i.useEffect(()=>{V.current={lineColor:p,waveSpeedX:r,waveSpeedY:o,waveAmpX:f,waveAmpY:g,friction:q,tension:x,maxCursorMove:A,xGap:M,yGap:R}},[p,r,o,f,g,q,x,A,M,R]),i.useEffect(()=>{console.log("Waves mounted");const j=Y.current,z=X.current;$.current=j.getContext("2d");function T(){w.current=z.getBoundingClientRect(),j.width=w.current.width,j.height=w.current.height}function B(){const{width:n,height:e}=w.current;E.current=[];const t=n+200,c=e+30,{xGap:u,yGap:v}=V.current,m=Math.ceil(t/u),d=Math.ceil(c/v),y=(n-u*m)/2,P=(e-v*d)/2;for(let h=0;h<=m;h++){const L=[];for(let a=0;a<=d;a++)L.push({x:y+u*h,y:P+v*a,wave:{x:0,y:0},cursor:{x:0,y:0,vx:0,vy:0}});E.current.push(L)}}function ae(n){const e=E.current,t=S.current,c=re.current,{waveSpeedX:u,waveSpeedY:v,waveAmpX:m,waveAmpY:d,friction:y,tension:P,maxCursorMove:h}=V.current;e.forEach(L=>{L.forEach(a=>{const I=c.perlin2((a.x+n*u)*.002,(a.y+n*v)*.0015)*12;a.wave.x=Math.cos(I)*m,a.wave.y=Math.sin(I)*d;const oe=a.x-t.sx,ce=a.y-t.sy,W=Math.hypot(oe,ce),_=Math.max(175,t.vs);if(W<_){const ue=1-W/_,O=Math.cos(W*.001)*ue;a.cursor.vx+=Math.cos(t.a)*O*_*t.vs*65e-5,a.cursor.vy+=Math.sin(t.a)*O*_*t.vs*65e-5}a.cursor.vx+=(0-a.cursor.x)*P,a.cursor.vy+=(0-a.cursor.y)*P,a.cursor.vx*=y,a.cursor.vy*=y,a.cursor.x+=a.cursor.vx*2,a.cursor.y+=a.cursor.vy*2,a.cursor.x=Math.min(h,Math.max(-h,a.cursor.x)),a.cursor.y=Math.min(h,Math.max(-h,a.cursor.y))})})}function N(n,e=!0){const t=n.x+n.wave.x+(e?n.cursor.x:0),c=n.y+n.wave.y+(e?n.cursor.y:0);return{x:Math.round(t*10)/10,y:Math.round(c*10)/10}}function ne(){const{width:n,height:e}=w.current,t=$.current;t.clearRect(0,0,n,e),t.beginPath(),t.strokeStyle=V.current.lineColor,E.current.forEach(c=>{let u=N(c[0],!1);t.moveTo(u.x,u.y),c.forEach((v,m)=>{const d=m===c.length-1;u=N(v,!d);const y=N(c[m+1]||c[c.length-1],!d);t.lineTo(u.x,u.y),d&&t.moveTo(y.x,y.y)})}),t.stroke()}function C(n){const e=S.current;e.sx+=(e.x-e.sx)*.1,e.sy+=(e.y-e.sy)*.1;const t=e.x-e.lx,c=e.y-e.ly,u=Math.hypot(t,c);e.v=u,e.vs+=(u-e.vs)*.1,e.vs=Math.min(100,e.vs),e.lx=e.x,e.ly=e.y,e.a=Math.atan2(c,t),z.style.setProperty("--x",`${e.sx}px`),z.style.setProperty("--y",`${e.sy}px`),ae(n),ne(),b.current=requestAnimationFrame(C)}function F(){T(),B()}function G(n){H(n.clientX,n.clientY)}function D(n){const e=n.touches[0];H(e.clientX,e.clientY)}function H(n,e){const t=S.current,c=w.current;t.x=n-c.left,t.y=e-c.top,t.set||(t.sx=t.x,t.sy=t.y,t.lx=t.x,t.ly=t.y,t.set=!0)}return T(),B(),b.current=requestAnimationFrame(C),window.addEventListener("resize",F),window.addEventListener("mousemove",G),window.addEventListener("touchmove",D,{passive:!1}),()=>{window.removeEventListener("resize",F),window.removeEventListener("mousemove",G),window.removeEventListener("touchmove",D),cancelAnimationFrame(b.current)}},[]),J.jsx("div",{ref:X,className:`${K.waves} ${se}`,style:{position:"relative",margin:0,padding:0,width:"100%",minHeight:"100vh",overflow:"hidden",backgroundColor:s,...te},children:J.jsx("canvas",{ref:Y,className:`${K["waves-canvas"]}`})})};ee.__docgenInfo={description:"",methods:[],displayName:"Waves",props:{lineColor:{defaultValue:{value:"'black'",computed:!1},required:!1},backgroundColor:{defaultValue:{value:"'transparent'",computed:!1},required:!1},waveSpeedX:{defaultValue:{value:"0.0125",computed:!1},required:!1},waveSpeedY:{defaultValue:{value:"0.005",computed:!1},required:!1},waveAmpX:{defaultValue:{value:"32",computed:!1},required:!1},waveAmpY:{defaultValue:{value:"16",computed:!1},required:!1},xGap:{defaultValue:{value:"10",computed:!1},required:!1},yGap:{defaultValue:{value:"32",computed:!1},required:!1},friction:{defaultValue:{value:"0.925",computed:!1},required:!1},tension:{defaultValue:{value:"0.005",computed:!1},required:!1},maxCursorMove:{defaultValue:{value:"100",computed:!1},required:!1},style:{defaultValue:{value:"{}",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1}}};const he={title:"ReactBits/Backgrounds/Waves",component:ee,parameters:{layout:"fullscreen"},tags:["autodocs"]},k={};var Q,U,Z;k.parameters={...k.parameters,docs:{...(Q=k.parameters)==null?void 0:Q.docs,source:{originalSource:"{}",...(Z=(U=k.parameters)==null?void 0:U.docs)==null?void 0:Z.source}}};const ve=["Default"];export{k as Default,ve as __namedExportsOrder,he as default};

package/storybook-static/assets/arc-DgcIQOLP.js

@@ -0,0 +1 @@
+import{w as tn,c as z}from"./path-CbwjOpE9.js";const un=Math.abs,c=Math.atan2,G=Math.cos,on=Math.max,en=Math.min,w=Math.sin,K=Math.sqrt,y=1e-12,L=Math.PI,Y=L/2,cn=2*L;function ln(u){return u>1?0:u<-1?L:Math.acos(u)}function sn(u){return u>=1?Y:u<=-1?-Y:Math.asin(u)}function fn(u){return u.innerRadius}function yn(u){return u.outerRadius}function gn(u){return u.startAngle}function hn(u){return u.endAngle}function mn(u){return u&&u.padAngle}function pn(u,x,D,q,v,A,B,a){var E=D-u,s=q-x,n=B-v,h=a-A,r=h*E-n*s;if(!(r*r<y))return r=(n*(x-A)-h*(u-v))/r,[u+r*E,x+r*s]}function X(u,x,D,q,v,A,B){var a=u-D,E=x-q,s=(B?A:-A)/K(a*a+E*E),n=s*E,h=-s*a,r=u+n,t=x+h,l=D+n,f=q+h,C=(r+l)/2,o=(t+f)/2,m=l-r,g=f-t,R=m*m+g*g,M=v-A,T=r*f-l*t,O=(g<0?-1:1)*K(on(0,M*M*R-T*T)),S=(T*g-m*O)/R,j=(-T*m-g*O)/R,P=(T*g+m*O)/R,p=(-T*m+g*O)/R,d=S-C,e=j-o,i=P-C,F=p-o;return d*d+e*e>i*i+F*F&&(S=P,j=p),{cx:S,cy:j,x01:-n,y01:-h,x11:S*(v/M-1),y11:j*(v/M-1)}}function xn(){var u=fn,x=yn,D=z(0),q=null,v=gn,A=hn,B=mn,a=null,E=tn(s);function s(){var n,h,r=+u.apply(this,arguments),t=+x.apply(this,arguments),l=v.apply(this,arguments)-Y,f=A.apply(this,arguments)-Y,C=un(f-l),o=f>l;if(a||(a=n=E()),t<r&&(h=t,t=r,r=h),!(t>y))a.moveTo(0,0);else if(C>cn-y)a.moveTo(t*G(l),t*w(l)),a.arc(0,0,t,l,f,!o),r>y&&(a.moveTo(r*G(f),r*w(f)),a.arc(0,0,r,f,l,o));else{var m=l,g=f,R=l,M=f,T=C,O=C,S=B.apply(this,arguments)/2,j=S>y&&(q?+q.apply(this,arguments):K(r*r+t*t)),P=en(un(t-r)/2,+D.apply(this,arguments)),p=P,d=P,e,i;if(j>y){var F=sn(j/r*w(S)),N=sn(j/t*w(S));(T-=F*2)>y?(F*=o?1:-1,R+=F,M-=F):(T=0,R=M=(l+f)/2),(O-=N*2)>y?(N*=o?1:-1,m+=N,g-=N):(O=0,m=g=(l+f)/2)}var H=t*G(m),J=t*w(m),Q=r*G(M),U=r*w(M);if(P>y){var V=t*G(g),W=t*w(g),Z=r*G(R),$=r*w(R),I;if(C<L)if(I=pn(H,J,Z,$,V,W,Q,U)){var b=H-I[0],k=J-I[1],_=V-I[0],nn=W-I[1],an=1/w(ln((b*_+k*nn)/(K(b*b+k*k)*K(_*_+nn*nn)))/2),rn=K(I[0]*I[0]+I[1]*I[1]);p=en(P,(r-rn)/(an-1)),d=en(P,(t-rn)/(an+1))}else p=d=0}O>y?d>y?(e=X(Z,$,H,J,t,d,o),i=X(V,W,Q,U,t,d,o),a.moveTo(e.cx+e.x01,e.cy+e.y01),d<P?a.arc(e.cx,e.cy,d,c(e.y01,e.x01),c(i.y01,i.x01),!o):(a.arc(e.cx,e.cy,d,c(e.y01,e.x01),c(e.y11,e.x11),!o),a.arc(0,0,t,c(e.cy+e.y11,e.cx+e.x11),c(i.cy+i.y11,i.cx+i.x11),!o),a.arc(i.cx,i.cy,d,c(i.y11,i.x11),c(i.y01,i.x01),!o))):(a.moveTo(H,J),a.arc(0,0,t,m,g,!o)):a.moveTo(H,J),!(r>y)||!(T>y)?a.lineTo(Q,U):p>y?(e=X(Q,U,V,W,r,-p,o),i=X(H,J,Z,$,r,-p,o),a.lineTo(e.cx+e.x01,e.cy+e.y01),p<P?a.arc(e.cx,e.cy,p,c(e.y01,e.x01),c(i.y01,i.x01),!o):(a.arc(e.cx,e.cy,p,c(e.y01,e.x01),c(e.y11,e.x11),!o),a.arc(0,0,r,c(e.cy+e.y11,e.cx+e.x11),c(i.cy+i.y11,i.cx+i.x11),o),a.arc(i.cx,i.cy,p,c(i.y11,i.x11),c(i.y01,i.x01),!o))):a.arc(0,0,r,M,R,o)}if(a.closePath(),n)return a=null,n+""||null}return s.centroid=function(){var n=(+u.apply(this,arguments)+ +x.apply(this,arguments))/2,h=(+v.apply(this,arguments)+ +A.apply(this,arguments))/2-L/2;return[G(h)*n,w(h)*n]},s.innerRadius=function(n){return arguments.length?(u=typeof n=="function"?n:z(+n),s):u},s.outerRadius=function(n){return arguments.length?(x=typeof n=="function"?n:z(+n),s):x},s.cornerRadius=function(n){return arguments.length?(D=typeof n=="function"?n:z(+n),s):D},s.padRadius=function(n){return arguments.length?(q=n==null?null:typeof n=="function"?n:z(+n),s):q},s.startAngle=function(n){return arguments.length?(v=typeof n=="function"?n:z(+n),s):v},s.endAngle=function(n){return arguments.length?(A=typeof n=="function"?n:z(+n),s):A},s.padAngle=function(n){return arguments.length?(B=typeof n=="function"?n:z(+n),s):B},s.context=function(n){return arguments.length?(a=n??null,s):a},s}export{xn as a,cn as t};

package/storybook-static/assets/array-BKyUJesY.js

@@ -0,0 +1 @@
+function t(r){return typeof r=="object"&&"length"in r?r:Array.from(r)}export{t as a};

package/storybook-static/assets/axis-D3QohQNI.js

@@ -0,0 +1 @@
+function B(n){return n}var S=1,H=2,_=3,h=4,P=1e-6;function L(n){return"translate("+n+",0)"}function N(n){return"translate(0,"+n+")"}function R(n){return r=>+n(r)}function X(n,r){return r=Math.max(0,n.bandwidth()-r*2)/2,n.round()&&(r=Math.round(r)),l=>+n(l)+r}function Y(){return!this.__axis}function E(n,r){var l=[],f=null,p=null,c=6,a=6,w=3,e=typeof window<"u"&&window.devicePixelRatio>1?0:.5,o=n===S||n===h?-1:1,y=n===h||n===H?"x":"y",z=n===S||n===_?L:N;function i(t){var I=f??(r.ticks?r.ticks.apply(r,l):r.domain()),O=p??(r.tickFormat?r.tickFormat.apply(r,l):B),C=Math.max(c,0)+w,F=r.range(),x=+F[0]+e,A=+F[F.length-1]+e,v=(r.bandwidth?X:R)(r.copy(),e),g=t.selection?t.selection():t,m=g.selectAll(".domain").data([null]),u=g.selectAll(".tick").data(I,r).order(),V=u.exit(),M=u.enter().append("g").attr("class","tick"),d=u.select("line"),k=u.select("text");m=m.merge(m.enter().insert("path",".tick").attr("class","domain").attr("stroke","currentColor")),u=u.merge(M),d=d.merge(M.append("line").attr("stroke","currentColor").attr(y+"2",o*c)),k=k.merge(M.append("text").attr("fill","currentColor").attr(y,o*C).attr("dy",n===S?"0em":n===_?"0.71em":"0.32em")),t!==g&&(m=m.transition(t),u=u.transition(t),d=d.transition(t),k=k.transition(t),V=V.transition(t).attr("opacity",P).attr("transform",function(s){return isFinite(s=v(s))?z(s+e):this.getAttribute("transform")}),M.attr("opacity",P).attr("transform",function(s){var b=this.parentNode.__axis;return z((b&&isFinite(b=b(s))?b:v(s))+e)})),V.remove(),m.attr("d",n===h||n===H?a?"M"+o*a+","+x+"H"+e+"V"+A+"H"+o*a:"M"+e+","+x+"V"+A:a?"M"+x+","+o*a+"V"+e+"H"+A+"V"+o*a:"M"+x+","+e+"H"+A),u.attr("opacity",1).attr("transform",function(s){return z(v(s)+e)}),d.attr(y+"2",o*c),k.attr(y,o*C).text(O),g.filter(Y).attr("fill","none").attr("font-size",10).attr("font-family","sans-serif").attr("text-anchor",n===H?"start":n===h?"end":"middle"),g.each(function(){this.__axis=v})}return i.scale=function(t){return arguments.length?(r=t,i):r},i.ticks=function(){return l=Array.from(arguments),i},i.tickArguments=function(t){return arguments.length?(l=t==null?[]:Array.from(t),i):l.slice()},i.tickValues=function(t){return arguments.length?(f=t==null?null:Array.from(t),i):f&&f.slice()},i.tickFormat=function(t){return arguments.length?(p=t,i):p},i.tickSize=function(t){return arguments.length?(c=a=+t,i):c},i.tickSizeInner=function(t){return arguments.length?(c=+t,i):c},i.tickSizeOuter=function(t){return arguments.length?(a=+t,i):a},i.tickPadding=function(t){return arguments.length?(w=+t,i):w},i.offset=function(t){return arguments.length?(e=+t,i):e},i}function j(n){return E(_,n)}function q(n){return E(h,n)}export{j as a,q as b};

package/storybook-static/assets/check-CAskjz10.js

@@ -0,0 +1,6 @@
+import{c}from"./createLucideIcon-C7zEcVM7.js";/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const e=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],t=c("check",e);export{t as C};

package/storybook-static/assets/chevron-down-BI8IU4ZZ.js

@@ -0,0 +1,6 @@
+import{c as o}from"./createLucideIcon-C7zEcVM7.js";/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const n=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],e=o("chevron-down",n);export{e as C};

package/storybook-static/assets/chevron-right-DUHx58vO.js

@@ -0,0 +1,6 @@
+import{c as o}from"./createLucideIcon-C7zEcVM7.js";/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const t=[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]],e=o("chevron-right",t);export{e as C};

package/storybook-static/assets/client-DFRPWCQR.js

@@ -0,0 +1 @@
+import{r}from"./index-jFY_uKTI.js";var t,o=r;t=o.createRoot,o.hydrateRoot;export{t as c};

package/storybook-static/assets/createLucideIcon-C7zEcVM7.js

@@ -0,0 +1,21 @@
+import{r as s}from"./iframe-Cz1R6gKZ.js";/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const C=t=>t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),w=t=>t.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,r,o)=>o?o.toUpperCase():r.toLowerCase()),i=t=>{const e=w(t);return e.charAt(0).toUpperCase()+e.slice(1)},l=(...t)=>t.filter((e,r,o)=>!!e&&e.trim()!==""&&o.indexOf(e)===r).join(" ").trim(),f=t=>{for(const e in t)if(e.startsWith("aria-")||e==="role"||e==="title")return!0};/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */var h={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const g=s.forwardRef(({color:t="currentColor",size:e=24,strokeWidth:r=2,absoluteStrokeWidth:o,className:n="",children:a,iconNode:u,...c},p)=>s.createElement("svg",{ref:p,...h,width:e,height:e,stroke:t,strokeWidth:o?Number(r)*24/Number(e):r,className:l("lucide",n),...!a&&!f(c)&&{"aria-hidden":"true"},...c},[...u.map(([m,d])=>s.createElement(m,d)),...Array.isArray(a)?a:[a]]));/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const b=(t,e)=>{const r=s.forwardRef(({className:o,...n},a)=>s.createElement(g,{ref:a,iconNode:e,className:l(`lucide-${C(i(t))}`,`lucide-${t}`,o),...n}));return r.displayName=i(t),r};export{b as c};