@khanhminh/design-system 1.2.0 → 1.3.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 +107 -59
- package/dist/index.cjs +2 -2
- package/dist/index.css +1 -1
- package/dist/index.js +2 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,102 +1,150 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Design System UI Kit
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A comprehensive, production-ready design system and component library built with React 18+, TypeScript, Tailwind CSS, and Radix UI. Export reusable, accessible, and themeable components for consistent design across your applications.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
7
|
+
- **Component Library** - Pre-built, accessible UI components
|
|
8
|
+
- **Radix UI Foundation** - Built on top of Radix UI for accessibility
|
|
9
|
+
- **TypeScript** - Full type safety and IntelliSense support
|
|
10
|
+
- **Tailwind CSS** - Utility-first styling with PostCSS
|
|
11
|
+
- **Class Variance Authority** - Flexible component variants
|
|
12
|
+
- **Icons** - Lucide React icons included
|
|
13
|
+
- **ESLint + Prettier** - Code quality and formatting
|
|
14
|
+
- **Rollup + Vite** - Optimized build tools for library and app development
|
|
13
15
|
|
|
14
|
-
##
|
|
16
|
+
## Installation
|
|
15
17
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
```bash
|
|
19
|
+
npm install @khanhminh/design-system
|
|
20
|
+
# or
|
|
21
|
+
pnpm install @khanhminh/design-system
|
|
22
|
+
# or
|
|
23
|
+
yarn add @khanhminh/design-system
|
|
24
|
+
```
|
|
22
25
|
|
|
23
|
-
##
|
|
26
|
+
## Getting Started
|
|
24
27
|
|
|
25
|
-
|
|
28
|
+
### Development
|
|
29
|
+
|
|
30
|
+
1. Clone the repository
|
|
26
31
|
|
|
27
32
|
```bash
|
|
28
|
-
git clone https://github.com/KhanhMinh1392/
|
|
29
|
-
cd
|
|
33
|
+
git clone https://github.com/KhanhMinh1392/design-system-ui-kit.git
|
|
34
|
+
cd design-system-ui-kit
|
|
30
35
|
```
|
|
31
36
|
|
|
32
37
|
2. Install dependencies
|
|
33
38
|
|
|
34
39
|
```bash
|
|
35
40
|
npm install
|
|
36
|
-
# or
|
|
37
|
-
pnpm install
|
|
38
|
-
# or
|
|
39
|
-
yarn install
|
|
40
41
|
```
|
|
41
42
|
|
|
42
|
-
3.
|
|
43
|
+
3. Start the dev server
|
|
43
44
|
|
|
44
45
|
```bash
|
|
45
46
|
npm run dev
|
|
46
47
|
```
|
|
47
48
|
|
|
48
|
-
4.
|
|
49
|
+
4. View and develop components in your browser
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
npm run build
|
|
52
|
-
```
|
|
51
|
+
### Building
|
|
53
52
|
|
|
54
|
-
|
|
53
|
+
Build the component library for production:
|
|
55
54
|
|
|
56
55
|
```bash
|
|
57
|
-
npm run
|
|
56
|
+
npm run build
|
|
58
57
|
```
|
|
59
58
|
|
|
60
|
-
|
|
59
|
+
This creates:
|
|
60
|
+
- `dist/index.js` - ES modules
|
|
61
|
+
- `dist/index.cjs` - CommonJS
|
|
62
|
+
- `dist/index.d.ts` - TypeScript definitions
|
|
63
|
+
- `dist/index.css` - Compiled styles
|
|
61
64
|
|
|
62
|
-
|
|
65
|
+
## Available Scripts
|
|
63
66
|
|
|
64
|
-
- `dev` - Start Vite dev server
|
|
65
|
-
- `build` - Type-check and build
|
|
67
|
+
- `dev` - Start Vite dev server for component development
|
|
68
|
+
- `build` - Type-check and build library + styles with Rollup
|
|
69
|
+
- `build:vite` - Build with Vite only
|
|
70
|
+
- `build:lib` - Build library with Rollup only
|
|
71
|
+
- `lint` - Run ESLint to check code quality
|
|
66
72
|
- `preview` - Preview the production build locally
|
|
67
|
-
- `
|
|
73
|
+
- `pre-commit` - Lint-staged for pre-commit hooks
|
|
68
74
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
## Project structure
|
|
75
|
+
## Project Structure
|
|
72
76
|
|
|
73
77
|
```
|
|
74
78
|
.
|
|
75
|
-
├─
|
|
76
|
-
├─
|
|
77
|
-
│
|
|
78
|
-
│ ├─
|
|
79
|
-
│ ├─ lib/
|
|
80
|
-
│ ├─
|
|
81
|
-
│ ├─
|
|
82
|
-
│
|
|
83
|
-
|
|
84
|
-
├─
|
|
85
|
-
|
|
79
|
+
├─ src/
|
|
80
|
+
│ ├─ components/ # Reusable UI components
|
|
81
|
+
│ │ └─ ui/ # Base components
|
|
82
|
+
│ ├─ hooks/ # Custom React hooks
|
|
83
|
+
│ ├─ lib/ # Utility functions
|
|
84
|
+
│ ├─ assets/ # Static assets
|
|
85
|
+
│ ├─ index.ts # Library entry point
|
|
86
|
+
│ ├─ index.css # Global styles
|
|
87
|
+
│ └─ vite-env.d.ts # Vite environment types
|
|
88
|
+
├─ public/ # Static files
|
|
89
|
+
├─ dist/ # Built library output
|
|
90
|
+
├─ rollup.config.js # Rollup configuration
|
|
91
|
+
├─ vite.config.ts # Vite configuration
|
|
92
|
+
├─ tsconfig.json # TypeScript configuration
|
|
93
|
+
├─ tailwind.config.js # Tailwind CSS configuration
|
|
94
|
+
├─ postcss.config.js # PostCSS configuration
|
|
95
|
+
└─ package.json
|
|
86
96
|
```
|
|
87
97
|
|
|
88
|
-
##
|
|
98
|
+
## Usage
|
|
99
|
+
|
|
100
|
+
Import components from the library:
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import { Button } from '@khanhminh/design-system';
|
|
104
|
+
|
|
105
|
+
export function App() {
|
|
106
|
+
return <Button>Click me</Button>;
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Component Development
|
|
111
|
+
|
|
112
|
+
Add new components to `src/components/ui/`:
|
|
113
|
+
|
|
114
|
+
1. Create a new file: `src/components/ui/my-component.tsx`
|
|
115
|
+
2. Export from `src/components/index.ts`
|
|
116
|
+
3. Export from `src/index.ts` for library users
|
|
117
|
+
4. Run `npm run build` to compile
|
|
118
|
+
|
|
119
|
+
## Styling
|
|
120
|
+
|
|
121
|
+
Components use Tailwind CSS with PostCSS. Customize styles in:
|
|
122
|
+
- `tailwind.config.js` - Tailwind configuration
|
|
123
|
+
- `postcss.config.js` - PostCSS plugins
|
|
124
|
+
|
|
125
|
+
## Code Quality
|
|
126
|
+
|
|
127
|
+
- **ESLint** - Linting with modern JavaScript rules
|
|
128
|
+
- **Prettier** - Automatic code formatting
|
|
129
|
+
- **Pre-commit hooks** - Lint-staged for automatic checks before commits
|
|
130
|
+
|
|
131
|
+
Configure ESLint in `eslint.config.js` and Prettier in `.prettierrc`.
|
|
132
|
+
|
|
133
|
+
## Publishing
|
|
134
|
+
|
|
135
|
+
To publish to npm:
|
|
136
|
+
|
|
137
|
+
1. Update the version in `package.json`
|
|
138
|
+
2. Build the library: `npm run build`
|
|
139
|
+
3. Publish: `npm publish`
|
|
89
140
|
|
|
90
|
-
|
|
91
|
-
- Remove or adapt Husky / lint-staged if you don't want pre-commit hooks.
|
|
92
|
-
- Update ESLint / Prettier rules to match your team's preferences.
|
|
141
|
+
The `files` field in `package.json` specifies which files are included in the published package.
|
|
93
142
|
|
|
94
|
-
##
|
|
143
|
+
## Browser Support
|
|
95
144
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
- Tailwind CSS IntelliSense
|
|
145
|
+
Supports all modern browsers (Chrome, Firefox, Safari, Edge) that support:
|
|
146
|
+
- ES2020
|
|
147
|
+
- CSS Custom Properties (CSS Variables)
|
|
100
148
|
|
|
101
149
|
## Contribution
|
|
102
150
|
|
package/dist/index.cjs
CHANGED
|
@@ -427,10 +427,10 @@ function cn(...inputs) {
|
|
|
427
427
|
const buttonVariants = classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
428
428
|
variants: {
|
|
429
429
|
variant: {
|
|
430
|
-
default: 'bg-
|
|
430
|
+
default: 'bg-cerulean-600 text-white hover:bg-cerulean-700 focus-visible:ring-cerulean-600/20',
|
|
431
431
|
destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
|
432
432
|
outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
|
433
|
-
secondary: 'bg-
|
|
433
|
+
secondary: 'border border-cerulean-600 bg-white text-cerulean-600 hover:bg-cerulean-50 focus-visible:ring-cerulean-600/20',
|
|
434
434
|
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
|
435
435
|
link: 'text-primary underline-offset-4 hover:underline',
|
|
436
436
|
},
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-200:oklch(92.8% 0.006 264.531);--color-white:#fff;--spacing:0.25rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--font-weight-medium:500;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}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;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.relative{position:relative}.static{position:static}.contents{display:contents}.inline-flex{display:inline-flex}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.size-9{height:calc(var(--spacing)*9);width:calc(var(--spacing)*9)}.size-10{height:calc(var(--spacing)*10);width:calc(var(--spacing)*10)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.shrink-0{flex-shrink:0}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-background{background-color:var(--background)}.bg-destructive{background-color:var(--destructive)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,rgba(0,0,0,.05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.outline-none{--tw-outline-style:none;outline-style:none}.hover\:bg-accent{&:hover{@media (hover:hover){background-color:var(--accent)}}}.hover\:bg-destructive\/90{&:hover{@media (hover:hover){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}}.hover\:bg-primary\/90{&:hover{@media (hover:hover){background-color:var(--primary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}}}.hover\:bg-secondary\/80{&:hover{@media (hover:hover){background-color:var(--secondary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}}}.hover\:text-accent-foreground{&:hover{@media (hover:hover){color:var(--accent-foreground)}}}.hover\:underline{&:hover{@media (hover:hover){text-decoration-line:underline}}}.focus-visible\:border-ring{&:focus-visible{border-color:var(--ring)}}.focus-visible\:ring-\[3px\]{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\:ring-destructive\/20{&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.focus-visible\:ring-ring\/50{&:focus-visible{--tw-ring-color:var(--ring);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--ring) 50%,transparent)}}}.disabled\:pointer-events-none{&:disabled{pointer-events:none}}.disabled\:opacity-50{&:disabled{opacity:50%}}.has-\[\>svg\]\:px-1\.5{&:has(>svg){padding-inline:calc(var(--spacing)*1.5)}}.has-\[\>svg\]\:px-2\.5{&:has(>svg){padding-inline:calc(var(--spacing)*2.5)}}.has-\[\>svg\]\:px-3{&:has(>svg){padding-inline:calc(var(--spacing)*3)}}.has-\[\>svg\]\:px-4{&:has(>svg){padding-inline:calc(var(--spacing)*4)}}.aria-invalid\:border-destructive{&[aria-invalid=true]{border-color:var(--destructive)}}.aria-invalid\:ring-destructive\/20{&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.dark\:border-input{&:is(.dark *){border-color:var(--input)}}.dark\:bg-destructive\/60{&:is(.dark *){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 60%,transparent)}}}.dark\:bg-input\/30{&:is(.dark *){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 30%,transparent)}}}.dark\:hover\:bg-accent\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--accent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}}}}.dark\:hover\:bg-input\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 50%,transparent)}}}}}.dark\:focus-visible\:ring-destructive\/40{&:is(.dark *){&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.dark\:aria-invalid\:ring-destructive\/40{&:is(.dark *){&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.\[\&_svg\]\:pointer-events-none{& svg{pointer-events:none}}.\[\&_svg\]\:shrink-0{& svg{flex-shrink:0}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3{& svg:not([class*=size-]){height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4{& svg:not([class*=size-]){height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@layer base{*,::backdrop,::file-selector-button,:after,:before{border-color:var(--color-gray-200,currentcolor)}*{border-color:var(--border);outline-color:var(--ring);@supports (color:color-mix(in lab,red,red)){outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}:root{--radius:0.625rem;--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0/10%);--input:oklch(1 0 0/15%);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0/10%);--sidebar-ring:oklch(0.556 0 0)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}
|
|
1
|
+
/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-200:oklch(92.8% 0.006 264.531);--color-white:#fff;--spacing:0.25rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--font-weight-medium:500;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}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;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.relative{position:relative}.contents{display:contents}.inline-flex{display:inline-flex}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.size-9{height:calc(var(--spacing)*9);width:calc(var(--spacing)*9)}.size-10{height:calc(var(--spacing)*10);width:calc(var(--spacing)*10)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.shrink-0{flex-shrink:0}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-cerulean-600{border-color:var(--cerulean-600)}.bg-background{background-color:var(--background)}.bg-cerulean-600{background-color:var(--cerulean-600)}.bg-destructive{background-color:var(--destructive)}.bg-white{background-color:var(--color-white)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-cerulean-600{color:var(--cerulean-600)}.text-primary{color:var(--primary)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,rgba(0,0,0,.05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.outline-none{--tw-outline-style:none;outline-style:none}.hover\:bg-accent{&:hover{@media (hover:hover){background-color:var(--accent)}}}.hover\:bg-cerulean-50{&:hover{@media (hover:hover){background-color:var(--cerulean-50)}}}.hover\:bg-cerulean-700{&:hover{@media (hover:hover){background-color:var(--cerulean-700)}}}.hover\:bg-destructive\/90{&:hover{@media (hover:hover){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}}.hover\:text-accent-foreground{&:hover{@media (hover:hover){color:var(--accent-foreground)}}}.hover\:underline{&:hover{@media (hover:hover){text-decoration-line:underline}}}.focus-visible\:border-ring{&:focus-visible{border-color:var(--ring)}}.focus-visible\:ring-\[3px\]{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\:ring-cerulean-600\/20{&:focus-visible{--tw-ring-color:var(--cerulean-600);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--cerulean-600) 20%,transparent)}}}.focus-visible\:ring-destructive\/20{&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.focus-visible\:ring-ring\/50{&:focus-visible{--tw-ring-color:var(--ring);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--ring) 50%,transparent)}}}.disabled\:pointer-events-none{&:disabled{pointer-events:none}}.disabled\:opacity-50{&:disabled{opacity:50%}}.has-\[\>svg\]\:px-1\.5{&:has(>svg){padding-inline:calc(var(--spacing)*1.5)}}.has-\[\>svg\]\:px-2\.5{&:has(>svg){padding-inline:calc(var(--spacing)*2.5)}}.has-\[\>svg\]\:px-3{&:has(>svg){padding-inline:calc(var(--spacing)*3)}}.has-\[\>svg\]\:px-4{&:has(>svg){padding-inline:calc(var(--spacing)*4)}}.aria-invalid\:border-destructive{&[aria-invalid=true]{border-color:var(--destructive)}}.aria-invalid\:ring-destructive\/20{&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.dark\:border-input{&:is(.dark *){border-color:var(--input)}}.dark\:bg-destructive\/60{&:is(.dark *){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 60%,transparent)}}}.dark\:bg-input\/30{&:is(.dark *){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 30%,transparent)}}}.dark\:hover\:bg-accent\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--accent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}}}}.dark\:hover\:bg-input\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 50%,transparent)}}}}}.dark\:focus-visible\:ring-destructive\/40{&:is(.dark *){&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.dark\:aria-invalid\:ring-destructive\/40{&:is(.dark *){&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.\[\&_svg\]\:pointer-events-none{& svg{pointer-events:none}}.\[\&_svg\]\:shrink-0{& svg{flex-shrink:0}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3{& svg:not([class*=size-]){height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4{& svg:not([class*=size-]){height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@layer base{*,::backdrop,::file-selector-button,:after,:before{border-color:var(--color-gray-200,currentcolor)}*{border-color:var(--border);outline-color:var(--ring);@supports (color:color-mix(in lab,red,red)){outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}:root{--radius:0.625rem;--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0);--cerulean-50:#eef7ff;--cerulean-100:#d9edff;--cerulean-200:#bbe1ff;--cerulean-300:#8dceff;--cerulean-400:#57b2ff;--cerulean-500:#3090ff;--cerulean-600:#1a71f6;--cerulean-700:#1154d4;--cerulean-800:#184190;--cerulean-900:#132958}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0/10%);--input:oklch(1 0 0/15%);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0/10%);--sidebar-ring:oklch(0.556 0 0);--cerulean-50:#eef7ff;--cerulean-100:#d9edff;--cerulean-200:#bbe1ff;--cerulean-300:#8dceff;--cerulean-400:#57b2ff;--cerulean-500:#3090ff;--cerulean-600:#1a71f6;--cerulean-700:#1154d4;--cerulean-800:#184190;--cerulean-900:#132958}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}
|
package/dist/index.js
CHANGED
|
@@ -425,10 +425,10 @@ function cn(...inputs) {
|
|
|
425
425
|
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
426
426
|
variants: {
|
|
427
427
|
variant: {
|
|
428
|
-
default: 'bg-
|
|
428
|
+
default: 'bg-cerulean-600 text-white hover:bg-cerulean-700 focus-visible:ring-cerulean-600/20',
|
|
429
429
|
destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
|
430
430
|
outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
|
431
|
-
secondary: 'bg-
|
|
431
|
+
secondary: 'border border-cerulean-600 bg-white text-cerulean-600 hover:bg-cerulean-50 focus-visible:ring-cerulean-600/20',
|
|
432
432
|
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
|
433
433
|
link: 'text-primary underline-offset-4 hover:underline',
|
|
434
434
|
},
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanhminh/design-system",
|
|
3
3
|
"description": "A reusable React component library built with TypeScript, Tailwind CSS, and Radix UI",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.3.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
7
7
|
"main": "dist/index.cjs",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"require": "./dist/index.cjs",
|
|
15
15
|
"types": "./dist/index.d.ts"
|
|
16
16
|
},
|
|
17
|
-
"./package.json": "./package.json"
|
|
17
|
+
"./package.json": "./package.json",
|
|
18
|
+
"./styles": "./dist/index.css"
|
|
18
19
|
},
|
|
19
20
|
"files": [
|
|
20
21
|
"dist",
|