@infinityfx/fluid/dist/components/input/hamburger.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as i}from"react";import o from"../feedback/halo.js";import{Animatable as t}from"@infinityfx/lively";import{combineClasses as a,classes as n}from"../../core/utils.js";import{createStyles as s}from"../../core/style.js";const l=s("hamburger",{".hamburger":{position:"relative",border:"none",background:"none",display:"flex",flexDirection:"column",justifyContent:"space-around",alignItems:"center",height:"2.5em",width:"2.5em",padding:".5em",borderRadius:"var(--f-radius-sml)",outline:"none",WebkitTapHighlightColor:"transparent"},".line":{width:"100%",height:"3px",backgroundColor:"var(--color, var(--f-clr-text-100))",transformOrigin:"bottom right",borderRadius:"99px"},".hamburger:enabled":{cursor:"pointer"},".hamburger:disabled .line":{backgroundColor:"var(--f-clr-grey-400)"},".cross":{inset:".25em",position:"absolute",rotate:"-45deg",display:"flex",alignItems:"center",justifyContent:"center"},".cross > *:last-child":{position:"absolute",height:"100%",width:"3px"}});function m({cc:s={},open:m,color:d,...c}){const u=a(l,s),[g,h]=void 0!==m?[m]:i(!1);return e(o,{disabled:c.disabled,children:r("button",{...c,style:{...c.style,"--color":d},className:n(u.hamburger,c.className),onClick:e=>{h?.(!g),c.onClick?.(e)},children:[e(t,{animate:{scale:["1 1","0 1","0 1"],duration:.6},deform:!1,triggers:[{on:g,immediate:!0},{on:!g,reverse:!0,immediate:!0}],children:new Array(3).fill(0).map(((r,i)=>e("div",{className:u.line},i)))}),r("div",{className:u.cross,children:[e(t,{animate:{scale:["0 1","0 1","1 1"],duration:.6},deform:!1,triggers:[{on:g,immediate:!0},{on:!g,reverse:!0,immediate:!0}],children:e("div",{className:u.line})}),e(t,{animate:{scale:["1 0","1 0","1 1"],duration:.6,delay:.2},deform:!1,triggers:[{on:g,immediate:!0},{on:!g,reverse:!0,immediate:!0}],children:e("div",{className:u.line})})]})]})})}export{m as default};
//# sourceMappingURL=hamburger.js.map