@exitvibing/hqui 0.1.0
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 +45 -0
- package/dist/index.css +1 -0
- package/dist/index.d.mts +180 -0
- package/dist/index.d.ts +180 -0
- package/dist/index.js +1049 -0
- package/dist/index.mjs +988 -0
- package/docs/components.md +304 -0
- package/docs/design-system.md +85 -0
- package/docs/extended-components.md +201 -0
- package/docs/setup.md +146 -0
- package/package.json +33 -0
- package/src/components/Badge.tsx +40 -0
- package/src/components/Button.tsx +50 -0
- package/src/components/Card.tsx +72 -0
- package/src/components/Checkbox.tsx +47 -0
- package/src/components/HighlightText.tsx +24 -0
- package/src/components/Input.tsx +21 -0
- package/src/components/ProgressBar.tsx +64 -0
- package/src/components/Separator.tsx +25 -0
- package/src/components/Switch.tsx +43 -0
- package/src/components/Table.tsx +87 -0
- package/src/components/Tabs.tsx +122 -0
- package/src/components/ThemeToggle.tsx +40 -0
- package/src/components/Tooltip.tsx +120 -0
- package/src/components/extended/ArrowButton.tsx +28 -0
- package/src/components/extended/ChooseList.tsx +38 -0
- package/src/components/extended/Counter.tsx +74 -0
- package/src/components/extended/Popup.tsx +78 -0
- package/src/components/extended/StatusBar.tsx +45 -0
- package/src/components/extended/WeekViewCalendar.tsx +126 -0
- package/src/index.css +119 -0
- package/src/index.ts +25 -0
- package/src/lib/cn.ts +6 -0
- package/tailwind.config.ts +64 -0
- package/tsconfig.json +22 -0
package/README.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# hqui
|
|
2
|
+
|
|
3
|
+
React + Tailwind CSS component library. 19 components with light and dark mode support.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add hqui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Use
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Button, Card, Badge } from "hqui";
|
|
15
|
+
import "hqui/dist/index.css";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
You must import `hqui/dist/index.css` once in your app entry point. This loads the CSS variables, theme styles, and base layer rules.
|
|
19
|
+
|
|
20
|
+
## Documentation
|
|
21
|
+
|
|
22
|
+
| File | What it covers |
|
|
23
|
+
| ------------------------------------------------------- | ---------------------------------------------------------------- |
|
|
24
|
+
| [design-system.md](./docs/design-system.md) | Colors, CSS variables, light/dark mode, text selection style |
|
|
25
|
+
| [setup.md](./docs/setup.md) | Install, Tailwind config, PostCSS, Vite, how to enable dark mode |
|
|
26
|
+
| [components.md](./docs/components.md) | Props and usage for 13 core components |
|
|
27
|
+
| [extended-components.md](./docs/extended-components.md) | Props and usage for 6 extended components |
|
|
28
|
+
|
|
29
|
+
## Components
|
|
30
|
+
|
|
31
|
+
**Core:** Button, Card (CardHeader, CardTitle, CardDescription, CardContent, CardFooter), Input, Checkbox, ProgressBar, Table (TableHeader, TableBody, TableRow, TableHead, TableCell), HighlightText, Badge, Separator, Tabs (TabsList, TabsTrigger, TabsContent), Switch, Tooltip, ThemeToggle
|
|
32
|
+
|
|
33
|
+
**Extended:** Counter, ArrowButton, ChooseList, Popup, StatusBar, WeekViewCalendar
|
|
34
|
+
|
|
35
|
+
## Dark Mode
|
|
36
|
+
|
|
37
|
+
Add `class="dark"` to `<html>`. Or use the `ThemeToggle` component which does this automatically.
|
|
38
|
+
|
|
39
|
+
## Build
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
bun run build
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Outputs: `dist/index.js` (CJS), `dist/index.mjs` (ESM), `dist/index.d.ts`, `dist/index.css`
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background:0 0% 100%;--foreground:240 10% 3.9%;--card:0 0% 100%;--card-foreground:240 10% 3.9%;--popover:0 0% 100%;--popover-foreground:240 10% 3.9%;--primary:240 5.9% 10%;--primary-foreground:0 0% 98%;--secondary:240 4.8% 95.9%;--secondary-foreground:240 5.9% 10%;--muted:240 4.8% 95.9%;--muted-foreground:240 3.8% 46.1%;--accent:240 4.8% 95.9%;--accent-foreground:240 5.9% 10%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:240 5.9% 90%;--input:240 5.9% 90%;--ring:240 5.9% 10%;--radius:0.5rem;--purple:258 90% 66%;--orange:24 95% 53%;--blue:217 91% 60%;--green:142 71% 45%;--red:0 84% 60%}.dark{--background:240 10% 3.9%;--foreground:0 0% 98%;--card:240 10% 3.9%;--card-foreground:0 0% 98%;--popover:240 10% 3.9%;--popover-foreground:0 0% 98%;--primary:0 0% 98%;--primary-foreground:240 5.9% 10%;--secondary:240 3.7% 15.6%;--secondary-foreground:0 0% 98%;--muted:240 3.7% 15.6%;--muted-foreground:240 5% 64.9%;--accent:240 3.7% 15.6%;--accent-foreground:0 0% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:0 0% 98%;--border:240 3.7% 15.6%;--input:240 3.7% 15.6%;--ring:240 4.9% 83.9%;--radius:0.5rem;--purple:258 90% 66%;--orange:24 95% 53%;--blue:217 91% 60%;--green:142 71% 45%;--red:0 84% 60%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-moz-selection{background:#fff;color:#000}::selection{background:#fff;color:#000}.dark ::-moz-selection{background:#fff;color:#000}.dark ::selection{background:#fff;color:#000}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.left-0{left:0}.left-0\.5{left:.125rem}.right-0{right:0}.top-0\.5{top:.125rem}.z-10{z-index:10}.z-50{z-index:50}.z-\[9999\]{z-index:9999}.mb-4{margin-bottom:1rem}.ml-auto{margin-left:auto}.mt-2{margin-top:.5rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[1px\]{height:1px}.h-full{height:100%}.max-h-\[500px\]{max-height:500px}.w-10{width:2.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[1px\]{width:1px}.w-full{width:100%}.max-w-lg{max-width:32rem}.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:.75rem}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-x{border-left-width:1px;border-right-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-\[hsl\(var\(--blue\)\)\]\/20{border-color:hsl(var(--blue)/.2)}.border-\[hsl\(var\(--green\)\)\]\/20{border-color:hsl(var(--green)/.2)}.border-\[hsl\(var\(--orange\)\)\]\/20{border-color:hsl(var(--orange)/.2)}.border-\[hsl\(var\(--purple\)\)\]\/20{border-color:hsl(var(--purple)/.2)}.border-\[hsl\(var\(--red\)\)\]\/20{border-color:hsl(var(--red)/.2)}.border-border{border-color:hsl(var(--border))}.border-border\/50{border-color:hsl(var(--border)/.5)}.border-foreground\/20{border-color:hsl(var(--foreground)/.2)}.border-foreground\/30{border-color:hsl(var(--foreground)/.3)}.border-input{border-color:hsl(var(--input))}.border-transparent{border-color:transparent}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.bg-\[hsl\(var\(--blue\)\)\]{background-color:hsl(var(--blue))}.bg-\[hsl\(var\(--blue\)\)\]\/15{background-color:hsl(var(--blue)/.15)}.bg-\[hsl\(var\(--green\)\)\]{background-color:hsl(var(--green))}.bg-\[hsl\(var\(--green\)\)\]\/15{background-color:hsl(var(--green)/.15)}.bg-\[hsl\(var\(--orange\)\)\]{background-color:hsl(var(--orange))}.bg-\[hsl\(var\(--orange\)\)\]\/15{background-color:hsl(var(--orange)/.15)}.bg-\[hsl\(var\(--purple\)\)\]{background-color:hsl(var(--purple))}.bg-\[hsl\(var\(--purple\)\)\]\/15{background-color:hsl(var(--purple)/.15)}.bg-\[hsl\(var\(--red\)\)\]{background-color:hsl(var(--red))}.bg-\[hsl\(var\(--red\)\)\]\/15{background-color:hsl(var(--red)/.15)}.bg-background{background-color:hsl(var(--background))}.bg-background\/80{background-color:hsl(var(--background)/.8)}.bg-border{background-color:hsl(var(--border))}.bg-card{background-color:hsl(var(--card))}.bg-foreground{background-color:hsl(var(--foreground))}.bg-foreground\/10{background-color:hsl(var(--foreground)/.1)}.bg-input{background-color:hsl(var(--input))}.bg-muted{background-color:hsl(var(--muted))}.bg-muted-foreground{background-color:hsl(var(--muted-foreground))}.bg-muted\/30{background-color:hsl(var(--muted)/.3)}.bg-muted\/50{background-color:hsl(var(--muted)/.5)}.bg-primary{background-color:hsl(var(--primary))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pl-2{padding-left:.5rem}.pr-10{padding-right:2.5rem}.pt-0{padding-top:0}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.text-\[hsl\(var\(--blue\)\)\]{color:hsl(var(--blue))}.text-\[hsl\(var\(--green\)\)\]{color:hsl(var(--green))}.text-\[hsl\(var\(--orange\)\)\]{color:hsl(var(--orange))}.text-\[hsl\(var\(--purple\)\)\]{color:hsl(var(--purple))}.text-\[hsl\(var\(--red\)\)\]{color:hsl(var(--red))}.text-background{color:hsl(var(--background))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-foreground{color:hsl(var(--foreground))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring-offset-background{--tw-ring-offset-color:hsl(var(--background))}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.1);border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.2)}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.file\:border-0::file-selector-button{border-width:0}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.file\:text-foreground::file-selector-button{color:hsl(var(--foreground))}.placeholder\:text-muted-foreground::-moz-placeholder{color:hsl(var(--muted-foreground))}.placeholder\:text-muted-foreground::placeholder{color:hsl(var(--muted-foreground))}.checked\:border-foreground:checked{border-color:hsl(var(--foreground))}.checked\:bg-foreground:checked{background-color:hsl(var(--foreground))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-\[hsl\(var\(--blue\)\)\]\/90:hover{background-color:hsl(var(--blue)/.9)}.hover\:bg-\[hsl\(var\(--green\)\)\]\/90:hover{background-color:hsl(var(--green)/.9)}.hover\:bg-\[hsl\(var\(--orange\)\)\]\/90:hover{background-color:hsl(var(--orange)/.9)}.hover\:bg-\[hsl\(var\(--purple\)\)\]\/90:hover{background-color:hsl(var(--purple)/.9)}.hover\:bg-\[hsl\(var\(--red\)\)\]\/80:hover{background-color:hsl(var(--red)/.8)}.hover\:bg-\[hsl\(var\(--red\)\)\]\/90:hover{background-color:hsl(var(--red)/.9)}.hover\:bg-accent:hover{background-color:hsl(var(--accent))}.hover\:bg-background\/50:hover{background-color:hsl(var(--background)/.5)}.hover\:bg-muted\/50:hover{background-color:hsl(var(--muted)/.5)}.hover\:bg-primary\/80:hover{background-color:hsl(var(--primary)/.8)}.hover\:bg-primary\/90:hover{background-color:hsl(var(--primary)/.9)}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary)/.8)}.hover\:text-accent-foreground:hover{color:hsl(var(--accent-foreground))}.hover\:text-foreground:hover{color:hsl(var(--foreground))}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:hsl(var(--ring))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.peer:checked~.peer-checked\:translate-x-4{--tw-translate-x:1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:bg-background{background-color:hsl(var(--background))}.peer:checked~.peer-checked\:bg-foreground{background-color:hsl(var(--foreground))}.peer:checked~.peer-checked\:opacity-100{opacity:1}.peer:focus-visible~.peer-focus-visible\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus-visible~.peer-focus-visible\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\:ring-ring{--tw-ring-color:hsl(var(--ring))}.peer:focus-visible~.peer-focus-visible\:ring-offset-2{--tw-ring-offset-width:2px}.peer:focus-visible~.peer-focus-visible\:ring-offset-background{--tw-ring-offset-color:hsl(var(--background))}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:opacity-50{opacity:.5}.peer:disabled~.peer-disabled\:opacity-70{opacity:.7}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:hsl(var(--muted))}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-width:0}.\[\&_tr\]\:border-b tr{border-bottom-width:1px}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import React, { ButtonHTMLAttributes, InputHTMLAttributes, HTMLAttributes, SelectHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
5
|
+
|
|
6
|
+
declare const variants: {
|
|
7
|
+
primary: string;
|
|
8
|
+
secondary: string;
|
|
9
|
+
destructive: string;
|
|
10
|
+
outline: string;
|
|
11
|
+
ghost: string;
|
|
12
|
+
purple: string;
|
|
13
|
+
orange: string;
|
|
14
|
+
blue: string;
|
|
15
|
+
green: string;
|
|
16
|
+
};
|
|
17
|
+
declare const sizes: {
|
|
18
|
+
sm: string;
|
|
19
|
+
default: string;
|
|
20
|
+
lg: string;
|
|
21
|
+
icon: string;
|
|
22
|
+
};
|
|
23
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
24
|
+
variant?: keyof typeof variants;
|
|
25
|
+
size?: keyof typeof sizes;
|
|
26
|
+
}
|
|
27
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
28
|
+
|
|
29
|
+
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
32
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
33
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
35
|
+
|
|
36
|
+
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
37
|
+
}
|
|
38
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
39
|
+
|
|
40
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
41
|
+
label?: string;
|
|
42
|
+
}
|
|
43
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
44
|
+
|
|
45
|
+
declare const colorClasses: {
|
|
46
|
+
white: string;
|
|
47
|
+
purple: string;
|
|
48
|
+
orange: string;
|
|
49
|
+
blue: string;
|
|
50
|
+
green: string;
|
|
51
|
+
};
|
|
52
|
+
interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
53
|
+
value?: number;
|
|
54
|
+
max?: number;
|
|
55
|
+
showLabel?: boolean;
|
|
56
|
+
color?: keyof typeof colorClasses;
|
|
57
|
+
}
|
|
58
|
+
declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
59
|
+
|
|
60
|
+
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
|
|
61
|
+
declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
62
|
+
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
63
|
+
declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
|
|
64
|
+
declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
65
|
+
declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
66
|
+
|
|
67
|
+
interface HighlightTextProps extends HTMLAttributes<HTMLSpanElement> {
|
|
68
|
+
children?: React.ReactNode;
|
|
69
|
+
}
|
|
70
|
+
declare const HighlightText: React.ForwardRefExoticComponent<HighlightTextProps & React.RefAttributes<HTMLSpanElement>>;
|
|
71
|
+
|
|
72
|
+
declare const colorVariants: {
|
|
73
|
+
default: string;
|
|
74
|
+
secondary: string;
|
|
75
|
+
outline: string;
|
|
76
|
+
white: string;
|
|
77
|
+
destructive: string;
|
|
78
|
+
purple: string;
|
|
79
|
+
orange: string;
|
|
80
|
+
blue: string;
|
|
81
|
+
green: string;
|
|
82
|
+
red: string;
|
|
83
|
+
};
|
|
84
|
+
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
85
|
+
variant?: keyof typeof colorVariants;
|
|
86
|
+
}
|
|
87
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
88
|
+
|
|
89
|
+
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
90
|
+
orientation?: "horizontal" | "vertical";
|
|
91
|
+
}
|
|
92
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
93
|
+
|
|
94
|
+
interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
95
|
+
defaultValue?: string;
|
|
96
|
+
value?: string;
|
|
97
|
+
onValueChange?: (value: string) => void;
|
|
98
|
+
}
|
|
99
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
100
|
+
declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
101
|
+
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
102
|
+
value: string;
|
|
103
|
+
}
|
|
104
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
105
|
+
interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
106
|
+
value: string;
|
|
107
|
+
}
|
|
108
|
+
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
109
|
+
|
|
110
|
+
interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
|
|
111
|
+
label?: string;
|
|
112
|
+
}
|
|
113
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
114
|
+
|
|
115
|
+
interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
|
|
116
|
+
content: React.ReactNode;
|
|
117
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
118
|
+
delayMs?: number;
|
|
119
|
+
}
|
|
120
|
+
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
|
|
121
|
+
|
|
122
|
+
interface ThemeToggleProps {
|
|
123
|
+
className?: string;
|
|
124
|
+
defaultTheme?: "light" | "dark";
|
|
125
|
+
}
|
|
126
|
+
declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
|
|
127
|
+
|
|
128
|
+
interface CounterProps {
|
|
129
|
+
initialValue?: number;
|
|
130
|
+
min?: number;
|
|
131
|
+
max?: number;
|
|
132
|
+
step?: number;
|
|
133
|
+
onChange?: (value: number) => void;
|
|
134
|
+
className?: string;
|
|
135
|
+
}
|
|
136
|
+
declare const Counter: React.ForwardRefExoticComponent<CounterProps & React.RefAttributes<HTMLDivElement>>;
|
|
137
|
+
|
|
138
|
+
interface ArrowButtonProps extends ButtonProps {
|
|
139
|
+
direction?: "left" | "right";
|
|
140
|
+
text?: string;
|
|
141
|
+
}
|
|
142
|
+
declare const ArrowButton: React.ForwardRefExoticComponent<ArrowButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
143
|
+
|
|
144
|
+
interface ChooseListProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
145
|
+
options: {
|
|
146
|
+
label: string;
|
|
147
|
+
value: string | number;
|
|
148
|
+
}[];
|
|
149
|
+
}
|
|
150
|
+
declare const ChooseList: React.ForwardRefExoticComponent<ChooseListProps & React.RefAttributes<HTMLSelectElement>>;
|
|
151
|
+
|
|
152
|
+
interface PopupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
153
|
+
open: boolean;
|
|
154
|
+
onClose: () => void;
|
|
155
|
+
title?: React.ReactNode;
|
|
156
|
+
}
|
|
157
|
+
declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
|
|
158
|
+
|
|
159
|
+
interface StatusBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
160
|
+
status?: "idle" | "working" | "error" | "ready" | "live";
|
|
161
|
+
label?: string;
|
|
162
|
+
}
|
|
163
|
+
declare const StatusBar: React.ForwardRefExoticComponent<StatusBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
164
|
+
|
|
165
|
+
interface WeekViewEvent {
|
|
166
|
+
id: string;
|
|
167
|
+
dayIndex: number;
|
|
168
|
+
startHour: number;
|
|
169
|
+
durationHours: number;
|
|
170
|
+
title: string;
|
|
171
|
+
color?: string;
|
|
172
|
+
}
|
|
173
|
+
interface WeekViewCalendarProps extends HTMLAttributes<HTMLDivElement> {
|
|
174
|
+
events?: WeekViewEvent[];
|
|
175
|
+
startHour?: number;
|
|
176
|
+
endHour?: number;
|
|
177
|
+
}
|
|
178
|
+
declare const WeekViewCalendar: React.ForwardRefExoticComponent<WeekViewCalendarProps & React.RefAttributes<HTMLDivElement>>;
|
|
179
|
+
|
|
180
|
+
export { ArrowButton, type ArrowButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ChooseList, type ChooseListProps, Counter, type CounterProps, HighlightText, type HighlightTextProps, Input, type InputProps, Popup, type PopupProps, ProgressBar, type ProgressBarProps, Separator, type SeparatorProps, StatusBar, type StatusBarProps, Switch, type SwitchProps, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, ThemeToggle, type ThemeToggleProps, Tooltip, type TooltipProps, WeekViewCalendar, type WeekViewCalendarProps, type WeekViewEvent, cn };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import React, { ButtonHTMLAttributes, InputHTMLAttributes, HTMLAttributes, SelectHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
5
|
+
|
|
6
|
+
declare const variants: {
|
|
7
|
+
primary: string;
|
|
8
|
+
secondary: string;
|
|
9
|
+
destructive: string;
|
|
10
|
+
outline: string;
|
|
11
|
+
ghost: string;
|
|
12
|
+
purple: string;
|
|
13
|
+
orange: string;
|
|
14
|
+
blue: string;
|
|
15
|
+
green: string;
|
|
16
|
+
};
|
|
17
|
+
declare const sizes: {
|
|
18
|
+
sm: string;
|
|
19
|
+
default: string;
|
|
20
|
+
lg: string;
|
|
21
|
+
icon: string;
|
|
22
|
+
};
|
|
23
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
24
|
+
variant?: keyof typeof variants;
|
|
25
|
+
size?: keyof typeof sizes;
|
|
26
|
+
}
|
|
27
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
28
|
+
|
|
29
|
+
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
32
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
33
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
35
|
+
|
|
36
|
+
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
37
|
+
}
|
|
38
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
39
|
+
|
|
40
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
41
|
+
label?: string;
|
|
42
|
+
}
|
|
43
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
44
|
+
|
|
45
|
+
declare const colorClasses: {
|
|
46
|
+
white: string;
|
|
47
|
+
purple: string;
|
|
48
|
+
orange: string;
|
|
49
|
+
blue: string;
|
|
50
|
+
green: string;
|
|
51
|
+
};
|
|
52
|
+
interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
53
|
+
value?: number;
|
|
54
|
+
max?: number;
|
|
55
|
+
showLabel?: boolean;
|
|
56
|
+
color?: keyof typeof colorClasses;
|
|
57
|
+
}
|
|
58
|
+
declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
59
|
+
|
|
60
|
+
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
|
|
61
|
+
declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
62
|
+
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
63
|
+
declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
|
|
64
|
+
declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
65
|
+
declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
66
|
+
|
|
67
|
+
interface HighlightTextProps extends HTMLAttributes<HTMLSpanElement> {
|
|
68
|
+
children?: React.ReactNode;
|
|
69
|
+
}
|
|
70
|
+
declare const HighlightText: React.ForwardRefExoticComponent<HighlightTextProps & React.RefAttributes<HTMLSpanElement>>;
|
|
71
|
+
|
|
72
|
+
declare const colorVariants: {
|
|
73
|
+
default: string;
|
|
74
|
+
secondary: string;
|
|
75
|
+
outline: string;
|
|
76
|
+
white: string;
|
|
77
|
+
destructive: string;
|
|
78
|
+
purple: string;
|
|
79
|
+
orange: string;
|
|
80
|
+
blue: string;
|
|
81
|
+
green: string;
|
|
82
|
+
red: string;
|
|
83
|
+
};
|
|
84
|
+
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
85
|
+
variant?: keyof typeof colorVariants;
|
|
86
|
+
}
|
|
87
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
88
|
+
|
|
89
|
+
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
90
|
+
orientation?: "horizontal" | "vertical";
|
|
91
|
+
}
|
|
92
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
93
|
+
|
|
94
|
+
interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
95
|
+
defaultValue?: string;
|
|
96
|
+
value?: string;
|
|
97
|
+
onValueChange?: (value: string) => void;
|
|
98
|
+
}
|
|
99
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
100
|
+
declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
101
|
+
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
102
|
+
value: string;
|
|
103
|
+
}
|
|
104
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
105
|
+
interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
106
|
+
value: string;
|
|
107
|
+
}
|
|
108
|
+
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
109
|
+
|
|
110
|
+
interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
|
|
111
|
+
label?: string;
|
|
112
|
+
}
|
|
113
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
114
|
+
|
|
115
|
+
interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
|
|
116
|
+
content: React.ReactNode;
|
|
117
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
118
|
+
delayMs?: number;
|
|
119
|
+
}
|
|
120
|
+
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
|
|
121
|
+
|
|
122
|
+
interface ThemeToggleProps {
|
|
123
|
+
className?: string;
|
|
124
|
+
defaultTheme?: "light" | "dark";
|
|
125
|
+
}
|
|
126
|
+
declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
|
|
127
|
+
|
|
128
|
+
interface CounterProps {
|
|
129
|
+
initialValue?: number;
|
|
130
|
+
min?: number;
|
|
131
|
+
max?: number;
|
|
132
|
+
step?: number;
|
|
133
|
+
onChange?: (value: number) => void;
|
|
134
|
+
className?: string;
|
|
135
|
+
}
|
|
136
|
+
declare const Counter: React.ForwardRefExoticComponent<CounterProps & React.RefAttributes<HTMLDivElement>>;
|
|
137
|
+
|
|
138
|
+
interface ArrowButtonProps extends ButtonProps {
|
|
139
|
+
direction?: "left" | "right";
|
|
140
|
+
text?: string;
|
|
141
|
+
}
|
|
142
|
+
declare const ArrowButton: React.ForwardRefExoticComponent<ArrowButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
143
|
+
|
|
144
|
+
interface ChooseListProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
145
|
+
options: {
|
|
146
|
+
label: string;
|
|
147
|
+
value: string | number;
|
|
148
|
+
}[];
|
|
149
|
+
}
|
|
150
|
+
declare const ChooseList: React.ForwardRefExoticComponent<ChooseListProps & React.RefAttributes<HTMLSelectElement>>;
|
|
151
|
+
|
|
152
|
+
interface PopupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
153
|
+
open: boolean;
|
|
154
|
+
onClose: () => void;
|
|
155
|
+
title?: React.ReactNode;
|
|
156
|
+
}
|
|
157
|
+
declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
|
|
158
|
+
|
|
159
|
+
interface StatusBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
160
|
+
status?: "idle" | "working" | "error" | "ready" | "live";
|
|
161
|
+
label?: string;
|
|
162
|
+
}
|
|
163
|
+
declare const StatusBar: React.ForwardRefExoticComponent<StatusBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
164
|
+
|
|
165
|
+
interface WeekViewEvent {
|
|
166
|
+
id: string;
|
|
167
|
+
dayIndex: number;
|
|
168
|
+
startHour: number;
|
|
169
|
+
durationHours: number;
|
|
170
|
+
title: string;
|
|
171
|
+
color?: string;
|
|
172
|
+
}
|
|
173
|
+
interface WeekViewCalendarProps extends HTMLAttributes<HTMLDivElement> {
|
|
174
|
+
events?: WeekViewEvent[];
|
|
175
|
+
startHour?: number;
|
|
176
|
+
endHour?: number;
|
|
177
|
+
}
|
|
178
|
+
declare const WeekViewCalendar: React.ForwardRefExoticComponent<WeekViewCalendarProps & React.RefAttributes<HTMLDivElement>>;
|
|
179
|
+
|
|
180
|
+
export { ArrowButton, type ArrowButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ChooseList, type ChooseListProps, Counter, type CounterProps, HighlightText, type HighlightTextProps, Input, type InputProps, Popup, type PopupProps, ProgressBar, type ProgressBarProps, Separator, type SeparatorProps, StatusBar, type StatusBarProps, Switch, type SwitchProps, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, ThemeToggle, type ThemeToggleProps, Tooltip, type TooltipProps, WeekViewCalendar, type WeekViewCalendarProps, type WeekViewEvent, cn };
|