@kpv2004/quark-ui 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +122 -0
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Quark UI ⚛
|
|
2
|
+
|
|
3
|
+
A modern, high-performance React component library designed with a **dark-first aesthetic**, full **TypeScript support**, and scoped **CSS Modules**. Adaptable to both light and dark themes out of the box.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@quark-ui/react)
|
|
6
|
+
[](https://github.com/KPV2004/quark-ui/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- 🎨 **Dark-First Design**: Beautiful dark mode defaults with seamless light mode transitions.
|
|
13
|
+
- ⚡ **Zero Runtime CSS Overhead**: Styled using scoped CSS Modules. No heavy CSS-in-JS libraries.
|
|
14
|
+
- 🔒 **Type-Safe**: Written 100% in TypeScript with full autocompletion and type definitions.
|
|
15
|
+
- ♿ **Accessible**: Follows WAI-ARIA standards for keyboard navigation and screen-reader accessibility.
|
|
16
|
+
- 📦 **Feather Icons**: Built-in sleek icons powered by `react-icons/fi`.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
Install Quark UI and its peer dependencies via npm, yarn, or bun:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# Using bun (recommended)
|
|
26
|
+
bun add @kpv2004/quark-ui
|
|
27
|
+
|
|
28
|
+
# Using npm
|
|
29
|
+
npm install @kpv2004/quark-ui
|
|
30
|
+
|
|
31
|
+
# Using yarn
|
|
32
|
+
yarn add @kpv2004/quark-ui
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Setup & Stylesheets
|
|
38
|
+
|
|
39
|
+
To load the design tokens and base styles, import the stylesheet once at the entry point of your application (e.g., `main.tsx`, `index.tsx`, or `App.tsx`):
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import '@kpv2004/quark-ui/styles';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Quick Start
|
|
48
|
+
|
|
49
|
+
Here is a quick example showing how to build a basic user card with Quark UI components:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import React from 'react';
|
|
53
|
+
import { Card, Button, Avatar, Badge } from '@kpv2004/quark-ui';
|
|
54
|
+
import '@kpv2004/quark-ui/styles';
|
|
55
|
+
|
|
56
|
+
function App() {
|
|
57
|
+
return (
|
|
58
|
+
<div style={{ padding: '24px', display: 'flex', justifyContent: 'center' }}>
|
|
59
|
+
<Card variant="elevated" padding="lg" hoverable style={{ width: '360px' }}>
|
|
60
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
|
|
61
|
+
<Avatar
|
|
62
|
+
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
|
|
63
|
+
alt="User avatar"
|
|
64
|
+
size="lg"
|
|
65
|
+
status="online"
|
|
66
|
+
/>
|
|
67
|
+
<div>
|
|
68
|
+
<h3 style={{ margin: 0, color: 'var(--qk-text-1)' }}>Pannet V.</h3>
|
|
69
|
+
<Badge variant="primary" size="sm" style={{ marginTop: '4px' }}>Lead Developer</Badge>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<p style={{ color: 'var(--qk-text-2)', fontSize: '14px', lineHeight: 1.6, marginBottom: '20px' }}>
|
|
74
|
+
Building high-performance design systems using React, TypeScript, and CSS Modules.
|
|
75
|
+
</p>
|
|
76
|
+
|
|
77
|
+
<div style={{ display: 'flex', gap: '10px' }}>
|
|
78
|
+
<Button variant="primary" size="sm" fullWidth>Follow</Button>
|
|
79
|
+
<Button variant="secondary" size="sm" fullWidth>Message</Button>
|
|
80
|
+
</div>
|
|
81
|
+
</Card>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Light & Dark Theme Toggle
|
|
90
|
+
|
|
91
|
+
Quark UI features native support for light and dark theme switching. By default, the library applies dark theme values.
|
|
92
|
+
|
|
93
|
+
To toggle the **Light Theme**, simply add the `data-theme="light"` attribute to your root element (typically `<html>`):
|
|
94
|
+
|
|
95
|
+
```javascript
|
|
96
|
+
// Toggle to Light Theme
|
|
97
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
98
|
+
|
|
99
|
+
// Toggle back to Dark Theme
|
|
100
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## Components Included
|
|
106
|
+
|
|
107
|
+
| Component | Description |
|
|
108
|
+
| :--- | :--- |
|
|
109
|
+
| **`Button`** | Standard actions with primary, secondary, outline, ghost, loading, and icon options. |
|
|
110
|
+
| **`Card`** | Flex-padded container with default, outlined, elevated, and glassmorphism styles. |
|
|
111
|
+
| **`Input`** | Form fields with active labels, custom states, helper texts, validation errors, and prefix icons. |
|
|
112
|
+
| **`Toggle`** | Animated switch toggler supporting multiple sizes and disabled options. |
|
|
113
|
+
| **`Badge`** | Category/tag labels with various status colors (primary, success, warning, danger, info) and dot indicators. |
|
|
114
|
+
| **`Alert`** | Contextual notifications supporting dynamic feedback layouts and closing options. |
|
|
115
|
+
| **`Avatar`** | User avatar bubble supporting fallback initials, images, and live status dots. |
|
|
116
|
+
| **`Spinner`** | Minimalist customizable loading indicators. |
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## License
|
|
121
|
+
|
|
122
|
+
This project is licensed under the [MIT License](https://github.com/KPV2004/quark-ui/blob/main/LICENSE) - see the LICENSE file for details.
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var F=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var Q=(a,r)=>{for(var e in r)F(a,e,{get:r[e],enumerable:!0})},Z=(a,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of U(r))!K.call(a,o)&&o!==e&&F(a,o,{get:()=>r[o],enumerable:!(t=J(r,o))||t.enumerable});return a};var _=a=>Z(F({},"__esModule",{value:!0}),a);var yr={};Q(yr,{Alert:()=>M,Avatar:()=>A,Badge:()=>L,Button:()=>C,Card:()=>P,Input:()=>B,Spinner:()=>D,Toggle:()=>I});module.exports=_(yr);var j=require("react");var s={};var x=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:f,children:q,type:v="button",...h},w)=>{let E=[s.button,ar[r],er[a],n?s.fullWidth:"",e?s.loading:"",f??""].filter(Boolean).join(" ");return(0,x.jsxs)("button",{ref:w,type:v,className:E,disabled:i||e,"aria-busy":e||void 0,"aria-disabled":i||e||void 0,...h,children:[e&&(0,x.jsx)("span",{className:s.spinnerWrapper,"aria-hidden":"true",children:(0,x.jsx)("span",{className:s.spinner})}),t&&(0,x.jsx)("span",{className:s.iconLeft,children:t}),q,o&&(0,x.jsx)("span",{className:s.iconRight,children:o})]})});C.displayName="Button";var k={};var V=require("react/jsx-runtime"),tr={default:k.variantDefault,outlined:k.variantOutlined,elevated:k.variantElevated,glass:k.variantGlass},nr={none:k.paddingNone,sm:k.paddingSm,md:k.paddingMd,lg:k.paddingLg},P=({variant:a="default",padding:r="md",hoverable:e=!1,className:t,children:o,...n})=>{let i=[k.card,tr[a],nr[r],e?k.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},B=(0,R.forwardRef)(({label:a,error:r,helperText:e,leftIcon:t,rightIcon:o,size:n="md",variant:i="default",className:f,id:q,"aria-describedby":v,...h},w)=>{let E=(0,R.useId)(),S=q??E,W=r?`${S}-error`:void 0,O=e&&!r?`${S}-helper`:void 0,$=v??W??O??void 0,Y=[l.input,sr[n],i==="filled"?l.variantFilled:"",t?l.hasLeftIcon:"",o?l.hasRightIcon:"",r?l.inputError:"",f??""].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":$,...h}),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})]})});B.displayName="Input";var X=require("react");var p={};var y=require("react/jsx-runtime"),cr={sm:p.sizeSm,md:p.sizeMd,lg:p.sizeLg},I=({checked:a=!1,onChange:r,size:e="md",label:t,disabled:o=!1,className:n})=>{let i=(0,X.useId)(),f=[p.wrapper,cr[e],o?p.disabled:"",n??""].filter(Boolean).join(" "),q=[p.track,a?p.trackChecked:""].filter(Boolean).join(" "),v=[p.thumb,a?p.thumbChecked:""].filter(Boolean).join(" "),h=w=>{o||r?.(w.target.checked)};return(0,y.jsxs)("label",{className:f,children:[(0,y.jsx)("input",{id:i,type:"checkbox",role:"switch",className:p.input,checked:a,disabled:o,onChange:h,"aria-checked":a}),(0,y.jsx)("span",{className:q,"aria-hidden":"true",children:(0,y.jsx)("span",{className:v})}),t&&(0,y.jsx)("span",{className:p.label,children:t})]})};I.displayName="Toggle";var d={};var T=require("react/jsx-runtime"),pr={sm:d.sizeSm,md:d.sizeMd,lg:d.sizeLg},gr={default:d.variantDefault,primary:d.variantPrimary,success:d.variantSuccess,warning:d.variantWarning,danger:d.variantDanger,info:d.variantInfo},L=({variant:a="default",size:r="md",dot:e=!1,outline:t=!1,className:o,children:n,...i})=>{let f=[d.badge,pr[r],gr[a],t?d.outline:"",o??""].filter(Boolean).join(" ");return(0,T.jsxs)("span",{className:f,...i,children:[e&&(0,T.jsx)("span",{className:`${d.dot} ${d.dotPulse}`,"aria-hidden":"true"}),n]})};L.displayName="Badge";var u={};var m=require("react-icons/fi"),g=require("react/jsx-runtime"),ur={info:u.variantInfo,success:u.variantSuccess,warning:u.variantWarning,danger:u.variantDanger},br={info:(0,g.jsx)(m.FiInfo,{}),success:(0,g.jsx)(m.FiCheckCircle,{}),warning:(0,g.jsx)(m.FiAlertTriangle,{}),danger:(0,g.jsx)(m.FiXCircle,{})},M=({variant:a="info",title:r,onClose:e,className:t,children:o,...n})=>{let i=[u.alert,ur[a],t??""].filter(Boolean).join(" ");return(0,g.jsxs)("div",{className:i,role:"alert",...n,children:[(0,g.jsx)("span",{className:u.icon,"aria-hidden":"true",children:br[a]}),(0,g.jsxs)("div",{className:u.content,children:[r&&(0,g.jsx)("h5",{className:u.title,children:r}),o&&(0,g.jsx)("div",{className:u.description,children:o})]}),e&&(0,g.jsx)("button",{type:"button",className:u.closeButton,onClick:e,"aria-label":"Dismiss alert",children:"\u2715"})]})};M.displayName="Alert";var G=require("react");var c={};var z=require("react/jsx-runtime"),mr={xs:c.sizeXs,sm:c.sizeSm,md:c.sizeMd,lg:c.sizeLg,xl:c.sizeXl},qr={circle:c.shapeCircle,square:c.shapeSquare},vr={online:c.statusOnline,offline:c.statusOffline,away:c.statusAway,busy:c.statusBusy},A=({src:a,alt:r="",fallback:e,size:t="md",shape:o="circle",status:n,className:i,...f})=>{let[q,v]=(0,G.useState)(!1),h=[c.avatar,mr[t],qr[o],i??""].filter(Boolean).join(" ");return(0,z.jsxs)("div",{className:h,...f,children:[a&&!q?(0,z.jsx)("img",{src:a,alt:r,className:c.image,onError:()=>v(!0)}):(0,z.jsx)("span",{className:c.fallback,children:e}),n&&(0,z.jsx)("span",{className:`${c.statusDot} ${vr[n]}`,"aria-label":n,role:"status"})]})};A.displayName="Avatar";var N={};var H=require("react/jsx-runtime"),xr={sm:N.sizeSm,md:N.sizeMd,lg:N.sizeLg},D=({size:a="md",color:r,style:e,className:t,...o})=>{let n=[N.spinner,xr[a],t??""].filter(Boolean).join(" "),i={...e,...r?{borderTopColor:r}:{}};return(0,H.jsx)("span",{className:n,style:i,role:"status",...o,children:(0,H.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
CHANGED
|
@@ -1 +1 @@
|
|
|
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}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--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;--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;--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;--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;--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;--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;--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;--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;--qk-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--qk-font-mono: "JetBrains Mono", "Fira Code", monospace;--qk-text-xs: .75rem;--qk-text-sm: .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: -.025em;--qk-tracking-normal: 0em;--qk-tracking-wide: .025em;--qk-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--qk-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1);--qk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .15);--qk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .2);--qk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .25);--qk-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .4);--qk-shadow-glow: 0 0 20px rgba(124, 58, 237, .3);--qk-shadow-glow-lg: 0 0 40px rgba(124, 58, 237, .4);--qk-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .1);--qk-transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--qk-transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--qk-transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--qk-ease-in: cubic-bezier(.4, 0, 1, 1);--qk-ease-out: cubic-bezier(0, 0, .2, 1);--qk-ease-in-out: cubic-bezier(.4, 0, .2, 1);--qk-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--qk-focus-ring-width: 2px;--qk-focus-ring-offset: 2px;--qk-focus-ring-color: rgba(139, 92, 246, .5);--qk-z-dropdown: 1000;--qk-z-sticky: 1100;--qk-z-overlay: 1300;--qk-z-modal: 1400;--qk-z-popover: 1500;--qk-z-tooltip: 1800;--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, .4);--qk-bg-glass: rgba(24, 24, 27, .6);--qk-border-glass: rgba(255, 255, 255, .08);--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, .1);--qk-sidebar-active-text: #e9d5ff;--qk-sidebar-active-bg: rgba(124, 58, 237, .1);--qk-sidebar-hover-text: var(--qk-color-primary-300);--qk-sidebar-hover-bg: rgba(124, 58, 237, .08);--qk-shadow-card-hover: var(--qk-shadow-xl)}:root[data-theme=light],[data-theme=light]{--qk-bg-app: #f4f4f5;--qk-bg-sidebar: #ffffff;--qk-bg-surface-1: #ffffff;--qk-bg-surface-2: #e4e4e7;--qk-bg-surface-3: #d4d4d8;--qk-text-1: #09090b;--qk-text-2: #27272a;--qk-text-3: #52525b;--qk-text-muted: #71717a;--qk-border-color: #e4e4e7;--qk-border-color-hover: #d4d4d8;--qk-border-color-active: #a1a1aa;--qk-shadow-card: var(--qk-shadow-sm);--qk-shadow-app: 0 4px 12px rgba(9, 9, 11, .05);--qk-bg-glass: rgba(255, 255, 255, .6);--qk-border-glass: rgba(9, 9, 11, .08);--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, .08);--qk-sidebar-active-text: var(--qk-color-primary-600);--qk-sidebar-active-bg: rgba(124, 58, 237, .08);--qk-sidebar-hover-text: var(--qk-color-primary-700);--qk-sidebar-hover-bg: rgba(124, 58, 237, .05);--qk-shadow-card-hover: 0 12px 24px -8px rgba(9, 9, 11, .12), 0 4px 6px -2px rgba(9, 9, 11, .04)}*,*:before,*:after{box-sizing:border-box}@keyframes qk-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes qk-ping{75%,to{transform:scale(2);opacity:0}}@keyframes qk-fade-in{0%{opacity:0}to{opacity:1}}@keyframes qk-slide-up{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes qk-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(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.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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:
|
|
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:u,children:f,type:m="button",...q},v)=>{let N=[s.button,X[r],G[e],n?s.fullWidth:"",a?s.loading:"",u??""].filter(Boolean).join(" ");return $("button",{ref:v,type:m,className:N,disabled:i||a,"aria-busy":a||void 0,"aria-disabled":i||a||void 0,...q,children:[a&&w("span",{className:s.spinnerWrapper,"aria-hidden":"true",children:w("span",{className:s.spinner})}),t&&w("span",{className:s.iconLeft,children:t}),f,o&&w("span",{className:s.iconRight,children:o})]})});S.displayName="Button";var g={};import{jsx as K}from"react/jsx-runtime";var J={default:g.variantDefault,outlined:g.variantOutlined,elevated:g.variantElevated,glass:g.variantGlass},U={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],U[r],a?g.hoverable:"",t??""].filter(Boolean).join(" ");return K("div",{className:i,...n,children:o})};C.displayName="Card";import{forwardRef as Z,useId as _}from"react";var l={};import{jsx as h,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:u,id:f,"aria-describedby":m,...q},v)=>{let N=_(),y=f??N,A=r?`${y}-error`:void 0,D=a&&!r?`${y}-helper`:void 0,W=m??A??D??void 0,O=[l.input,rr[n],i==="filled"?l.variantFilled:"",t?l.hasLeftIcon:"",o?l.hasRightIcon:"",r?l.inputError:"",u??""].filter(Boolean).join(" ");return E("div",{className:l.wrapper,children:[e&&h("label",{htmlFor:y,className:l.label,children:e}),E("div",{className:l.inputContainer,children:[t&&h("span",{className:l.leftIcon,"aria-hidden":"true",children:t}),h("input",{ref:v,id:y,className:O,"aria-invalid":r?!0:void 0,"aria-describedby":W,...q}),o&&h("span",{className:l.rightIcon,"aria-hidden":"true",children:o})]}),r&&h("p",{id:A,className:l.errorText,role:"alert",children:r}),a&&!r&&h("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(),u=[p.wrapper,or[a],o?p.disabled:"",n??""].filter(Boolean).join(" "),f=[p.track,e?p.trackChecked:""].filter(Boolean).join(" "),m=[p.thumb,e?p.thumbChecked:""].filter(Boolean).join(" "),q=v=>{o||r?.(v.target.checked)};return tr("label",{className:u,children:[z("input",{id:i,type:"checkbox",role:"switch",className:p.input,checked:e,disabled:o,onChange:q,"aria-checked":e}),z("span",{className:f,"aria-hidden":"true",children:z("span",{className:m})}),t&&z("span",{className:p.label,children:t})]})};R.displayName="Toggle";var d={};import{jsx as lr,jsxs as cr}from"react/jsx-runtime";var ir={sm:d.sizeSm,md:d.sizeMd,lg:d.sizeLg},sr={default:d.variantDefault,primary:d.variantPrimary,success:d.variantSuccess,warning:d.variantWarning,danger:d.variantDanger,info:d.variantInfo},B=({variant:e="default",size:r="md",dot:a=!1,outline:t=!1,className:o,children:n,...i})=>{let u=[d.badge,ir[r],sr[e],t?d.outline:"",o??""].filter(Boolean).join(" ");return cr("span",{className:u,...i,children:[a&&lr("span",{className:`${d.dot} ${d.dotPulse}`,"aria-hidden":"true"}),n]})};B.displayName="Badge";var k={};import{FiInfo as pr,FiCheckCircle as gr,FiAlertTriangle as kr,FiXCircle as ur}from"react-icons/fi";import{jsx as b,jsxs as F}from"react/jsx-runtime";var br={info:k.variantInfo,success:k.variantSuccess,warning:k.variantWarning,danger:k.variantDanger},fr={info:b(pr,{}),success:b(gr,{}),warning:b(kr,{}),danger:b(ur,{})},I=({variant:e="info",title:r,onClose:a,className:t,children:o,...n})=>{let i=[k.alert,br[e],t??""].filter(Boolean).join(" ");return F("div",{className:i,role:"alert",...n,children:[b("span",{className:k.icon,"aria-hidden":"true",children:fr[e]}),F("div",{className:k.content,children:[r&&b("h5",{className:k.title,children:r}),o&&b("div",{className:k.description,children:o})]}),a&&b("button",{type:"button",className:k.closeButton,onClick:a,"aria-label":"Dismiss alert",children:"\u2715"})]})};I.displayName="Alert";import{useState as qr}from"react";var c={};import{jsx as L,jsxs as yr}from"react/jsx-runtime";var vr={xs:c.sizeXs,sm:c.sizeSm,md:c.sizeMd,lg:c.sizeLg,xl:c.sizeXl},hr={circle:c.shapeCircle,square:c.shapeSquare},xr={online:c.statusOnline,offline:c.statusOffline,away:c.statusAway,busy:c.statusBusy},T=({src:e,alt:r="",fallback:a,size:t="md",shape:o="circle",status:n,className:i,...u})=>{let[f,m]=qr(!1),q=[c.avatar,vr[t],hr[o],i??""].filter(Boolean).join(" ");return yr("div",{className:q,...u,children:[e&&!f?L("img",{src:e,alt:r,className:c.image,onError:()=>m(!0)}):L("span",{className:c.fallback,children:a}),n&&L("span",{className:`${c.statusDot} ${xr[n]}`,"aria-label":n,role:"status"})]})};T.displayName="Avatar";var x={};import{jsx as H}from"react/jsx-runtime";var zr={sm:x.sizeSm,md:x.sizeMd,lg:x.sizeLg},M=({size:e="md",color:r,style:a,className:t,...o})=>{let n=[x.spinner,zr[e],t??""].filter(Boolean).join(" "),i={...a,...r?{borderTopColor:r}:{}};return H("span",{className:n,style:i,role:"status",...o,children:H("span",{className:x.srOnly,children:"Loading..."})})};M.displayName="Spinner";export{I as Alert,T as Avatar,B as Badge,S as Button,C as Card,P as Input,M as Spinner,R as Toggle};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kpv2004/quark-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"import": "./dist/index.js",
|
|
12
12
|
"require": "./dist/index.cjs"
|
|
13
13
|
},
|
|
14
|
-
"./styles": "./
|
|
14
|
+
"./styles": "./dist/index.css"
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
17
|
"dist",
|