reactdesk-core/dist/index-DZwMQg-m.js

A powerful React-based desktop environment library for creating Windows 11-like desktop interfaces with window management, taskbar, themes, and more

"use strict";const e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("./index-B8LTnm77.js"),i=require("./useTitlebarContextMenu-Bggb47Lr.js"),n=e=>{e.target instanceof HTMLTextAreaElement||e.preventDefault()};r("div");const s=r.button.attrs(({as:e})=>({onKeyDown:n,type:e&&"button"!==e?void 0:"button"}))`
  ${o.defaultStyles}
  background-color: transparent;
  font-family: inherit;
  max-width: ${({$short:e})=>e?"31px":void 0};
  width: 100%;
`,a=r(o.m.li)`
  display: flex;
  min-width: 0;
  overflow: hidden;
  place-content: center;
  position: relative;
  cursor: default;
  width: ${({theme:e})=>e.sizes.taskbar.entry.maxWidth};

  &::before {
    background-color: ${({$foreground:e,$progress:t,theme:r})=>e?t&&t>0&&t<100?r.colors.taskbar.foregroundProgress:r.colors.taskbar.foreground:""};
    background-image: ${({$progress:e,theme:t})=>e&&e>0&&e<100?`linear-gradient(to right, ${t.colors.progressBackground} 0% ${e}%, transparent ${e}% 100%)`:""};
    border-bottom: ${({$progress:e,theme:t})=>`\n        ${t.sizes.taskbar.entry.borderSize} solid ${e&&e>0&&e<100?t.colors.progress:t.colors.highlight}\n      `};
    bottom: 2px;
    content: "";
    height: ${({$foreground:e})=>e?"100%":0};
    margin: ${({$foreground:e})=>e?"":"0 4px"};
    position: absolute;
    transition-duration: 0.1s;
    transition-property: ${({$foreground:e})=>e?"all":"width"};
    width: ${({$foreground:e})=>e?"100%":"calc(100% - 8px)"};
    z-index: -1;
  }

  &:hover {
    &::before {
      background-color: ${({$foreground:e,theme:t})=>e?t.colors.taskbar.foregroundHover:t.colors.taskbar.hover};
      height: 100%;
      margin: 0;
      width: 100%;
    }
  }

  &:active {
    &::before {
      background-color: ${({$foreground:e,theme:t})=>e?t.colors.taskbar.activeForeground:t.colors.taskbar.active};
    }
  }

  figure {
    align-items: center;
    display: flex;
    margin-left: 4px;
    padding: 4px;

    figcaption {
      color: ${({theme:e})=>e.colors.text};
      font-size: ${({theme:e})=>e.sizes.taskbar.entry.fontSize};
      margin: 0 4px;
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon {
      font-size: ${({theme:e})=>e.sizes.taskbar.entry.iconSize};
    }

    picture, .icon {
      height: ${({theme:e})=>e.sizes.taskbar.entry.iconSize};
      position: relative;
      width: ${({theme:e})=>e.sizes.taskbar.entry.iconSize};
    }
  }

  > ${s} {
    align-items: center;
    display: flex;

    figure {
      width: 100%;
    }
  }
`,l=()=>{const{sizes:{taskbar:e}}=r.useTheme();return{animate:"active",exit:"initial",initial:"initial",transition:{duration:o.TRANSITIONS_IN_SECONDS.WINDOW},variants:{active:{width:e.entry.maxWidth},initial:{width:0}}}},d=t.lazy(()=>Promise.resolve().then(()=>require("./PeekWindow-DuxVu9rR.js"))),c=t.memo(({icon:r,id:n,title:c,...u})=>{const g=i.useNextFocusable(n),{foregroundId:h,setForegroundId:f,setPreviewID:m}=o.useContext(),p=n===h,{linkElement:b,minimize:x,windows:{[n]:$}}=o.useContext$1(),{enablePeek:k}=o.useContext$2(),{minimized:v,progress:y}=$||{},w=t.useCallback(e=>{e&&b(n,"taskbarEntry",e)},[n,b]),[z,S]=t.useState(!1),j=()=>{S(!1),m(!1)},T=t.useMemo(()=>o.isSafari()?o.DIV_BUTTON_PROPS:{},[]),P=t.useMemo(()=>{if("string"==typeof r)return e.jsx(o.Icon,{alt:c,imgSize:24,src:r});if(t.isValidElement(r))return e.jsx("div",{className:"icon",children:r});if("function"==typeof r){const t=r;return e.jsx("div",{className:"icon",children:e.jsx(t,{})})}},[r,c]);return e.jsxs(a,{$foreground:p,$progress:y,onClick:j,onMouseEnter:()=>{S(!0),m(n)},onMouseLeave:j,onMouseDown:e=>{e.stopPropagation()},...l(),...i.useTitlebarContextMenu(n),...u,children:[k&&e.jsx(o.AnimatePresence,{initial:!1,presenceAffectsLayout:!1,children:z&&e.jsx(d,{id:n})}),e.jsx(s,{as:"div",ref:w,onClick:()=>{(v||p)&&x(n),f(p?g:n)},...T,...o.label(c),children:e.jsxs("figure",{children:[P,e.jsx("figcaption",{children:c})]})})]})}),u=Object.freeze(Object.defineProperty({__proto__:null,default:c},Symbol.toStringTag,{value:"Module"}));exports.StyledTaskbarEntry=a,exports.index=u;
//# sourceMappingURL=index-DZwMQg-m.js.map