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

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

"use client";
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{combineClasses as i,classes as o}from"../../../core/utils.js";import t from"../../feedback/halo.js";import a from"../../feedback/indicator.js";import{createStyles as n}from"../../../core/style.js";import{useSidebar as s}from"./root.js";import{Icon as l}from"../../../core/icons.js";const c=n("sidebar.user",{".user":{position:"relative",outline:"none",border:"none",borderRadius:"var(--f-radius-sml)",background:"none",display:"flex",alignItems:"center",gap:"var(--f-spacing-sml)",textAlign:"left",color:"var(--f-clr-text-100)",height:"3em",paddingRight:".5em",fontSize:"var(--f-font-size-sml)"},".user.round":{borderRadius:"999px"},".user:enabled":{cursor:"pointer"},".avatar":{position:"relative",width:"2.5em",height:"2.5em",fontWeight:700,textTransform:"uppercase",fontSize:"1.2em",flexShrink:0},".frame":{position:"absolute",inset:0,borderRadius:"var(--f-radius-sml)",overflow:"hidden",backgroundColor:"var(--f-clr-primary-400)",display:"flex",alignItems:"center",justifyContent:"center"},".user.round .frame":{borderRadius:"999px"},".name":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontWeight:600},".status":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:".8em",color:"var(--f-clr-grey-500)"},".content":{flexShrink:1,flexGrow:1,width:0,transition:"opacity .3s"},".icon":{fontSize:"1.1em",display:"flex",alignItems:"center",marginLeft:"auto",transition:"opacity .3s"},".user.collapsed .content, .user.collapsed .icon":{opacity:0}});function d({children:n,cc:d={},name:m,status:f,indicator:p=!1,round:u=!1,icon:h=e(l,{type:"more"}),...v}){const b=i(c,d),{collapsed:g}=s();return e(t,{disabled:v.disabled,color:"var(--f-clr-primary-400)",children:r("button",{...v,type:"button",className:o(b.user,u&&b.round,g&&b.collapsed,v.className),children:[e(a,{outline:"var(--f-clr-bg-100)",content:p,children:e("div",{className:b.avatar,children:e("div",{className:b.frame,children:n||m.slice(0,2)})})}),r("div",{className:b.content,children:[e("div",{className:b.name,children:m}),e("div",{className:b.status,children:f})]}),h&&e("div",{className:b.icon,children:h})]})})}d.displayName="Sidebar.User";export{d as default};
//# sourceMappingURL=user.js.map