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

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

"use client";
import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useState as o,Children as a}from"react";import r from"../../feedback/halo.js";import{combineClasses as n,classes as c}from"../../../core/utils.js";import l from"../../input/toggle.js";import d from"../collapsible.js";import{createStyles as s}from"../../../core/style.js";import{useSidebar as m}from"./root.js";import p from"../../../hooks/use-fluid.js";import f from"../../../hooks/use-media-query.js";import{Icon as g}from"../../../core/icons.js";const h=s("sidebar.item",{".item":{position:"relative",fontWeight:600,borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-text-100)",display:"flex",transition:"background-color .25s, color .25s",outline:"none",overflow:"hidden",WebkitTapHighlightColor:"transparent"},".item:not(.compact)":{height:"3em",flexShrink:0},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".icon":{height:"inherit",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},".item:not(.compact) .icon":{width:"3em"},'.item[data-disabled="false"]':{cursor:"pointer"},".item.round":{borderRadius:"999px"},'.item[data-active="true"]':{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},'.v__light[data-active="true"]':{backgroundColor:"var(--f-clr-primary-600)",color:"var(--f-clr-primary-100)"},'.item[data-disabled="true"]':{color:"var(--f-clr-grey-500)"},".item .toggle":{marginRight:"-.3em"},".item.compact .toggle":{background:"transparent",color:"var(--f-clr-text-100)",pointerEvents:"none",marginRight:0},".item.compact .toggle__content":{padding:0},'.v__default[data-active="true"] .toggle':{color:"var(--f-clr-text-200)"},".content":{paddingRight:"1em",display:"flex",alignItems:"center",gap:"var(--f-spacing-sml)",justifyContent:"space-between",transition:"opacity .3s",flexGrow:1,flexShrink:0},".item.compact .icon":{padding:".6em",lineHeight:1},".item.compact .content":{paddingRight:".6em",paddingBlock:".6em",lineHeight:1},'.content[data-hasicon="false"]':{paddingLeft:"1em"},'.item.compact .content[data-hasicon="false"]':{paddingLeft:".6em"},".children":{paddingLeft:"1.5em",transition:"padding-left .3s",flexShrink:0},".children > *":{flexShrink:0},".item.collapsed .content":{opacity:0},'.children[data-collapsed="true"]':{paddingLeft:"0em"}});function u({children:s,cc:u={},size:v="med",label:b,icon:x,right:k,active:y=!1,round:_,compact:j,variant:S="default",disabled:w=!1,defaultOpen:C=!1,...z}){const R=n(h,u),[N,I]=o(C),L=a.count(s),{collapsed:H}=m(),$=p(),W=f(`(max-width: ${$.breakpoints.mob}px)`);return e(t,{children:[i(r,{color:y?void 0:"var(--f-clr-primary-300)",disabled:w,children:e("div",{...z,tabIndex:0,role:"button",className:c(R.item,R[`s__${v}`],R[`v__${S}`],_&&R.round,j&&R.compact,H&&R.collapsed,z.className),"data-disabled":w,"data-active":y,onClick:()=>I(!N),children:[void 0!==x&&i("div",{className:R.icon,children:x}),e("span",{className:R.content,"data-hasicon":void 0!==x,children:[b,L?i(l,{cc:{...u,toggle:R.toggle,content:R.toggle__content},"aria-label":b,disabled:j,compact:!0,variant:"minimal",size:"med"===v?"sml":"xsm",round:_,checked:N,checkedContent:i(g,{type:"collapseUp"}),children:i(g,{type:"expandDown"})}):k]})]})}),L?i(d,{shown:N&&(W||!H),cc:{...u,content:R.children},"data-collapsed":H,children:s}):null]})}u.displayName="Sidebar.Item";export{u as default};
//# sourceMappingURL=item.js.map