@m1kapp/ui 0.1.5 → 0.1.7
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.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/index.mjs +3 -3
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -184,7 +184,7 @@ interface ThemeDialogProps {
|
|
|
184
184
|
* Bottom-sheet style color picker dialog.
|
|
185
185
|
* Shows a 5-column grid of color circles with check on the active one.
|
|
186
186
|
*/
|
|
187
|
-
declare function ThemeDialog({ open, onClose, current, onSelect, dark, onDarkToggle, palette, }: ThemeDialogProps):
|
|
187
|
+
declare function ThemeDialog({ open, onClose, current, onSelect, dark, onDarkToggle, palette, }: ThemeDialogProps): react.ReactPortal | null;
|
|
188
188
|
|
|
189
189
|
/**
|
|
190
190
|
* Font presets for @m1kapp/ui.
|
package/dist/index.d.ts
CHANGED
|
@@ -184,7 +184,7 @@ interface ThemeDialogProps {
|
|
|
184
184
|
* Bottom-sheet style color picker dialog.
|
|
185
185
|
* Shows a 5-column grid of color circles with check on the active one.
|
|
186
186
|
*/
|
|
187
|
-
declare function ThemeDialog({ open, onClose, current, onSelect, dark, onDarkToggle, palette, }: ThemeDialogProps):
|
|
187
|
+
declare function ThemeDialog({ open, onClose, current, onSelect, dark, onDarkToggle, palette, }: ThemeDialogProps): react.ReactPortal | null;
|
|
188
188
|
|
|
189
189
|
/**
|
|
190
190
|
* Font presets for @m1kapp/ui.
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var A=Object.defineProperty;var
|
|
2
|
+
"use strict";var A=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var xe=Object.prototype.hasOwnProperty;var be=(e,t)=>{for(var o in t)A(e,o,{get:t[o],enumerable:!0})},he=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of ue(t))!xe.call(e,a)&&a!==o&&A(e,a,{get:()=>t[a],enumerable:!(i=fe(t,a))||i.enumerable});return e};var ge=e=>he(A({},"__esModule",{value:!0}),e);var ve={};be(ve,{AppShell:()=>D,AppShellContent:()=>I,AppShellHeader:()=>H,Divider:()=>K,EmojiButton:()=>ae,EmojiPicker:()=>se,EmptyState:()=>Z,Section:()=>O,SectionHeader:()=>_,StatChip:()=>V,Tab:()=>Y,TabBar:()=>F,ThemeButton:()=>U,ThemeDialog:()=>ee,Tooltip:()=>pe,Typewriter:()=>re,Watermark:()=>J,colors:()=>E,fontFamily:()=>oe,fonts:()=>te});module.exports=ge(ve);var C=require("react/jsx-runtime");function D({children:e,className:t="",maxWidth:o=430,style:i}){return(0,C.jsx)("div",{className:`w-full h-full flex flex-col bg-white dark:bg-zinc-950 shadow-2xl ring-1 ring-black/10 dark:ring-zinc-700 rounded-2xl overflow-hidden ${t}`,style:{maxWidth:o,...i},children:e})}function H({children:e,className:t=""}){return(0,C.jsx)("header",{className:`sticky top-0 z-20 h-14 px-4 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-t-2xl ${t}`,children:e})}function I({children:e,className:t=""}){return(0,C.jsx)("div",{className:`flex-1 overflow-y-auto scrollbar-hide ${t}`,children:e})}var P=require("react/jsx-runtime");function F({children:e,className:t=""}){return(0,P.jsx)("nav",{className:`sticky bottom-0 z-20 h-16 border-t border-zinc-200 dark:border-zinc-800 flex bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-b-2xl ${t}`,children:e})}function Y({active:e,onClick:t,icon:o,label:i,activeColor:a}){return(0,P.jsxs)("button",{onClick:t,className:`flex-1 flex flex-col items-center gap-0.5 py-2.5 transition-colors ${e?"":"text-zinc-300 dark:text-zinc-600"}`,style:e?{color:a}:void 0,children:[o,(0,P.jsx)("span",{className:"text-[10px] font-medium",children:i})]})}var W=require("react/jsx-runtime");function O({children:e,className:t=""}){return(0,W.jsx)("section",{className:`px-4 ${t}`,children:e})}function _({children:e}){return(0,W.jsx)("h2",{className:"text-[11px] font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mb-3",children:e})}var X=require("react/jsx-runtime");function K({className:e=""}){return(0,X.jsx)("div",{className:`mx-4 my-6 h-px bg-zinc-200 dark:bg-zinc-800 ${e}`})}var S=require("react/jsx-runtime");function V({label:e,value:t,className:o=""}){return(0,S.jsxs)("div",{className:`flex-1 rounded-xl bg-zinc-100 dark:bg-zinc-900 px-3 py-3 text-center ${o}`,children:[(0,S.jsx)("p",{className:"text-[10px] text-zinc-500 dark:text-zinc-400 font-medium mb-0.5",children:e}),(0,S.jsx)("p",{className:"text-lg font-bold tabular-nums text-zinc-900 dark:text-white",children:t.toLocaleString()})]})}var b=require("react/jsx-runtime");function Z({message:e,icon:t}){return(0,b.jsxs)("div",{className:"flex flex-col items-center justify-center py-12 gap-2",children:[t||(0,b.jsxs)("svg",{width:"32",height:"32",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",className:"text-zinc-200 dark:text-zinc-700",children:[(0,b.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,b.jsx)("path",{d:"M8 15h8"}),(0,b.jsx)("circle",{cx:"9",cy:"9",r:"1",fill:"currentColor",stroke:"none"}),(0,b.jsx)("circle",{cx:"15",cy:"9",r:"1",fill:"currentColor",stroke:"none"})]}),(0,b.jsx)("p",{className:"text-sm text-zinc-400 dark:text-zinc-500",children:e})]})}var w=require("react/jsx-runtime"),ke=`
|
|
3
3
|
@keyframes watermark-drift {
|
|
4
4
|
0% { transform: rotate(-12deg) scale(2) translate(0, 0); }
|
|
5
5
|
100% { transform: rotate(-12deg) scale(2) translate(180px, 100px); }
|
|
6
6
|
}
|
|
7
|
-
`,G=!1;function
|
|
7
|
+
`,G=!1;function ye(){if(G||typeof document>"u")return;let e=document.createElement("style");e.textContent=ke,document.head.appendChild(e),G=!0}function J({children:e,color:t="#0f172a",text:o="m1k",maxWidth:i=430,padding:a=12,sponsor:l,speed:f=20}){ye();let s=Math.max(14,Math.min(28,Math.floor(160/o.length))),r=l?Math.max(14,Math.min(28,Math.floor(160/l.name.length))):s,c=180,p=100,z=16,x=16,T=z*c/2,M=x*p/2;return(0,w.jsxs)("div",{className:"h-dvh w-full relative overflow-hidden",style:{backgroundColor:t,transition:"background-color 0.5s ease"},children:[(0,w.jsx)("div",{className:"absolute inset-0 select-none",style:{transformOrigin:"center center",animation:f>0?`watermark-drift ${f}s linear infinite`:void 0,transform:"rotate(-12deg) scale(2)",pointerEvents:"none"},children:Array.from({length:x}).flatMap((R,u)=>Array.from({length:z}).map((L,y)=>{let N=y*c-T+c/2,B=u*p-M+p/2,$=(u+y)%2===1&&l,m={position:"absolute",left:N,top:B,transform:"translate(-50%, -50%)",fontWeight:900,color:"rgba(255,255,255,0.12)",whiteSpace:"nowrap",lineHeight:1,pointerEvents:"auto",cursor:"pointer"};return $?(0,w.jsx)("a",{href:l.url,target:"_blank",rel:"noopener noreferrer",className:"hover:opacity-30 transition-opacity",style:{...m,fontSize:r,textDecoration:"none"},children:l.name},`${u}-${y}`):(0,w.jsx)("a",{href:"https://m1k.app",target:"_blank",rel:"noopener noreferrer",className:"hover:opacity-30 transition-opacity",style:{...m,fontSize:s,textDecoration:"none"},children:o},`${u}-${y}`)}))}),(0,w.jsx)("div",{className:"relative z-10 h-full flex items-center justify-center mx-auto",style:{maxWidth:i,padding:a},children:e})]})}var E={blue:"#3b82f6",purple:"#8b5cf6",green:"#10b981",orange:"#f97316",pink:"#ec4899",red:"#ef4444",yellow:"#eab308",cyan:"#06b6d4",slate:"#0f172a",zinc:"#27272a"};var q=require("react"),Q=require("react-dom");var n=require("react/jsx-runtime");function U({color:e,dark:t=!1,onClick:o,className:i=""}){let a=t?"#000":"#fff",l=t?"rgba(255,255,255,0.15)":"rgba(0,0,0,0.12)";return(0,n.jsx)("button",{onClick:o,className:`w-7 h-7 rounded-full transition-all active:scale-90 hover:scale-110 overflow-hidden cursor-pointer ${i}`,style:{boxShadow:`0 2px 10px ${e}55`},title:"Theme",children:(0,n.jsxs)("svg",{width:"100%",height:"100%",viewBox:"0 0 100 100",children:[(0,n.jsx)("path",{d:"M0 0 L100 0 L0 100 Z",fill:a}),(0,n.jsx)("path",{d:"M100 0 L100 100 L0 100 Z",fill:e}),(0,n.jsx)("circle",{cx:"50",cy:"50",r:"49",fill:"none",stroke:l,strokeWidth:"2"})]})})}function ee({open:e,onClose:t,current:o,onSelect:i,dark:a=!1,onDarkToggle:l,palette:f=E}){if((0,q.useEffect)(()=>{if(!e)return;let r=c=>{c.key==="Escape"&&t()};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[e,t]),!e||typeof document>"u")return null;let s=Object.entries(f);return(0,Q.createPortal)((0,n.jsxs)("div",{className:"fixed inset-0 z-[9999] flex items-end justify-center",onClick:t,children:[(0,n.jsx)("div",{className:"absolute inset-0 bg-black/40 backdrop-blur-sm"}),(0,n.jsxs)("div",{className:"relative z-10 w-full max-w-[430px] mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden",onClick:r=>r.stopPropagation(),children:[(0,n.jsxs)("div",{className:"px-4 pt-4 pb-3",children:[(0,n.jsx)("p",{className:"text-sm font-bold text-zinc-900 dark:text-white mb-3",children:"\uD14C\uB9C8"}),l&&(0,n.jsx)("div",{className:"flex gap-2 mb-4",children:[{label:"\uB77C\uC774\uD2B8",isDark:!1},{label:"\uB2E4\uD06C",isDark:!0}].map(r=>{let c=a===r.isDark;return(0,n.jsxs)("button",{onClick:()=>{c||l()},className:`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-2xl transition-all ${c?"bg-zinc-900 dark:bg-white ring-2 ring-zinc-900 dark:ring-white ring-offset-2 ring-offset-white dark:ring-offset-zinc-900":"bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700"}`,children:[r.isDark?(0,n.jsx)("svg",{width:"15",height:"15",viewBox:"-1 -1 26 26",fill:c?"#18181b":"#71717a",children:(0,n.jsx)("path",{d:"M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"})}):(0,n.jsxs)("svg",{width:"15",height:"15",viewBox:"-1 -1 26 26",fill:c?"white":"#71717a",children:[(0,n.jsx)("circle",{cx:"12",cy:"12",r:"5"}),(0,n.jsx)("path",{d:"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42",stroke:c?"white":"#71717a",strokeWidth:"2",strokeLinecap:"round"})]}),(0,n.jsx)("span",{className:`text-sm font-semibold ${c?"text-white dark:text-zinc-900":"text-zinc-400 dark:text-zinc-500"}`,children:r.label})]},r.label)})})]}),(0,n.jsx)("div",{className:"px-4 pb-3 grid grid-cols-5 gap-3 justify-items-center",children:s.map(([,r])=>(0,n.jsx)("button",{onClick:()=>{i(r),t()},className:"relative w-11 h-11 rounded-full transition-all hover:scale-110",style:{backgroundColor:r,boxShadow:o===r?`0 0 0 2px #fff, 0 0 0 4px ${r}`:"0 0 0 1.5px rgba(255,255,255,0.5), 0 2px 8px rgba(255,255,255,0.2)"},children:o===r&&(0,n.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,n.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"white",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,n.jsx)("polyline",{points:"20 6 9 17 4 12"})})})},r))}),(0,n.jsx)("div",{className:"px-4 py-3 border-t border-zinc-100 dark:border-zinc-800",children:(0,n.jsx)("button",{onClick:t,className:"w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors",children:"Close"})})]})]}),document.body)}var te={tossface:"https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css",pretendard:"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css",inter:"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"},oe={default:'"Pretendard Variable", "Pretendard", system-ui, -apple-system, sans-serif, "Tossface"',pretendard:'"Pretendard Variable", "Pretendard", system-ui, sans-serif',inter:'"Inter", system-ui, sans-serif'};var g=require("react"),h=require("react/jsx-runtime");function re({words:e,color:t="currentColor",speed:o=80,deleteSpeed:i=30,pauseMs:a=2200,gapMs:l=400,cursorColor:f,className:s=""}){let[r,c]=(0,g.useState)(0),[p,z]=(0,g.useState)(0),[x,T]=(0,g.useState)(!1),[M,R]=(0,g.useState)(!0),u=e[r]||"",L=f||t,y=x?p>0:p<u.length;(0,g.useEffect)(()=>{if(y){R(!0);return}let m=setInterval(()=>R(v=>!v),530);return()=>clearInterval(m)},[y]),(0,g.useEffect)(()=>{if(!x&&p<u.length){let m=Math.random()*o,v=u[p-1]===" "?o*.4:0,de=setTimeout(()=>z(me=>me+1),o*.75+m+v);return()=>clearTimeout(de)}if(!x&&p===u.length){let m=setTimeout(()=>T(!0),a);return()=>clearTimeout(m)}if(x&&p>0){let m=setTimeout(()=>z(v=>v-1),i+Math.random()*i*.6);return()=>clearTimeout(m)}if(x&&p===0){let m=setTimeout(()=>{T(!1),c(v=>(v+1)%e.length)},l);return()=>clearTimeout(m)}},[p,x,u,o,i,a,l,e.length]);let N=u.slice(0,p),B=N[N.length-1],$=N.slice(0,-1);return(0,h.jsxs)("span",{className:s,style:{color:t},children:[p>0&&(0,h.jsxs)(h.Fragment,{children:[$,(0,h.jsx)("span",{className:"inline-block",style:{animation:x?void 0:"m1k-char-pop 0.1s ease-out"},children:B},`${r}-${p}`)]}),(0,h.jsx)("span",{className:"inline-block w-0.5 h-[1em] ml-px align-middle rounded-full",style:{backgroundColor:L,opacity:M?1:0,transition:"opacity 0.1s"}}),(0,h.jsx)("style",{children:`
|
|
8
8
|
@keyframes m1k-char-pop {
|
|
9
9
|
0% { opacity: 0; transform: translateY(4px); }
|
|
10
10
|
100% { opacity: 1; transform: translateY(0); }
|
|
11
11
|
}
|
|
12
|
-
`})]})}var j=require("react"),
|
|
12
|
+
`})]})}var j=require("react"),ie=require("react-dom"),d=require("react/jsx-runtime"),ne=[{label:"\uC790\uC8FC \uC4F0\uB294",emojis:["\u{1F3E0}","\u{1F50D}","\u{1F464}","\u2B50","\u2764\uFE0F","\u{1F525}","\u2705","\u{1F4CC}","\u{1F3AF}","\u{1F4A1}","\u{1F680}","\u{1F4AC}","\u{1F44D}","\u{1F64C}","\u{1F4AA}","\u{1F389}","\u{1F4E2}","\u{1F511}","\u26A1","\u{1F31F}","\u{1F380}","\u{1F9E1}","\u{1FAF6}","\u{1F947}"]},{label:"\uAC10\uC815",emojis:["\u{1F600}","\u{1F604}","\u{1F606}","\u{1F60E}","\u{1F979}","\u{1F60D}","\u{1F929}","\u{1F605}","\u{1F602}","\u{1F972}","\u{1F62D}","\u{1F624}","\u{1F914}","\u{1F607}","\u{1FAF6}","\u{1F917}","\u{1F634}","\u{1F92F}","\u{1F973}","\u{1F62C}","\u{1FAE0}","\u{1F92B}","\u{1F636}","\u{1FAE1}"]},{label:"\uB3D9\uBB3C",emojis:["\u{1F436}","\u{1F431}","\u{1F42D}","\u{1F439}","\u{1F430}","\u{1F98A}","\u{1F43B}","\u{1F43C}","\u{1F428}","\u{1F42F}","\u{1F981}","\u{1F42E}","\u{1F437}","\u{1F438}","\u{1F435}","\u{1F414}","\u{1F427}","\u{1F426}","\u{1F986}","\u{1F989}","\u{1F98B}","\u{1F422}","\u{1F42C}","\u{1F433}"]},{label:"\uC0AC\uBB3C",emojis:["\u{1F4F1}","\u{1F4BB}","\u2328\uFE0F","\u{1F5A5}\uFE0F","\u{1F4F7}","\u{1F3B5}","\u{1F3AE}","\u{1F4DA}","\u{1F4B0}","\u{1F381}","\u{1F514}","\u{1F4CA}","\u{1F5D3}\uFE0F","\u26A1","\u{1F527}","\u{1F48A}","\u{1F9EA}","\u{1F52D}","\u{1F399}\uFE0F","\u{1F58B}\uFE0F","\u{1F4E6}","\u{1F6CD}\uFE0F","\u{1F4B3}","\u{1F510}"]},{label:"\uC790\uC5F0",emojis:["\u{1F308}","\u{1F338}","\u{1F33F}","\u{1F340}","\u{1F319}","\u2600\uFE0F","\u2B50","\u{1F30A}","\u{1F34E}","\u{1F33A}","\u2744\uFE0F","\u{1F334}","\u{1F335}","\u{1F344}","\u{1F33B}","\u{1F30D}","\u26C5","\u{1F32A}\uFE0F","\u{1F305}","\u{1F341}","\u{1F33E}","\u{1FAB8}","\u{1FAE7}","\u2604\uFE0F"]},{label:"\uD65C\uB3D9",emojis:["\u{1F3C3}","\u{1F9D8}","\u{1F3A8}","\u{1F373}","\u2708\uFE0F","\u{1F3D5}\uFE0F","\u{1F3A4}","\u{1F3CB}\uFE0F","\u{1F938}","\u{1F9E9}","\u{1F3AD}","\u{1F6D2}","\u{1F6B4}","\u{1F3CA}","\u26F7\uFE0F","\u{1F3B8}","\u{1F3B9}","\u{1F4F8}","\u{1F9D7}","\u{1F93F}","\u{1F3B2}","\u{1F3C6}","\u{1F3AF}","\u{1FA84}"]}];function ae({emoji:e,onClick:t,className:o=""}){return(0,d.jsx)("button",{onClick:t,className:`w-9 h-9 rounded-full flex items-center justify-center text-lg bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-all hover:scale-110 active:scale-90 ${o}`,title:"Pick emoji",children:e})}function se({open:e,onClose:t,current:o,onSelect:i}){let[a,l]=(0,j.useState)(0);if((0,j.useEffect)(()=>{if(!e)return;let s=r=>{r.key==="Escape"&&t()};return window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s)},[e,t]),!e)return null;let{emojis:f}=ne[a];return(0,ie.createPortal)((0,d.jsxs)("div",{className:"fixed inset-0 z-50 flex items-end justify-center",onClick:t,children:[(0,d.jsx)("div",{className:"absolute inset-0 bg-black/40 backdrop-blur-sm"}),(0,d.jsxs)("div",{className:"relative z-10 w-full max-w-101.5 mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden",onClick:s=>s.stopPropagation(),children:[(0,d.jsx)("div",{className:"px-4 pt-4 pb-3",children:(0,d.jsx)("p",{className:"text-sm font-bold text-zinc-900 dark:text-white",children:"\uC774\uBAA8\uC9C0"})}),(0,d.jsx)("div",{className:"flex gap-1 px-4 pb-3 overflow-x-auto scrollbar-hide",children:ne.map((s,r)=>(0,d.jsx)("button",{onClick:()=>l(r),className:`shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold transition-colors ${a===r?"bg-zinc-900 dark:bg-white text-white dark:text-zinc-900":"bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700"}`,children:s.label},s.label))}),(0,d.jsx)("div",{className:"px-4 pb-3 grid grid-cols-6 gap-2",children:f.map(s=>(0,d.jsx)("button",{onClick:()=>{i(s),t()},className:`h-11 rounded-xl flex items-center justify-center text-2xl transition-all hover:scale-110 active:scale-90 ${o===s?"bg-zinc-900 dark:bg-white":"bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700"}`,children:s},s))}),(0,d.jsx)("div",{className:"px-4 py-3 border-t border-zinc-100 dark:border-zinc-800",children:(0,d.jsx)("button",{onClick:t,className:"w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors",children:"\uB2EB\uAE30"})})]})]}),document.body)}var le=require("react"),ce=require("react-dom"),k=require("react/jsx-runtime");function pe({label:e,children:t,placement:o="top"}){let[i,a]=(0,le.useState)(null),l=c=>{a(c.currentTarget.getBoundingClientRect())},f=()=>a(null),s=i?o==="top"?i.top+window.scrollY-36:i.bottom+window.scrollY+8:0,r=i?i.left+window.scrollX+i.width/2:0;return(0,k.jsxs)(k.Fragment,{children:[(0,k.jsx)("span",{className:"inline-flex",onMouseEnter:l,onMouseLeave:f,onFocus:l,onBlur:f,children:t}),i&&(0,ce.createPortal)((0,k.jsx)("div",{className:"fixed z-[9999] pointer-events-none",style:{top:s,left:r,transform:"translateX(-50%)"},children:(0,k.jsx)("div",{className:"px-3 py-1.5 rounded-xl bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-xs font-semibold whitespace-nowrap shadow-lg animate-in fade-in zoom-in-95 duration-100",children:e})}),document.body)]})}0&&(module.exports={AppShell,AppShellContent,AppShellHeader,Divider,EmojiButton,EmojiPicker,EmptyState,Section,SectionHeader,StatChip,Tab,TabBar,ThemeButton,ThemeDialog,Tooltip,Typewriter,Watermark,colors,fontFamily,fonts});
|
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as E}from"react/jsx-runtime";function K({children:e,className:t="",maxWidth:
|
|
2
|
+
import{jsx as E}from"react/jsx-runtime";function K({children:e,className:t="",maxWidth:r=430,style:n}){return E("div",{className:`w-full h-full flex flex-col bg-white dark:bg-zinc-950 shadow-2xl ring-1 ring-black/10 dark:ring-zinc-700 rounded-2xl overflow-hidden ${t}`,style:{maxWidth:r,...n},children:e})}function X({children:e,className:t=""}){return E("header",{className:`sticky top-0 z-20 h-14 px-4 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-t-2xl ${t}`,children:e})}function V({children:e,className:t=""}){return E("div",{className:`flex-1 overflow-y-auto scrollbar-hide ${t}`,children:e})}import{jsx as $,jsxs as J}from"react/jsx-runtime";function Z({children:e,className:t=""}){return $("nav",{className:`sticky bottom-0 z-20 h-16 border-t border-zinc-200 dark:border-zinc-800 flex bg-white/90 dark:bg-zinc-950/90 backdrop-blur-md rounded-b-2xl ${t}`,children:e})}function G({active:e,onClick:t,icon:r,label:n,activeColor:l}){return J("button",{onClick:t,className:`flex-1 flex flex-col items-center gap-0.5 py-2.5 transition-colors ${e?"":"text-zinc-300 dark:text-zinc-600"}`,style:e?{color:l}:void 0,children:[r,$("span",{className:"text-[10px] font-medium",children:n})]})}import{jsx as A}from"react/jsx-runtime";function q({children:e,className:t=""}){return A("section",{className:`px-4 ${t}`,children:e})}function Q({children:e}){return A("h2",{className:"text-[11px] font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider mb-3",children:e})}import{jsx as ee}from"react/jsx-runtime";function U({className:e=""}){return ee("div",{className:`mx-4 my-6 h-px bg-zinc-200 dark:bg-zinc-800 ${e}`})}import{jsx as W,jsxs as oe}from"react/jsx-runtime";function te({label:e,value:t,className:r=""}){return oe("div",{className:`flex-1 rounded-xl bg-zinc-100 dark:bg-zinc-900 px-3 py-3 text-center ${r}`,children:[W("p",{className:"text-[10px] text-zinc-500 dark:text-zinc-400 font-medium mb-0.5",children:e}),W("p",{className:"text-lg font-bold tabular-nums text-zinc-900 dark:text-white",children:t.toLocaleString()})]})}import{jsx as v,jsxs as L}from"react/jsx-runtime";function re({message:e,icon:t}){return L("div",{className:"flex flex-col items-center justify-center py-12 gap-2",children:[t||L("svg",{width:"32",height:"32",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",className:"text-zinc-200 dark:text-zinc-700",children:[v("circle",{cx:"12",cy:"12",r:"10"}),v("path",{d:"M8 15h8"}),v("circle",{cx:"9",cy:"9",r:"1",fill:"currentColor",stroke:"none"}),v("circle",{cx:"15",cy:"9",r:"1",fill:"currentColor",stroke:"none"})]}),v("p",{className:"text-sm text-zinc-400 dark:text-zinc-500",children:e})]})}import{jsx as z,jsxs as se}from"react/jsx-runtime";var ne=`
|
|
3
3
|
@keyframes watermark-drift {
|
|
4
4
|
0% { transform: rotate(-12deg) scale(2) translate(0, 0); }
|
|
5
5
|
100% { transform: rotate(-12deg) scale(2) translate(180px, 100px); }
|
|
6
6
|
}
|
|
7
|
-
`,D=!1;function ie(){if(D||typeof document>"u")return;let e=document.createElement("style");e.textContent=ne,document.head.appendChild(e),D=!0}function ae({children:e,color:t="#0f172a",text:
|
|
7
|
+
`,D=!1;function ie(){if(D||typeof document>"u")return;let e=document.createElement("style");e.textContent=ne,document.head.appendChild(e),D=!0}function ae({children:e,color:t="#0f172a",text:r="m1k",maxWidth:n=430,padding:l=12,sponsor:s,speed:m=20}){ie();let i=Math.max(14,Math.min(28,Math.floor(160/r.length))),o=s?Math.max(14,Math.min(28,Math.floor(160/s.name.length))):i,c=180,p=100,k=16,u=16,w=k*c/2,P=u*p/2;return se("div",{className:"h-dvh w-full relative overflow-hidden",style:{backgroundColor:t,transition:"background-color 0.5s ease"},children:[z("div",{className:"absolute inset-0 select-none",style:{transformOrigin:"center center",animation:m>0?`watermark-drift ${m}s linear infinite`:void 0,transform:"rotate(-12deg) scale(2)",pointerEvents:"none"},children:Array.from({length:u}).flatMap((S,f)=>Array.from({length:k}).map((B,b)=>{let y=b*c-w+c/2,T=f*p-P+p/2,C=(f+b)%2===1&&s,d={position:"absolute",left:y,top:T,transform:"translate(-50%, -50%)",fontWeight:900,color:"rgba(255,255,255,0.12)",whiteSpace:"nowrap",lineHeight:1,pointerEvents:"auto",cursor:"pointer"};return C?z("a",{href:s.url,target:"_blank",rel:"noopener noreferrer",className:"hover:opacity-30 transition-opacity",style:{...d,fontSize:o,textDecoration:"none"},children:s.name},`${f}-${b}`):z("a",{href:"https://m1k.app",target:"_blank",rel:"noopener noreferrer",className:"hover:opacity-30 transition-opacity",style:{...d,fontSize:i,textDecoration:"none"},children:r},`${f}-${b}`)}))}),z("div",{className:"relative z-10 h-full flex items-center justify-center mx-auto",style:{maxWidth:n,padding:l},children:e})]})}var j={blue:"#3b82f6",purple:"#8b5cf6",green:"#10b981",orange:"#f97316",pink:"#ec4899",red:"#ef4444",yellow:"#eab308",cyan:"#06b6d4",slate:"#0f172a",zinc:"#27272a"};import{useEffect as le}from"react";import{createPortal as ce}from"react-dom";import{jsx as a,jsxs as g}from"react/jsx-runtime";function pe({color:e,dark:t=!1,onClick:r,className:n=""}){let l=t?"#000":"#fff",s=t?"rgba(255,255,255,0.15)":"rgba(0,0,0,0.12)";return a("button",{onClick:r,className:`w-7 h-7 rounded-full transition-all active:scale-90 hover:scale-110 overflow-hidden cursor-pointer ${n}`,style:{boxShadow:`0 2px 10px ${e}55`},title:"Theme",children:g("svg",{width:"100%",height:"100%",viewBox:"0 0 100 100",children:[a("path",{d:"M0 0 L100 0 L0 100 Z",fill:l}),a("path",{d:"M100 0 L100 100 L0 100 Z",fill:e}),a("circle",{cx:"50",cy:"50",r:"49",fill:"none",stroke:s,strokeWidth:"2"})]})})}function de({open:e,onClose:t,current:r,onSelect:n,dark:l=!1,onDarkToggle:s,palette:m=j}){if(le(()=>{if(!e)return;let o=c=>{c.key==="Escape"&&t()};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[e,t]),!e||typeof document>"u")return null;let i=Object.entries(m);return ce(g("div",{className:"fixed inset-0 z-[9999] flex items-end justify-center",onClick:t,children:[a("div",{className:"absolute inset-0 bg-black/40 backdrop-blur-sm"}),g("div",{className:"relative z-10 w-full max-w-[430px] mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden",onClick:o=>o.stopPropagation(),children:[g("div",{className:"px-4 pt-4 pb-3",children:[a("p",{className:"text-sm font-bold text-zinc-900 dark:text-white mb-3",children:"\uD14C\uB9C8"}),s&&a("div",{className:"flex gap-2 mb-4",children:[{label:"\uB77C\uC774\uD2B8",isDark:!1},{label:"\uB2E4\uD06C",isDark:!0}].map(o=>{let c=l===o.isDark;return g("button",{onClick:()=>{c||s()},className:`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-2xl transition-all ${c?"bg-zinc-900 dark:bg-white ring-2 ring-zinc-900 dark:ring-white ring-offset-2 ring-offset-white dark:ring-offset-zinc-900":"bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700"}`,children:[o.isDark?a("svg",{width:"15",height:"15",viewBox:"-1 -1 26 26",fill:c?"#18181b":"#71717a",children:a("path",{d:"M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"})}):g("svg",{width:"15",height:"15",viewBox:"-1 -1 26 26",fill:c?"white":"#71717a",children:[a("circle",{cx:"12",cy:"12",r:"5"}),a("path",{d:"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42",stroke:c?"white":"#71717a",strokeWidth:"2",strokeLinecap:"round"})]}),a("span",{className:`text-sm font-semibold ${c?"text-white dark:text-zinc-900":"text-zinc-400 dark:text-zinc-500"}`,children:o.label})]},o.label)})})]}),a("div",{className:"px-4 pb-3 grid grid-cols-5 gap-3 justify-items-center",children:i.map(([,o])=>a("button",{onClick:()=>{n(o),t()},className:"relative w-11 h-11 rounded-full transition-all hover:scale-110",style:{backgroundColor:o,boxShadow:r===o?`0 0 0 2px #fff, 0 0 0 4px ${o}`:"0 0 0 1.5px rgba(255,255,255,0.5), 0 2px 8px rgba(255,255,255,0.2)"},children:r===o&&a("div",{className:"absolute inset-0 flex items-center justify-center",children:a("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"white",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:a("polyline",{points:"20 6 9 17 4 12"})})})},o))}),a("div",{className:"px-4 py-3 border-t border-zinc-100 dark:border-zinc-800",children:a("button",{onClick:t,className:"w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors",children:"Close"})})]})]}),document.body)}var me={tossface:"https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css",pretendard:"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css",inter:"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"},fe={default:'"Pretendard Variable", "Pretendard", system-ui, -apple-system, sans-serif, "Tossface"',pretendard:'"Pretendard Variable", "Pretendard", system-ui, sans-serif',inter:'"Inter", system-ui, sans-serif'};import{useState as N,useEffect as H}from"react";import{Fragment as xe,jsx as M,jsxs as I}from"react/jsx-runtime";function ue({words:e,color:t="currentColor",speed:r=80,deleteSpeed:n=30,pauseMs:l=2200,gapMs:s=400,cursorColor:m,className:i=""}){let[o,c]=N(0),[p,k]=N(0),[u,w]=N(!1),[P,S]=N(!0),f=e[o]||"",B=m||t,b=u?p>0:p<f.length;H(()=>{if(b){S(!0);return}let d=setInterval(()=>S(h=>!h),530);return()=>clearInterval(d)},[b]),H(()=>{if(!u&&p<f.length){let d=Math.random()*r,h=f[p-1]===" "?r*.4:0,O=setTimeout(()=>k(_=>_+1),r*.75+d+h);return()=>clearTimeout(O)}if(!u&&p===f.length){let d=setTimeout(()=>w(!0),l);return()=>clearTimeout(d)}if(u&&p>0){let d=setTimeout(()=>k(h=>h-1),n+Math.random()*n*.6);return()=>clearTimeout(d)}if(u&&p===0){let d=setTimeout(()=>{w(!1),c(h=>(h+1)%e.length)},s);return()=>clearTimeout(d)}},[p,u,f,r,n,l,s,e.length]);let y=f.slice(0,p),T=y[y.length-1],C=y.slice(0,-1);return I("span",{className:i,style:{color:t},children:[p>0&&I(xe,{children:[C,M("span",{className:"inline-block",style:{animation:u?void 0:"m1k-char-pop 0.1s ease-out"},children:T},`${o}-${p}`)]}),M("span",{className:"inline-block w-0.5 h-[1em] ml-px align-middle rounded-full",style:{backgroundColor:B,opacity:P?1:0,transition:"opacity 0.1s"}}),M("style",{children:`
|
|
8
8
|
@keyframes m1k-char-pop {
|
|
9
9
|
0% { opacity: 0; transform: translateY(4px); }
|
|
10
10
|
100% { opacity: 1; transform: translateY(0); }
|
|
11
11
|
}
|
|
12
|
-
`})]})}import{useEffect as
|
|
12
|
+
`})]})}import{useEffect as be,useState as he}from"react";import{createPortal as ge}from"react-dom";import{jsx as x,jsxs as Y}from"react/jsx-runtime";var F=[{label:"\uC790\uC8FC \uC4F0\uB294",emojis:["\u{1F3E0}","\u{1F50D}","\u{1F464}","\u2B50","\u2764\uFE0F","\u{1F525}","\u2705","\u{1F4CC}","\u{1F3AF}","\u{1F4A1}","\u{1F680}","\u{1F4AC}","\u{1F44D}","\u{1F64C}","\u{1F4AA}","\u{1F389}","\u{1F4E2}","\u{1F511}","\u26A1","\u{1F31F}","\u{1F380}","\u{1F9E1}","\u{1FAF6}","\u{1F947}"]},{label:"\uAC10\uC815",emojis:["\u{1F600}","\u{1F604}","\u{1F606}","\u{1F60E}","\u{1F979}","\u{1F60D}","\u{1F929}","\u{1F605}","\u{1F602}","\u{1F972}","\u{1F62D}","\u{1F624}","\u{1F914}","\u{1F607}","\u{1FAF6}","\u{1F917}","\u{1F634}","\u{1F92F}","\u{1F973}","\u{1F62C}","\u{1FAE0}","\u{1F92B}","\u{1F636}","\u{1FAE1}"]},{label:"\uB3D9\uBB3C",emojis:["\u{1F436}","\u{1F431}","\u{1F42D}","\u{1F439}","\u{1F430}","\u{1F98A}","\u{1F43B}","\u{1F43C}","\u{1F428}","\u{1F42F}","\u{1F981}","\u{1F42E}","\u{1F437}","\u{1F438}","\u{1F435}","\u{1F414}","\u{1F427}","\u{1F426}","\u{1F986}","\u{1F989}","\u{1F98B}","\u{1F422}","\u{1F42C}","\u{1F433}"]},{label:"\uC0AC\uBB3C",emojis:["\u{1F4F1}","\u{1F4BB}","\u2328\uFE0F","\u{1F5A5}\uFE0F","\u{1F4F7}","\u{1F3B5}","\u{1F3AE}","\u{1F4DA}","\u{1F4B0}","\u{1F381}","\u{1F514}","\u{1F4CA}","\u{1F5D3}\uFE0F","\u26A1","\u{1F527}","\u{1F48A}","\u{1F9EA}","\u{1F52D}","\u{1F399}\uFE0F","\u{1F58B}\uFE0F","\u{1F4E6}","\u{1F6CD}\uFE0F","\u{1F4B3}","\u{1F510}"]},{label:"\uC790\uC5F0",emojis:["\u{1F308}","\u{1F338}","\u{1F33F}","\u{1F340}","\u{1F319}","\u2600\uFE0F","\u2B50","\u{1F30A}","\u{1F34E}","\u{1F33A}","\u2744\uFE0F","\u{1F334}","\u{1F335}","\u{1F344}","\u{1F33B}","\u{1F30D}","\u26C5","\u{1F32A}\uFE0F","\u{1F305}","\u{1F341}","\u{1F33E}","\u{1FAB8}","\u{1FAE7}","\u2604\uFE0F"]},{label:"\uD65C\uB3D9",emojis:["\u{1F3C3}","\u{1F9D8}","\u{1F3A8}","\u{1F373}","\u2708\uFE0F","\u{1F3D5}\uFE0F","\u{1F3A4}","\u{1F3CB}\uFE0F","\u{1F938}","\u{1F9E9}","\u{1F3AD}","\u{1F6D2}","\u{1F6B4}","\u{1F3CA}","\u26F7\uFE0F","\u{1F3B8}","\u{1F3B9}","\u{1F4F8}","\u{1F9D7}","\u{1F93F}","\u{1F3B2}","\u{1F3C6}","\u{1F3AF}","\u{1FA84}"]}];function ke({emoji:e,onClick:t,className:r=""}){return x("button",{onClick:t,className:`w-9 h-9 rounded-full flex items-center justify-center text-lg bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-all hover:scale-110 active:scale-90 ${r}`,title:"Pick emoji",children:e})}function ye({open:e,onClose:t,current:r,onSelect:n}){let[l,s]=he(0);if(be(()=>{if(!e)return;let i=o=>{o.key==="Escape"&&t()};return window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i)},[e,t]),!e)return null;let{emojis:m}=F[l];return ge(Y("div",{className:"fixed inset-0 z-50 flex items-end justify-center",onClick:t,children:[x("div",{className:"absolute inset-0 bg-black/40 backdrop-blur-sm"}),Y("div",{className:"relative z-10 w-full max-w-101.5 mb-3 mx-3 rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl overflow-hidden",onClick:i=>i.stopPropagation(),children:[x("div",{className:"px-4 pt-4 pb-3",children:x("p",{className:"text-sm font-bold text-zinc-900 dark:text-white",children:"\uC774\uBAA8\uC9C0"})}),x("div",{className:"flex gap-1 px-4 pb-3 overflow-x-auto scrollbar-hide",children:F.map((i,o)=>x("button",{onClick:()=>s(o),className:`shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold transition-colors ${l===o?"bg-zinc-900 dark:bg-white text-white dark:text-zinc-900":"bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700"}`,children:i.label},i.label))}),x("div",{className:"px-4 pb-3 grid grid-cols-6 gap-2",children:m.map(i=>x("button",{onClick:()=>{n(i),t()},className:`h-11 rounded-xl flex items-center justify-center text-2xl transition-all hover:scale-110 active:scale-90 ${r===i?"bg-zinc-900 dark:bg-white":"bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700"}`,children:i},i))}),x("div",{className:"px-4 py-3 border-t border-zinc-100 dark:border-zinc-800",children:x("button",{onClick:t,className:"w-full py-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors",children:"\uB2EB\uAE30"})})]})]}),document.body)}import{useState as ve}from"react";import{createPortal as we}from"react-dom";import{Fragment as Ne,jsx as R,jsxs as Pe}from"react/jsx-runtime";function ze({label:e,children:t,placement:r="top"}){let[n,l]=ve(null),s=c=>{l(c.currentTarget.getBoundingClientRect())},m=()=>l(null),i=n?r==="top"?n.top+window.scrollY-36:n.bottom+window.scrollY+8:0,o=n?n.left+window.scrollX+n.width/2:0;return Pe(Ne,{children:[R("span",{className:"inline-flex",onMouseEnter:s,onMouseLeave:m,onFocus:s,onBlur:m,children:t}),n&&we(R("div",{className:"fixed z-[9999] pointer-events-none",style:{top:i,left:o,transform:"translateX(-50%)"},children:R("div",{className:"px-3 py-1.5 rounded-xl bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-xs font-semibold whitespace-nowrap shadow-lg animate-in fade-in zoom-in-95 duration-100",children:e})}),document.body)]})}export{K as AppShell,V as AppShellContent,X as AppShellHeader,U as Divider,ke as EmojiButton,ye as EmojiPicker,re as EmptyState,q as Section,Q as SectionHeader,te as StatChip,G as Tab,Z as TabBar,pe as ThemeButton,de as ThemeDialog,ze as Tooltip,ue as Typewriter,ae as Watermark,j as colors,fe as fontFamily,me as fonts};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m1kapp/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "Mobile-first app shell UI components for side projects",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"license": "MIT",
|
|
48
48
|
"repository": {
|
|
49
49
|
"type": "git",
|
|
50
|
-
"url": "https://github.com/m1kapp/ui"
|
|
50
|
+
"url": "git+https://github.com/m1kapp/ui.git"
|
|
51
51
|
},
|
|
52
52
|
"homepage": "https://m1k.app"
|
|
53
53
|
}
|