@webority/ui-react 0.73.1 → 0.74.0

package/dist/components/AppThemeToggle.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppActionIcon.js";import r from"./AppSegmented.js";import{DEFAULT_THEME_EFFECT as i,DEFAULT_THEME_STORAGE_KEY as a,THEME_CHANGE_EVENT as o,THEME_EFFECTS as s,THEME_MODES as c,applyTheme as l,nextTheme as u,readStoredTheme as d,resolveTheme as f,storeTheme as p,transitionTheme as m,watchSystemTheme as h}from"@webority/ui-elements/helpers";import{useCallback as g,useEffect as _,useId as v,useState as y}from"react";import{jsx as b}from"react/jsx-runtime";import{flushSync as x}from"react-dom";var S={light:`sun`,dark:`moon`,auto:`refresh-cw`},C=[`icon`,`segmented`],w={sm:16,md:20,lg:24,xl:28};function T({variant:T=`icon`,effect:E=i,includeAuto:D=!0,storageKey:O=a,duration:k,label:A=`Theme`,lightLabel:j=`Light`,darkLabel:M=`Dark`,autoLabel:N=`System`,name:P,size:F=`md`,tooltipPlacement:I=`auto`,onChange:L,className:R=``,...z}){t(`AppThemeToggle`,z),e(`AppThemeToggle`,`variant`,T,C),e(`AppThemeToggle`,`effect`,E,s),e(`AppThemeToggle`,`size`,F,Object.keys(w));let B=g(e=>e===`auto`&&!D?f(e):e,[D]),[V,H]=y(()=>B(typeof window>`u`?`auto`:d(O))),U=v(),W=P||U;_(()=>{let e=document.documentElement.getAttribute(`data-theme`);c.includes(e)?H(B(e)):l(d(O))},[]),_(()=>{let e=e=>{let t=e.detail?.preference;c.includes(t)&&H(B(t))};return document.addEventListener(o,e),()=>document.removeEventListener(o,e)},[B]),_(()=>h(()=>{document.documentElement.getAttribute(`data-theme`)===`auto`&&l(`auto`)}),[]);let G=g((e,t,n)=>{let r=t?.getBoundingClientRect?.()??{left:0,top:0,width:0,height:0},i={x:r.left+r.width/2,y:r.top+r.height/2};m(()=>{l(e),p(e,O),x(()=>H(e)),L?.(e)},{effect:E,to:f(e),origin:i,duration:k,live:n})},[O,E,k,L]);if(T===`segmented`){let e=[{value:`light`,label:j,icon:S.light},{value:`dark`,label:M,icon:S.dark}];return D&&e.push({value:`auto`,label:N,icon:S.auto}),b(r,{options:e,value:V,name:W,label:A,size:F,className:[`wui-theme-toggle`,`wui-theme-toggle-segmented`,R].filter(Boolean).join(` `),onChange:e=>{if(e===V)return;let t=document.querySelector(`.segmented-input[name="${CSS.escape(W)}"][value="${e}"]`);G(e,t?.closest(`.segmented-option`)??t,t?.closest(`.segmented`))}})}return b(n,{icon:S[V],label:`${A}: ${V}`,size:w[F]??w.md,tooltipPlacement:I,onClick:e=>G(u(V,{includeAuto:D}),e.currentTarget,e.currentTarget),className:[`wui-theme-toggle`,R].filter(Boolean).join(` `)})}export{T as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppActionIcon.js";import r from"./AppSegmented.js";import{DEFAULT_THEME_EFFECT as i,DEFAULT_THEME_STORAGE_KEY as a,THEME_CHANGE_EVENT as o,THEME_EFFECTS as s,THEME_MODES as c,applyTheme as l,nextTheme as u,readStoredTheme as d,resolveTheme as f,storeTheme as p,transitionTheme as m,watchSystemTheme as h}from"@webority/ui-elements/helpers";import{useCallback as g,useEffect as _,useId as v,useState as y}from"react";import{jsx as b}from"react/jsx-runtime";import{flushSync as x}from"react-dom";var S={light:`sun`,dark:`moon`,auto:`refresh-cw`},C=[`icon`,`segmented`],w={sm:16,md:20,lg:24,xl:28};function T({variant:T=`icon`,effect:E=i,includeAuto:D=!0,storageKey:O=a,duration:k,label:A=`Theme`,lightLabel:j=`Light`,darkLabel:M=`Dark`,autoLabel:N=`System`,name:P,size:F=`md`,tooltipPlacement:I=`auto`,onChange:L,className:R=``,...z}){t(`AppThemeToggle`,z),e(`AppThemeToggle`,`variant`,T,C),e(`AppThemeToggle`,`effect`,E,s),e(`AppThemeToggle`,`size`,F,Object.keys(w));let B=g(e=>e===`auto`&&!D?f(e):e,[D]),[V,H]=y(()=>B(typeof window>`u`?`auto`:d(O))),U=v(),W=P||U;_(()=>{let e=document.documentElement.getAttribute(`data-theme`);c.includes(e)?H(B(e)):l(d(O))},[]),_(()=>{let e=e=>{let t=e.detail?.preference;c.includes(t)&&H(B(t))};return document.addEventListener(o,e),()=>document.removeEventListener(o,e)},[B]),_(()=>h(()=>{document.documentElement.getAttribute(`data-theme`)===`auto`&&l(`auto`)}),[]);let G=g((e,t)=>{let n=t?.getBoundingClientRect?.()??{left:0,top:0,width:0,height:0},r={x:n.left+n.width/2,y:n.top+n.height/2};m(()=>{l(e),p(e,O),x(()=>H(e)),L?.(e)},{effect:E,to:f(e),origin:r,duration:k})},[O,E,k,L]);if(T===`segmented`){let e=[{value:`light`,label:j,icon:S.light},{value:`dark`,label:M,icon:S.dark}];return D&&e.push({value:`auto`,label:N,icon:S.auto}),b(r,{options:e,value:V,name:W,label:A,size:F,className:[`wui-theme-toggle`,`wui-theme-toggle-segmented`,R].filter(Boolean).join(` `),onChange:e=>{if(e===V)return;let t=document.querySelector(`.segmented-input[name="${CSS.escape(W)}"][value="${e}"]`);G(e,t?.closest(`.segmented-option`)??t)}})}return b(n,{icon:S[V],label:`${A}: ${V}`,size:w[F]??w.md,tooltipPlacement:I,onClick:e=>G(u(V,{includeAuto:D}),e.currentTarget),className:[`wui-theme-toggle`,R].filter(Boolean).join(` `)})}export{T as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.73.1",
+  "version": "0.74.0",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.73.1",
-    "@webority/ui-elements": "0.73.1"
+    "@webority/theme": "0.74.0",
+    "@webority/ui-elements": "0.74.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",