@kpv2004/quark-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var H=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.prototype.hasOwnProperty;var U=(a,r)=>{for(var e in r)H(a,e,{get:r[e],enumerable:!0})},Z=(a,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of K(r))!Q.call(a,o)&&o!==e&&H(a,o,{get:()=>r[o],enumerable:!(t=J(r,o))||t.enumerable});return a};var _=a=>Z(H({},"__esModule",{value:!0}),a);var yr={};U(yr,{Alert:()=>T,Avatar:()=>A,Badge:()=>L,Button:()=>C,Card:()=>P,Input:()=>I,Spinner:()=>D,Toggle:()=>B});module.exports=_(yr);var j=require("react");var s={};var q=require("react/jsx-runtime"),ar={sm:s.sizeSm,md:s.sizeMd,lg:s.sizeLg},er={primary:s.variantPrimary,secondary:s.variantSecondary,outline:s.variantOutline,ghost:s.variantGhost,danger:s.variantDanger},C=(0,j.forwardRef)(({variant:a="primary",size:r="md",isLoading:e=!1,leftIcon:t,rightIcon:o,fullWidth:n=!1,disabled:i,className:m,children:k,type:h="button",...x},w)=>{let E=[s.button,ar[r],er[a],n?s.fullWidth:"",e?s.loading:"",m??""].filter(Boolean).join(" ");return(0,q.jsxs)("button",{ref:w,type:h,className:E,disabled:i||e,"aria-busy":e||void 0,"aria-disabled":i||e||void 0,...x,children:[e&&(0,q.jsx)("span",{className:s.spinnerWrapper,"aria-hidden":"true",children:(0,q.jsx)("span",{className:s.spinner})}),t&&(0,q.jsx)("span",{className:s.iconLeft,children:t}),k,o&&(0,q.jsx)("span",{className:s.iconRight,children:o})]})});C.displayName="Button";var u={};var V=require("react/jsx-runtime"),tr={default:u.variantDefault,outlined:u.variantOutlined,elevated:u.variantElevated,glass:u.variantGlass},nr={none:u.paddingNone,sm:u.paddingSm,md:u.paddingMd,lg:u.paddingLg},P=({variant:a="default",padding:r="md",hoverable:e=!1,className:t,children:o,...n})=>{let i=[u.card,tr[a],nr[r],e?u.hoverable:"",t??""].filter(Boolean).join(" ");return(0,V.jsx)("div",{className:i,...n,children:o})};P.displayName="Card";var R=require("react");var l={};var b=require("react/jsx-runtime"),sr={sm:l.sizeSm,md:l.sizeMd,lg:l.sizeLg},I=(0,R.forwardRef)(({label:a,error:r,helperText:e,leftIcon:t,rightIcon:o,size:n="md",variant:i="default",className:m,id:k,"aria-describedby":h,...x},w)=>{let E=(0,R.useId)(),S=k??E,W=r?`${S}-error`:void 0,O=e&&!r?`${S}-helper`:void 0,$=h??W??O??void 0,Y=[l.input,sr[n],i==="filled"?l.variantFilled:"",t?l.hasLeftIcon:"",o?l.hasRightIcon:"",r?l.inputError:"",m??""].filter(Boolean).join(" ");return(0,b.jsxs)("div",{className:l.wrapper,children:[a&&(0,b.jsx)("label",{htmlFor:S,className:l.label,children:a}),(0,b.jsxs)("div",{className:l.inputContainer,children:[t&&(0,b.jsx)("span",{className:l.leftIcon,"aria-hidden":"true",children:t}),(0,b.jsx)("input",{ref:w,id:S,className:Y,"aria-invalid":r?!0:void 0,"aria-describedby":$,...x}),o&&(0,b.jsx)("span",{className:l.rightIcon,"aria-hidden":"true",children:o})]}),r&&(0,b.jsx)("p",{id:W,className:l.errorText,role:"alert",children:r}),e&&!r&&(0,b.jsx)("p",{id:O,className:l.helperText,children:e})]})});I.displayName="Input";var X=require("react");var p={};var y=require("react/jsx-runtime"),dr={sm:p.sizeSm,md:p.sizeMd,lg:p.sizeLg},B=({checked:a=!1,onChange:r,size:e="md",label:t,disabled:o=!1,className:n})=>{let i=(0,X.useId)(),m=[p.wrapper,dr[e],o?p.disabled:"",n??""].filter(Boolean).join(" "),k=[p.track,a?p.trackChecked:""].filter(Boolean).join(" "),h=[p.thumb,a?p.thumbChecked:""].filter(Boolean).join(" "),x=w=>{o||r?.(w.target.checked)};return(0,y.jsxs)("label",{className:m,children:[(0,y.jsx)("input",{id:i,type:"checkbox",role:"switch",className:p.input,checked:a,disabled:o,onChange:x,"aria-checked":a}),(0,y.jsx)("span",{className:k,"aria-hidden":"true",children:(0,y.jsx)("span",{className:h})}),t&&(0,y.jsx)("span",{className:p.label,children:t})]})};B.displayName="Toggle";var c={};var M=require("react/jsx-runtime"),pr={sm:c.sizeSm,md:c.sizeMd,lg:c.sizeLg},gr={default:c.variantDefault,primary:c.variantPrimary,success:c.variantSuccess,warning:c.variantWarning,danger:c.variantDanger,info:c.variantInfo},L=({variant:a="default",size:r="md",dot:e=!1,outline:t=!1,className:o,children:n,...i})=>{let m=[c.badge,pr[r],gr[a],t?c.outline:"",o??""].filter(Boolean).join(" ");return(0,M.jsxs)("span",{className:m,...i,children:[e&&(0,M.jsx)("span",{className:`${c.dot} ${c.dotPulse}`,"aria-hidden":"true"}),n]})};L.displayName="Badge";var v={};var f=require("react-icons/fi"),g=require("react/jsx-runtime"),vr={info:v.variantInfo,success:v.variantSuccess,warning:v.variantWarning,danger:v.variantDanger},br={info:(0,g.jsx)(f.FiInfo,{}),success:(0,g.jsx)(f.FiCheckCircle,{}),warning:(0,g.jsx)(f.FiAlertTriangle,{}),danger:(0,g.jsx)(f.FiXCircle,{})},T=({variant:a="info",title:r,onClose:e,className:t,children:o,...n})=>{let i=[v.alert,vr[a],t??""].filter(Boolean).join(" ");return(0,g.jsxs)("div",{className:i,role:"alert",...n,children:[(0,g.jsx)("span",{className:v.icon,"aria-hidden":"true",children:br[a]}),(0,g.jsxs)("div",{className:v.content,children:[r&&(0,g.jsx)("h5",{className:v.title,children:r}),o&&(0,g.jsx)("div",{className:v.description,children:o})]}),e&&(0,g.jsx)("button",{type:"button",className:v.closeButton,onClick:e,"aria-label":"Dismiss alert",children:"\u2715"})]})};T.displayName="Alert";var G=require("react");var d={};var z=require("react/jsx-runtime"),fr={xs:d.sizeXs,sm:d.sizeSm,md:d.sizeMd,lg:d.sizeLg,xl:d.sizeXl},kr={circle:d.shapeCircle,square:d.shapeSquare},hr={online:d.statusOnline,offline:d.statusOffline,away:d.statusAway,busy:d.statusBusy},A=({src:a,alt:r="",fallback:e,size:t="md",shape:o="circle",status:n,className:i,...m})=>{let[k,h]=(0,G.useState)(!1),x=[d.avatar,fr[t],kr[o],i??""].filter(Boolean).join(" ");return(0,z.jsxs)("div",{className:x,...m,children:[a&&!k?(0,z.jsx)("img",{src:a,alt:r,className:d.image,onError:()=>h(!0)}):(0,z.jsx)("span",{className:d.fallback,children:e}),n&&(0,z.jsx)("span",{className:`${d.statusDot} ${hr[n]}`,"aria-label":n,role:"status"})]})};A.displayName="Avatar";var N={};var F=require("react/jsx-runtime"),qr={sm:N.sizeSm,md:N.sizeMd,lg:N.sizeLg},D=({size:a="md",color:r,style:e,className:t,...o})=>{let n=[N.spinner,qr[a],t??""].filter(Boolean).join(" "),i={...e,...r?{borderTopColor:r}:{}};return(0,F.jsx)("span",{className:n,style:i,role:"status",...o,children:(0,F.jsx)("span",{className:N.srOnly,children:"Loading..."})})};D.displayName="Spinner";0&&(module.exports={Alert,Avatar,Badge,Button,Card,Input,Spinner,Toggle});

package/dist/index.css

@@ -0,0 +1 @@
+.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--qk-space-2);border:1px solid transparent;font-family:var(--qk-font-sans);font-weight:var(--qk-font-semibold);line-height:var(--qk-leading-tight);letter-spacing:var(--qk-tracking-wide);cursor:pointer;user-select:none;white-space:nowrap;text-decoration:none;outline:none;transition-property:background-color,border-color,color,box-shadow,transform,opacity;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:active:not(:disabled){transform:scale(.97)}.button:focus-visible{box-shadow:0 0 0 var(--qk-focus-ring-offset) var(--qk-bg-app),0 0 0 calc(var(--qk-focus-ring-offset) + var(--qk-focus-ring-width)) var(--qk-focus-ring-color)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.sizeSm{height:32px;padding:0 var(--qk-space-3);font-size:var(--qk-text-xs);border-radius:var(--qk-radius-sm);gap:var(--qk-space-1-5)}.sizeMd{height:40px;padding:0 var(--qk-space-5);font-size:var(--qk-text-sm);border-radius:var(--qk-radius-md);gap:var(--qk-space-2)}.sizeLg{height:48px;padding:0 var(--qk-space-7);font-size:var(--qk-text-base);border-radius:var(--qk-radius-md);gap:var(--qk-space-2-5)}.variantPrimary{background:linear-gradient(135deg,var(--qk-color-primary-600),var(--qk-color-primary-500));color:#fff;border-color:#8b5cf633;box-shadow:var(--qk-shadow-sm)}.variantPrimary:hover:not(:disabled){background:linear-gradient(135deg,var(--qk-color-primary-500),var(--qk-color-primary-400));box-shadow:var(--qk-shadow-glow)}.variantSecondary{background-color:var(--qk-bg-surface-2);color:var(--qk-text-2);border-color:var(--qk-border-color)}.variantSecondary:hover:not(:disabled){background-color:var(--qk-bg-surface-3);color:var(--qk-text-1);border-color:var(--qk-border-color-hover)}.variantOutline{background-color:transparent;color:var(--qk-btn-outline-text);border-color:var(--qk-btn-outline-border)}.variantOutline:hover:not(:disabled){background-color:var(--qk-btn-outline-hover-bg);color:var(--qk-btn-outline-text);border-color:var(--qk-btn-outline-border)}.variantGhost{background-color:transparent;color:var(--qk-btn-outline-text);border-color:transparent}.variantGhost:hover:not(:disabled){background-color:var(--qk-btn-outline-hover-bg);color:var(--qk-btn-outline-text)}.variantDanger{background:linear-gradient(135deg,var(--qk-color-danger-600),var(--qk-color-danger-500));color:#fff;border-color:#f43f5e33;box-shadow:var(--qk-shadow-sm)}.variantDanger:hover:not(:disabled){background:linear-gradient(135deg,var(--qk-color-danger-500),var(--qk-color-danger-400));box-shadow:0 0 20px #f43f5e4d}.fullWidth{width:100%}.loading{color:transparent;pointer-events:none}.spinnerWrapper{position:absolute;display:flex;align-items:center;justify-content:center}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;border-radius:50%;color:#fff;animation:qk-spin .6s linear infinite}@keyframes qk-spin{to{transform:rotate(360deg)}}.iconLeft,.iconRight{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.iconLeft{margin-right:calc(-1 * var(--qk-space-1))}.iconRight{margin-left:calc(-1 * var(--qk-space-1))}.card{font-family:var(--qk-font-sans);color:var(--qk-text-2);border-radius:var(--qk-radius-lg);transition-property:transform,box-shadow,border-color,background-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.variantDefault{background-color:var(--qk-bg-surface-1);border:1px solid var(--qk-border-color)}.variantOutlined{background-color:transparent;border:1px solid var(--qk-border-color-hover)}.variantElevated{background-color:var(--qk-bg-surface-2);border:1px solid var(--qk-border-color-hover);box-shadow:var(--qk-shadow-card)}.variantGlass{background:var(--qk-bg-glass);border:1px solid var(--qk-border-glass);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}.paddingNone{padding:0}.paddingSm{padding:var(--qk-space-4)}.paddingMd{padding:var(--qk-space-6)}.paddingLg{padding:var(--qk-space-8)}.hoverable{cursor:pointer}.hoverable:hover{transform:translateY(-2px);box-shadow:var(--qk-shadow-card-hover, var(--qk-shadow-card));border-color:var(--qk-border-color-active)}.hoverable.variantGlass:hover{border-color:var(--qk-border-color-active);background-color:var(--qk-bg-glass);opacity:.9}.hoverable:active{transform:translateY(0)}.wrapper{position:relative;display:flex;flex-direction:column;gap:var(--qk-space-1-5);width:100%}.inputContainer{position:relative;display:flex;align-items:center;width:100%}.input{width:100%;font-family:var(--qk-font-sans);color:var(--qk-text-1);background-color:var(--qk-bg-surface-1);border:1px solid var(--qk-border-color);outline:none;transition-property:border-color,box-shadow,background-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.input::placeholder{color:var(--qk-text-muted);transition:opacity var(--qk-transition-fast)}.input:hover:not(:disabled):not(:focus){border-color:var(--qk-border-color-hover);background-color:var(--qk-bg-surface-2)}.input:focus{border-color:var(--qk-color-primary-500);box-shadow:0 0 0 3px #8b5cf626;background-color:var(--qk-bg-surface-1)}.input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--qk-bg-surface-3)}.variantFilled{background-color:var(--qk-bg-surface-2);border-color:transparent}.variantFilled:hover:not(:disabled):not(:focus){background-color:var(--qk-bg-surface-3)}.variantFilled:focus{background-color:var(--qk-bg-surface-2);border-color:var(--qk-color-primary-500)}.sizeSm{height:32px;padding:0 var(--qk-space-3);font-size:var(--qk-text-xs);border-radius:var(--qk-radius-sm)}.sizeMd{height:40px;padding:0 var(--qk-space-4);font-size:var(--qk-text-sm);border-radius:var(--qk-radius-md)}.sizeLg{height:48px;padding:0 var(--qk-space-5);font-size:var(--qk-text-base);border-radius:var(--qk-radius-md)}.hasLeftIcon{padding-left:var(--qk-space-10)}.hasRightIcon{padding-right:var(--qk-space-10)}.sizeSm.hasLeftIcon{padding-left:var(--qk-space-8)}.sizeSm.hasRightIcon{padding-right:var(--qk-space-8)}.leftIcon,.rightIcon{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--qk-text-3);pointer-events:none;transition:color var(--qk-transition-fast)}.leftIcon{left:var(--qk-space-3)}.rightIcon{right:var(--qk-space-3)}.label{font-family:var(--qk-font-sans);font-size:var(--qk-text-sm);font-weight:var(--qk-font-medium);color:var(--qk-text-2);transition:color var(--qk-transition-fast)}.wrapper:focus-within .label{color:var(--qk-theme-primary)}.helperText{font-family:var(--qk-font-sans);font-size:var(--qk-text-xs);color:var(--qk-text-muted);margin:0;line-height:var(--qk-leading-normal)}.errorText{font-family:var(--qk-font-sans);font-size:var(--qk-text-xs);color:var(--qk-theme-danger);margin:0;line-height:var(--qk-leading-normal)}.inputError{border-color:var(--qk-color-danger-500)}.inputError:focus{border-color:var(--qk-color-danger-400);box-shadow:0 0 0 3px #f43f5e26}.wrapper:has(.inputError) .label{color:var(--qk-theme-danger)}.wrapper:has(.inputError) .leftIcon,.wrapper:has(.inputError) .rightIcon{color:var(--qk-theme-danger)}.wrapper{display:inline-flex;align-items:center;gap:var(--qk-space-3);cursor:pointer;user-select:none}.wrapper.disabled{opacity:.5;cursor:not-allowed}.input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.track{position:relative;display:inline-flex;align-items:center;flex-shrink:0;border-radius:var(--qk-radius-full);background-color:var(--qk-bg-surface-3);border:1px solid var(--qk-border-color-hover);transition-property:background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.track:hover:not(.disabled *){background-color:var(--qk-border-color-active)}.trackChecked{background-color:var(--qk-color-primary-600);border-color:var(--qk-color-primary-500)}.trackChecked:hover{background-color:var(--qk-color-primary-500)}.input:focus-visible+.track{box-shadow:0 0 0 var(--qk-focus-ring-offset) var(--qk-bg-app),0 0 0 calc(var(--qk-focus-ring-offset) + var(--qk-focus-ring-width)) var(--qk-focus-ring-color)}.trackChecked{box-shadow:0 0 12px #7c3aed40}.thumb{position:absolute;border-radius:50%;background-color:#fff;box-shadow:var(--qk-shadow-sm);transition-property:transform,width;transition-duration:.25s;transition-timing-function:cubic-bezier(.34,1.56,.64,1)}.sizeSm .track{width:32px;height:18px}.sizeSm .thumb{width:14px;height:14px;left:2px;top:1px}.sizeSm .thumbChecked{transform:translate(14px)}.sizeMd .track{width:44px;height:24px}.sizeMd .thumb{width:18px;height:18px;left:3px;top:2px}.sizeMd .thumbChecked{transform:translate(20px)}.sizeLg .track{width:56px;height:30px}.sizeLg .thumb{width:24px;height:24px;left:3px;top:2px}.sizeLg .thumbChecked{transform:translate(26px)}.label{font-family:var(--qk-font-sans);font-size:var(--qk-text-sm);font-weight:var(--qk-font-medium);color:var(--qk-text-2);line-height:var(--qk-leading-normal)}.sizeSm .label{font-size:var(--qk-text-xs)}.sizeLg .label{font-size:var(--qk-text-base)}.badge{display:inline-flex;align-items:center;gap:var(--qk-space-1-5);font-family:var(--qk-font-sans);font-weight:var(--qk-font-medium);line-height:var(--qk-leading-none);white-space:nowrap;border-radius:var(--qk-radius-full);border:1px solid transparent;transition-property:background-color,color,border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.sizeSm{height:20px;padding:0 var(--qk-space-2);font-size:.6875rem}.sizeMd{height:24px;padding:0 var(--qk-space-2-5);font-size:var(--qk-text-xs)}.sizeLg{height:28px;padding:0 var(--qk-space-3);font-size:var(--qk-text-sm)}.variantDefault{background-color:var(--qk-bg-surface-2);color:var(--qk-text-2);border-color:var(--qk-border-color)}.variantPrimary{background-color:#8b5cf626;color:var(--qk-theme-primary)}.variantSuccess{background-color:#10b98126;color:var(--qk-theme-success)}.variantWarning{background-color:#f59e0b26;color:var(--qk-theme-warning)}.variantDanger{background-color:#f43f5e26;color:var(--qk-theme-danger)}.variantInfo{background-color:#0ea5e926;color:var(--qk-theme-info)}.outline.variantDefault{background-color:transparent;border-color:var(--qk-border-color-hover)}.outline.variantPrimary{background-color:transparent;border-color:var(--qk-color-primary-500)}.outline.variantSuccess{background-color:transparent;border-color:var(--qk-color-success-500)}.outline.variantWarning{background-color:transparent;border-color:var(--qk-color-warning-500)}.outline.variantDanger{background-color:transparent;border-color:var(--qk-color-danger-500)}.outline.variantInfo{background-color:transparent;border-color:var(--qk-color-info-500)}.dot{position:relative;width:6px;height:6px;border-radius:50%;flex-shrink:0}.sizeLg .dot{width:8px;height:8px}.variantDefault .dot{background-color:var(--qk-color-neutral-400)}.variantPrimary .dot{background-color:var(--qk-theme-primary)}.variantSuccess .dot{background-color:var(--qk-theme-success)}.variantWarning .dot{background-color:var(--qk-theme-warning)}.variantDanger .dot{background-color:var(--qk-theme-danger)}.variantInfo .dot{background-color:var(--qk-theme-info)}.dotPulse{animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.4}}.alert{display:flex;align-items:flex-start;gap:var(--qk-space-3);padding:var(--qk-space-4) var(--qk-space-5);border-radius:var(--qk-radius-md);border:1px solid transparent;font-family:var(--qk-font-sans);font-size:var(--qk-text-sm);line-height:var(--qk-leading-normal);position:relative;transition:all var(--qk-transition-normal)}.icon{display:flex;align-items:center;justify-content:center;user-select:none;flex-shrink:0;margin-top:2px}.icon svg{width:18px;height:18px;display:block}.content{flex:1}.title{font-weight:var(--qk-font-semibold);color:var(--qk-text-1);margin:0 0 var(--qk-space-1) 0;font-size:var(--qk-text-sm)}.description{color:var(--qk-text-2)}.alert:has(.description) .title{margin-bottom:var(--qk-space-1)}.alert:not(:has(.description)) .title{margin-bottom:0}.closeButton{background:transparent;border:none;color:var(--qk-text-muted);cursor:pointer;padding:var(--qk-space-1);font-size:var(--qk-text-xs);line-height:1;border-radius:var(--qk-radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--qk-transition-fast);margin-top:1px;margin-right:-4px}.closeButton:hover{background-color:#ffffff14;color:var(--qk-text-1)}.variantInfo{background-color:#0ea5e914;border-color:#0ea5e933;color:var(--qk-theme-info)}.variantInfo .closeButton:hover{background-color:#0ea5e926}.variantSuccess{background-color:#10b98114;border-color:#10b98133;color:var(--qk-theme-success)}.variantSuccess .closeButton:hover{background-color:#10b98126}.variantWarning{background-color:#f59e0b14;border-color:#f59e0b33;color:var(--qk-theme-warning)}.variantWarning .closeButton:hover{background-color:#f59e0b26}.variantDanger{background-color:#f43f5e14;border-color:#f43f5e33;color:var(--qk-theme-danger)}.variantDanger .closeButton:hover{background-color:#f43f5e26}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--qk-color-primary-600) 0%,var(--qk-color-primary-400) 100%);color:#fff;font-family:var(--qk-font-sans);font-weight:var(--qk-font-semibold);user-select:none;flex-shrink:0}.image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.fallback{text-transform:uppercase;line-height:1}.shapeCircle{border-radius:var(--qk-radius-full)}.shapeSquare{border-radius:var(--qk-radius-md)}.sizeXs{width:24px;height:24px;font-size:10px}.sizeSm{width:32px;height:32px;font-size:var(--qk-text-xs)}.sizeMd{width:40px;height:40px;font-size:var(--qk-text-sm)}.sizeLg{width:48px;height:48px;font-size:var(--qk-text-base)}.sizeXl{width:64px;height:64px;font-size:var(--qk-text-xl)}.statusDot{position:absolute;bottom:0;right:0;display:block;border-radius:var(--qk-radius-full);border:2px solid var(--qk-bg-surface-1);background-color:var(--qk-text-muted)}.sizeXs .statusDot{width:7px;height:7px;border-width:1px}.sizeSm .statusDot{width:9px;height:9px}.sizeMd .statusDot{width:11px;height:11px}.sizeLg .statusDot{width:13px;height:13px}.sizeXl .statusDot{width:16px;height:16px}.statusOnline{background-color:var(--qk-color-success-500);box-shadow:0 0 6px #10b98166}.statusOffline{background-color:var(--qk-color-neutral-500)}.statusAway{background-color:var(--qk-color-warning-500);box-shadow:0 0 6px #f59e0b66}.statusBusy{background-color:var(--qk-color-danger-500);box-shadow:0 0 6px #f43f5e66}.spinner{display:inline-block;border-style:solid;border-radius:50%;border-color:#8b5cf626;border-top-color:var(--qk-color-primary-500);animation:qk-spin .8s linear infinite}.sizeSm{width:16px;height:16px;border-width:2px}.sizeMd{width:24px;height:24px;border-width:2.5px}.sizeLg{width:36px;height:36px;border-width:3.5px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

package/dist/index.d.cts

@@ -0,0 +1,98 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show loading spinner and disable interaction */
+    isLoading?: boolean;
+    /** Icon element placed before the label */
+    leftIcon?: React.ReactNode;
+    /** Icon element placed after the label */
+    rightIcon?: React.ReactNode;
+    /** Stretch to fill container width */
+    fullWidth?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
+    variant?: 'default' | 'outlined' | 'elevated' | 'glass';
+    /** Inner padding preset */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Enable hover lift animation */
+    hoverable?: boolean;
+}
+declare const Card: React.FC<CardProps>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label displayed above the input */
+    label?: string;
+    /** Error message — sets the input into an error state */
+    error?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Icon element placed inside the left edge */
+    leftIcon?: React.ReactNode;
+    /** Icon element placed inside the right edge */
+    rightIcon?: React.ReactNode;
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'default' | 'filled';
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ToggleProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Change handler */
+    onChange?: (checked: boolean) => void;
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Label displayed to the right of the switch */
+    label?: string;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Additional class name for the wrapper */
+    className?: string;
+}
+declare const Toggle: React.FC<ToggleProps>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Color variant */
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show a coloured dot indicator */
+    dot?: boolean;
+    /** Use outline style instead of filled */
+    outline?: boolean;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    onClose?: () => void;
+}
+declare const Alert: React.FC<AlertProps>;
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    status?: 'online' | 'offline' | 'away' | 'busy';
+}
+declare const Avatar: React.FC<AvatarProps>;
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: 'sm' | 'md' | 'lg';
+    color?: string;
+}
+declare const Spinner: React.FC<SpinnerProps>;
+
+export { Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Input, type InputProps, Spinner, type SpinnerProps, Toggle, type ToggleProps };

package/dist/index.d.ts

@@ -0,0 +1,98 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show loading spinner and disable interaction */
+    isLoading?: boolean;
+    /** Icon element placed before the label */
+    leftIcon?: React.ReactNode;
+    /** Icon element placed after the label */
+    rightIcon?: React.ReactNode;
+    /** Stretch to fill container width */
+    fullWidth?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
+    variant?: 'default' | 'outlined' | 'elevated' | 'glass';
+    /** Inner padding preset */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Enable hover lift animation */
+    hoverable?: boolean;
+}
+declare const Card: React.FC<CardProps>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label displayed above the input */
+    label?: string;
+    /** Error message — sets the input into an error state */
+    error?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Icon element placed inside the left edge */
+    leftIcon?: React.ReactNode;
+    /** Icon element placed inside the right edge */
+    rightIcon?: React.ReactNode;
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'default' | 'filled';
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ToggleProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Change handler */
+    onChange?: (checked: boolean) => void;
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Label displayed to the right of the switch */
+    label?: string;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Additional class name for the wrapper */
+    className?: string;
+}
+declare const Toggle: React.FC<ToggleProps>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Color variant */
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    /** Size preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show a coloured dot indicator */
+    dot?: boolean;
+    /** Use outline style instead of filled */
+    outline?: boolean;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    onClose?: () => void;
+}
+declare const Alert: React.FC<AlertProps>;
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    status?: 'online' | 'offline' | 'away' | 'busy';
+}
+declare const Avatar: React.FC<AvatarProps>;
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: 'sm' | 'md' | 'lg';
+    color?: string;
+}
+declare const Spinner: React.FC<SpinnerProps>;
+
+export { Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Input, type InputProps, Spinner, type SpinnerProps, Toggle, type ToggleProps };

package/dist/index.js

@@ -0,0 +1 @@
+import{forwardRef as V}from"react";var s={};import{jsx as w,jsxs as $}from"react/jsx-runtime";var X={sm:s.sizeSm,md:s.sizeMd,lg:s.sizeLg},G={primary:s.variantPrimary,secondary:s.variantSecondary,outline:s.variantOutline,ghost:s.variantGhost,danger:s.variantDanger},S=V(({variant:e="primary",size:r="md",isLoading:a=!1,leftIcon:t,rightIcon:o,fullWidth:n=!1,disabled:i,className:v,children:m,type:f="button",...k},h)=>{let N=[s.button,X[r],G[e],n?s.fullWidth:"",a?s.loading:"",v??""].filter(Boolean).join(" ");return $("button",{ref:h,type:f,className:N,disabled:i||a,"aria-busy":a||void 0,"aria-disabled":i||a||void 0,...k,children:[a&&w("span",{className:s.spinnerWrapper,"aria-hidden":"true",children:w("span",{className:s.spinner})}),t&&w("span",{className:s.iconLeft,children:t}),m,o&&w("span",{className:s.iconRight,children:o})]})});S.displayName="Button";var g={};import{jsx as Q}from"react/jsx-runtime";var J={default:g.variantDefault,outlined:g.variantOutlined,elevated:g.variantElevated,glass:g.variantGlass},K={none:g.paddingNone,sm:g.paddingSm,md:g.paddingMd,lg:g.paddingLg},C=({variant:e="default",padding:r="md",hoverable:a=!1,className:t,children:o,...n})=>{let i=[g.card,J[e],K[r],a?g.hoverable:"",t??""].filter(Boolean).join(" ");return Q("div",{className:i,...n,children:o})};C.displayName="Card";import{forwardRef as Z,useId as _}from"react";var l={};import{jsx as x,jsxs as E}from"react/jsx-runtime";var rr={sm:l.sizeSm,md:l.sizeMd,lg:l.sizeLg},P=Z(({label:e,error:r,helperText:a,leftIcon:t,rightIcon:o,size:n="md",variant:i="default",className:v,id:m,"aria-describedby":f,...k},h)=>{let N=_(),y=m??N,A=r?`${y}-error`:void 0,D=a&&!r?`${y}-helper`:void 0,W=f??A??D??void 0,O=[l.input,rr[n],i==="filled"?l.variantFilled:"",t?l.hasLeftIcon:"",o?l.hasRightIcon:"",r?l.inputError:"",v??""].filter(Boolean).join(" ");return E("div",{className:l.wrapper,children:[e&&x("label",{htmlFor:y,className:l.label,children:e}),E("div",{className:l.inputContainer,children:[t&&x("span",{className:l.leftIcon,"aria-hidden":"true",children:t}),x("input",{ref:h,id:y,className:O,"aria-invalid":r?!0:void 0,"aria-describedby":W,...k}),o&&x("span",{className:l.rightIcon,"aria-hidden":"true",children:o})]}),r&&x("p",{id:A,className:l.errorText,role:"alert",children:r}),a&&!r&&x("p",{id:D,className:l.helperText,children:a})]})});P.displayName="Input";import{useId as er}from"react";var p={};import{jsx as z,jsxs as tr}from"react/jsx-runtime";var or={sm:p.sizeSm,md:p.sizeMd,lg:p.sizeLg},R=({checked:e=!1,onChange:r,size:a="md",label:t,disabled:o=!1,className:n})=>{let i=er(),v=[p.wrapper,or[a],o?p.disabled:"",n??""].filter(Boolean).join(" "),m=[p.track,e?p.trackChecked:""].filter(Boolean).join(" "),f=[p.thumb,e?p.thumbChecked:""].filter(Boolean).join(" "),k=h=>{o||r?.(h.target.checked)};return tr("label",{className:v,children:[z("input",{id:i,type:"checkbox",role:"switch",className:p.input,checked:e,disabled:o,onChange:k,"aria-checked":e}),z("span",{className:m,"aria-hidden":"true",children:z("span",{className:f})}),t&&z("span",{className:p.label,children:t})]})};R.displayName="Toggle";var c={};import{jsx as lr,jsxs as dr}from"react/jsx-runtime";var ir={sm:c.sizeSm,md:c.sizeMd,lg:c.sizeLg},sr={default:c.variantDefault,primary:c.variantPrimary,success:c.variantSuccess,warning:c.variantWarning,danger:c.variantDanger,info:c.variantInfo},I=({variant:e="default",size:r="md",dot:a=!1,outline:t=!1,className:o,children:n,...i})=>{let v=[c.badge,ir[r],sr[e],t?c.outline:"",o??""].filter(Boolean).join(" ");return dr("span",{className:v,...i,children:[a&&lr("span",{className:`${c.dot} ${c.dotPulse}`,"aria-hidden":"true"}),n]})};I.displayName="Badge";var u={};import{FiInfo as pr,FiCheckCircle as gr,FiAlertTriangle as ur,FiXCircle as vr}from"react-icons/fi";import{jsx as b,jsxs as H}from"react/jsx-runtime";var br={info:u.variantInfo,success:u.variantSuccess,warning:u.variantWarning,danger:u.variantDanger},mr={info:b(pr,{}),success:b(gr,{}),warning:b(ur,{}),danger:b(vr,{})},B=({variant:e="info",title:r,onClose:a,className:t,children:o,...n})=>{let i=[u.alert,br[e],t??""].filter(Boolean).join(" ");return H("div",{className:i,role:"alert",...n,children:[b("span",{className:u.icon,"aria-hidden":"true",children:mr[e]}),H("div",{className:u.content,children:[r&&b("h5",{className:u.title,children:r}),o&&b("div",{className:u.description,children:o})]}),a&&b("button",{type:"button",className:u.closeButton,onClick:a,"aria-label":"Dismiss alert",children:"\u2715"})]})};B.displayName="Alert";import{useState as kr}from"react";var d={};import{jsx as L,jsxs as yr}from"react/jsx-runtime";var hr={xs:d.sizeXs,sm:d.sizeSm,md:d.sizeMd,lg:d.sizeLg,xl:d.sizeXl},xr={circle:d.shapeCircle,square:d.shapeSquare},qr={online:d.statusOnline,offline:d.statusOffline,away:d.statusAway,busy:d.statusBusy},M=({src:e,alt:r="",fallback:a,size:t="md",shape:o="circle",status:n,className:i,...v})=>{let[m,f]=kr(!1),k=[d.avatar,hr[t],xr[o],i??""].filter(Boolean).join(" ");return yr("div",{className:k,...v,children:[e&&!m?L("img",{src:e,alt:r,className:d.image,onError:()=>f(!0)}):L("span",{className:d.fallback,children:a}),n&&L("span",{className:`${d.statusDot} ${qr[n]}`,"aria-label":n,role:"status"})]})};M.displayName="Avatar";var q={};import{jsx as F}from"react/jsx-runtime";var zr={sm:q.sizeSm,md:q.sizeMd,lg:q.sizeLg},T=({size:e="md",color:r,style:a,className:t,...o})=>{let n=[q.spinner,zr[e],t??""].filter(Boolean).join(" "),i={...a,...r?{borderTopColor:r}:{}};return F("span",{className:n,style:i,role:"status",...o,children:F("span",{className:q.srOnly,children:"Loading..."})})};T.displayName="Spinner";export{B as Alert,M as Avatar,I as Badge,S as Button,C as Card,P as Input,T as Spinner,R as Toggle};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@kpv2004/quark-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./src/styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src/styles/tokens.css"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --minify --external react,react-dom"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.7.0"
+  },
+  "dependencies": {
+    "react-icons": "^5.6.0"
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,300 @@
+/* ============================================
+   Quark UI — Design Tokens
+   A premium dark-first design system
+   ============================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+:root {
+  /* ── Primary (Electric Violet) ── */
+  --qk-color-primary-50: #f5f3ff;
+  --qk-color-primary-100: #ede9fe;
+  --qk-color-primary-200: #ddd6fe;
+  --qk-color-primary-300: #c4b5fd;
+  --qk-color-primary-400: #a78bfa;
+  --qk-color-primary-500: #8b5cf6;
+  --qk-color-primary-600: #7c3aed;
+  --qk-color-primary-700: #6d28d9;
+  --qk-color-primary-800: #5b21b6;
+  --qk-color-primary-900: #4c1d95;
+
+  /* ── Neutral ── */
+  --qk-color-neutral-0: #ffffff;
+  --qk-color-neutral-50: #fafafa;
+  --qk-color-neutral-100: #f4f4f5;
+  --qk-color-neutral-200: #e4e4e7;
+  --qk-color-neutral-300: #d4d4d8;
+  --qk-color-neutral-400: #a1a1aa;
+  --qk-color-neutral-500: #71717a;
+  --qk-color-neutral-600: #52525b;
+  --qk-color-neutral-700: #3f3f46;
+  --qk-color-neutral-800: #27272a;
+  --qk-color-neutral-900: #18181b;
+  --qk-color-neutral-950: #09090b;
+
+  /* ── Success (Emerald) ── */
+  --qk-color-success-50: #ecfdf5;
+  --qk-color-success-100: #d1fae5;
+  --qk-color-success-400: #34d399;
+  --qk-color-success-500: #10b981;
+  --qk-color-success-600: #059669;
+  --qk-color-success-700: #047857;
+
+  /* ── Warning (Amber) ── */
+  --qk-color-warning-50: #fffbeb;
+  --qk-color-warning-100: #fef3c7;
+  --qk-color-warning-400: #fbbf24;
+  --qk-color-warning-500: #f59e0b;
+  --qk-color-warning-600: #d97706;
+  --qk-color-warning-700: #b45309;
+
+  /* ── Danger (Rose) ── */
+  --qk-color-danger-50: #fff1f2;
+  --qk-color-danger-100: #ffe4e6;
+  --qk-color-danger-400: #fb7185;
+  --qk-color-danger-500: #f43f5e;
+  --qk-color-danger-600: #e11d48;
+  --qk-color-danger-700: #be123c;
+
+  /* ── Info (Sky Blue) ── */
+  --qk-color-info-50: #f0f9ff;
+  --qk-color-info-100: #e0f2fe;
+  --qk-color-info-400: #38bdf8;
+  --qk-color-info-500: #0ea5e9;
+  --qk-color-info-600: #0284c7;
+  --qk-color-info-700: #0369a1;
+
+  /* ── Spacing Scale (4px base) ── */
+  --qk-space-0: 0px;
+  --qk-space-0-5: 2px;
+  --qk-space-1: 4px;
+  --qk-space-1-5: 6px;
+  --qk-space-2: 8px;
+  --qk-space-2-5: 10px;
+  --qk-space-3: 12px;
+  --qk-space-3-5: 14px;
+  --qk-space-4: 16px;
+  --qk-space-5: 20px;
+  --qk-space-6: 24px;
+  --qk-space-7: 28px;
+  --qk-space-8: 32px;
+  --qk-space-9: 36px;
+  --qk-space-10: 40px;
+  --qk-space-12: 48px;
+  --qk-space-14: 56px;
+  --qk-space-16: 64px;
+
+  /* ── Border Radius ── */
+  --qk-radius-xs: 4px;
+  --qk-radius-sm: 6px;
+  --qk-radius-md: 10px;
+  --qk-radius-lg: 16px;
+  --qk-radius-xl: 24px;
+  --qk-radius-2xl: 32px;
+  --qk-radius-full: 9999px;
+
+  /* ── Typography ── */
+  --qk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --qk-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  --qk-text-xs: 0.75rem;
+  --qk-text-sm: 0.875rem;
+  --qk-text-base: 1rem;
+  --qk-text-lg: 1.125rem;
+  --qk-text-xl: 1.25rem;
+  --qk-text-2xl: 1.5rem;
+  --qk-text-3xl: 1.875rem;
+  --qk-text-4xl: 2.25rem;
+
+  --qk-font-light: 300;
+  --qk-font-normal: 400;
+  --qk-font-medium: 500;
+  --qk-font-semibold: 600;
+  --qk-font-bold: 700;
+
+  --qk-leading-none: 1;
+  --qk-leading-tight: 1.25;
+  --qk-leading-snug: 1.375;
+  --qk-leading-normal: 1.5;
+  --qk-leading-relaxed: 1.75;
+
+  --qk-tracking-tight: -0.025em;
+  --qk-tracking-normal: 0em;
+  --qk-tracking-wide: 0.025em;
+
+  /* ── Shadows ── */
+  --qk-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --qk-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --qk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
+  --qk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+  --qk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
+  --qk-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+  --qk-shadow-glow: 0 0 20px rgba(124, 58, 237, 0.3);
+  --qk-shadow-glow-lg: 0 0 40px rgba(124, 58, 237, 0.4);
+  --qk-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+
+  /* ── Transitions ── */
+  --qk-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --qk-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --qk-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  --qk-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --qk-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --qk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --qk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ── Focus Ring ── */
+  --qk-focus-ring-width: 2px;
+  --qk-focus-ring-offset: 2px;
+  --qk-focus-ring-color: rgba(139, 92, 246, 0.5);
+
+  /* ── Z-Index Scale ── */
+  --qk-z-dropdown: 1000;
+  --qk-z-sticky: 1100;
+  --qk-z-overlay: 1300;
+  --qk-z-modal: 1400;
+  --qk-z-popover: 1500;
+  --qk-z-tooltip: 1800;
+
+  /* ── Theme variables (Dark Theme by default) ── */
+  --qk-bg-app: var(--qk-color-neutral-950);
+  --qk-bg-sidebar: #0f0f14;
+  --qk-bg-surface-1: var(--qk-color-neutral-900);
+  --qk-bg-surface-2: var(--qk-color-neutral-800);
+  --qk-bg-surface-3: var(--qk-color-neutral-700);
+  
+  --qk-text-1: var(--qk-color-neutral-100);
+  --qk-text-2: var(--qk-color-neutral-300);
+  --qk-text-3: var(--qk-color-neutral-400);
+  --qk-text-muted: var(--qk-color-neutral-500);
+  
+  --qk-border-color: var(--qk-color-neutral-800);
+  --qk-border-color-hover: var(--qk-color-neutral-700);
+  --qk-border-color-active: var(--qk-color-neutral-600);
+  
+  --qk-shadow-card: var(--qk-shadow-lg);
+  --qk-shadow-app: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --qk-bg-glass: rgba(24, 24, 27, 0.6);
+  --qk-border-glass: rgba(255, 255, 255, 0.08);
+
+  /* ── Brand / Status Theme Colors ── */
+  --qk-theme-primary: var(--qk-color-primary-400);
+  --qk-theme-success: var(--qk-color-success-400);
+  --qk-theme-warning: var(--qk-color-warning-400);
+  --qk-theme-danger: var(--qk-color-danger-400);
+  --qk-theme-info: var(--qk-color-info-400);
+  
+  --qk-btn-outline-text: var(--qk-color-primary-400);
+  --qk-btn-outline-border: var(--qk-color-primary-500);
+  --qk-btn-outline-hover-bg: rgba(124, 58, 237, 0.1);
+
+  --qk-sidebar-active-text: #e9d5ff;
+  --qk-sidebar-active-bg: rgba(124, 58, 237, 0.1);
+  --qk-sidebar-hover-text: var(--qk-color-primary-300);
+  --qk-sidebar-hover-bg: rgba(124, 58, 237, 0.08);
+  --qk-shadow-card-hover: var(--qk-shadow-xl);
+}
+
+:root[data-theme="light"], [data-theme="light"] {
+  /* ── Light Theme Overrides ── */
+  --qk-bg-app: #f4f4f5; /* neutral-100 */
+  --qk-bg-sidebar: #ffffff; /* white */
+  --qk-bg-surface-1: #ffffff; /* white */
+  --qk-bg-surface-2: #e4e4e7; /* neutral-200 */
+  --qk-bg-surface-3: #d4d4d8; /* neutral-300 */
+  
+  --qk-text-1: #09090b; /* neutral-950 */
+  --qk-text-2: #27272a; /* neutral-800 */
+  --qk-text-3: #52525b; /* neutral-600 */
+  --qk-text-muted: #71717a; /* neutral-500 */
+  
+  --qk-border-color: #e4e4e7; /* neutral-200 */
+  --qk-border-color-hover: #d4d4d8; /* neutral-300 */
+  --qk-border-color-active: #a1a1aa; /* neutral-400 */
+  
+  --qk-shadow-card: var(--qk-shadow-sm);
+  --qk-shadow-app: 0 4px 12px rgba(9, 9, 11, 0.05);
+  --qk-bg-glass: rgba(255, 255, 255, 0.6);
+  --qk-border-glass: rgba(9, 9, 11, 0.08);
+
+  /* ── Brand / Status Theme Colors ── */
+  --qk-theme-primary: var(--qk-color-primary-700);
+  --qk-theme-success: var(--qk-color-success-700);
+  --qk-theme-warning: var(--qk-color-warning-700);
+  --qk-theme-danger: var(--qk-color-danger-700);
+  --qk-theme-info: var(--qk-color-info-700);
+  
+  --qk-btn-outline-text: var(--qk-color-primary-600);
+  --qk-btn-outline-border: var(--qk-color-primary-600);
+  --qk-btn-outline-hover-bg: rgba(124, 58, 237, 0.08);
+
+  --qk-sidebar-active-text: var(--qk-color-primary-600);
+  --qk-sidebar-active-bg: rgba(124, 58, 237, 0.08);
+  --qk-sidebar-hover-text: var(--qk-color-primary-700);
+  --qk-sidebar-hover-bg: rgba(124, 58, 237, 0.05);
+  --qk-shadow-card-hover: 0 12px 24px -8px rgba(9, 9, 11, 0.12), 0 4px 6px -2px rgba(9, 9, 11, 0.04);
+}
+
+
+
+
+
+/* ── Base Reset ── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* ── Keyframe Animations ── */
+@keyframes qk-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes qk-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes qk-ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes qk-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes qk-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes qk-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}