screen-info-zx01/dist/index.cjs

A simple React component to display screen size and device info.

"use strict";const E=require("react");var A={exports:{}},h={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var L;function re(){if(L)return h;L=1;var t=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function i(p,l,u){var b=null;if(u!==void 0&&(b=""+u),l.key!==void 0&&(b=""+l.key),"key"in l){u={};for(var d in l)d!=="key"&&(u[d]=l[d])}else u=l;return l=u.ref,{$$typeof:t,type:p,key:b,ref:l!==void 0?l:null,props:u}}return h.Fragment=c,h.jsx=i,h.jsxs=i,h}var _={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var M;function te(){return M||(M=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case B:return"Profiler";case U:return"StrictMode";case G:return"Suspense";case J:return"SuspenseList";case Z:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case q:return(e.displayName||"Context")+".Provider";case V:return(e._context.displayName||"Context")+".Consumer";case X:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case H:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case N:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function c(e){return""+e}function i(e){try{c(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),c(e)}}function p(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===N)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function l(){var e=j.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function b(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function d(e,r){function n(){Y||(Y=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function v(){var e=t(this.type);return z[e]||(z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,r,n,a,m,f,y,w){return n=f.ref,e={$$typeof:C,type:e,key:r,props:f,_owner:m},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:v}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:y}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:w}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,r,n,a,m,f,y,w){var s=r.children;if(s!==void 0)if(a)if(K(s)){for(a=0;a<s.length;a++)P(s[a]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else P(s);if(I.call(r,"key")){s=t(e);var x=Object.keys(r).filter(function(ee){return ee!=="key"});a=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",D[s+a]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,a,s,x,s),D[s+a]=!0)}if(s=null,n!==void 0&&(i(n),s=""+n),b(r)&&(i(r.key),s=""+r.key),"key"in r){n={};for(var O in r)O!=="key"&&(n[O]=r[O])}else n=r;return s&&d(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,s,f,m,l(),n,y,w)}function P(e){typeof e=="object"&&e!==null&&e.$$typeof===C&&e._store&&(e._store.validated=1)}var k=E,C=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),q=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),J=Symbol.for("react.suspense_list"),H=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),j=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,K=Array.isArray,S=console.createTask?console.createTask:function(){return null};k={"react-stack-bottom-frame":function(e){return e()}};var Y,z={},F=k["react-stack-bottom-frame"].bind(k,u)(),$=S(p(u)),D={};_.Fragment=T,_.jsx=function(e,r,n,a,m){var f=1e4>j.recentlyCreatedOwnerStacks++;return g(e,r,n,!1,a,m,f?Error("react-stack-top-frame"):F,f?S(p(e)):$)},_.jsxs=function(e,r,n,a,m){var f=1e4>j.recentlyCreatedOwnerStacks++;return g(e,r,n,!0,a,m,f?Error("react-stack-top-frame"):F,f?S(p(e)):$)}}()),_}process.env.NODE_ENV==="production"?A.exports=re():A.exports=te();var o=A.exports;const ne=t=>{const c=[],i=[];return t>=640&&c.push("sm"),t>=768&&c.push("md"),t>=1024&&c.push("lg"),t>=1280&&c.push("xl"),t>=1536&&c.push("2xl"),t<1536&&i.push("max-2xl"),t<1280&&i.push("max-xl"),t<1024&&i.push("max-lg"),t<768&&i.push("max-md"),t<640&&i.push("max-sm"),{min:c,max:i}},oe=t=>t<640?"base":t<768?"sm":t<1024?"md":t<1280?"lg":t<1536?"xl":"2xl";function ae(){const[t,c]=E.useState({width:0,height:0}),[i,p]=E.useState({min:[],max:[]}),[l,u]=E.useState("base"),[b,d]=E.useState(!1);return E.useEffect(()=>{const v=()=>{const R=window.innerWidth,g=window.innerHeight;c({width:R,height:g}),p(ne(R)),u(oe(R))};return v(),window.addEventListener("resize",v),()=>window.removeEventListener("resize",v)},[]),b?o.jsxs("div",{style:{position:"fixed",top:"1rem",left:"50%",transform:"translateX(-50%)",zIndex:9999,backgroundColor:"rgba(255, 255, 255, 0.6)",color:"black",backdropFilter:"blur(2px)",padding:"1rem",borderRadius:"1rem",boxShadow:"0 0 15px rgba(0,0,0,0.2)",fontSize:"0.85rem",fontFamily:"monospace",maxWidth:"90vw",width:"fit-content"},children:[o.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"0.5rem"},children:[o.jsx("strong",{style:{color:"rgba(0, 0, 0, 0.6)",marginRight:"1rem"},children:"Screen Info"}),o.jsx("button",{onClick:()=>d(!1),style:{fontSize:"0.75rem",padding:"0.25rem 0.5rem",backgroundColor:"black",color:"white",border:"none",borderRadius:"4px",cursor:"pointer"},children:"Hide"})]}),o.jsxs("div",{children:[o.jsx("strong",{children:"Primary:"})," ",o.jsx("span",{style:{color:"#4338ca"},children:l})]}),o.jsxs("div",{children:[o.jsx("strong",{children:"Min Breakpoints:"})," ",o.jsx("span",{style:{color:"#15803d"},children:i.min.join(", ")||"none"})]}),o.jsxs("div",{children:[o.jsx("strong",{children:"Max Breakpoints:"})," ",o.jsx("span",{style:{color:"#b91c1c"},children:i.max.join(", ")||"none"})]}),o.jsxs("div",{children:[o.jsx("strong",{children:"Size:"})," ",t.width,"px × ",t.height,"px"]})]}):o.jsx("button",{style:{position:"fixed",top:"1rem",left:"50%",transform:"translateX(-50%)",zIndex:9999,backgroundColor:"rgba(0, 0, 0, 0.7)",color:"white",padding:"0.25rem 1rem",borderRadius:"6px",fontSize:"0.75rem",opacity:.8,cursor:"pointer"},onClick:()=>d(!0),children:"Show ScreenInfo"})}function se(){return o.jsx(ae,{})}module.exports=se;