@infinityfx/fluid/dist/components/layout/sidebar/toggle.js

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

"use client";
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{combineClasses as o,classes as l}from"../../../core/utils.js";import{createStyles as r}from"../../../core/style.js";import{Icon as a}from"../../../core/icons.js";import{useSidebar as i}from"./root.js";import n from"../../input/button.js";import s from"../../feedback/halo.js";const c=r("sidebar.toggle",{".wrapper":{display:"flex",justifyContent:"space-between",alignItems:"center",overflow:"hidden",flexShrink:0},".toggle":{position:"relative",overflow:"hidden",background:"none",outline:"none",border:"none",color:"var(--f-clr-text-100)",borderRadius:"var(--f-radius-sml)",flexShrink:0,WebkitTapHighlightColor:"transparent"},".toggle:enabled":{cursor:"pointer"},".logo":{width:"3rem",height:"3rem",display:"flex",alignItems:"center",justifyContent:"center",transition:"translate .25s"},".icon":{inset:0,position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",translate:"-100% 0%",transition:"translate .25s"},".toggle:enabled:hover .logo, .toggle:enabled:focus-visible .logo":{translate:"100% 0%"},".toggle:enabled:hover .icon, .toggle:enabled:focus-visible .icon":{translate:"0% 0%"},'.button[data-collapsed="true"]':{opacity:0}});function d({children:r,cc:d={},toggle:p="square",...g}){const m=o(c,d),{collapsed:b,setCollapsed:f}=i();return e("div",{...g,className:l(m.wrapper,g.className),children:[t(s,{disabled:!b,color:"var(--f-clr-primary-300)",children:e("button",{type:"button",className:m.toggle,onClick:()=>f(!1),disabled:!b,children:[t("div",{className:m.logo,children:r}),t("div",{className:m.icon,children:t(a,{type:"expandSidebar"})})]})}),t(n,{size:"sml",compact:!0,variant:"light",onClick:()=>f(!0),className:m.button,tabIndex:b?-1:0,"data-collapsed":b,children:t(a,{type:"collapseSidebar"})})]})}d.displayName="Sidebar.Toggle";export{d as default};
//# sourceMappingURL=toggle.js.map