react-night-light
Version:
A React component that simulates a night light with pull-to-toggle functionality
24 lines (23 loc) • 13.3 kB
JavaScript
(function(g,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react"),require("@react-spring/web")):typeof define=="function"&&define.amd?define(["exports","react","@react-spring/web"],s):(g=typeof globalThis<"u"?globalThis:g||self,s(g.ReactNightLight={},g.React,g.ReactSpring))})(this,function(g,s,h){"use strict";var z={exports:{}},N={};/**
* @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 $;function re(){if($)return N;$=1;var x=Symbol.for("react.transitional.element"),b=Symbol.for("react.fragment");function v(c,l,f){var E=null;if(f!==void 0&&(E=""+f),l.key!==void 0&&(E=""+l.key),"key"in l){f={};for(var R in l)R!=="key"&&(f[R]=l[R])}else f=l;return l=f.ref,{$$typeof:x,type:c,key:E,ref:l!==void 0?l:null,props:f}}return N.Fragment=b,N.jsx=v,N.jsxs=v,N}var W={};/**
* @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 ee;function ne(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function x(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Y?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case d:return"Profiler";case _:return"StrictMode";case A:return"Suspense";case P:return"SuspenseList";case M: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 F:return"Portal";case Q:return(e.displayName||"Context")+".Provider";case B:return(e._context.displayName||"Context")+".Consumer";case J:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case G:return r=e.displayName||null,r!==null?r:x(e.type)||"Memo";case S:r=e._payload,e=e._init;try{return x(e(r))}catch{}}return null}function b(e){return""+e}function v(e){try{b(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,i=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),b(e)}}function c(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===S)return"<...>";try{var r=x(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function l(){var e=u.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function E(e){if(D.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function o(){U||(U=!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))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function H(){var e=x(this.type);return V[e]||(V[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 L(e,r,o,i,w,m,Z,K){return o=m.ref,e={$$typeof:O,type:e,key:r,props:m,_owner:w},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:H}):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:Z}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:K}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,o,i,w,m,Z,K){var a=r.children;if(a!==void 0)if(i)if(X(a)){for(i=0;i<a.length;i++)k(a[i]);Object.freeze&&Object.freeze(a)}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 k(a);if(D.call(r,"key")){a=x(e);var C=Object.keys(r).filter(function(le){return le!=="key"});i=0<C.length?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}",te[a+i]||(C=0<C.length?"{"+C.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} />`,i,a,C,a),te[a+i]=!0)}if(a=null,o!==void 0&&(v(o),a=""+o),E(r)&&(v(r.key),a=""+r.key),"key"in r){o={};for(var q in r)q!=="key"&&(o[q]=r[q])}else o=r;return a&&R(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),L(e,a,m,w,l(),o,Z,K)}function k(e){typeof e=="object"&&e!==null&&e.$$typeof===O&&e._store&&(e._store.validated=1)}var y=s,O=Symbol.for("react.transitional.element"),F=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),d=Symbol.for("react.profiler"),B=Symbol.for("react.consumer"),Q=Symbol.for("react.context"),J=Symbol.for("react.forward_ref"),A=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),G=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),M=Symbol.for("react.activity"),Y=Symbol.for("react.client.reference"),u=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,X=Array.isArray,I=console.createTask?console.createTask:function(){return null};y={"react-stack-bottom-frame":function(e){return e()}};var U,V={},n=y["react-stack-bottom-frame"].bind(y,f)(),p=I(c(f)),te={};W.Fragment=j,W.jsx=function(e,r,o,i,w){var m=1e4>u.recentlyCreatedOwnerStacks++;return T(e,r,o,!1,i,w,m?Error("react-stack-top-frame"):n,m?I(c(e)):p)},W.jsxs=function(e,r,o,i,w){var m=1e4>u.recentlyCreatedOwnerStacks++;return T(e,r,o,!0,i,w,m?Error("react-stack-top-frame"):n,m?I(c(e)):p)}}()),W}process.env.NODE_ENV==="production"?z.exports=re():z.exports=ne();var t=z.exports;const oe=()=>t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 150 180",children:[t.jsx("defs",{children:t.jsxs("radialGradient",{id:"bulbOffGradient",cx:"50%",cy:"50%",r:"50%",fx:"45%",fy:"40%",children:[t.jsx("stop",{offset:"0%",stopColor:"#f8f8f8"}),t.jsx("stop",{offset:"60%",stopColor:"#e0e0e0"}),t.jsx("stop",{offset:"100%",stopColor:"#b0b0b0"})]})}),t.jsx("circle",{cx:"75",cy:"72",r:"50",fill:"url(#bulbOffGradient)",stroke:"#ccc",strokeWidth:"1.5"}),t.jsx("path",{d:"M62,0 L88,0 L88,22 L62,22 Z",fill:"#d0d0d0",stroke:"#bbb",strokeWidth:"1"}),t.jsx("rect",{x:"65",y:"22",width:"20",height:"10",fill:"#d0d0d0",stroke:"#bbb",strokeWidth:"1"}),t.jsx("rect",{x:"67",y:"32",width:"16",height:"10",fill:"#c0c0c0",stroke:"#bbb",strokeWidth:"1"}),t.jsx("path",{d:"M67,40 Q75,48 83,40",stroke:"#888",strokeWidth:"2",fill:"none"}),t.jsx("path",{d:"M55,92 Q70,107 95,102",stroke:"#888",strokeWidth:"1.5",fill:"none"}),t.jsx("path",{d:"M90,52 Q100,57 95,67",stroke:"#d6d6d6",strokeWidth:"1.5",fill:"none"})]}),se=()=>t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 150 180",children:[t.jsx("defs",{children:t.jsxs("radialGradient",{id:"bulbOnGradient",cx:"0.5",cy:"0.5",r:"0.5",fx:"0.45",fy:"0.45",children:[t.jsx("stop",{offset:"0%",stopColor:"#fffef0"}),t.jsx("stop",{offset:"50%",stopColor:"#fff8d0"}),t.jsx("stop",{offset:"100%",stopColor:"#ffeeaa"})]})}),t.jsx("circle",{cx:"75",cy:"72",r:"50",fill:"url(#bulbOnGradient)",stroke:"#e5ca80",strokeWidth:"1"}),t.jsx("path",{d:"M62,0 L88,0 L88,22 L62,22 Z",fill:"#d0d0d0",stroke:"#bbb",strokeWidth:"1"}),t.jsx("rect",{x:"65",y:"22",width:"20",height:"10",fill:"#d0d0d0",stroke:"#bbb",strokeWidth:"1"}),t.jsx("rect",{x:"67",y:"32",width:"16",height:"10",fill:"#c0c0c0",stroke:"#bbb",strokeWidth:"1"}),t.jsx("path",{d:"M67,40 Q75,48 83,40",stroke:"#ffb84d",strokeWidth:"2",fill:"none"}),t.jsx("path",{d:"M55,92 Q70,107 95,102",stroke:"#ca9",strokeWidth:"1.5",fill:"none"}),t.jsx("path",{d:"M90,52 Q100,57 95,67",stroke:"#fff",strokeWidth:"2",fill:"none",opacity:"0.8"}),t.jsx("line",{x1:"75",y1:"30",x2:"75",y2:"45",stroke:"rgba(255, 255, 200, 0.8)",strokeWidth:"1.5"}),t.jsx("line",{x1:"100",y1:"47",x2:"85",y2:"47",stroke:"rgba(255, 255, 200, 0.8)",strokeWidth:"1.5"}),t.jsx("line",{x1:"50",y1:"47",x2:"65",y2:"47",stroke:"rgba(255, 255, 200, 0.8)",strokeWidth:"1.5"})]}),ie=()=>t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 30 60",children:[t.jsx("rect",{x:"7",y:"2",width:"20",height:"50",rx:"5",ry:"5",fill:"#888",opacity:"0.3"}),t.jsx("rect",{x:"5",y:"0",width:"20",height:"50",rx:"5",ry:"5",fill:"#bbb",stroke:"#999",strokeWidth:"1"}),t.jsx("rect",{x:"7",y:"5",width:"16",height:"40",rx:"3",ry:"3",fill:"#aaa",stroke:"#999",strokeWidth:"0.5"}),t.jsx("rect",{x:"10",y:"10",width:"10",height:"30",rx:"2",ry:"2",fill:"#999"}),t.jsx("line",{x1:"13",y1:"15",x2:"17",y2:"15",stroke:"#777",strokeWidth:"1.5"}),t.jsx("line",{x1:"13",y1:"20",x2:"17",y2:"20",stroke:"#777",strokeWidth:"1.5"}),t.jsx("line",{x1:"13",y1:"25",x2:"17",y2:"25",stroke:"#777",strokeWidth:"1.5"}),t.jsx("line",{x1:"13",y1:"30",x2:"17",y2:"30",stroke:"#777",strokeWidth:"1.5"}),t.jsx("line",{x1:"9",y1:"10",x2:"9",y2:"40",stroke:"#ccc",strokeWidth:"0.75",opacity:"0.6"})]});function ae({isOn:x,onToggle:b,wireColor:v="#888",maxPullDistance:c=90,initialWireLength:l=30,className:f="",ref:E}){const[R,H]=s.useState(!1),L=x!==void 0,T=L?x:R,k=s.useRef(!1),y=s.useRef(0),O=s.useRef(null),F=c*.6,j=s.useRef(!1),[{y:_},d]=h.useSpring(()=>({y:0,config:{...h.config.gentle,tension:170,friction:26},immediate:!1,onRest:()=>{const n=_.get();(n>c||n<0)&&d.start({y:0})}})),B=h.useSpring({config:{mass:1,tension:120,friction:14}}),Q=h.useSpring({opacity:T?1:0,config:{mass:1,tension:120,friction:14}}),J=h.useSpring({opacity:T?0:1,config:{mass:1,tension:120,friction:14}}),A=s.useRef(null),P=()=>{A.current!==null&&(window.clearTimeout(A.current),A.current=null)},G=s.useCallback(n=>{if("touches"in n){const p=n.target;O.current&&O.current.contains(p)&&(n.preventDefault(),k.current=!0,j.current=!0,y.current=n.touches[0].clientY)}else n.preventDefault(),k.current=!0,j.current=!0,y.current=n.clientY},[]),S=s.useCallback(n=>{if(!k.current)return;P();const p=Math.max(0,Math.min(c,n-y.current));d.start({y:p,immediate:!0})},[d,c]),M=s.useCallback(n=>{S(n.clientY)},[S]),Y=s.useCallback(n=>{k.current&&j.current&&(n.preventDefault(),S(n.touches[0].clientY))},[S]),u=s.useCallback(()=>{if(!k.current)return;k.current=!1,j.current=!1,P();let n;try{n=_.get(),(isNaN(n)||!isFinite(n))&&(n=0),n=Math.max(0,Math.min(c,n))}catch{n=0}if(d.stop(),n>F){const p=!T;L||H(p),b==null||b(p)}d.start({y:0,immediate:!1,config:{mass:1,tension:180,friction:20,velocity:0,clamp:!0,bounce:0}}),A.current=window.setTimeout(()=>{d.start({y:0,immediate:!1})},500)},[d,T,L,b,F,_,c]);s.useEffect(()=>()=>{P(),d.stop()},[d]),s.useEffect(()=>(window.addEventListener("mousemove",M),window.addEventListener("mouseup",u),window.addEventListener("touchmove",Y,{passive:!1}),window.addEventListener("touchend",u),window.addEventListener("mouseleave",u),window.addEventListener("blur",u),()=>{window.removeEventListener("mousemove",M),window.removeEventListener("mouseup",u),window.removeEventListener("touchmove",Y),window.removeEventListener("touchend",u),window.removeEventListener("mouseleave",u),window.removeEventListener("blur",u)}),[M,u,Y]);const D=140,X=l,I=40,U=c,V=D+X+I+U;return t.jsxs(h.animated.div,{ref:E,className:f,style:{...B,width:"150px",height:`${V}px`,position:"relative",overflow:"visible",display:"flex",justifyContent:"flex-start",alignItems:"flex-start"},children:[t.jsxs("div",{style:{position:"absolute",width:"120px",height:"140px",left:0,top:0},children:[t.jsx(h.animated.div,{style:{...J,position:"absolute",top:0,left:0,width:"100%"},children:t.jsx(oe,{})}),t.jsx(h.animated.div,{style:{...Q,position:"absolute",top:0,left:0,width:"100%"},children:t.jsx(se,{})})]}),t.jsxs("div",{style:{position:"absolute",display:"flex",flexDirection:"column",alignItems:"center",top:0,right:0},children:[t.jsx("div",{style:{height:l,width:2,background:v,margin:"0 auto"}}),t.jsx("div",{style:{position:"relative",height:0,margin:0,padding:0},children:t.jsx(h.animated.div,{style:{position:"absolute",top:0,left:"50%",marginLeft:-1,height:_,width:2,background:v,transformOrigin:"top"}})}),t.jsxs(h.animated.div,{ref:O,style:{y:_,width:"30px",height:"40px",display:"flex",justifyContent:"center",alignItems:"flex-start",cursor:"grab",zIndex:10,touchAction:"none",marginTop:0},onMouseDown:G,onTouchStart:G,children:[t.jsx("div",{style:{position:"absolute",top:0,left:"50%",marginLeft:-1,width:2,height:2,background:v}}),t.jsx("div",{style:{width:"100%",pointerEvents:"none"},children:t.jsx(ie,{})})]})]})]})}g.NightLight=ae,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=index.umd.js.map