utility-css-library
Version:
Modern utility CSS library with intelligent theming, automatic contrast calculation, and seamless dark/light mode support
2 lines • 34.7 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DesignSystem=t():e.DesignSystem=t()}(this,function(){return function(){"use strict";var e,t={211:function(e,t,r){r.r(t)},675:function(e,t,r){function o(e){const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function i(e){const t=o(e);if(!t)return 0;const{r:r,g:i,b:s}=t,[n,a,c]=[r,i,s].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*n+.7152*a+.0722*c}function s(e,t){const r=i(e),o=i(t);return(Math.max(r,o)+.05)/(Math.min(r,o)+.05)}function n(e){return s(e,"#FFFFFF")>s(e,"#000000")?"#FFFFFF":"#000000"}function a(e,t){const r=o(e);return r?`rgba(${r.r}, ${r.g}, ${r.b}, ${t})`:e}function c(e,t){const r=o(e);if(!r)return e;const i=Math.max(0,r.r-Math.round(255*t)),s=Math.max(0,r.g-Math.round(255*t)),n=Math.max(0,r.b-Math.round(255*t));return`#${i.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}${n.toString(16).padStart(2,"0")}`}function d(e,t){const r=o(e);if(!r)return e;const i=Math.min(255,r.r+Math.round(255*t)),s=Math.min(255,r.g+Math.round(255*t)),n=Math.min(255,r.b+Math.round(255*t));return`#${i.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}${n.toString(16).padStart(2,"0")}`}function l(e){return{DEFAULT:e,foreground:n(e),hover:c(e,.1),pressed:c(e,.2),focus:a(e,.2),10:a(e,.1),20:a(e,.2),30:a(e,.3),50:a(e,.5),70:a(e,.7),subtle:d(e,.4),muted:a(e,.6),emphasis:c(e,.15)}}r.r(t),r.d(t,{BASE_COLORS:function(){return u},addOpacity:function(){return a},createThemeAwareColor:function(){return l},darkTokens:function(){return h},darken:function(){return c},defaultTokens:function(){return m},getContrastRatio:function(){return s},getLuminance:function(){return i},getOptimalTextColor:function(){return n},getThemeTokens:function(){return f},hexToRgb:function(){return o},lighten:function(){return d},themes:function(){return p}});const u={primary:"#6C5CE7",doom:"#2B2B2B",white:"#FFFFFF",critical:"#E62E5C",warning:"#E6E35C",success:"#37B26C",interactive:"#0984E3"},m={colors:{primary:l(u.primary),doom:l(u.doom),white:l(u.white),critical:l(u.critical),warning:l(u.warning),success:l(u.success),interactive:l(u.interactive),neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",800:"#262626",900:"#171717",950:"#0a0a0a"},surface:{background:"#ffffff",foreground:"#09090b",card:"#ffffff",popover:"#ffffff",modal:"#ffffff",hover:"#f4f4f5",pressed:"#e4e4e7",focus:"#f1f5f9",border:"#e4e4e7",divider:"#f1f5f9"},text:{primary:"#09090b",secondary:"#71717a",tertiary:"#a1a1aa",inverse:"#fafafa",disabled:"#d4d4d8",placeholder:"#a1a1aa",link:"#2563eb",linkHover:"#1d4ed8"},border:{default:"#e4e4e7",subtle:"#f1f5f9",strong:"#d4d4d8",interactive:"#2563eb",focus:"#3b82f6",error:"#ef4444",warning:"#f59e0b",success:"#10b981"},light:{background:"#ffffff",foreground:"#09090b",surface:{primary:"#ffffff",secondary:"#f8fafc",tertiary:"#f1f5f9",elevated:"#ffffff",overlay:"rgba(0, 0, 0, 0.5)"},text:{primary:"#09090b",secondary:"#64748b",tertiary:"#94a3b8",inverse:"#ffffff",disabled:"#cbd5e1",placeholder:"#94a3b8"},border:{default:"#e2e8f0",subtle:"#f1f5f9",strong:"#cbd5e1",focus:"#3b82f6"}},dark:{background:"#09090b",foreground:"#fafafa",surface:{primary:"#09090b",secondary:"#1a1a1a",tertiary:"#262626",elevated:"#1a1a1a",overlay:"rgba(0, 0, 0, 0.8)"},text:{primary:"#fafafa",secondary:"#a1a1aa",tertiary:"#71717a",inverse:"#09090b",disabled:"#52525b",placeholder:"#71717a"},border:{default:"#27272a",subtle:"#1a1a1a",strong:"#3f3f46",focus:"#3b82f6"}}},typography:{fontFamily:{sans:["Inter","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","sans-serif"],serif:["Georgia","Cambria","Times New Roman","Times","serif"],mono:["Fira Code","Monaco","Consolas","Liberation Mono","Courier New","monospace"]},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:100,light:300,normal:400,medium:500,semibold:600,bold:700,extrabold:800,black:900},lineHeight:{none:1,tight:1.25,snug:1.375,normal:1.5,relaxed:1.625,loose:2},letterSpacing:{tighter:"-0.05em",tight:"-0.025em",normal:"0em",wide:"0.025em",wider:"0.05em",widest:"0.1em"}},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",9:"2.25rem",10:"2.5rem",11:"2.75rem",12:"3rem",14:"3.5rem",16:"4rem",20:"5rem",24:"6rem",28:"7rem",32:"8rem",36:"9rem",40:"10rem",44:"11rem",48:"12rem",52:"13rem",56:"14rem",60:"15rem",64:"16rem",72:"18rem",80:"20rem",96:"24rem"},shadows:{sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",base:"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",none:"0 0 #0000"},borders:{width:{0:"0px",1:"1px",2:"2px",4:"4px",8:"8px"},radius:{none:"0px",sm:"0.125rem",base:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem","3xl":"1.5rem",full:"9999px"}},transitions:{duration:{75:"75ms",100:"100ms",150:"150ms",200:"200ms",300:"300ms",500:"500ms",700:"700ms",1e3:"1000ms"},timing:{linear:"linear",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)"}},breakpoints:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},zIndex:{auto:"auto",0:0,10:10,20:20,30:30,40:40,50:50}},h={...m,colors:{...m.colors,surface:{background:"#09090b",foreground:"#fafafa",card:"#0a0a0a",popover:"#09090b",modal:"#0a0a0a",hover:"#1a1a1a",pressed:"#262626",focus:"#1e293b",border:"#27272a",divider:"#1a1a1a"},text:{primary:"#fafafa",secondary:"#a1a1aa",tertiary:"#71717a",inverse:"#09090b",disabled:"#52525b",placeholder:"#71717a",link:"#60a5fa",linkHover:"#93c5fd"},border:{default:"#27272a",subtle:"#1a1a1a",strong:"#3f3f46",interactive:"#3b82f6",focus:"#60a5fa",error:"#ef4444",warning:"#f59e0b",success:"#10b981"}}},p={default:{light:m,dark:h}};function f(e="default",t="light"){return p[e][t]}},874:function(e,t,r){var o=r(675);const i=new class{constructor(){this.currentTheme="default",this.currentMode="light",this.listeners=new Set,this.tokens=(0,o.getThemeTokens)("default","light"),this.initializeTheme()}initializeTheme(){const e=localStorage.getItem("theme"),t=localStorage.getItem("theme-mode");e&&(this.currentTheme=e),this.currentMode=t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),this.tokens=(0,o.getThemeTokens)(this.currentTheme,this.currentMode),this.applyTheme(),this.setupSystemThemeListener()}setupSystemThemeListener(){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme-mode")||this.setMode(e.matches?"dark":"light")})}setTheme(e){this.currentTheme=e,localStorage.setItem("theme",e),this.tokens=(0,o.getThemeTokens)(e,this.currentMode),this.applyTheme(),this.notifyListeners()}setMode(e){this.currentMode=e,localStorage.setItem("theme-mode",e),this.tokens=(0,o.getThemeTokens)(this.currentTheme,e),this.applyTheme(),this.notifyListeners()}toggleMode(){this.setMode("light"===this.currentMode?"dark":"light")}getCurrentTheme(){return this.currentTheme}getCurrentMode(){return this.currentMode}getTokens(){return this.tokens}applyTheme(){const e=document.documentElement,t=this.tokens.colors;this.setCSSProperty(e,"--color-primary",t.primary.DEFAULT),this.setCSSProperty(e,"--color-primary-foreground",t.primary.foreground),this.setCSSProperty(e,"--color-primary-hover",t.primary.hover),this.setCSSProperty(e,"--color-primary-pressed",t.primary.pressed),this.setCSSProperty(e,"--color-primary-focus",t.primary.focus),this.setCSSProperty(e,"--color-primary-subtle",t.primary.subtle),this.setCSSProperty(e,"--color-primary-muted",t.primary.muted),this.setCSSProperty(e,"--color-primary-emphasis",t.primary.emphasis),this.setCSSProperty(e,"--color-primary-10",t.primary[10]),this.setCSSProperty(e,"--color-primary-20",t.primary[20]),this.setCSSProperty(e,"--color-primary-30",t.primary[30]),this.setCSSProperty(e,"--color-primary-50",t.primary[50]),this.setCSSProperty(e,"--color-primary-70",t.primary[70]),this.setCSSProperty(e,"--color-doom",t.doom.DEFAULT),this.setCSSProperty(e,"--color-doom-foreground",t.doom.foreground),this.setCSSProperty(e,"--color-doom-hover",t.doom.hover),this.setCSSProperty(e,"--color-doom-pressed",t.doom.pressed),this.setCSSProperty(e,"--color-white",t.white.DEFAULT),this.setCSSProperty(e,"--color-white-foreground",t.white.foreground),this.setCSSProperty(e,"--color-critical",t.critical.DEFAULT),this.setCSSProperty(e,"--color-critical-foreground",t.critical.foreground),this.setCSSProperty(e,"--color-critical-hover",t.critical.hover),this.setCSSProperty(e,"--color-critical-pressed",t.critical.pressed),this.setCSSProperty(e,"--color-critical-subtle",t.critical.subtle),this.setCSSProperty(e,"--color-warning",t.warning.DEFAULT),this.setCSSProperty(e,"--color-warning-foreground",t.warning.foreground),this.setCSSProperty(e,"--color-warning-hover",t.warning.hover),this.setCSSProperty(e,"--color-warning-pressed",t.warning.pressed),this.setCSSProperty(e,"--color-warning-subtle",t.warning.subtle),this.setCSSProperty(e,"--color-success",t.success.DEFAULT),this.setCSSProperty(e,"--color-success-foreground",t.success.foreground),this.setCSSProperty(e,"--color-success-hover",t.success.hover),this.setCSSProperty(e,"--color-success-pressed",t.success.pressed),this.setCSSProperty(e,"--color-success-subtle",t.success.subtle),this.setCSSProperty(e,"--color-interactive",t.interactive.DEFAULT),this.setCSSProperty(e,"--color-interactive-foreground",t.interactive.foreground),this.setCSSProperty(e,"--color-interactive-hover",t.interactive.hover),this.setCSSProperty(e,"--color-interactive-pressed",t.interactive.pressed),this.setCSSProperty(e,"--color-interactive-subtle",t.interactive.subtle);const r="dark"===this.currentMode?t.dark:t.light;this.setCSSProperty(e,"--color-background",r.background),this.setCSSProperty(e,"--color-foreground",r.foreground),this.setCSSProperty(e,"--color-surface-primary",r.surface.primary),this.setCSSProperty(e,"--color-surface-secondary",r.surface.secondary),this.setCSSProperty(e,"--color-surface-tertiary",r.surface.tertiary),this.setCSSProperty(e,"--color-surface-elevated",r.surface.elevated),this.setCSSProperty(e,"--color-surface-overlay",r.surface.overlay),this.setCSSProperty(e,"--color-text-primary",r.text.primary),this.setCSSProperty(e,"--color-text-secondary",r.text.secondary),this.setCSSProperty(e,"--color-text-tertiary",r.text.tertiary),this.setCSSProperty(e,"--color-text-inverse",r.text.inverse),this.setCSSProperty(e,"--color-text-disabled",r.text.disabled),this.setCSSProperty(e,"--color-text-placeholder",r.text.placeholder),this.setCSSProperty(e,"--color-border-default",r.border.default),this.setCSSProperty(e,"--color-border-subtle",r.border.subtle),this.setCSSProperty(e,"--color-border-strong",r.border.strong),this.setCSSProperty(e,"--color-border-focus",r.border.focus),this.setCSSProperty(e,"--color-surface-background",t.surface.background),this.setCSSProperty(e,"--color-surface-foreground",t.surface.foreground),this.setCSSProperty(e,"--color-surface-card",t.surface.card),this.setCSSProperty(e,"--color-surface-popover",t.surface.popover),this.setCSSProperty(e,"--color-surface-modal",t.surface.modal),this.setCSSProperty(e,"--color-surface-hover",t.surface.hover),this.setCSSProperty(e,"--color-surface-pressed",t.surface.pressed),this.setCSSProperty(e,"--color-surface-border",t.surface.border),this.setCSSProperty(e,"--color-surface-divider",t.surface.divider);const o=this.tokens.typography;this.setCSSProperty(e,"--font-family-sans",o.fontFamily.sans.join(", ")),this.setCSSProperty(e,"--font-family-serif",o.fontFamily.serif.join(", ")),this.setCSSProperty(e,"--font-family-mono",o.fontFamily.mono.join(", ")),Object.entries(o.fontSize).forEach(([t,r])=>{this.setCSSProperty(e,`--font-size-${t}`,r)}),Object.entries(o.fontWeight).forEach(([t,r])=>{this.setCSSProperty(e,`--font-weight-${t}`,r.toString())}),Object.entries(o.lineHeight).forEach(([t,r])=>{this.setCSSProperty(e,`--line-height-${t}`,r.toString())}),Object.entries(this.tokens.spacing).forEach(([t,r])=>{this.setCSSProperty(e,`--spacing-${t.replace(".","-")}`,r)}),Object.entries(this.tokens.borders.radius).forEach(([t,r])=>{this.setCSSProperty(e,`--border-radius-${t}`,r)}),Object.entries(this.tokens.borders.width).forEach(([t,r])=>{this.setCSSProperty(e,`--border-width-${t}`,r)}),Object.entries(this.tokens.shadows).forEach(([t,r])=>{this.setCSSProperty(e,`--shadow-${t}`,r)}),Object.entries(this.tokens.transitions.duration).forEach(([t,r])=>{this.setCSSProperty(e,`--transition-duration-${t}`,r)}),Object.entries(this.tokens.transitions.timing).forEach(([t,r])=>{this.setCSSProperty(e,`--transition-timing-${t}`,r)}),Object.entries(this.tokens.breakpoints).forEach(([t,r])=>{this.setCSSProperty(e,`--breakpoint-${t}`,r)}),e.classList.remove("light","dark"),e.classList.add(this.currentMode),e.setAttribute("data-theme",this.currentTheme),e.setAttribute("data-mode",this.currentMode)}setCSSProperty(e,t,r){e.style.setProperty(t,r)}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notifyListeners(){this.listeners.forEach(e=>{e(this.currentTheme,this.currentMode,this.tokens)})}getColor(e){const t=e.split(".");let r=this.tokens.colors;for(const e of t){if(!r||"object"!=typeof r||!(e in r))return;r=r[e]}return"string"==typeof r?r:void 0}getSpacing(e){return this.tokens.spacing[e]}getTypography(e,t){const r=this.tokens.typography[e];if(r&&"object"==typeof r)return r[t]}getOptimalTextColor(e){const{getOptimalTextColor:t}=r(675);return t(e)}isDarkMode(){return"dark"===this.currentMode}getSemanticColor(e,t="DEFAULT"){return this.tokens.colors[e][t]}};"undefined"!=typeof window&&(window.themeManager=i);class s{constructor(){this.observers=new Set,this.tokens=(0,o.getThemeTokens)("default","light"),this.setupThemeListener()}setupThemeListener(){i.subscribe((e,t,r)=>{this.tokens=r,this.notifyObservers()})}getTokens(){return{...this.tokens}}getColor(e){const t=e.split(".");let r=this.tokens.colors;for(const e of t){if(!r||"object"!=typeof r||!(e in r))return;r=r[e]}return"string"==typeof r?r:void 0}getSemanticColor(e,t="DEFAULT"){return this.tokens.colors[e][t]}getSpacing(e){return this.tokens.spacing[e]}getTypography(e,t){const r=this.tokens.typography[e];if(r&&"object"==typeof r)return r[t]}getShadow(e){return this.tokens.shadows[e]}getBorderRadius(e){return this.tokens.borders.radius[e]}getBorderWidth(e){return this.tokens.borders.width[e]}getTransitionDuration(e){return this.tokens.transitions.duration[e]}getTransitionTiming(e){return this.tokens.transitions.timing[e]}getBreakpoint(e){return this.tokens.breakpoints[e]}getZIndex(e){return this.tokens.zIndex[e]}generateCSSCustomProperties(){const e=new Map,t=["DEFAULT","foreground","hover","pressed","focus","subtle","muted","emphasis","10","20","30","50","70"];["primary","doom","white","critical","warning","success","interactive"].forEach(r=>{t.forEach(t=>{const o=this.tokens.colors[r][t];if(o){const i="DEFAULT"===t?`--color-${r}`:`--color-${r}-${t}`;e.set(i,o)}})});const r="dark"===i.getCurrentMode()?this.tokens.colors.dark:this.tokens.colors.light;return e.set("--color-background",r.background),e.set("--color-foreground",r.foreground),Object.entries(r.surface).forEach(([t,r])=>{e.set(`--color-surface-${t}`,r)}),Object.entries(r.text).forEach(([t,r])=>{e.set(`--color-text-${t}`,r)}),Object.entries(r.border).forEach(([t,r])=>{e.set(`--color-border-${t}`,r)}),e.set("--font-family-sans",this.tokens.typography.fontFamily.sans.join(", ")),e.set("--font-family-serif",this.tokens.typography.fontFamily.serif.join(", ")),e.set("--font-family-mono",this.tokens.typography.fontFamily.mono.join(", ")),Object.entries(this.tokens.typography.fontSize).forEach(([t,r])=>{e.set(`--font-size-${t}`,r)}),Object.entries(this.tokens.typography.fontWeight).forEach(([t,r])=>{e.set(`--font-weight-${t}`,r.toString())}),Object.entries(this.tokens.typography.lineHeight).forEach(([t,r])=>{e.set(`--line-height-${t}`,r.toString())}),Object.entries(this.tokens.spacing).forEach(([t,r])=>{e.set(`--spacing-${t.replace(".","-")}`,r)}),Object.entries(this.tokens.borders.radius).forEach(([t,r])=>{e.set(`--border-radius-${t}`,r)}),Object.entries(this.tokens.borders.width).forEach(([t,r])=>{e.set(`--border-width-${t}`,r)}),Object.entries(this.tokens.shadows).forEach(([t,r])=>{e.set(`--shadow-${t}`,r)}),Object.entries(this.tokens.transitions.duration).forEach(([t,r])=>{e.set(`--transition-duration-${t}`,r)}),Object.entries(this.tokens.transitions.timing).forEach(([t,r])=>{e.set(`--transition-timing-${t}`,r)}),Object.entries(this.tokens.breakpoints).forEach(([t,r])=>{e.set(`--breakpoint-${t}`,r)}),e}generateCSSString(){const e=this.generateCSSCustomProperties();return`:root {\n${Array.from(e.entries()).map(([e,t])=>` ${e}: ${t};`).join("\n")}\n}`}applyCSSCustomProperties(){const e=this.generateCSSCustomProperties(),t=document.documentElement;e.forEach((e,r)=>{t.style.setProperty(r,e)})}getBreakpointMediaQuery(e,t="min"){return` (${t}-width: ${this.tokens.breakpoints[e]})`}isDarkMode(){return"dark"===i.getCurrentMode()}subscribe(e){return this.observers.add(e),()=>{this.observers.delete(e)}}notifyObservers(){this.observers.forEach(e=>{e(this.tokens)})}generateUtilityClasses(){const e={colors:{}};return["primary","doom","white","critical","warning","success","interactive"].forEach(t=>{e.colors[`bg-${t}`]={"background-color":`var(--color-${t})`,color:`var(--color-${t}-foreground)`},e.colors[`text-${t}`]={color:`var(--color-${t})`},e.colors[`border-${t}`]={"border-color":`var(--color-${t})`},e.colors[`hover\\:bg-${t}:hover`]={"background-color":`var(--color-${t}-hover)`,color:`var(--color-${t}-foreground)`}}),e.spacing={},Object.keys(this.tokens.spacing).forEach(t=>{const r=t.replace(".","-");e.spacing[`p-${r}`]={padding:`var(--spacing-${r})`},e.spacing[`m-${r}`]={margin:`var(--spacing-${r})`},e.spacing[`px-${r}`]={"padding-left":`var(--spacing-${r})`,"padding-right":`var(--spacing-${r})`},e.spacing[`py-${r}`]={"padding-top":`var(--spacing-${r})`,"padding-bottom":`var(--spacing-${r})`},e.spacing[`mx-${r}`]={"margin-left":`var(--spacing-${r})`,"margin-right":`var(--spacing-${r})`},e.spacing[`my-${r}`]={"margin-top":`var(--spacing-${r})`,"margin-bottom":`var(--spacing-${r})`}}),e.typography={},Object.keys(this.tokens.typography.fontSize).forEach(t=>{e.typography[`text-${t}`]={"font-size":`var(--font-size-${t})`}}),Object.keys(this.tokens.typography.fontWeight).forEach(t=>{e.typography[`font-${t}`]={"font-weight":`var(--font-weight-${t})`}}),e.borders={},Object.keys(this.tokens.borders.radius).forEach(t=>{e.borders[`rounded-${t}`]={"border-radius":`var(--border-radius-${t})`}}),e.shadows={},Object.keys(this.tokens.shadows).forEach(t=>{"none"!==t&&(e.shadows[`shadow-${t}`]={"box-shadow":`var(--shadow-${t})`})}),e.shadows["shadow-none"]={"box-shadow":"none"},e}}const n=new s;"undefined"!=typeof window&&(window.tokenManager=n);var a=r(165);const c={ACTION:"action",ALERT:"alert",AV:"av",COMMUNICATION:"communication",CONTENT:"content",DEVICE:"device",EDITOR:"editor",FILE:"file",HARDWARE:"hardware",IMAGE:"image",MAPS:"maps",NAVIGATION:"navigation",NOTIFICATION:"notification",PLACES:"places",SOCIAL:"social",TOGGLE:"toggle",TRANSPORTATION:"transportation",ACCOUNT:"account",ARROW:"arrow",CALENDAR:"calendar",CHART:"chart",CLOUD:"cloud",DATABASE:"database",FOOD:"food",GAME:"game",HOME:"home",MEDICAL:"medical",MUSIC:"music",SECURITY:"security",SHOPPING:"shopping",WEATHER:"weather",GENERAL:"general"},d="md",l="primary",u="inherit";function m(){return Object.keys(a).filter(e=>e.startsWith("mdi")).sort()}function h(){const e=new Map;return m().forEach(t=>{const r=function(e){const t=e.toLowerCase();return t.includes("account")||t.includes("user")||t.includes("person")||t.includes("profile")||t.includes("avatar")?c.ACCOUNT:t.includes("arrow")||t.includes("chevron")||t.includes("navigate")?c.ARROW:t.includes("calendar")||t.includes("clock")||t.includes("time")||t.includes("schedule")||t.includes("date")?c.CALENDAR:t.includes("chart")||t.includes("graph")||t.includes("analytics")||t.includes("trending")||t.includes("stats")?c.CHART:t.includes("cloud")||t.includes("server")||t.includes("network")||t.includes("wifi")||t.includes("signal")?c.CLOUD:t.includes("message")||t.includes("chat")||t.includes("mail")||t.includes("phone")||t.includes("comment")||t.includes("talk")?c.COMMUNICATION:t.includes("database")||t.includes("storage")||t.includes("backup")||t.includes("sync")||t.includes("download")||t.includes("upload")?c.DATABASE:t.includes("phone")||t.includes("tablet")||t.includes("computer")||t.includes("laptop")||t.includes("monitor")||t.includes("device")?c.DEVICE:t.includes("file")||t.includes("folder")||t.includes("document")||t.includes("pdf")||t.includes("attachment")?c.FILE:t.includes("food")||t.includes("restaurant")||t.includes("coffee")||t.includes("pizza")||t.includes("drink")?c.FOOD:t.includes("game")||t.includes("controller")||t.includes("dice")||t.includes("cards")||t.includes("puzzle")?c.GAME:t.includes("home")||t.includes("house")||t.includes("building")||t.includes("office")||t.includes("room")?c.HOME:t.includes("map")||t.includes("location")||t.includes("place")||t.includes("pin")||t.includes("marker")||t.includes("gps")?c.MAPS:t.includes("medical")||t.includes("health")||t.includes("hospital")||t.includes("heart")||t.includes("pill")||t.includes("doctor")?c.MEDICAL:t.includes("music")||t.includes("audio")||t.includes("sound")||t.includes("volume")||t.includes("speaker")||t.includes("headphone")?c.MUSIC:t.includes("menu")||t.includes("close")||t.includes("back")||t.includes("forward")||t.includes("next")||t.includes("previous")?c.NAVIGATION:t.includes("notification")||t.includes("alert")||t.includes("warning")||t.includes("error")||t.includes("bell")?c.NOTIFICATION:t.includes("security")||t.includes("lock")||t.includes("key")||t.includes("shield")||t.includes("password")?c.SECURITY:t.includes("shop")||t.includes("cart")||t.includes("store")||t.includes("basket")||t.includes("purchase")||t.includes("payment")?c.SHOPPING:t.includes("share")||t.includes("like")||t.includes("favorite")||t.includes("social")||t.includes("twitter")||t.includes("facebook")?c.SOCIAL:t.includes("car")||t.includes("bus")||t.includes("train")||t.includes("plane")||t.includes("bike")||t.includes("transport")?c.TRANSPORTATION:t.includes("weather")||t.includes("sun")||t.includes("rain")||t.includes("cloud")||t.includes("snow")||t.includes("storm")?c.WEATHER:c.GENERAL}(t),o={name:t,category:r,tags:t.split("-"),aliases:[],version:"1.0.0"};e.set(t,o)}),e}function p(e){const t=h();return Array.from(t.values()).filter(t=>t.category===e).map(e=>e.name)}function f(e){const t=h(),r=e.toLowerCase();return Array.from(t.values()).filter(e=>e.name.includes(r)||e.tags.some(e=>e.includes(r))).map(e=>e.name)}h();const g={COMMON:["mdiHome","mdiAccount","mdiCog","mdiMagnify","mdiClose","mdiMenu","mdiArrowLeft","mdiArrowRight","mdiCheck","mdiPlus","mdiMinus","mdiPencil","mdiDelete","mdiDownload","mdiUpload","mdiShare"],NAVIGATION:["mdiArrowUp","mdiArrowDown","mdiArrowLeft","mdiArrowRight","mdiChevronUp","mdiChevronDown","mdiChevronLeft","mdiChevronRight","mdiMenu","mdiClose","mdiArrowLeft","mdiArrowRight"],ACTIONS:["mdiPlus","mdiMinus","mdiPencil","mdiDelete","mdiContentSave","mdiCancel","mdiCheck","mdiRefresh","mdiContentCopy","mdiContentPaste","mdiContentCut","mdiUndo","mdiRedo","mdiPrinter"],COMMUNICATION:["mdiEmail","mdiPhone","mdiMessage","mdiChat","mdiVideo","mdiMicrophone","mdiBell","mdiBell","mdiComment","mdiReply"],MEDIA:["mdiPlay","mdiPause","mdiStop","mdiSkipNext","mdiSkipPrevious","mdiVolumeHigh","mdiVolumeMedium","mdiVolumeOff","mdiImage","mdiVideo","mdiCamera"]};class y{constructor(e,t={}){this.config={size:t.size||d,color:t.color||u,className:t.className||"",title:t.title||e,ariaLabel:t.ariaLabel||e,interactive:t.interactive||!1,rotate:t.rotate||0,flip:t.flip||void 0},this.element=this.createSVGElement(e),this.applyConfiguration()}createSVGElement(e){console.log(`🔧 Creating SVG for icon: ${e}`);const t=function(e){if(e.startsWith("mdi"))return a[e]||null;const t=e.split("-").map((e,t)=>0===t?e:e.charAt(0).toUpperCase()+e.slice(1)).join(""),r=`mdi${t.charAt(0).toUpperCase()+t.slice(1)}`;return a[r]||null}(e);if(console.log(`🔧 Path data for ${e}:`,t?`${t.substring(0,50)}...`:"NULL"),!t)return console.warn(`Icon "${e}" not found in Material Design Icons`),this.createPlaceholderIcon(e);const r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.setAttribute("viewBox","0 0 24 24"),r.setAttribute("class","mdi-icon"),r.setAttribute("role","img"),r.setAttribute("aria-hidden","true");const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("d",t),o.setAttribute("fill","currentColor"),r.appendChild(o),console.log(`✅ SVG created for ${e}:`,r.outerHTML.substring(0,100)+"..."),r}createPlaceholderIcon(e){const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("viewBox","0 0 24 24"),t.setAttribute("class","mdi-icon mdi-icon--placeholder"),t.setAttribute("role","img"),t.setAttribute("aria-hidden","true");const r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("d","M10,19H13V22H10V19M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z"),r.setAttribute("fill","currentColor"),t.appendChild(r),t.setAttribute("title",`Icon "${e}" not found`),t}applyConfiguration(){const{size:e,color:t,className:r,title:o,ariaLabel:i,interactive:s,rotate:n,flip:a}=this.config;this.element.classList.add(`mdi-icon--${e}`),t!==u&&this.element.classList.add(`mdi-icon--${t}`),r&&this.element.classList.add(...r.split(" ")),o&&this.element.setAttribute("title",o),i&&(this.element.setAttribute("aria-label",i),this.element.setAttribute("aria-hidden","false")),s&&this.element.classList.add("mdi-icon--interactive");const c=[];if(0!==n&&c.push(`rotate(${n}deg)`),a)switch(a){case"horizontal":c.push("scaleX(-1)");break;case"vertical":c.push("scaleY(-1)");break;case"both":c.push("scaleX(-1) scaleY(-1)")}c.length>0&&(this.element.style.transform=c.join(" "))}updateConfig(e){this.config={...this.config,...e},this.element.setAttribute("class","mdi-icon"),this.applyConfiguration()}getElement(){return this.element}toString(){return this.element.outerHTML}clone(e){const t=this.element.getAttribute("title")||"unknown",r=e?{...this.config,...e}:this.config;return new y(t,r)}static create(e,t){return new y(e,t)}static createElement(e,t){return new y(e,t).getElement()}static createHTML(e,t){return new y(e,t).toString()}}class S{static navigation(e,t=d){return new y(e,{size:t,color:u,interactive:!0,className:"mdi-icon--navigation"})}static action(e,t=l){return new y(e,{size:d,color:t,interactive:!0,className:"mdi-icon--action"})}static status(e,t){return new y(e,{size:"sm",color:t,className:"mdi-icon--status"})}static decorative(e,t="lg"){return new y(e,{size:t,color:"secondary",className:"mdi-icon--decorative"})}static loading(e=d){return new y("loading",{size:e,color:l,className:"mdi-icon--loading"})}}class b{static renderInto(e,t,r){const o=new y(t,r);return e.appendChild(o.getElement()),o}static replacePlaceholders(e){const t=e.querySelectorAll("[data-icon]");console.log(`🔧 Found ${t.length} placeholders to replace`),t.forEach((e,t)=>{const r=e.getAttribute("data-icon"),o=e.getAttribute("data-icon-size"),i=e.getAttribute("data-icon-color"),s=e.getAttribute("data-icon-class");if(console.log(`🔧 Processing placeholder ${t+1}: iconName="${r}", size="${o}", color="${i}"`),r)try{const n=new y(r,{size:o,color:i,className:s||void 0}).getElement();console.log(`🔧 Created element for ${r}:`,n.outerHTML.substring(0,100)+"..."),e.parentNode?(e.parentNode.replaceChild(n,e),console.log(`✅ Replaced placeholder ${t+1} successfully`)):console.warn(`⚠️ Placeholder ${t+1} has no parent node`)}catch(e){console.error(`❌ Error creating icon for ${r}:`,e)}else console.warn(`⚠️ Placeholder ${t+1} has no data-icon attribute`)}),console.log("🔧 Placeholder replacement complete")}static createSprite(e){const t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.setAttribute("style","display: none;"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.forEach(e=>{const r=new y(e),o=document.createElementNS("http://www.w3.org/2000/svg","symbol");o.setAttribute("id",`icon-${e}`),o.setAttribute("viewBox","0 0 24 24");const i=r.getElement().querySelector("path");i&&o.appendChild(i.cloneNode(!0)),t.appendChild(o)}),t}static preloadIcons(e){const t=e.map(e=>new Promise(t=>{new y(e),t()}));return Promise.all(t)}static getSuggestions(e,t=10){return f(e).slice(0,t)}static iconExists(e){return m().includes(e)}static getRandomIcons(e,t=5){return(e?p(e):m()).sort(()=>.5-Math.random()).slice(0,t)}static createIconPicker(e,t,r={}){const{searchable:o=!0,categories:i,size:s=200}=r,n=document.createElement("div");if(n.className="icon-picker",o){const e=document.createElement("input");e.type="text",e.placeholder="Search icons...",e.className="icon-picker__search",e.addEventListener("input",e=>{const t=e.target.value;c(t?f(t).slice(0,s):[])}),n.appendChild(e)}const a=document.createElement("div");function c(e){a.innerHTML="",e.forEach(e=>{const r=document.createElement("div");r.className="icon-grid-item icon-picker__item";const o=new y(e,{size:"md"}),i=document.createElement("span");i.className="icon-name",i.textContent=e,r.appendChild(o.getElement()),r.appendChild(i),r.addEventListener("click",()=>{t(e)}),a.appendChild(r)})}a.className="icon-grid icon-picker__grid",n.appendChild(a),c(i?i.flatMap(e=>p(e)).slice(0,s):g.COMMON.slice(0,Math.min(s,g.COMMON.length))),e.appendChild(n)}}class C{constructor(e,t=[]){this.icons=new Map,this.name=e,t.forEach(e=>{this.add(e)})}add(e,t){const r=new y(e,t);this.icons.set(e,r)}get(e){return this.icons.get(e)}remove(e){return this.icons.delete(e)}getIconNames(){return Array.from(this.icons.keys())}getIcons(){return Array.from(this.icons.values())}createSprite(){return b.createSprite(this.getIconNames())}toCSSClasses(){const e=[];return this.icons.forEach((t,r)=>{const o=`icon-${r.replace(/[^a-zA-Z0-9]/g,"-")}`;e.push(`\n.${o}::before {\n content: "${t.toString()}";\n}\n `.trim())}),e.join("\n")}}const w={NAVIGATION:new C("navigation",["mdiMenu","mdiClose","mdiArrowLeft","mdiArrowRight","mdiArrowUp","mdiArrowDown","mdiChevronLeft","mdiChevronRight","mdiChevronUp","mdiChevronDown","mdiHome"]),ACTIONS:new C("actions",["mdiPlus","mdiMinus","mdiPencil","mdiDelete","mdiContentSave","mdiCancel","mdiCheck","mdiClose","mdiRefresh","mdiMagnify","mdiFilter","mdiSort","mdiContentCopy","mdiShare"]),COMMUNICATION:new C("communication",["mdiEmail","mdiPhone","mdiMessage","mdiChat","mdiVideo","mdiMicrophone","mdiSpeaker","mdiBell","mdiBell","mdiComment","mdiReply","mdiArrowRight"]),MEDIA:new C("media",["mdiPlay","mdiPause","mdiStop","mdiSkipNext","mdiSkipPrevious","mdiVolumeHigh","mdiVolumeLow","mdiVolumeOff","mdiImage","mdiVideo","mdiCamera","mdiMusic"]),FILES:new C("files",["mdiFile","mdiFolder","mdiFolderOpen","mdiDownload","mdiUpload","mdiAttachment","mdiFilePdf","mdiFileDocument","mdiImage","mdiArchive","mdiTrashCan","mdiRestore"]),STATUS:new C("status",["mdiCheckCircle","mdiAlertCircle","mdiInformation","mdiHelpCircle","mdiCloseCircle","mdiLoading","mdiCheck","mdiAlert","mdiCloseCircle","mdiClock"])},v={create:(e,t)=>new y(e,t),navigation:S.navigation,action:S.action,status:S.status,decorative:S.decorative,loading:S.loading,search:f,getByCategory:p,getAllNames:m,exists:b.iconExists,sets:w,categories:c,popular:g};"undefined"!=typeof window&&(window.MaterialIcons=v);const k="1.0.0",A=new s;async function E(){return console.log("🎨 Design System initializing..."),console.log("📦 Version:",k),console.log("✅ CSS utilities loaded"),console.log("🎯 Theme system ready"),console.log("🎨 Icon system ready - 7400+ Material Design Icons available"),console.log("🌓 Current theme:",i.getCurrentTheme(),i.getCurrentMode()),console.log("🚀 Design System initialized successfully!"),{themeManager:i,tokenManager:A,icons:a.default}}"undefined"!=typeof window&&E().then(()=>{window.themeManager=i,window.DesignSystem={themeManager:i,tokenManager:A,MaterialIcons:a.default,IconUtils:b,VERSION:k,initialize:E,isReady:!0},console.log("🌍 DesignSystem attached to window object"),console.log("📦 Available:",Object.keys(window.DesignSystem)),console.log("💫 All systems ready - Theme switching available!")})}},r={};function o(e){var i=r[e];if(void 0!==i)return i.exports;var s=r[e]={exports:{}};return t[e](s,s.exports,o),s.exports}o.m=t,e=[],o.O=function(t,r,i,s){if(!r){var n=1/0;for(l=0;l<e.length;l++){r=e[l][0],i=e[l][1],s=e[l][2];for(var a=!0,c=0;c<r.length;c++)(!1&s||n>=s)&&Object.keys(o.O).every(function(e){return o.O[e](r[c])})?r.splice(c--,1):(a=!1,s<n&&(n=s));if(a){e.splice(l--,1);var d=i();void 0!==d&&(t=d)}}return t}s=s||0;for(var l=e.length;l>0&&e[l-1][2]>s;l--)e[l]=e[l-1];e[l]=[r,i,s]},o.d=function(e,t){for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},function(){var e={792:0};o.O.j=function(t){return 0===e[t]};var t=function(t,r){var i,s,n=r[0],a=r[1],c=r[2],d=0;if(n.some(function(t){return 0!==e[t]})){for(i in a)o.o(a,i)&&(o.m[i]=a[i]);if(c)var l=c(o)}for(t&&t(r);d<n.length;d++)s=n[d],o.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return o.O(l)},r=this.webpackChunkDesignSystem=this.webpackChunkDesignSystem||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),o.O(void 0,[96],function(){return o(874)});var i=o.O(void 0,[96],function(){return o(211)});return o.O(i)}()});
//# sourceMappingURL=main.92d28e0365aa6ee49373.js.map