plainframe-ui 0.1.51 → 0.1.53

package/dist/index.d.ts

@@ -1513,7 +1513,6 @@ type TypographyProps = {
 };
 declare const Typography: React.FC<TypographyProps>;
 
-/** @jsxImportSource @emotion/react */
 type Scale = {
     0: string;
     50: string;
@@ -1556,11 +1555,9 @@ type PlainframeUITheme = {
         onColors: Record<string, string>;
     };
 };
-/** Deep partial - makes all nested properties optional */
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
-/** Partial theme for user customization - all values optional at any depth */
 type PartialTheme = DeepPartial<PlainframeUITheme>;
 type Mode = "light" | "dark";
 declare const surfaceFromNeutral: (mode: Mode, n: Scale) => {
@@ -1591,8 +1588,6 @@ declare module "@emotion/react" {
     }
 }
 
-/** @jsxImportSource @emotion/react */
-
 type ThemeProp = PartialTheme & {
     primaryKey?: string;
     light?: PartialTheme & {

package/dist/index.js

@@ -1,4 +1,4 @@
-import de,{forwardRef,createContext,useId,useMemo,useState,useCallback,useRef,useEffect,useContext,isValidElement,cloneElement,Children,memo,useSyncExternalStore,useLayoutEffect}from'react';import {css,keyframes,useTheme,ThemeProvider,Global}from'@emotion/react';import {jsxs,jsx,Fragment}from'@emotion/react/jsx-runtime';import {ChevronDown,CircleAlert,TriangleAlert,CircleCheckBig,Info,X,Eye,EyeOff,ChevronRight,Check,ChevronFirst,ChevronLeft,ChevronLast,ChevronsUpDown}from'lucide-react';import {useFloating,offset,flip,shift,autoUpdate,useDismiss,useRole,useInteractions,FloatingPortal,size,arrow,useHover,safePolygon,useFocus}from'@floating-ui/react';import {motion,AnimatePresence,useAnimationControls}from'framer-motion';import {createRoot}from'react-dom/client';var ha={xxs:"0.15rem",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem"},ya={xxs:"0.3rem",xs:"0.4rem",sm:"0.6rem",md:"0.7rem",lg:"1rem",xl:"2rem",full:"9999px"},xa={sm:32,md:36,lg:40,border:"1px"},va={fonts:{sans:"system-ui, -apple-system, Segoe UI, Roboto, sans-serif",mono:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},sizes:{xs:"12px",sm:"14px",md:"16px",lg:"18px",xl:"20px","2xl":"24px","3xl":"30px","4xl":"36px","5xl":"48px","6xl":"60px"}},jr={0:"#ffffff",50:"#f9f9f9",100:"#f5f5f5",200:"#eeeeee",300:"#e5e5e5",400:"#C6C6C6",500:"#b3b3b3",600:"#737373",700:"#4a4a4a",800:"#2b2b2b",900:"#111111"},Vr={0:"#0c0c0c",50:"#121212",100:"#1a1a1a",200:"#222222",300:"#2b2b2b",400:"#333333",500:"#444444",600:"#6e6e6e",700:"#a6a6a6",800:"#e5e5e5",900:"#ffffff"},ga={mono:{0:"#FFFFFF",50:"#FAFAFA",100:"#F2F2F2",200:"#E6E6E6",300:"#D1D1D1",400:"#8A8A8A",500:"#2A2A2A",600:"#1A1A1A",700:"#121212",800:"#0B0B0B",900:"#000000"},danger:{0:"#FFFFFF",50:"#FFF1F1",100:"#FFE0E0",200:"#ffd2d5ff",300:"#FF9AA6",400:"#FF6A7B",500:"#EF2F23",600:"#E7000B",700:"#DB1424",800:"#C11225",900:"#7A0A18"},success:{0:"#FFFFFF",50:"#EEFFF3",100:"#D7FFE8",200:"#d6ffe7ff",300:"#8EF5BB",400:"#5BEA9A",500:"#0FD45D",600:"#00C853",700:"#109C47",800:"#0E8242",900:"#064D2B"},warning:{0:"#FFFFFF",50:"#FFF7EB",100:"#FFEFC6",200:"#FFE094",300:"#FFC552",400:"#FFB83A",500:"#FFA414",600:"#FF9F0A",700:"#D97500",800:"#AF5E00",900:"#6E3600"},info:{0:"#FFFFFF",50:"#ECFAFF",100:"#D2F2FF",200:"#AEE6FF",300:"#84D6FF",400:"#4BC1FF",500:"#2B9FFF",600:"#1093FF",700:"#0077C0",800:"#0066A8",900:"#083B61"},red:{0:"#FFFFFF",50:"#FFF1F1",100:"#FFE0E0",200:"#ffd2d5ff",300:"#FF9AA6",400:"#FF6A7B",500:"#EF2F23",600:"#E7000B",700:"#DB1424",800:"#C11225",900:"#7A0A18"},amber:{0:"#FFFFFF",50:"#FFF3EA",100:"#FFE3D1",200:"#FFC7A6",300:"#FFAC80",400:"#FF874D",500:"#FF6C1F",600:"#FF5A00",700:"#D24500",800:"#B63C00",900:"#6F2300"},orange:{0:"#FFFFFF",50:"#FFF4EB",100:"#FFE6CC",200:"#FFCE9E",300:"#FFAE66",400:"#FF8B33",500:"#FF7310",600:"#FF6B00",700:"#CC4400",800:"#AF3F00",900:"#6B2400"},yellow:{0:"#FFFFFF",50:"#FFFAE6",100:"#FFF2BF",200:"#FFE780",300:"#FFDB3D",400:"#FFD000",500:"#FFE03F",600:"#FFD60A",700:"#B38600",800:"#8E6D00",900:"#534300"},lime:{0:"#FFFFFF",50:"#F6FFE8",100:"#E7FFC2",200:"#CCFF83",300:"#A8FA3D",400:"#8BE11C",500:"#87DE10",600:"#7ACC00",700:"#4A8C00",800:"#3B7100",900:"#224300"},green:{0:"#FFFFFF",50:"#F0FFF5",100:"#DBFFE9",200:"#BDF7CF",300:"#8FE7A8",400:"#5BD57D",500:"#1DAE52",600:"#16A34A",700:"#168A40",800:"#136A34",900:"#0B3D1F"},teal:{0:"#FFFFFF",50:"#EDFFFB",100:"#D2FFF4",200:"#A6FAEA",300:"#74EEDC",400:"#41DECB",500:"#00CFAA",600:"#00BFA5",700:"#0C8C7F",800:"#0B786C",900:"#084741"},cyan:{0:"#FFFFFF",50:"#EFFFFF",100:"#D4FCFF",200:"#AFF5FD",300:"#7FE8F6",400:"#45D3EB",500:"#09C6E7",600:"#00B8D9",700:"#0A7C92",800:"#0B6E81",900:"#0A4250"},blue:{0:"#FFFFFF",50:"#EFF6FF",100:"#DBE8FF",200:"#B8D3FF",300:"#90BAFF",400:"#5E97FF",500:"#406FFF",600:"#2F66FF",700:"#2452DE",800:"#2248C8",900:"#172C80"},indigo:{0:"#FFFFFF",50:"#EEF2FF",100:"#E0E6FF",200:"#C5D0FF",300:"#A3B5FF",400:"#879CFF",500:"#707AF5",600:"#5A63F3",700:"#4951DA",800:"#3E40BF",900:"#2A2A82"},purple:{0:"#FFFFFF",50:"#F4F0FF",100:"#E8DBFF",200:"#D2B8FF",300:"#B590FF",400:"#996AF5",500:"#7A52F1",600:"#6B3CF0",700:"#592FBE",800:"#4D27A3",900:"#2F1767"},magenta:{0:"#FFFFFF",50:"#FFF0FE",100:"#FCE0FF",200:"#F7BCFF",300:"#F393FD",400:"#E85FF8",500:"#C645D6",600:"#C026D3",700:"#951CAB",800:"#801790",900:"#4C0C59"},pink:{0:"#FFFFFF",50:"#FFF0F7",100:"#FFE0F0",200:"#FFC0E2",300:"#FF9ACE",400:"#FF6CB3",500:"#ED5CA2",600:"#EC4899",700:"#AB236F",800:"#96205D",900:"#5A1238"},rose:{0:"#FFFFFF",50:"#FFF0F3",100:"#FFE1E9",200:"#FFC1D3",300:"#FF98B8",400:"#FF6B98",500:"#EE4278",600:"#E52E69",700:"#B52156",800:"#991A43",900:"#5B0F28"}},ba={mono:{0:"#0B0B0C",50:"#0F0F10",100:"#151515",200:"#1B1B1C",300:"#232323",400:"#DADADA",500:"#E0E0E0",600:"#EDEDED",700:"#F5F5F5",800:"#FCFCFC",900:"#FFFFFF"},danger:{0:"#17080A",50:"#1E0B0D",100:"#290F11",200:"#3A1416",300:"#4B191B",400:"#6A1D21",500:"#FF3B30",600:"#E7000B",700:"#FF2A20",800:"#FF463D",900:"#FFD9DB"},success:{0:"#06150B",50:"#0A1B10",100:"#0E2416",200:"#11301C",300:"#143B21",400:"#16502C",500:"#22D85A",600:"#00C853",700:"#2FE976",800:"#7FF1AE",900:"#D6FADF"},warning:{0:"#150E05",50:"#1C1408",100:"#261B0B",200:"#31240E",300:"#3D2C12",400:"#583C16",500:"#FFA61A",600:"#FF9F0A",700:"#FFB347",800:"#FFD089",900:"#FFF0C9"},info:{0:"#07131E",50:"#0A1926",100:"#0E2233",200:"#112C44",300:"#143654",400:"#184A78",500:"#1C9CFF",600:"#1093FF",700:"#4FB2FF",800:"#9DD2FF",900:"#D8ECFF"},red:{0:"#17080A",50:"#1E0B0D",100:"#290F11",200:"#3A1416",300:"#4B191B",400:"#6A1D21",500:"#FF3B30",600:"#E7000B",700:"#FF2A20",800:"#FF463D",900:"#FFD9DB"},amber:{0:"#150D07",50:"#1C120A",100:"#26180E",200:"#311F12",300:"#3E2716",400:"#59361C",500:"#FF6A1E",600:"#FF5A00",700:"#FF8747",800:"#FFB98A",900:"#FFE2CC"},orange:{0:"#140D07",50:"#1B120A",100:"#25190D",200:"#302010",300:"#3B2813",400:"#553817",500:"#FF7F22",600:"#FF6B00",700:"#FF9247",800:"#FFBE8A",900:"#FFE1CC"},yellow:{0:"#141303",50:"#1B1906",100:"#25210A",200:"#2F2A0D",300:"#383212",400:"#524717",500:"#FFE042",600:"#FFD60A",700:"#FFE457",800:"#FFF194",900:"#FFF8CF"},lime:{0:"#0C1306",50:"#101A08",100:"#14210B",200:"#1A2B0F",300:"#203614",400:"#2A4A1A",500:"#86E21A",600:"#7ACC00",700:"#9EEA3B",800:"#C9F57F",900:"#EAFCC4"},green:{0:"#07140C",50:"#0B1B11",100:"#0E2416",200:"#112C1B",300:"#143722",400:"#17502F",500:"#20BF55",600:"#16A34A",700:"#39C964",800:"#86E5A5",900:"#D4F6E1"},teal:{0:"#081815",50:"#0B1F1C",100:"#0F2824",200:"#13322E",300:"#173E39",400:"#14584F",500:"#14CEBD",600:"#00BFA5",700:"#2CD6C6",800:"#7FEAE3",900:"#CFF7F3"},cyan:{0:"#07171C",50:"#0A1E24",100:"#0E2830",200:"#11333D",300:"#153E4A",400:"#165B6A",500:"#20CBE6",600:"#00B8D9",700:"#3FD2E9",800:"#93EBF6",900:"#D5F7FC"},blue:{0:"#081421",50:"#0A1829",100:"#0E2139",200:"#112A4B",300:"#153660",400:"#184A86",500:"#4A78FF",600:"#2F66FF",700:"#5A8AFF",800:"#A7C3FF",900:"#D9E7FF"},indigo:{0:"#0B1023",50:"#0E162C",100:"#141F3F",200:"#1C2A56",300:"#24366E",400:"#2F4894",500:"#707CF6",600:"#5A63F3",700:"#7D86FF",800:"#B5C0FF",900:"#E0E6FF"},purple:{0:"#100B1F",50:"#130E26",100:"#1A1638",200:"#231F4E",300:"#2E2A67",400:"#3C388D",500:"#8256F3",600:"#6B3CF0",700:"#8B66FA",800:"#C1B0FF",900:"#E4DCFF"},magenta:{0:"#160A18",50:"#1C0C21",100:"#25102E",200:"#321544",300:"#421A5C",400:"#58247C",500:"#CB44DB",600:"#C026D3",700:"#D960EB",800:"#F0B5FA",900:"#F9E4FE"},pink:{0:"#170911",50:"#1D0C18",100:"#271220",200:"#371830",300:"#462042",400:"#622C5C",500:"#F067AE",600:"#EC4899",700:"#F679BB",800:"#FFC2E1",900:"#FFE6F3"},rose:{0:"#17090E",50:"#1F0C13",100:"#2A121B",200:"#3A1B28",300:"#4B2636",400:"#673449",500:"#EE457B",600:"#E52E69",700:"#FF558A",800:"#FFA9C6",900:"#FFE0EA"}},Ca=e=>({...e,red:e.danger,error:e.danger,green:e.success,success:e.success,orange:e.orange,amber:e.amber,yellow:e.yellow,lime:e.lime,teal:e.teal,cyan:e.cyan,blue:e.blue,indigo:e.indigo,purple:e.purple,violet:e.purple,magenta:e.magenta,fuchsia:e.magenta,pink:e.pink,rose:e.rose,gray:e.mono,grey:e.mono,neutral:e.mono}),Jn=(e,t)=>e==="light"?{appBg:t[0],panelBg:t[0],subtleBg:t[100],panelHover:t[50],subtleHover:t[200],overlayBg:"linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.525))",border:t[300]}:{appBg:t[0],panelBg:t[0],subtleBg:t[50],panelHover:t[50],subtleHover:t[100],overlayBg:"linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.75))",border:t[200]},Ko=e=>({primary:e[900],secondary:e[600],muted:e[500],onColors:{}}),_o=e=>({primary:e[900],secondary:e[700],muted:e[600],onColors:{}}),yc=["danger","success","warning","info","amber","orange","yellow","lime","green","teal","cyan","blue","indigo","purple","magenta","pink","rose"],Ra=e=>yc.reduce((t,n)=>(t[n]=e[n]??"#FFFFFF",t),{}),jo={spacing:ha,radius:ya,componentHeights:xa,typography:va,neutral:jr,palette:{...Ca(ga),primary:ga.mono},surface:Jn("light",jr),text:{...Ko(jr),onColors:{primary:"#FFFFFF",...Ra({yellow:"#000000"})}}},Ta={spacing:ha,radius:ya,componentHeights:xa,typography:va,neutral:Vr,palette:{...Ca(ba),primary:ba.mono},surface:Jn("dark",Vr),text:{..._o(Vr),onColors:{primary:"#000000",...Ra({yellow:"#000000",lime:"#000000"})}}};function Ea(e){let t=e,n=new Set;return {get:()=>t,set:o=>{t=o,n.forEach(r=>r());},subscribe:o=>(n.add(o),()=>n.delete(o))}}var ka={destructive:"danger",error:"danger",violet:"purple",fuchsia:"magenta",gray:"mono",grey:"mono",neutral:"mono"},ct=e=>ka[e]??e;function tn(e){let t={...e};return Object.entries(ka).forEach(([n,o])=>{t[o]!=null&&t[n]==null&&(t[n]=t[o]);}),t}var Ma=de.createContext(null),Fa=de.createContext(null),Aa=de.createContext({setMode:e=>{},toggleMode:()=>{}}),Pa=de.createContext({setPrimary:e=>{}}),Da=de.createContext(null);function j(){return useTheme()}function Cc(){let e=de.useContext(Ma);if(!e)throw new Error("useColorMode must be used within ThemeProvider");let t=de.useContext(Aa),[n,o]=de.useState(()=>e.get());return de.useEffect(()=>{o(e.get());let r=e.subscribe(()=>o(e.get()));return ()=>{r();}},[e]),{mode:n,setMode:t.setMode,toggleMode:t.toggleMode}}function Rc(){let e=de.useContext(Fa);if(!e)throw new Error("usePrimary must be used within ThemeProvider");let t=de.useContext(Pa),[n,o]=de.useState(()=>e.get());return de.useEffect(()=>{o(e.get());let r=e.subscribe(()=>o(e.get()));return ()=>{r();}},[e]),{primary:n,setPrimary:t.setPrimary}}function cb(e){let t=de.useContext(Da);if(!t)throw new Error("usePrimitives must be used within ThemeProvider");let{mode:n}=Cc(),{primary:o}=Rc(),r=de.useMemo(()=>{let s=n==="light"?t.light:t.dark,i=s.palette[ct(o)]??s.palette.primary,u=tn(s.text.onColors)[ct(o)]??qr(i[600]);return {...s,palette:{...s.palette,primary:i},text:{...s.text,onColors:{...tn(s.text.onColors),primary:u,[ct(o)]:u,[o]:u}}}},[t,n,o]);return e?e(r):r}function Vo(e,t){if(!t)return e;let n={...e.palette};if(t.palette)for(let o of Object.keys(t.palette)){let r=t.palette[o];r&&(n[o]={...e.palette[o]??{},...r});}return {...e,spacing:{...e.spacing,...t.spacing??{}},radius:{...e.radius,...t.radius??{}},componentHeights:{...e.componentHeights,...t.componentHeights??{}},typography:{fonts:{...e.typography.fonts,...t.typography?.fonts??{}},sizes:{...e.typography.sizes,...t.typography?.sizes??{}}},palette:n,neutral:t.neutral?{...e.neutral,...t.neutral}:e.neutral,surface:{...e.surface,...t.surface??{}},text:{...e.text,...t.text??{},onColors:{...e.text.onColors,...t.text?.onColors??{}}}}}function qr(e){let t=e.replace("#",""),n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16),r=parseInt(t.slice(4,6),16),s=u=>{let a=u/255;return a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4)};return .2126*s(n)+.7152*s(o)+.0722*s(r)>.53?"#000":"#FFF"}function Sa(e,t){if(e.current)return;let n=document.createElement("style");n.id=t,document.head.appendChild(n),e.current=n;}function Ur(e){return e?`[data-pfui-scope="${e}"]`:":root"}function Gr(e,t,n){let o=[],r=a=>a.startsWith("var(")?a.replace(/^var\([^,]+,\s*/,"").replace(/\)\s*$/,"").trim():a;o.push(`--pf-font-sans:${r(e.typography.fonts.sans)};`),o.push(`--pf-font-mono:${r(e.typography.fonts.mono)};`),o.push(`--pf-text-primary:${e.text.primary};`),o.push(`--pf-text-secondary:${e.text.secondary};`),o.push(`--pf-text-muted:${e.text.muted};`),Object.entries(e.text.onColors).forEach(([a,l])=>o.push(`--pf-text-on-${a}:${l};`)),Object.entries(e.spacing).forEach(([a,l])=>o.push(`--pf-space-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.radius).forEach(([a,l])=>o.push(`--pf-radius-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.typography.sizes).forEach(([a,l])=>o.push(`--pf-fontSize-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.componentHeights).forEach(([a,l])=>o.push(`--pf-cmph-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.neutral).forEach(([a,l])=>o.push(`--pf-neutral-${a}:${l};`)),o.push(`--pf-surface-appBg:${e.surface.appBg};`),o.push(`--pf-surface-panelBg:${e.surface.panelBg};`),o.push(`--pf-surface-subtleBg:${e.surface.subtleBg};`),o.push(`--pf-surface-panelHover:${e.surface.panelHover};`),o.push(`--pf-surface-subtleHover:${e.surface.subtleHover};`),o.push(`--pf-surface-overlayBg:${e.surface.overlayBg};`),o.push(`--pf-surface-border:${e.surface.border};`),o.push("--pf-focus-main:var(--pf-neutral-400);"),o.push(n==="dark"?"--pf-focus-soft:var(--pf-neutral-200);":"--pf-focus-soft:var(--pf-neutral-300);"),Object.entries(e.palette).forEach(([a,l])=>{Object.entries(l).forEach(([c,p])=>{o.push(`--pf-palette-${a}-${c}:${p};`);});});let s="300";Object.keys(e.palette).forEach(a=>{o.push(`--pf-focus-${a}-main: var(--pf-palette-${a}-${s});`),o.push(`--pf-focus-${a}-soft: transparent;`);});let i=t;[0,50,100,200,300,400,500,600,700,800,900].forEach(a=>o.push(`--pf-primary-${a}:var(--pf-palette-${i}-${a});`)),o.push("--pf-focus-accent-main:var(--pf-primary-300);"),o.push("--pf-focus-accent-soft: transparent;");let u=e.text.onColors[i]??(()=>{let l=(e.palette[i]?.[600]??e.palette.primary[600]).replace("#",""),c=parseInt(l.slice(0,2),16),p=parseInt(l.slice(2,4),16),h=parseInt(l.slice(4,6),16),f=I=>{let x=I/255;return x<=.03928?x/12.92:Math.pow((x+.055)/1.055,2.4)};return .2126*f(c)+.7152*f(p)+.0722*f(h)>.53?"#000":"#FFF"})();return o.push(`--pf-text-on-primary:${u};`),o.push(`color-scheme:${n==="dark"?"dark":"light"};`),o}function Uo(e,t,n){return Gr(e,t,n).join("")}var Xr=e=>{for(let t=e.style.length-1;t>=0;t--){let n=e.style.item(t);n&&n.startsWith("--pf-")&&e.style.removeProperty(n);}},Ia=(e,t)=>{Xr(e);for(let n of t){let o=n.indexOf(":");if(o===-1)continue;let r=n.slice(0,o).trim(),s=n.slice(o+1).trim();s.endsWith(";")&&(s=s.slice(0,-1)),r&&e.style.setProperty(r,s);}},qo=(e,t)=>{e.classList.toggle("pf-light",t==="light"),e.classList.toggle("pf-dark",t==="dark");},Na=({children:e,theme:t,initialMode:n="light",storageKey:o="pfui:pref",scope:r})=>{let s=!!r,i=t?.primaryKey??"mono",a=useRef((()=>{if(!s)try{let b=JSON.parse(localStorage.getItem(o)||"null");if(b?.mode==="light"||b?.mode==="dark")return b.mode}catch{}return n==="system"?window.matchMedia?.("(prefers-color-scheme: dark)").matches?"dark":"light":n??"light"})()),l=de.useMemo(()=>Ea(a.current),[]),c=de.useMemo(()=>Ea(i),[]);de.useLayoutEffect(()=>{c.get()!==i&&c.set(i);},[i,c]);let p=useRef(null),h=useRef(0),f=useRef(r??"__root__");de.useLayoutEffect(()=>{let b=0,y=p.current;for(;y&&y!==document.body;)y.hasAttribute("data-pfui-scope")&&b++,y=y.parentElement;h.current=b;},[r]);let R=useMemo(()=>{let b=Vo(jo,t),y=Vo(b,t?.light),P=t?.light?.primaryKey??i,H=ct(P),L=y.palette.primary??y.palette[H]??y.palette.mono,E=tn({...Ko(y.neutral).onColors,...y.text.onColors}),S=E[H]??qr(L[600]),z=t?.surface||t?.light?.surface?y.surface:Jn("light",y.neutral),K={...t?.text||t?.light?.text?y.text:Ko(y.neutral),onColors:tn({...E,primary:S,[H]:S})};return {...y,palette:{...y.palette,primary:L},surface:z,text:K}},[t,i]),I=useMemo(()=>{let b=Vo(Ta,t),y=Vo(b,t?.dark),P=t?.dark?.primaryKey??i,H=ct(P),L=y.palette.primary??y.palette[H]??y.palette.mono,E=tn({..._o(y.neutral).onColors,...y.text.onColors}),S=E[H]??qr(L[600]),z=t?.surface||t?.dark?.surface?y.surface:Jn("dark",y.neutral),K={...t?.text||t?.dark?.text?y.text:_o(y.neutral),onColors:tn({...E,primary:S,[H]:S})};return {...y,palette:{...y.palette,primary:L},surface:z,text:K}},[t,i]),x=useRef(null),C=useRef(null),g=de.useInsertionEffect||de.useLayoutEffect,d=useCallback(()=>{let b=Ur(r);Sa(C,s?`pfui-guard-${r}`:"pfui-guard-root"),C.current.textContent=`${b} *{transition:none!important;animation:none!important}`,requestAnimationFrame(()=>{C.current.textContent="";});},[r,s]);g(()=>{Sa(x,s?`pfui-vars-${r}`:"pfui-vars-root");let b=t?.light?.primaryKey??t?.primaryKey??i,y=t?.dark?.primaryKey??t?.primaryKey??i,P=Ur(r),H=Uo(R,ct(b),"light"),L=Uo(I,ct(y),"dark");x.current.textContent=`${P}.pf-light{${H}}
+import de,{forwardRef,createContext,useId,useMemo,useState,useCallback,useRef,useEffect,useContext,isValidElement,cloneElement,Children,memo,useSyncExternalStore,useLayoutEffect}from'react';import {css,keyframes,useTheme,ThemeProvider,Global}from'@emotion/react';import {jsxs,jsx,Fragment}from'@emotion/react/jsx-runtime';import {ChevronDown,CircleAlert,TriangleAlert,CircleCheckBig,Info,X,Eye,EyeOff,ChevronRight,Check,ChevronFirst,ChevronLeft,ChevronLast,ChevronsUpDown}from'lucide-react';import {useFloating,offset,flip,shift,autoUpdate,useDismiss,useRole,useInteractions,FloatingPortal,size,arrow,useHover,safePolygon,useFocus}from'@floating-ui/react';import {motion,AnimatePresence,useAnimationControls}from'framer-motion';import {createRoot}from'react-dom/client';var ha={xxs:"0.15rem",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem"},ya={xxs:"0.3rem",xs:"0.4rem",sm:"0.6rem",md:"0.7rem",lg:"1rem",xl:"2rem",full:"9999px"},xa={sm:32,md:36,lg:40,border:"1px"},va={fonts:{sans:"system-ui, -apple-system, Segoe UI, Roboto, sans-serif",mono:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},sizes:{xs:"12px",sm:"14px",md:"16px",lg:"18px",xl:"20px","2xl":"24px","3xl":"30px","4xl":"36px","5xl":"48px","6xl":"60px"}},jr={0:"#ffffff",50:"#f9f9f9",100:"#f5f5f5",200:"#eeeeee",300:"#e5e5e5",400:"#C6C6C6",500:"#b3b3b3",600:"#737373",700:"#4a4a4a",800:"#2b2b2b",900:"#111111"},Vr={0:"#0c0c0c",50:"#121212",100:"#1a1a1a",200:"#222222",300:"#2b2b2b",400:"#333333",500:"#444444",600:"#6e6e6e",700:"#a6a6a6",800:"#e5e5e5",900:"#ffffff"},ga={mono:{0:"#FFFFFF",50:"#FAFAFA",100:"#F2F2F2",200:"#E6E6E6",300:"#D1D1D1",400:"#8A8A8A",500:"#2A2A2A",600:"#1A1A1A",700:"#121212",800:"#0B0B0B",900:"#000000"},danger:{0:"#FFFFFF",50:"#FFF1F1",100:"#FFE0E0",200:"#ffd2d5ff",300:"#FF9AA6",400:"#FF6A7B",500:"#EF2F23",600:"#E7000B",700:"#DB1424",800:"#C11225",900:"#7A0A18"},success:{0:"#FFFFFF",50:"#EEFFF3",100:"#D7FFE8",200:"#d6ffe7ff",300:"#8EF5BB",400:"#5BEA9A",500:"#0FD45D",600:"#00C853",700:"#109C47",800:"#0E8242",900:"#064D2B"},warning:{0:"#FFFFFF",50:"#FFF7EB",100:"#FFEFC6",200:"#FFE094",300:"#FFC552",400:"#FFB83A",500:"#FFA414",600:"#FF9F0A",700:"#D97500",800:"#AF5E00",900:"#6E3600"},info:{0:"#FFFFFF",50:"#ECFAFF",100:"#D2F2FF",200:"#AEE6FF",300:"#84D6FF",400:"#4BC1FF",500:"#2B9FFF",600:"#1093FF",700:"#0077C0",800:"#0066A8",900:"#083B61"},red:{0:"#FFFFFF",50:"#FFF1F1",100:"#FFE0E0",200:"#ffd2d5ff",300:"#FF9AA6",400:"#FF6A7B",500:"#EF2F23",600:"#E7000B",700:"#DB1424",800:"#C11225",900:"#7A0A18"},amber:{0:"#FFFFFF",50:"#FFF3EA",100:"#FFE3D1",200:"#FFC7A6",300:"#FFAC80",400:"#FF874D",500:"#FF6C1F",600:"#FF5A00",700:"#D24500",800:"#B63C00",900:"#6F2300"},orange:{0:"#FFFFFF",50:"#FFF4EB",100:"#FFE6CC",200:"#FFCE9E",300:"#FFAE66",400:"#FF8B33",500:"#FF7310",600:"#FF6B00",700:"#CC4400",800:"#AF3F00",900:"#6B2400"},yellow:{0:"#FFFFFF",50:"#FFFAE6",100:"#FFF2BF",200:"#FFE780",300:"#FFDB3D",400:"#FFD000",500:"#FFE03F",600:"#FFD60A",700:"#B38600",800:"#8E6D00",900:"#534300"},lime:{0:"#FFFFFF",50:"#F6FFE8",100:"#E7FFC2",200:"#CCFF83",300:"#A8FA3D",400:"#8BE11C",500:"#87DE10",600:"#7ACC00",700:"#4A8C00",800:"#3B7100",900:"#224300"},green:{0:"#FFFFFF",50:"#F0FFF5",100:"#DBFFE9",200:"#BDF7CF",300:"#8FE7A8",400:"#5BD57D",500:"#1DAE52",600:"#16A34A",700:"#168A40",800:"#136A34",900:"#0B3D1F"},teal:{0:"#FFFFFF",50:"#EDFFFB",100:"#D2FFF4",200:"#A6FAEA",300:"#74EEDC",400:"#41DECB",500:"#00CFAA",600:"#00BFA5",700:"#0C8C7F",800:"#0B786C",900:"#084741"},cyan:{0:"#FFFFFF",50:"#EFFFFF",100:"#D4FCFF",200:"#AFF5FD",300:"#7FE8F6",400:"#45D3EB",500:"#09C6E7",600:"#00B8D9",700:"#0A7C92",800:"#0B6E81",900:"#0A4250"},blue:{0:"#FFFFFF",50:"#EFF6FF",100:"#DBE8FF",200:"#B8D3FF",300:"#90BAFF",400:"#5E97FF",500:"#406FFF",600:"#2F66FF",700:"#2452DE",800:"#2248C8",900:"#172C80"},indigo:{0:"#FFFFFF",50:"#EEF2FF",100:"#E0E6FF",200:"#C5D0FF",300:"#A3B5FF",400:"#879CFF",500:"#707AF5",600:"#5A63F3",700:"#4951DA",800:"#3E40BF",900:"#2A2A82"},purple:{0:"#FFFFFF",50:"#F4F0FF",100:"#E8DBFF",200:"#D2B8FF",300:"#B590FF",400:"#996AF5",500:"#7A52F1",600:"#6B3CF0",700:"#592FBE",800:"#4D27A3",900:"#2F1767"},magenta:{0:"#FFFFFF",50:"#FFF0FE",100:"#FCE0FF",200:"#F7BCFF",300:"#F393FD",400:"#E85FF8",500:"#C645D6",600:"#C026D3",700:"#951CAB",800:"#801790",900:"#4C0C59"},pink:{0:"#FFFFFF",50:"#FFF0F7",100:"#FFE0F0",200:"#FFC0E2",300:"#FF9ACE",400:"#FF6CB3",500:"#ED5CA2",600:"#EC4899",700:"#AB236F",800:"#96205D",900:"#5A1238"},rose:{0:"#FFFFFF",50:"#FFF0F3",100:"#FFE1E9",200:"#FFC1D3",300:"#FF98B8",400:"#FF6B98",500:"#EE4278",600:"#E52E69",700:"#B52156",800:"#991A43",900:"#5B0F28"}},ba={mono:{0:"#0B0B0C",50:"#0F0F10",100:"#151515",200:"#1B1B1C",300:"#232323",400:"#DADADA",500:"#E0E0E0",600:"#EDEDED",700:"#F5F5F5",800:"#FCFCFC",900:"#FFFFFF"},danger:{0:"#17080A",50:"#1E0B0D",100:"#290F11",200:"#3A1416",300:"#4B191B",400:"#6A1D21",500:"#FF3B30",600:"#E7000B",700:"#FF2A20",800:"#FF463D",900:"#FFD9DB"},success:{0:"#06150B",50:"#0A1B10",100:"#0E2416",200:"#11301C",300:"#143B21",400:"#16502C",500:"#22D85A",600:"#00C853",700:"#2FE976",800:"#7FF1AE",900:"#D6FADF"},warning:{0:"#150E05",50:"#1C1408",100:"#261B0B",200:"#31240E",300:"#3D2C12",400:"#583C16",500:"#FFA61A",600:"#FF9F0A",700:"#FFB347",800:"#FFD089",900:"#FFF0C9"},info:{0:"#07131E",50:"#0A1926",100:"#0E2233",200:"#112C44",300:"#143654",400:"#184A78",500:"#1C9CFF",600:"#1093FF",700:"#4FB2FF",800:"#9DD2FF",900:"#D8ECFF"},red:{0:"#17080A",50:"#1E0B0D",100:"#290F11",200:"#3A1416",300:"#4B191B",400:"#6A1D21",500:"#FF3B30",600:"#E7000B",700:"#FF2A20",800:"#FF463D",900:"#FFD9DB"},amber:{0:"#150D07",50:"#1C120A",100:"#26180E",200:"#311F12",300:"#3E2716",400:"#59361C",500:"#FF6A1E",600:"#FF5A00",700:"#FF8747",800:"#FFB98A",900:"#FFE2CC"},orange:{0:"#140D07",50:"#1B120A",100:"#25190D",200:"#302010",300:"#3B2813",400:"#553817",500:"#FF7F22",600:"#FF6B00",700:"#FF9247",800:"#FFBE8A",900:"#FFE1CC"},yellow:{0:"#141303",50:"#1B1906",100:"#25210A",200:"#2F2A0D",300:"#383212",400:"#524717",500:"#FFE042",600:"#FFD60A",700:"#FFE457",800:"#FFF194",900:"#FFF8CF"},lime:{0:"#0C1306",50:"#101A08",100:"#14210B",200:"#1A2B0F",300:"#203614",400:"#2A4A1A",500:"#86E21A",600:"#7ACC00",700:"#9EEA3B",800:"#C9F57F",900:"#EAFCC4"},green:{0:"#07140C",50:"#0B1B11",100:"#0E2416",200:"#112C1B",300:"#143722",400:"#17502F",500:"#20BF55",600:"#16A34A",700:"#39C964",800:"#86E5A5",900:"#D4F6E1"},teal:{0:"#081815",50:"#0B1F1C",100:"#0F2824",200:"#13322E",300:"#173E39",400:"#14584F",500:"#14CEBD",600:"#00BFA5",700:"#2CD6C6",800:"#7FEAE3",900:"#CFF7F3"},cyan:{0:"#07171C",50:"#0A1E24",100:"#0E2830",200:"#11333D",300:"#153E4A",400:"#165B6A",500:"#20CBE6",600:"#00B8D9",700:"#3FD2E9",800:"#93EBF6",900:"#D5F7FC"},blue:{0:"#081421",50:"#0A1829",100:"#0E2139",200:"#112A4B",300:"#153660",400:"#184A86",500:"#4A78FF",600:"#2F66FF",700:"#5A8AFF",800:"#A7C3FF",900:"#D9E7FF"},indigo:{0:"#0B1023",50:"#0E162C",100:"#141F3F",200:"#1C2A56",300:"#24366E",400:"#2F4894",500:"#707CF6",600:"#5A63F3",700:"#7D86FF",800:"#B5C0FF",900:"#E0E6FF"},purple:{0:"#100B1F",50:"#130E26",100:"#1A1638",200:"#231F4E",300:"#2E2A67",400:"#3C388D",500:"#8256F3",600:"#6B3CF0",700:"#8B66FA",800:"#C1B0FF",900:"#E4DCFF"},magenta:{0:"#160A18",50:"#1C0C21",100:"#25102E",200:"#321544",300:"#421A5C",400:"#58247C",500:"#CB44DB",600:"#C026D3",700:"#D960EB",800:"#F0B5FA",900:"#F9E4FE"},pink:{0:"#170911",50:"#1D0C18",100:"#271220",200:"#371830",300:"#462042",400:"#622C5C",500:"#F067AE",600:"#EC4899",700:"#F679BB",800:"#FFC2E1",900:"#FFE6F3"},rose:{0:"#17090E",50:"#1F0C13",100:"#2A121B",200:"#3A1B28",300:"#4B2636",400:"#673449",500:"#EE457B",600:"#E52E69",700:"#FF558A",800:"#FFA9C6",900:"#FFE0EA"}},Ca=e=>({...e,red:e.danger,error:e.danger,green:e.success,success:e.success,orange:e.orange,amber:e.amber,yellow:e.yellow,lime:e.lime,teal:e.teal,cyan:e.cyan,blue:e.blue,indigo:e.indigo,purple:e.purple,violet:e.purple,magenta:e.magenta,fuchsia:e.magenta,pink:e.pink,rose:e.rose,gray:e.mono,grey:e.mono,neutral:e.mono}),Jn=(e,t)=>e==="light"?{appBg:t[0],panelBg:t[0],subtleBg:t[100],panelHover:t[50],subtleHover:t[200],overlayBg:"linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.525))",border:t[300]}:{appBg:t[0],panelBg:t[0],subtleBg:t[50],panelHover:t[50],subtleHover:t[100],overlayBg:"linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.75))",border:t[200]},Ko=e=>({primary:e[900],secondary:e[600],muted:e[500],onColors:{}}),_o=e=>({primary:e[900],secondary:e[700],muted:e[600],onColors:{}}),yc=["danger","success","warning","info","amber","orange","yellow","lime","green","teal","cyan","blue","indigo","purple","magenta","pink","rose"],Ra=e=>yc.reduce((t,n)=>(t[n]=e[n]??"#FFFFFF",t),{}),jo={spacing:ha,radius:ya,componentHeights:xa,typography:va,neutral:jr,palette:{...Ca(ga),primary:ga.mono},surface:Jn("light",jr),text:{...Ko(jr),onColors:{primary:"#FFFFFF",...Ra({yellow:"#000000"})}}},Ta={spacing:ha,radius:ya,componentHeights:xa,typography:va,neutral:Vr,palette:{...Ca(ba),primary:ba.mono},surface:Jn("dark",Vr),text:{..._o(Vr),onColors:{primary:"#FFFFFF",...Ra({yellow:"#000000"})}}};function Ea(e){let t=e,n=new Set;return {get:()=>t,set:o=>{t=o,n.forEach(r=>r());},subscribe:o=>(n.add(o),()=>n.delete(o))}}var ka={destructive:"danger",error:"danger",violet:"purple",fuchsia:"magenta",gray:"mono",grey:"mono",neutral:"mono"},ct=e=>ka[e]??e;function tn(e){let t={...e};return Object.entries(ka).forEach(([n,o])=>{t[o]!=null&&t[n]==null&&(t[n]=t[o]);}),t}var Ma=de.createContext(null),Fa=de.createContext(null),Aa=de.createContext({setMode:e=>{},toggleMode:()=>{}}),Pa=de.createContext({setPrimary:e=>{}}),Da=de.createContext(null);function j(){return useTheme()}function Cc(){let e=de.useContext(Ma);if(!e)throw new Error("useColorMode must be used within ThemeProvider");let t=de.useContext(Aa),[n,o]=de.useState(()=>e.get());return de.useEffect(()=>{o(e.get());let r=e.subscribe(()=>o(e.get()));return ()=>{r();}},[e]),{mode:n,setMode:t.setMode,toggleMode:t.toggleMode}}function Rc(){let e=de.useContext(Fa);if(!e)throw new Error("usePrimary must be used within ThemeProvider");let t=de.useContext(Pa),[n,o]=de.useState(()=>e.get());return de.useEffect(()=>{o(e.get());let r=e.subscribe(()=>o(e.get()));return ()=>{r();}},[e]),{primary:n,setPrimary:t.setPrimary}}function cb(e){let t=de.useContext(Da);if(!t)throw new Error("usePrimitives must be used within ThemeProvider");let{mode:n}=Cc(),{primary:o}=Rc(),r=de.useMemo(()=>{let s=n==="light"?t.light:t.dark,i=s.palette[ct(o)]??s.palette.primary,u=tn(s.text.onColors)[ct(o)]??qr(i[600]);return {...s,palette:{...s.palette,primary:i},text:{...s.text,onColors:{...tn(s.text.onColors),primary:u,[ct(o)]:u,[o]:u}}}},[t,n,o]);return e?e(r):r}function Vo(e,t){if(!t)return e;let n={...e.palette};if(t.palette)for(let o of Object.keys(t.palette)){let r=t.palette[o];r&&(n[o]={...e.palette[o]??{},...r});}return {...e,spacing:{...e.spacing,...t.spacing??{}},radius:{...e.radius,...t.radius??{}},componentHeights:{...e.componentHeights,...t.componentHeights??{}},typography:{fonts:{...e.typography.fonts,...t.typography?.fonts??{}},sizes:{...e.typography.sizes,...t.typography?.sizes??{}}},palette:n,neutral:t.neutral?{...e.neutral,...t.neutral}:e.neutral,surface:{...e.surface,...t.surface??{}},text:{...e.text,...t.text??{},onColors:{...e.text.onColors,...t.text?.onColors??{}}}}}function qr(e){let t=e.replace("#",""),n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16),r=parseInt(t.slice(4,6),16),s=u=>{let a=u/255;return a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4)};return .2126*s(n)+.7152*s(o)+.0722*s(r)>.53?"#000":"#FFF"}function Sa(e,t){if(e.current)return;let n=document.createElement("style");n.id=t,document.head.appendChild(n),e.current=n;}function Ur(e){return e?`[data-pfui-scope="${e}"]`:":root"}function Gr(e,t,n){let o=[],r=a=>a.startsWith("var(")?a.replace(/^var\([^,]+,\s*/,"").replace(/\)\s*$/,"").trim():a;o.push(`--pf-font-sans:${r(e.typography.fonts.sans)};`),o.push(`--pf-font-mono:${r(e.typography.fonts.mono)};`),o.push(`--pf-text-primary:${e.text.primary};`),o.push(`--pf-text-secondary:${e.text.secondary};`),o.push(`--pf-text-muted:${e.text.muted};`),Object.entries(e.text.onColors).forEach(([a,l])=>o.push(`--pf-text-on-${a}:${l};`)),Object.entries(e.spacing).forEach(([a,l])=>o.push(`--pf-space-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.radius).forEach(([a,l])=>o.push(`--pf-radius-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.typography.sizes).forEach(([a,l])=>o.push(`--pf-fontSize-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.componentHeights).forEach(([a,l])=>o.push(`--pf-cmph-${a}:${typeof l=="number"?`${l}px`:l};`)),Object.entries(e.neutral).forEach(([a,l])=>o.push(`--pf-neutral-${a}:${l};`)),o.push(`--pf-surface-appBg:${e.surface.appBg};`),o.push(`--pf-surface-panelBg:${e.surface.panelBg};`),o.push(`--pf-surface-subtleBg:${e.surface.subtleBg};`),o.push(`--pf-surface-panelHover:${e.surface.panelHover};`),o.push(`--pf-surface-subtleHover:${e.surface.subtleHover};`),o.push(`--pf-surface-overlayBg:${e.surface.overlayBg};`),o.push(`--pf-surface-border:${e.surface.border};`),o.push("--pf-focus-main:var(--pf-neutral-400);"),o.push(n==="dark"?"--pf-focus-soft:var(--pf-neutral-200);":"--pf-focus-soft:var(--pf-neutral-300);"),Object.entries(e.palette).forEach(([a,l])=>{Object.entries(l).forEach(([c,p])=>{o.push(`--pf-palette-${a}-${c}:${p};`);});});let s="300";Object.keys(e.palette).forEach(a=>{o.push(`--pf-focus-${a}-main: var(--pf-palette-${a}-${s});`),o.push(`--pf-focus-${a}-soft: transparent;`);});let i=t;[0,50,100,200,300,400,500,600,700,800,900].forEach(a=>o.push(`--pf-primary-${a}:var(--pf-palette-${i}-${a});`)),o.push("--pf-focus-accent-main:var(--pf-primary-300);"),o.push("--pf-focus-accent-soft: transparent;");let u=e.text.onColors[i]??(()=>{let l=(e.palette[i]?.[600]??e.palette.primary[600]).replace("#",""),c=parseInt(l.slice(0,2),16),p=parseInt(l.slice(2,4),16),h=parseInt(l.slice(4,6),16),f=I=>{let x=I/255;return x<=.03928?x/12.92:Math.pow((x+.055)/1.055,2.4)};return .2126*f(c)+.7152*f(p)+.0722*f(h)>.53?"#000":"#FFF"})();return o.push(`--pf-text-on-primary:${u};`),o.push(`color-scheme:${n==="dark"?"dark":"light"};`),o}function Uo(e,t,n){return Gr(e,t,n).join("")}var Xr=e=>{for(let t=e.style.length-1;t>=0;t--){let n=e.style.item(t);n&&n.startsWith("--pf-")&&e.style.removeProperty(n);}},Ia=(e,t)=>{Xr(e);for(let n of t){let o=n.indexOf(":");if(o===-1)continue;let r=n.slice(0,o).trim(),s=n.slice(o+1).trim();s.endsWith(";")&&(s=s.slice(0,-1)),r&&e.style.setProperty(r,s);}},qo=(e,t)=>{e.classList.toggle("pf-light",t==="light"),e.classList.toggle("pf-dark",t==="dark");},Na=({children:e,theme:t,initialMode:n="light",storageKey:o="pfui:pref",scope:r})=>{let s=!!r,i=t?.primaryKey??"mono",a=useRef((()=>{if(!s)try{let b=JSON.parse(localStorage.getItem(o)||"null");if(b?.mode==="light"||b?.mode==="dark")return b.mode}catch{}return n==="system"?window.matchMedia?.("(prefers-color-scheme: dark)").matches?"dark":"light":n??"light"})()),l=de.useMemo(()=>Ea(a.current),[]),c=de.useMemo(()=>Ea(i),[]);de.useLayoutEffect(()=>{c.get()!==i&&c.set(i);},[i,c]);let p=useRef(null),h=useRef(0),f=useRef(r??"__root__");de.useLayoutEffect(()=>{let b=0,y=p.current;for(;y&&y!==document.body;)y.hasAttribute("data-pfui-scope")&&b++,y=y.parentElement;h.current=b;},[r]);let R=useMemo(()=>{let b=Vo(jo,t),y=Vo(b,t?.light),P=t?.light?.primaryKey??i,H=ct(P),L=y.palette.primary??y.palette[H]??y.palette.mono,E=tn({...Ko(y.neutral).onColors,...y.text.onColors}),S=E[H]??qr(L[600]),z=t?.surface||t?.light?.surface?y.surface:Jn("light",y.neutral),K={...t?.text||t?.light?.text?y.text:Ko(y.neutral),onColors:tn({...E,primary:S,[H]:S})};return {...y,palette:{...y.palette,primary:L},surface:z,text:K}},[t,i]),I=useMemo(()=>{let b=Vo(Ta,t),y=Vo(b,t?.dark),P=t?.dark?.primaryKey??i,H=ct(P),L=y.palette.primary??y.palette[H]??y.palette.mono,E=tn({..._o(y.neutral).onColors,...y.text.onColors}),S=E[H]??qr(L[600]),z=t?.surface||t?.dark?.surface?y.surface:Jn("dark",y.neutral),K={...t?.text||t?.dark?.text?y.text:_o(y.neutral),onColors:tn({...E,primary:S,[H]:S})};return {...y,palette:{...y.palette,primary:L},surface:z,text:K}},[t,i]),x=useRef(null),C=useRef(null),g=de.useInsertionEffect||de.useLayoutEffect,d=useCallback(()=>{let b=Ur(r);Sa(C,s?`pfui-guard-${r}`:"pfui-guard-root"),C.current.textContent=`${b} *{transition:none!important;animation:none!important}`,requestAnimationFrame(()=>{C.current.textContent="";});},[r,s]);g(()=>{Sa(x,s?`pfui-vars-${r}`:"pfui-vars-root");let b=t?.light?.primaryKey??t?.primaryKey??i,y=t?.dark?.primaryKey??t?.primaryKey??i,P=Ur(r),H=Uo(R,ct(b),"light"),L=Uo(I,ct(y),"dark");x.current.textContent=`${P}.pf-light{${H}}
 ${P}.pf-dark{${L}}`+(s?`
 ${P}{background:var(--pf-surface-appBg);color:var(--pf-text-primary);}`:"");},[R,I,t?.primaryKey,t?.light?.primaryKey,t?.dark?.primaryKey,r,s,i]);let m=useRef(false);de.useLayoutEffect(()=>{if(m.current)return;m.current=true;let b=s?p.current:document.documentElement;b&&(Xr(b),qo(b,a.current),b.setAttribute("data-pfui-mode",a.current),b.setAttribute("data-pfui-primary",c.get()),l.set(a.current));},[s,l,c]);let v=useCallback(()=>{window.__pfuiActiveScope={id:f.current,depth:h.current,ts:Date.now()};},[]),D=useCallback(()=>{let b=s?p.current:document.documentElement,y={capture:true},P=()=>v();return b?.addEventListener("pointerdown",P,y),b?.addEventListener("mouseenter",P,y),b?.addEventListener("focusin",P,y),b?.addEventListener("keydown",P,y),()=>{b?.removeEventListener("pointerdown",P,y),b?.removeEventListener("mouseenter",P,y),b?.removeEventListener("focusin",P,y),b?.removeEventListener("keydown",P,y);}},[s,v]),T=useCallback(b=>{let y=window.__pfuiActiveScope,P=y&&Date.now()-y.ts<1500;if(!y||!P||y.id!==f.current)return;let H=l.get(),L=c.get(),S=Gr(H==="light"?R:I,ct(L),H);Ia(b,S),qo(b,H),b.setAttribute("data-pfui-portal-owner",f.current),b.setAttribute("data-pfui-mode",H),b.setAttribute("data-pfui-primary",L);},[l,c,R,I]),w=b=>{if(b.getAttribute("data-floating-ui-portal")==="true"||b.getAttribute("data-radix-portal")==="true"||b.getAttribute("data-portal")==="true")return  true;let y=b.getAttribute("role");if(y==="tooltip"||y==="dialog")return  true;let P=window.getComputedStyle(b);return P.position==="fixed"||P.position==="absolute"},F=useCallback(()=>{let b=new MutationObserver(y=>{for(let P of y)P.addedNodes.forEach(H=>{H instanceof HTMLElement&&(w(H)&&T(H),H.querySelectorAll('[data-floating-ui-portal="true"],[data-radix-portal="true"],[data-portal="true"],[role="tooltip"],[role="dialog"]').forEach(L=>T(L)));});});return b.observe(document.body,{childList:true,subtree:true}),()=>b.disconnect()},[T]);de.useEffect(()=>{let b=D(),y=F();return ()=>{b(),y();}},[D,F]);let B=useCallback(b=>{let y=s?p.current:document.documentElement;y&&(Xr(y),qo(y,b),y.setAttribute("data-pfui-mode",b),y.setAttribute("data-pfui-primary",c.get()));},[s,c]),W=useCallback(b=>{let y=ct(c.get()),H=Gr(b==="light"?R:I,y,b);document.querySelectorAll(`[data-pfui-portal-owner="${f.current}"]`).forEach(L=>{Ia(L,H),qo(L,b),L.setAttribute("data-pfui-mode",b),L.setAttribute("data-pfui-primary",y);});},[R,I,c]);de.useLayoutEffect(()=>{W(l.get());},[W,R,I,i,l]);let O=useCallback(b=>{if(l.get()!==b&&(d(),l.set(b),B(b),W(b),!s))try{let y=JSON.parse(localStorage.getItem(o)||"{}");localStorage.setItem(o,JSON.stringify({...y,mode:b}));}catch{}},[l,s,o,d,B,W]),k=useCallback(()=>O(l.get()==="light"?"dark":"light"),[O,l]),A=useCallback(b=>{c.set(b);let y=Ur(r),P=Uo(R,ct(b),"light"),H=Uo(I,ct(b),"dark");x.current&&(x.current.textContent=`${y}.pf-light{${P}}
 ${y}.pf-dark{${H}}`+(s?`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plainframe-ui",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "Beautiful React component library with built-in theming, animations, and accessibility",
   "author": "Plainframe",
   "license": "MIT",