@previewcn/devtools 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +7 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
html, body, .font-sans {
|
|
9
9
|
font-family: ${r} !important;
|
|
10
10
|
}
|
|
11
|
-
`;}function L(e){e.colorPreset!==null&&b(e.colorPreset),e.radius!==null&&w(e.radius),e.darkMode!==null&&y(e.darkMode),e.font!==null&&C(e.font);}function z(){let e=document.getElementById(M);e&&e.remove();let o=document.getElementById(R);o&&o.remove();let r=document.documentElement;r.style.removeProperty("--radius"),r.style.removeProperty("color-scheme"),r.classList.remove("light","dark");}var M,R,P=d(()=>{T();E();M="previewcn-devtools-theme-colors",R="previewcn-devtools-theme-font";});function fe(){if(typeof window>"u")return {};try{let e=localStorage.getItem(I);if(e)return JSON.parse(e)}catch{}return {}}function F(e){if(!(typeof window>"u"))try{localStorage.setItem(I,JSON.stringify(e));}catch{}}function G(){let[e,o]=react.useState(()=>({...A,...fe()})),r=react.useCallback(i=>{o(u=>{let c={...u,colorPreset:i};return F(c),c}),b(i);},[]),l=react.useCallback(i=>{o(u=>{let c={...u,radius:i};return F(c),c}),w(i);},[]),s=react.useCallback(i=>{o(u=>{let c={...u,darkMode:i};return F(c),c}),y(i);},[]),p=react.useCallback(i=>{o(u=>{let c={...u,font:i};return F(c),c}),C(i);},[]),n=react.useCallback(()=>{typeof window<"u"&&localStorage.removeItem(I),z(),o(A);},[]);return {config:e,setColorPreset:r,setRadius:l,setDarkMode:s,setFont:p,resetTheme:n}}var I,A,j=d(()=>{"use client";P();I="previewcn-devtools-theme";A={colorPreset:null,radius:null,darkMode:null,font:null};});function K({value:e,onChange:o}){return jsxRuntime.jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsxRuntime.jsx("label",{className:"previewcn-label",children:"Color"}),jsxRuntime.jsx("div",{className:"previewcn-color-grid",children:N.map(r=>{let l=e===r.name,s=r.colors.light.primary;return jsxRuntime.jsx("button",{onClick:()=>o(r.name),className:`previewcn-color-swatch ${l?"previewcn-color-swatch--selected":""}`,style:{backgroundColor:s},"aria-label":r.label,title:r.label},r.name)})})]})}var X=d(()=>{"use client";T();});function we(){return jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:"m6 9 6 6 6-6"})})}function Z({value:e,onChange:o}){let[r,l]=react.useState(false),p=v.find(n=>n.value===e)?.label??"Select font...";return jsxRuntime.jsxs("div",{className
|
|
11
|
+
`;}function L(e){e.colorPreset!==null&&b(e.colorPreset),e.radius!==null&&w(e.radius),e.darkMode!==null&&y(e.darkMode),e.font!==null&&C(e.font);}function z(){let e=document.getElementById(M);e&&e.remove();let o=document.getElementById(R);o&&o.remove();let r=document.documentElement;r.style.removeProperty("--radius"),r.style.removeProperty("color-scheme"),r.classList.remove("light","dark");}var M,R,P=d(()=>{T();E();M="previewcn-devtools-theme-colors",R="previewcn-devtools-theme-font";});function fe(){if(typeof window>"u")return {};try{let e=localStorage.getItem(I);if(e)return JSON.parse(e)}catch{}return {}}function F(e){if(!(typeof window>"u"))try{localStorage.setItem(I,JSON.stringify(e));}catch{}}function G(){let[e,o]=react.useState(()=>({...A,...fe()})),r=react.useCallback(i=>{o(u=>{let c={...u,colorPreset:i};return F(c),c}),b(i);},[]),l=react.useCallback(i=>{o(u=>{let c={...u,radius:i};return F(c),c}),w(i);},[]),s=react.useCallback(i=>{o(u=>{let c={...u,darkMode:i};return F(c),c}),y(i);},[]),p=react.useCallback(i=>{o(u=>{let c={...u,font:i};return F(c),c}),C(i);},[]),n=react.useCallback(()=>{typeof window<"u"&&localStorage.removeItem(I),z(),o(A);},[]);return {config:e,setColorPreset:r,setRadius:l,setDarkMode:s,setFont:p,resetTheme:n}}var I,A,j=d(()=>{"use client";P();I="previewcn-devtools-theme";A={colorPreset:null,radius:null,darkMode:null,font:null};});function K({value:e,onChange:o}){return jsxRuntime.jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsxRuntime.jsx("label",{className:"previewcn-label",children:"Color"}),jsxRuntime.jsx("div",{className:"previewcn-color-grid",children:N.map(r=>{let l=e===r.name,s=r.colors.light.primary;return jsxRuntime.jsx("button",{onClick:()=>o(r.name),className:`previewcn-color-swatch ${l?"previewcn-color-swatch--selected":""}`,style:{backgroundColor:s},"aria-label":r.label,title:r.label},r.name)})})]})}var X=d(()=>{"use client";T();});function we(){return jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:"m6 9 6 6 6-6"})})}function Z({value:e,onChange:o}){let[r,l]=react.useState(false),p=v.find(n=>n.value===e)?.label??"Select font...";return jsxRuntime.jsxs("div",{className:`previewcn-section previewcn-surface ${r?"previewcn-section--overlay":""}`,children:[jsxRuntime.jsx("label",{className:"previewcn-label",children:"Font"}),jsxRuntime.jsxs("div",{className:"previewcn-select-wrapper",children:[jsxRuntime.jsxs("button",{onClick:()=>l(!r),className:"previewcn-select-trigger previewcn-control","aria-expanded":r,children:[jsxRuntime.jsx("span",{children:p}),jsxRuntime.jsx(we,{})]}),r&&jsxRuntime.jsx("div",{className:"previewcn-select-dropdown",children:v.map(n=>jsxRuntime.jsx("button",{onClick:()=>{o(n.value),l(false);},className:`previewcn-select-option previewcn-option ${e===n.value?"previewcn-option--selected":""}`,children:n.label},n.value))})]})]})}var q=d(()=>{"use client";E();});function be(){return jsxRuntime.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"4"}),jsxRuntime.jsx("path",{d:"M12 2v2"}),jsxRuntime.jsx("path",{d:"M12 20v2"}),jsxRuntime.jsx("path",{d:"m4.93 4.93 1.41 1.41"}),jsxRuntime.jsx("path",{d:"m17.66 17.66 1.41 1.41"}),jsxRuntime.jsx("path",{d:"M2 12h2"}),jsxRuntime.jsx("path",{d:"M20 12h2"}),jsxRuntime.jsx("path",{d:"m6.34 17.66-1.41 1.41"}),jsxRuntime.jsx("path",{d:"m19.07 4.93-1.41 1.41"})]})}function Ce(){return jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"})})}function Q({value:e,onChange:o}){let r=e??false;return jsxRuntime.jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsxRuntime.jsx("label",{className:"previewcn-label",children:"Mode"}),jsxRuntime.jsxs("div",{className:"previewcn-mode-toggle",children:[jsxRuntime.jsxs("button",{onClick:()=>o(false),className:`previewcn-mode-btn previewcn-control ${r?"":"previewcn-control--selected"}`,"aria-label":"Light mode",children:[jsxRuntime.jsx(be,{}),jsxRuntime.jsx("span",{children:"Light"})]}),jsxRuntime.jsxs("button",{onClick:()=>o(true),className:`previewcn-mode-btn previewcn-control ${r?"previewcn-control--selected":""}`,"aria-label":"Dark mode",children:[jsxRuntime.jsx(Ce,{}),jsxRuntime.jsx("span",{children:"Dark"})]})]})]})}var ee=d(()=>{"use client";});var oe,re=d(()=>{oe=[{name:"none",label:"None",value:"0rem"},{name:"sm",label:"SM",value:"0.3rem"},{name:"md",label:"MD",value:"0.5rem"},{name:"lg",label:"LG",value:"0.625rem"},{name:"xl",label:"XL",value:"0.75rem"},{name:"full",label:"Full",value:"1rem"}];});function le({value:e,onChange:o}){return jsxRuntime.jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsxRuntime.jsx("label",{className:"previewcn-label",children:"Radius"}),jsxRuntime.jsx("div",{className:"previewcn-radius-grid",children:oe.map(r=>{let l=e===r.value;return jsxRuntime.jsxs("button",{onClick:()=>o(r.value),className:`previewcn-radius-btn previewcn-control ${l?"previewcn-control--selected":""}`,title:r.label,children:[jsxRuntime.jsx("span",{className:"previewcn-radius-preview",style:{borderRadius:r.value}}),jsxRuntime.jsx("span",{className:"previewcn-radius-label",children:r.label})]},r.name)})})]})}var ne=d(()=>{"use client";re();});var ie={};de(ie,{default:()=>ae});function Se(){return jsxRuntime.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M18 6 6 18"}),jsxRuntime.jsx("path",{d:"m6 6 12 12"})]})}function xe(){return jsxRuntime.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsxRuntime.jsx("path",{d:"M3 3v5h5"})]})}function ae({onClose:e}){let{config:o,setColorPreset:r,setRadius:l,setDarkMode:s,setFont:p,resetTheme:n}=G(),i=react.useRef(false);return react.useEffect(()=>{i.current||(i.current=true,L(o));},[o]),jsxRuntime.jsxs("div",{className:"previewcn-panel",children:[jsxRuntime.jsxs("div",{className:"previewcn-header",children:[jsxRuntime.jsxs("div",{className:"previewcn-title",children:[jsxRuntime.jsx("span",{className:"previewcn-logo",children:"PreviewCN"}),jsxRuntime.jsx("span",{className:"previewcn-badge",children:"DEV"})]}),jsxRuntime.jsx("button",{onClick:e,className:"previewcn-control previewcn-control--ghost previewcn-icon-btn previewcn-close-btn","aria-label":"Close",children:jsxRuntime.jsx(Se,{})})]}),jsxRuntime.jsxs("div",{className:"previewcn-content",children:[jsxRuntime.jsx(K,{value:o.colorPreset,onChange:r}),jsxRuntime.jsx(le,{value:o.radius,onChange:l}),jsxRuntime.jsx(Z,{value:o.font,onChange:p}),jsxRuntime.jsx(Q,{value:o.darkMode,onChange:s})]}),jsxRuntime.jsx("div",{className:"previewcn-footer",children:jsxRuntime.jsxs("button",{onClick:n,className:"previewcn-control previewcn-control--ghost previewcn-reset-btn",children:[jsxRuntime.jsx(xe,{}),jsxRuntime.jsx("span",{children:"Reset"})]})})]})}var se=d(()=>{"use client";j();P();X();q();ee();ne();});function pe(){return jsxRuntime.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor"}),jsxRuntime.jsx("circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor"}),jsxRuntime.jsx("circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor"}),jsxRuntime.jsx("circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor"}),jsxRuntime.jsx("path",{d:"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.555C21.965 6.012 17.461 2 12 2z"})]})}function B({onClick:e}){return jsxRuntime.jsx("button",{onClick:e,className:"previewcn-trigger","aria-label":"Open PreviewCN theme editor",title:"PreviewCN Theme Editor",children:jsxRuntime.jsx(pe,{})})}var Me=react.lazy(()=>Promise.resolve().then(()=>(se(),ie))),Re=process.env.NODE_ENV==="development";function Le(){let[e,o]=react.useState(false);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!e&&jsxRuntime.jsx(B,{onClick:()=>o(true)}),e&&jsxRuntime.jsx(react.Suspense,{fallback:null,children:jsxRuntime.jsx(Me,{onClose:()=>o(false)})})]})}function Ie(){return Re?jsxRuntime.jsx(Le,{}):null}P();
|
|
12
12
|
exports.PreviewcnDevtools=Ie;exports.applyColors=b;exports.applyDarkMode=y;exports.applyFont=C;exports.applyRadius=w;exports.applyTheme=L;
|
package/dist/index.js
CHANGED
|
@@ -8,5 +8,5 @@ import {lazy,useRef,useEffect,useState,useCallback,Suspense}from'react';import {
|
|
|
8
8
|
html, body, .font-sans {
|
|
9
9
|
font-family: ${r} !important;
|
|
10
10
|
}
|
|
11
|
-
`;}function L(e){e.colorPreset!==null&&b(e.colorPreset),e.radius!==null&&w(e.radius),e.darkMode!==null&&y(e.darkMode),e.font!==null&&C(e.font);}function z(){let e=document.getElementById(M);e&&e.remove();let o=document.getElementById(R);o&&o.remove();let r=document.documentElement;r.style.removeProperty("--radius"),r.style.removeProperty("color-scheme"),r.classList.remove("light","dark");}var M,R,P=d(()=>{T();E();M="previewcn-devtools-theme-colors",R="previewcn-devtools-theme-font";});function fe(){if(typeof window>"u")return {};try{let e=localStorage.getItem(I);if(e)return JSON.parse(e)}catch{}return {}}function F(e){if(!(typeof window>"u"))try{localStorage.setItem(I,JSON.stringify(e));}catch{}}function G(){let[e,o]=useState(()=>({...A,...fe()})),r=useCallback(i=>{o(u=>{let c={...u,colorPreset:i};return F(c),c}),b(i);},[]),l=useCallback(i=>{o(u=>{let c={...u,radius:i};return F(c),c}),w(i);},[]),s=useCallback(i=>{o(u=>{let c={...u,darkMode:i};return F(c),c}),y(i);},[]),p=useCallback(i=>{o(u=>{let c={...u,font:i};return F(c),c}),C(i);},[]),n=useCallback(()=>{typeof window<"u"&&localStorage.removeItem(I),z(),o(A);},[]);return {config:e,setColorPreset:r,setRadius:l,setDarkMode:s,setFont:p,resetTheme:n}}var I,A,j=d(()=>{"use client";P();I="previewcn-devtools-theme";A={colorPreset:null,radius:null,darkMode:null,font:null};});function K({value:e,onChange:o}){return jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsx("label",{className:"previewcn-label",children:"Color"}),jsx("div",{className:"previewcn-color-grid",children:N.map(r=>{let l=e===r.name,s=r.colors.light.primary;return jsx("button",{onClick:()=>o(r.name),className:`previewcn-color-swatch ${l?"previewcn-color-swatch--selected":""}`,style:{backgroundColor:s},"aria-label":r.label,title:r.label},r.name)})})]})}var X=d(()=>{"use client";T();});function we(){return jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"m6 9 6 6 6-6"})})}function Z({value:e,onChange:o}){let[r,l]=useState(false),p=v.find(n=>n.value===e)?.label??"Select font...";return jsxs("div",{className
|
|
11
|
+
`;}function L(e){e.colorPreset!==null&&b(e.colorPreset),e.radius!==null&&w(e.radius),e.darkMode!==null&&y(e.darkMode),e.font!==null&&C(e.font);}function z(){let e=document.getElementById(M);e&&e.remove();let o=document.getElementById(R);o&&o.remove();let r=document.documentElement;r.style.removeProperty("--radius"),r.style.removeProperty("color-scheme"),r.classList.remove("light","dark");}var M,R,P=d(()=>{T();E();M="previewcn-devtools-theme-colors",R="previewcn-devtools-theme-font";});function fe(){if(typeof window>"u")return {};try{let e=localStorage.getItem(I);if(e)return JSON.parse(e)}catch{}return {}}function F(e){if(!(typeof window>"u"))try{localStorage.setItem(I,JSON.stringify(e));}catch{}}function G(){let[e,o]=useState(()=>({...A,...fe()})),r=useCallback(i=>{o(u=>{let c={...u,colorPreset:i};return F(c),c}),b(i);},[]),l=useCallback(i=>{o(u=>{let c={...u,radius:i};return F(c),c}),w(i);},[]),s=useCallback(i=>{o(u=>{let c={...u,darkMode:i};return F(c),c}),y(i);},[]),p=useCallback(i=>{o(u=>{let c={...u,font:i};return F(c),c}),C(i);},[]),n=useCallback(()=>{typeof window<"u"&&localStorage.removeItem(I),z(),o(A);},[]);return {config:e,setColorPreset:r,setRadius:l,setDarkMode:s,setFont:p,resetTheme:n}}var I,A,j=d(()=>{"use client";P();I="previewcn-devtools-theme";A={colorPreset:null,radius:null,darkMode:null,font:null};});function K({value:e,onChange:o}){return jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsx("label",{className:"previewcn-label",children:"Color"}),jsx("div",{className:"previewcn-color-grid",children:N.map(r=>{let l=e===r.name,s=r.colors.light.primary;return jsx("button",{onClick:()=>o(r.name),className:`previewcn-color-swatch ${l?"previewcn-color-swatch--selected":""}`,style:{backgroundColor:s},"aria-label":r.label,title:r.label},r.name)})})]})}var X=d(()=>{"use client";T();});function we(){return jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"m6 9 6 6 6-6"})})}function Z({value:e,onChange:o}){let[r,l]=useState(false),p=v.find(n=>n.value===e)?.label??"Select font...";return jsxs("div",{className:`previewcn-section previewcn-surface ${r?"previewcn-section--overlay":""}`,children:[jsx("label",{className:"previewcn-label",children:"Font"}),jsxs("div",{className:"previewcn-select-wrapper",children:[jsxs("button",{onClick:()=>l(!r),className:"previewcn-select-trigger previewcn-control","aria-expanded":r,children:[jsx("span",{children:p}),jsx(we,{})]}),r&&jsx("div",{className:"previewcn-select-dropdown",children:v.map(n=>jsx("button",{onClick:()=>{o(n.value),l(false);},className:`previewcn-select-option previewcn-option ${e===n.value?"previewcn-option--selected":""}`,children:n.label},n.value))})]})]})}var q=d(()=>{"use client";E();});function be(){return jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"12",cy:"12",r:"4"}),jsx("path",{d:"M12 2v2"}),jsx("path",{d:"M12 20v2"}),jsx("path",{d:"m4.93 4.93 1.41 1.41"}),jsx("path",{d:"m17.66 17.66 1.41 1.41"}),jsx("path",{d:"M2 12h2"}),jsx("path",{d:"M20 12h2"}),jsx("path",{d:"m6.34 17.66-1.41 1.41"}),jsx("path",{d:"m19.07 4.93-1.41 1.41"})]})}function Ce(){return jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"})})}function Q({value:e,onChange:o}){let r=e??false;return jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsx("label",{className:"previewcn-label",children:"Mode"}),jsxs("div",{className:"previewcn-mode-toggle",children:[jsxs("button",{onClick:()=>o(false),className:`previewcn-mode-btn previewcn-control ${r?"":"previewcn-control--selected"}`,"aria-label":"Light mode",children:[jsx(be,{}),jsx("span",{children:"Light"})]}),jsxs("button",{onClick:()=>o(true),className:`previewcn-mode-btn previewcn-control ${r?"previewcn-control--selected":""}`,"aria-label":"Dark mode",children:[jsx(Ce,{}),jsx("span",{children:"Dark"})]})]})]})}var ee=d(()=>{"use client";});var oe,re=d(()=>{oe=[{name:"none",label:"None",value:"0rem"},{name:"sm",label:"SM",value:"0.3rem"},{name:"md",label:"MD",value:"0.5rem"},{name:"lg",label:"LG",value:"0.625rem"},{name:"xl",label:"XL",value:"0.75rem"},{name:"full",label:"Full",value:"1rem"}];});function le({value:e,onChange:o}){return jsxs("div",{className:"previewcn-section previewcn-surface",children:[jsx("label",{className:"previewcn-label",children:"Radius"}),jsx("div",{className:"previewcn-radius-grid",children:oe.map(r=>{let l=e===r.value;return jsxs("button",{onClick:()=>o(r.value),className:`previewcn-radius-btn previewcn-control ${l?"previewcn-control--selected":""}`,title:r.label,children:[jsx("span",{className:"previewcn-radius-preview",style:{borderRadius:r.value}}),jsx("span",{className:"previewcn-radius-label",children:r.label})]},r.name)})})]})}var ne=d(()=>{"use client";re();});var ie={};de(ie,{default:()=>ae});function Se(){return jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M18 6 6 18"}),jsx("path",{d:"m6 6 12 12"})]})}function xe(){return jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsx("path",{d:"M3 3v5h5"})]})}function ae({onClose:e}){let{config:o,setColorPreset:r,setRadius:l,setDarkMode:s,setFont:p,resetTheme:n}=G(),i=useRef(false);return useEffect(()=>{i.current||(i.current=true,L(o));},[o]),jsxs("div",{className:"previewcn-panel",children:[jsxs("div",{className:"previewcn-header",children:[jsxs("div",{className:"previewcn-title",children:[jsx("span",{className:"previewcn-logo",children:"PreviewCN"}),jsx("span",{className:"previewcn-badge",children:"DEV"})]}),jsx("button",{onClick:e,className:"previewcn-control previewcn-control--ghost previewcn-icon-btn previewcn-close-btn","aria-label":"Close",children:jsx(Se,{})})]}),jsxs("div",{className:"previewcn-content",children:[jsx(K,{value:o.colorPreset,onChange:r}),jsx(le,{value:o.radius,onChange:l}),jsx(Z,{value:o.font,onChange:p}),jsx(Q,{value:o.darkMode,onChange:s})]}),jsx("div",{className:"previewcn-footer",children:jsxs("button",{onClick:n,className:"previewcn-control previewcn-control--ghost previewcn-reset-btn",children:[jsx(xe,{}),jsx("span",{children:"Reset"})]})})]})}var se=d(()=>{"use client";j();P();X();q();ee();ne();});function pe(){return jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor"}),jsx("circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor"}),jsx("circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor"}),jsx("circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor"}),jsx("path",{d:"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.555C21.965 6.012 17.461 2 12 2z"})]})}function B({onClick:e}){return jsx("button",{onClick:e,className:"previewcn-trigger","aria-label":"Open PreviewCN theme editor",title:"PreviewCN Theme Editor",children:jsx(pe,{})})}var Me=lazy(()=>Promise.resolve().then(()=>(se(),ie))),Re=process.env.NODE_ENV==="development";function Le(){let[e,o]=useState(false);return jsxs(Fragment,{children:[!e&&jsx(B,{onClick:()=>o(true)}),e&&jsx(Suspense,{fallback:null,children:jsx(Me,{onClose:()=>o(false)})})]})}function Ie(){return Re?jsx(Le,{}):null}P();
|
|
12
12
|
export{Ie as PreviewcnDevtools,b as applyColors,y as applyDarkMode,C as applyFont,w as applyRadius,L as applyTheme};
|
package/dist/styles.css
CHANGED
|
@@ -420,9 +420,14 @@
|
|
|
420
420
|
background-clip: content-box;
|
|
421
421
|
}
|
|
422
422
|
.previewcn-section {
|
|
423
|
+
position: relative;
|
|
423
424
|
display: grid;
|
|
424
425
|
gap: 10px;
|
|
425
426
|
animation: previewcn-rise 0.32s ease both;
|
|
427
|
+
z-index: 0;
|
|
428
|
+
}
|
|
429
|
+
.previewcn-section--overlay {
|
|
430
|
+
z-index: 30;
|
|
426
431
|
}
|
|
427
432
|
.previewcn-section:nth-child(1) {
|
|
428
433
|
animation-delay: 0.02s;
|
|
@@ -510,6 +515,7 @@
|
|
|
510
515
|
}
|
|
511
516
|
.previewcn-select-wrapper {
|
|
512
517
|
position: relative;
|
|
518
|
+
z-index: 1;
|
|
513
519
|
}
|
|
514
520
|
.previewcn-select-trigger {
|
|
515
521
|
width: 100%;
|
|
@@ -519,7 +525,7 @@
|
|
|
519
525
|
position: absolute;
|
|
520
526
|
top: calc(100% + 6px);
|
|
521
527
|
left: 0;
|
|
522
|
-
z-index:
|
|
528
|
+
z-index: 20;
|
|
523
529
|
width: 100%;
|
|
524
530
|
padding: 6px;
|
|
525
531
|
border-radius: var(--pcn-radius);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@previewcn/devtools",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Embedded devtools for PreviewCN - real-time shadcn/ui theme preview inside your app",
|
|
5
5
|
"keywords": ["shadcn", "shadcn-ui", "theme", "preview", "devtools", "react", "tailwind"],
|
|
6
6
|
"license": "MIT",
|