@equal-experts/kuat-vue 0.3.0 → 0.3.1

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 CHANGED
@@ -205,70 +205,6 @@ If you want to use different fonts or load them differently, you can override th
205
205
 
206
206
  ---
207
207
 
208
- ## AI Agent Documentation Setup
209
-
210
- The Kuat Design System includes AI-friendly documentation optimized for LLM consumption. This documentation helps AI assistants understand the design system, generate code that follows design patterns, and maintain brand consistency.
211
-
212
- ### Setup Documentation
213
-
214
- To make the agent documentation available in your repository for LLM context (e.g., Cursor), run the setup script:
215
-
216
- ```bash
217
- # Using pnpm exec (recommended)
218
- pnpm exec @equal-experts/kuat-vue setup-docs
219
-
220
- # Using npm exec
221
- npm exec @equal-experts/kuat-vue setup-docs
222
-
223
- # Or if you have the package installed locally
224
- cd node_modules/@equal-experts/kuat-vue && pnpm setup-docs
225
- ```
226
-
227
- This will copy the agent documentation to `.cursor/rules/kuat-docs/` in your repository root.
228
-
229
- ### What Gets Copied
230
-
231
- The setup script copies the following documentation:
232
-
233
- - **Design System** (`design/`) - Colors, typography, spacing, borders, layouts, logo usage
234
- - **Component Guidelines** (`components/`) - Component development patterns and best practices
235
- - **Content Guidelines** (`content/`) - Content writing guidelines for marketing, sales, and product interfaces
236
-
237
- ### Using the Documentation
238
-
239
- Once copied, you can:
240
-
241
- 1. **Reference in Cursor Rules**: Add references to `.cursor/rules/kuat-docs/` in your `.cursorrules` file
242
- 2. **LLM Context**: The documentation is optimized for LLM consumption and provides context for:
243
- - Understanding the design system
244
- - Using components correctly
245
- - Maintaining brand consistency
246
- - Writing appropriate content
247
-
248
- ### Updating Documentation
249
-
250
- After installing a new version of `@equal-experts/kuat-vue`, run the setup script again to update the documentation:
251
-
252
- ```bash
253
- pnpm exec @equal-experts/kuat-vue setup-docs
254
- ```
255
-
256
- The script will automatically clean and replace the existing documentation.
257
-
258
- ### Documentation Location
259
-
260
- The documentation is copied to:
261
- ```
262
- .cursor/rules/kuat-docs/
263
- ```
264
-
265
- This location is chosen because:
266
- - It's within the `.cursor/` directory (typically gitignored)
267
- - It's in the `rules/` subdirectory where Cursor looks for context files
268
- - It's clearly namespaced as `kuat-docs/` to avoid conflicts
269
-
270
- ---
271
-
272
208
  ## Basic Usage
273
209
 
274
210
  ### Import Components
@@ -594,38 +530,58 @@ Then use without importing:
594
530
 
595
531
  ---
596
532
 
597
- ## AI Agent Documentation
533
+ ## Documentation for AI Agents
598
534
 
599
- This package includes AI-friendly documentation in the `docs/` directory, optimized for LLM consumption.
535
+ The Kuat Design System includes LLM-optimized documentation for AI assistants.
600
536
 
601
- ### Included Documentation
537
+ ### Quick Setup
602
538
 
603
- - **[Design System](./docs/design/)** - Colors, typography, spacing, borders, and design tokens
604
- - **[Component Guidelines](./docs/components/guidelines.md)** - Component development patterns and best practices
605
- - **[Content Guidelines](./docs/content/)** - Content writing guidelines for marketing and product UX
539
+ Add this snippet to your existing `.cursorrules`, `CLAUDE.md`, or agent config:
606
540
 
607
- ### Accessing Documentation
541
+ ```markdown
542
+ ## Kuat Design System
608
543
 
609
- The documentation is available in your `node_modules` after installation:
544
+ This project uses the Kuat Design System for all UI work.
610
545
 
611
- ```
612
- node_modules/@equal-experts/kuat-vue/docs/
613
- ├── design/ # Design system guidelines
614
- ├── components/ # Component patterns
615
- └── content/ # Content writing guidelines
616
- ```
546
+ **What it provides:**
547
+ Design tokens, component patterns, layout guidance, and content guidelines for building consistent, accessible interfaces.
548
+
549
+ **When to use it:**
550
+ You MUST reference the Kuat documentation when:
551
+ - Creating or modifying UI components
552
+ - Making color, typography, spacing, or layout decisions
553
+ - Writing user-facing content
617
554
 
618
- ### For AI Agents
555
+ **How to use it:**
556
+ 1. Check the documentation before making design decisions
557
+ 2. Follow existing patterns; do not invent new ones
558
+ 3. If the documentation doesn't cover your case, ask before proceeding
619
559
 
620
- You can reference this documentation in your `.cursorrules` or similar configuration:
560
+ **Quick reference (when docs unavailable):**
561
+ Semantic tokens only (`bg-primary` not `bg-blue-500`), 8-point spacing grid, 6px radius for interactive elements, WCAG AA contrast.
621
562
 
563
+ **Documentation:** https://github.com/equal-experts/kuat-mono/tree/main/kuat-docs
622
564
  ```
623
- # Kuat Design System Documentation
624
- - Design tokens: node_modules/@equal-experts/kuat-vue/docs/design/
625
- - Component patterns: node_modules/@equal-experts/kuat-vue/docs/components/
626
- - Brand colors available: EE Blue, Tech Blue, Transform Teal, Equal Ember
565
+
566
+ ### Need Full Documentation Locally?
567
+
568
+ For component patterns, layouts, or content guidelines, clone the docs:
569
+
570
+ ```bash
571
+ git clone --filter=blob:none --sparse https://github.com/equal-experts/kuat-mono.git
572
+ cd kuat-mono && git sparse-checkout set kuat-docs
573
+ cp -r kuat-docs /path/to/your-project/
627
574
  ```
628
575
 
576
+ Then update your snippet: `Check the documentation in kuat-docs/rules/ before making design decisions`
577
+
578
+ ### Verification
579
+
580
+ Test your setup with these prompts:
581
+ - "Create a card component" → Agent should reference Kuat docs
582
+ - "What color for the primary button?" → Agent should check docs or use semantic tokens
583
+ - "Add spacing between form fields" → Agent should reference spacing rules
584
+
629
585
  ---
630
586
 
631
587
  ## Support
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--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-duration:initial;--tw-ease:initial}}}:root{--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace}@layer base{:root{--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--slate-50:oklch(97.8% .005 240);--slate-100:oklch(93.6% .01 240);--slate-200:oklch(92.9% .013 255.5);--slate-300:oklch(87% .022 255.5);--slate-500:oklch(55.4% .046 257.4);--slate-600:oklch(47.5% .04 257.4);--slate-700:oklch(39.5% .035 257.4);--slate-800:oklch(29.5% .03 257.4);--slate-900:oklch(17.6% .033 244.5);--slate-950:oklch(12.9% .042 264.7);--red-300:oklch(85% .08 25);--red-600:oklch(57.7% .245 27.3);--black:oklch(0% 0 0);--white:oklch(100% 0 0);--ee-blue-50:oklch(94.5% .028 237.5);--ee-blue-100:oklch(88.5% .055 237.5);--ee-blue-200:oklch(82.5% .082 237.5);--ee-blue-300:oklch(76.5% .109 237.5);--ee-blue-400:oklch(70.5% .136 237.5);--ee-blue-500:oklch(64.5% .163 237.5);--ee-blue-600:oklch(58.5% .145 237.5);--ee-blue-700:oklch(52.5% .127 237.5);--ee-blue-800:oklch(36.5% .109 237.5);--ee-blue-900:oklch(24.5% .082 237.5);--ee-blue-950:oklch(14.5% .055 237.5);--tech-blue-50:oklch(93.5% .015 240);--tech-blue-100:oklch(83.5% .03 240);--tech-blue-200:oklch(73.5% .045 240);--tech-blue-300:oklch(63.5% .06 240);--tech-blue-400:oklch(53.5% .075 240);--tech-blue-500:oklch(43.5% .09 240);--tech-blue-600:oklch(36.5% .08 240);--tech-blue-700:oklch(29.5% .07 240);--tech-blue-800:oklch(20.5% .06 240);--tech-blue-900:oklch(12.5% .04 240);--tech-blue-950:oklch(7.5% .025 240);--transform-teal-50:oklch(94.5% .02 185);--transform-teal-100:oklch(88.5% .04 185);--transform-teal-200:oklch(82.5% .06 185);--transform-teal-300:oklch(76.5% .08 185);--transform-teal-400:oklch(70.5% .1 185);--transform-teal-500:oklch(64.5% .12 185);--transform-teal-600:oklch(54.5% .105 185);--transform-teal-700:oklch(44.5% .09 185);--transform-teal-800:oklch(30.5% .075 185);--transform-teal-900:oklch(18.5% .055 185);--transform-teal-950:oklch(10.5% .035 185);--equal-ember-50:oklch(97.5% .035 65);--equal-ember-100:oklch(92.5% .07 65);--equal-ember-200:oklch(87.5% .105 65);--equal-ember-300:oklch(82.5% .14 65);--equal-ember-400:oklch(77.5% .175 65);--equal-ember-500:oklch(62.5% .2 65);--equal-ember-600:oklch(52.5% .18 65);--equal-ember-700:oklch(42.5% .16 65);--equal-ember-800:oklch(32.5% .14 65);--equal-ember-900:oklch(22.5% .12 65);--equal-ember-950:oklch(12.5% .1 65);--brand-ee-blue:var(--ee-blue-500);--brand-tech-blue:var(--tech-blue-500);--brand-transform-teal:var(--transform-teal-500);--brand-equal-ember:var(--equal-ember-500);--brand-dark-data:oklch(20.8% .01 240);--brand-the-cloud:var(--slate-100);--brand-byte-white:var(--white);--brand-ee-blue-accent:var(--ee-blue-50);--background:var(--brand-byte-white);--foreground:var(--slate-950);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-500);--accent:var(--brand-ee-blue-accent);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-200);--input:var(--brand-byte-white);--ring:var(--slate-300);--card:var(--brand-byte-white);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--brand-tech-blue);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--slate-200);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:oklch(20.8% .042 265.755);--shadow-2xs:0px 4px 8px -1px #0f172b0d;--shadow-xs:0px 4px 8px -1px #0f172b0d;--shadow-sm:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow-md:0px 4px 8px -1px #0f172b1a,0px 2px 4px -2px #0f172b1a;--shadow-lg:0px 4px 8px -1px #0f172b1a,0px 4px 6px -2px #0f172b1a;--shadow-xl:0px 4px 8px -1px #0f172b1a,0px 8px 10px -2px #0f172b1a;--shadow-2xl:0px 4px 8px -1px #0f172b40}.dark{--background:var(--slate-900);--foreground:var(--brand-byte-white);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-300);--accent:var(--ee-blue-800);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-700);--input:var(--slate-600);--ring:var(--slate-300);--card:var(--tech-blue-800);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--tech-blue-700);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--ee-blue-700);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:#000;--shadow-2xs:0px 4px 8px -1px #0000000d;--shadow-xs:0px 4px 8px -1px #0000000d;--shadow-sm:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow-md:0px 4px 8px -1px #0000001a,0px 2px 4px -2px #0000001a;--shadow-lg:0px 4px 8px -1px #0000001a,0px 4px 6px -2px #0000001a;--shadow-xl:0px 4px 8px -1px #0000001a,0px 8px 10px -2px #0000001a;--shadow-2xl:0px 4px 8px -1px #00000040}:root,:host{--shadow-2xs:var(--shadow-2xs);--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow:var(--shadow);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--tracking-normal:var(--tracking-normal);--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}body{letter-spacing:var(--tracking-normal)}*{border-color:var(--border)}body{background-color:var(--background);color:var(--foreground)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;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-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer theme,components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.left-1\/2{left:50%}.z-50{z-index:50}.\!m-0{margin:calc(var(--spacing)*0)!important}.mt-2{margin-top:calc(var(--spacing)*2)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-11{width:calc(var(--spacing)*11);height:calc(var(--spacing)*11)}.h-4{height:calc(var(--spacing)*4)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.w-4{width:calc(var(--spacing)*4)}.w-10{width:calc(var(--spacing)*10)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-lg{max-width:var(--container-lg)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-2{row-gap:calc(var(--spacing)*2)}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-border{border-color:var(--border)}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-black\/80{background-color:var(--black)}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--black)80%,transparent)}}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-input{background-color:var(--input)}.bg-muted{background-color:var(--muted)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-0{padding-top:calc(var(--spacing)*0)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.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)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.shadow-lg{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:var(--shadow-xs);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + 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\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + 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-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--spacing)*2)}.data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical]{height:auto}.data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}@media (min-width:40rem){.sm\:mt-0{margin-top:calc(var(--spacing)*0)}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:gap-x-2{column-gap:calc(var(--spacing)*2)}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:text-left{text-align:left}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\\\'size-\\\'\]\)\]\:size-4 svg:not([class*="'size-'"]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&\>\*\:focus-visible\]\:relative>:focus-visible{position:relative}.\[\&\>\*\:focus-visible\]\:z-10>:focus-visible{z-index:10}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-l-0>:not(:first-child){border-left-style:var(--tw-border-style);border-left-width:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=w-]){width:fit-content}.\[\&\>input\]\:flex-1>input{flex:1}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value: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}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
1
+ @import"https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--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-duration:initial;--tw-ease:initial}}}:root{--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace}@layer base{:root{--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--slate-50:oklch(97.8% .005 240);--slate-100:oklch(93.6% .01 240);--slate-200:oklch(92.9% .013 255.5);--slate-300:oklch(87% .022 255.5);--slate-500:oklch(55.4% .046 257.4);--slate-600:oklch(47.5% .04 257.4);--slate-700:oklch(39.5% .035 257.4);--slate-800:oklch(29.5% .03 257.4);--slate-900:oklch(17.6% .033 244.5);--slate-950:oklch(12.9% .042 264.7);--red-300:oklch(85% .08 25);--red-600:oklch(57.7% .245 27.3);--black:oklch(0% 0 0);--white:oklch(100% 0 0);--ee-blue-50:oklch(94.5% .028 237.5);--ee-blue-100:oklch(88.5% .055 237.5);--ee-blue-200:oklch(82.5% .082 237.5);--ee-blue-300:oklch(76.5% .109 237.5);--ee-blue-400:oklch(70.5% .136 237.5);--ee-blue-500:oklch(64.5% .163 237.5);--ee-blue-600:oklch(58.5% .145 237.5);--ee-blue-700:oklch(52.5% .127 237.5);--ee-blue-800:oklch(36.5% .109 237.5);--ee-blue-900:oklch(24.5% .082 237.5);--ee-blue-950:oklch(14.5% .055 237.5);--tech-blue-50:oklch(93.5% .015 240);--tech-blue-100:oklch(83.5% .03 240);--tech-blue-200:oklch(73.5% .045 240);--tech-blue-300:oklch(63.5% .06 240);--tech-blue-400:oklch(53.5% .075 240);--tech-blue-500:oklch(43.5% .09 240);--tech-blue-600:oklch(36.5% .08 240);--tech-blue-700:oklch(29.5% .07 240);--tech-blue-800:oklch(20.5% .06 240);--tech-blue-900:oklch(12.5% .04 240);--tech-blue-950:oklch(7.5% .025 240);--transform-teal-50:oklch(94.5% .02 185);--transform-teal-100:oklch(88.5% .04 185);--transform-teal-200:oklch(82.5% .06 185);--transform-teal-300:oklch(76.5% .08 185);--transform-teal-400:oklch(70.5% .1 185);--transform-teal-500:oklch(64.5% .12 185);--transform-teal-600:oklch(54.5% .105 185);--transform-teal-700:oklch(44.5% .09 185);--transform-teal-800:oklch(30.5% .075 185);--transform-teal-900:oklch(18.5% .055 185);--transform-teal-950:oklch(10.5% .035 185);--equal-ember-50:oklch(97.5% .035 65);--equal-ember-100:oklch(92.5% .07 65);--equal-ember-200:oklch(87.5% .105 65);--equal-ember-300:oklch(82.5% .14 65);--equal-ember-400:oklch(77.5% .175 65);--equal-ember-500:oklch(62.5% .2 65);--equal-ember-600:oklch(52.5% .18 65);--equal-ember-700:oklch(42.5% .16 65);--equal-ember-800:oklch(32.5% .14 65);--equal-ember-900:oklch(22.5% .12 65);--equal-ember-950:oklch(12.5% .1 65);--brand-ee-blue:var(--ee-blue-500);--brand-tech-blue:var(--tech-blue-500);--brand-transform-teal:var(--transform-teal-500);--brand-equal-ember:var(--equal-ember-500);--brand-dark-data:oklch(20.8% .01 240);--brand-the-cloud:var(--slate-100);--brand-byte-white:var(--white);--brand-ee-blue-accent:var(--ee-blue-50);--background:var(--brand-byte-white);--foreground:var(--slate-950);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-500);--accent:var(--brand-ee-blue-accent);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-200);--input:var(--brand-byte-white);--ring:var(--slate-300);--card:var(--brand-byte-white);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--brand-tech-blue);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--slate-200);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:oklch(20.8% .042 265.755);--shadow-2xs:0px 4px 8px -1px #0f172b0d;--shadow-xs:0px 4px 8px -1px #0f172b0d;--shadow-sm:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow-md:0px 4px 8px -1px #0f172b1a,0px 2px 4px -2px #0f172b1a;--shadow-lg:0px 4px 8px -1px #0f172b1a,0px 4px 6px -2px #0f172b1a;--shadow-xl:0px 4px 8px -1px #0f172b1a,0px 8px 10px -2px #0f172b1a;--shadow-2xl:0px 4px 8px -1px #0f172b40}.dark{--background:var(--slate-900);--foreground:var(--brand-byte-white);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-300);--accent:var(--ee-blue-800);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-700);--input:var(--slate-600);--ring:var(--slate-300);--card:var(--tech-blue-800);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--tech-blue-700);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--ee-blue-700);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:#000;--shadow-2xs:0px 4px 8px -1px #0000000d;--shadow-xs:0px 4px 8px -1px #0000000d;--shadow-sm:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow-md:0px 4px 8px -1px #0000001a,0px 2px 4px -2px #0000001a;--shadow-lg:0px 4px 8px -1px #0000001a,0px 4px 6px -2px #0000001a;--shadow-xl:0px 4px 8px -1px #0000001a,0px 8px 10px -2px #0000001a;--shadow-2xl:0px 4px 8px -1px #00000040}:root,:host{--shadow-2xs:var(--shadow-2xs);--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow:var(--shadow);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--tracking-normal:var(--tracking-normal);--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}body{letter-spacing:var(--tracking-normal)}*{border-color:var(--border)}body{background-color:var(--background);color:var(--foreground)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;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-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer theme,components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.left-1\/2{left:50%}.z-50{z-index:50}.\!m-0{margin:calc(var(--spacing)*0)!important}.mt-2{margin-top:calc(var(--spacing)*2)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-11{width:calc(var(--spacing)*11);height:calc(var(--spacing)*11)}.h-4{height:calc(var(--spacing)*4)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.w-4{width:calc(var(--spacing)*4)}.w-10{width:calc(var(--spacing)*10)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-lg{max-width:var(--container-lg)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-2{row-gap:calc(var(--spacing)*2)}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-border{border-color:var(--border)}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-black\/80{background-color:var(--black)}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--black)80%,transparent)}}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-input{background-color:var(--input)}.bg-muted{background-color:var(--muted)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-0{padding-top:calc(var(--spacing)*0)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.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)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.shadow-lg{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:var(--shadow-xs);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + 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\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + 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-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--spacing)*2)}.data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical]{height:auto}.data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}@media (min-width:40rem){.sm\:mt-0{margin-top:calc(var(--spacing)*0)}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:gap-x-2{column-gap:calc(var(--spacing)*2)}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:text-left{text-align:left}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\\\'size-\\\'\]\)\]\:size-4 svg:not([class*="'size-'"]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&\>\*\:focus-visible\]\:relative>:focus-visible{position:relative}.\[\&\>\*\:focus-visible\]\:z-10>:focus-visible{z-index:10}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-l-0>:not(:first-child){border-left-style:var(--tw-border-style);border-left-width:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=w-]){width:fit-content}.\[\&\>input\]\:flex-1>input{flex:1}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value: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}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equal-experts/kuat-vue",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -30,13 +30,10 @@
30
30
  "import": "./dist/button-group.js",
31
31
  "types": "./dist/button-group.d.ts"
32
32
  },
33
- "./styles": "./dist/style.css",
34
- "./docs/*": "./docs/*"
33
+ "./styles": "./dist/style.css"
35
34
  },
36
35
  "files": [
37
36
  "dist",
38
- "docs",
39
- "scripts",
40
37
  "README.md"
41
38
  ],
42
39
  "keywords": [
@@ -55,8 +52,6 @@
55
52
  "directory": "packages/kuat-vue"
56
53
  },
57
54
  "scripts": {
58
- "copy-docs": "node scripts/copy-docs.js",
59
- "setup-docs": "node scripts/setup-docs.js",
60
55
  "build": "vite build",
61
56
  "dev": "vite build --watch",
62
57
  "lint": "eslint . --max-warnings 0"
package/docs/README.md DELETED
@@ -1,35 +0,0 @@
1
- # Agent Documentation
2
-
3
- This directory contains AI-friendly documentation for the Kuat Design System Vue library.
4
-
5
- ## Contents
6
-
7
- - **[Design System](./design/)** - Colors, typography, spacing, borders
8
- - [Colours](./design/colours.md) - Brand colors and usage guidelines
9
- - [Typography](./design/typography.md) - Font scales and text styling
10
- - [Spacing](./design/spacing.md) - Spacing system and patterns
11
- - [Borders](./design/borders.md) - Border usage and specifications
12
- - [Design System Overview](./design/design-system.md) - Complete design system guide
13
-
14
- - **[Component Guidelines](./components/guidelines.md)** - Component development patterns and best practices
15
-
16
- - **[Content Guidelines](./content/)** - Content writing guidelines
17
- - [Content Foundations](./content/content-foundations.md) - Universal content principles
18
- - [Marketing & Sales](./content/content-marketing-sales.md) - Marketing content guidelines
19
- - [Product & UX](./content/content-product-ux.md) - Product interface writing
20
-
21
- ## Purpose
22
-
23
- These docs are optimized for LLM consumption and provide context for:
24
- - Understanding the design system
25
- - Using components correctly
26
- - Maintaining brand consistency
27
- - Writing appropriate content
28
-
29
- ## Version
30
-
31
- These docs are synchronized with @equal-experts/kuat-vue.
32
-
33
- ## Source
34
-
35
- Documentation is sourced from the [Kuat monorepo](https://github.com/equal-experts/kuat) and copied during the build process.
@@ -1,221 +0,0 @@
1
- # Component Development Guidelines
2
-
3
- ## Adding New Components
4
-
5
- ### React Components
6
-
7
- 1. **Install via CLI** (recommended):
8
- ```bash
9
- cd packages/kuat-react
10
- npx shadcn@latest add button
11
- ```
12
-
13
- 2. **Manual Installation**:
14
- - Copy component files to `src/components/ui/[component-name]/`
15
- - Ensure all dependencies are installed
16
- - Export from `src/index.ts`
17
-
18
- ### Vue Components
19
-
20
- 1. **Install via CLI** (recommended):
21
- ```bash
22
- cd packages/kuat-vue
23
- npx shadcn-vue@latest add button
24
- ```
25
-
26
- 2. **Manual Installation**:
27
- - Copy component files to `src/components/ui/[component-name]/`
28
- - Ensure all dependencies are installed
29
- - Export from `src/index.ts`
30
-
31
- ## Component Structure
32
-
33
- ### React Component Example
34
-
35
- ```tsx
36
- // src/components/ui/button.tsx
37
- import * as React from "react"
38
- import { cva, type VariantProps } from "class-variance-authority"
39
- import { cn } from "@/lib/utils"
40
-
41
- const buttonVariants = cva(
42
- "inline-flex items-center justify-center rounded-md text-sm font-medium",
43
- {
44
- variants: {
45
- variant: {
46
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
47
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
48
- // ...
49
- },
50
- size: {
51
- default: "h-10 px-4 py-2",
52
- sm: "h-9 rounded-md px-3",
53
- lg: "h-11 rounded-md px-8",
54
- // ...
55
- },
56
- },
57
- defaultVariants: {
58
- variant: "default",
59
- size: "default",
60
- },
61
- }
62
- )
63
-
64
- export interface ButtonProps
65
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
66
- VariantProps<typeof buttonVariants> {}
67
-
68
- const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
69
- ({ className, variant, size, ...props }, ref) => {
70
- return (
71
- <button
72
- className={cn(buttonVariants({ variant, size, className }))}
73
- ref={ref}
74
- {...props}
75
- />
76
- )
77
- }
78
- )
79
- Button.displayName = "Button"
80
-
81
- export { Button, buttonVariants }
82
- ```
83
-
84
- ### Vue Component Example
85
-
86
- ```vue
87
- <!-- src/components/ui/button/Button.vue -->
88
- <script setup lang="ts">
89
- import { computed } from "vue"
90
- import { cva, type VariantProps } from "class-variance-authority"
91
- import { cn } from "@/lib/utils"
92
-
93
- const buttonVariants = cva(/* same as React */)
94
-
95
- interface Props extends VariantProps<typeof buttonVariants> {
96
- // additional props
97
- }
98
-
99
- const props = withDefaults(defineProps<Props>(), {
100
- variant: "default",
101
- size: "default",
102
- })
103
-
104
- const classes = computed(() =>
105
- cn(buttonVariants({ variant: props.variant, size: props.size }))
106
- )
107
- </script>
108
-
109
- <template>
110
- <button :class="classes" v-bind="$attrs">
111
- <slot />
112
- </button>
113
- </template>
114
- ```
115
-
116
- ## Component Requirements
117
-
118
- ### 1. TypeScript Types
119
- - All props must be typed
120
- - Use `VariantProps` for variant-based props
121
- - Export component types for consumers
122
-
123
- ### 2. Styling
124
- - Use Tailwind CSS classes
125
- - Reference design tokens via CSS variables
126
- - Use `cn()` for className merging
127
- - Support variants via `class-variance-authority`
128
-
129
- ### 3. Accessibility
130
- - Use semantic HTML
131
- - Include proper ARIA attributes
132
- - Support keyboard navigation
133
- - Test with screen readers
134
-
135
- ### 4. Exports
136
- - Export component from package `index.ts`
137
- - Export types and variants if needed
138
- - Document component usage
139
-
140
- ## Variant Patterns
141
-
142
- ### Using class-variance-authority
143
-
144
- ```ts
145
- import { cva } from "class-variance-authority"
146
-
147
- const componentVariants = cva(
148
- "base-classes", // Always applied
149
- {
150
- variants: {
151
- variant: {
152
- default: "variant-classes",
153
- alternative: "other-classes",
154
- },
155
- size: {
156
- sm: "size-sm-classes",
157
- md: "size-md-classes",
158
- lg: "size-lg-classes",
159
- },
160
- },
161
- defaultVariants: {
162
- variant: "default",
163
- size: "md",
164
- },
165
- }
166
- )
167
- ```
168
-
169
- ## Testing Components
170
-
171
- When creating components, ensure:
172
- 1. ✅ All variants work correctly
173
- 2. ✅ Types are properly exported
174
- 3. ✅ Component builds without errors
175
- 4. ✅ Styles match design tokens
176
- 5. ✅ Accessibility features work
177
-
178
- ## Naming Conventions
179
-
180
- - **Components**: PascalCase (e.g., `Button`, `Card`, `Dialog`)
181
- - **Files**: Match component name (e.g., `Button.tsx`, `Button.vue`)
182
- - **Variants**: camelCase (e.g., `default`, `destructive`, `outline`)
183
- - **Props**: camelCase (e.g., `variant`, `size`, `disabled`)
184
-
185
- ## Common Patterns
186
-
187
- ### Forwarding Refs (React)
188
- ```tsx
189
- const Component = React.forwardRef<HTMLElement, Props>(
190
- ({ className, ...props }, ref) => {
191
- return <element ref={ref} className={cn(classes, className)} {...props} />
192
- }
193
- )
194
- Component.displayName = "Component"
195
- ```
196
-
197
- ### Slot Usage (Vue)
198
- ```vue
199
- <template>
200
- <div>
201
- <slot name="header" />
202
- <slot />
203
- <slot name="footer" />
204
- </div>
205
- </template>
206
- ```
207
-
208
- ### Conditional Rendering
209
- ```tsx
210
- // React
211
- {condition && <Component />}
212
- {condition ? <ComponentA /> : <ComponentB />}
213
- ```
214
-
215
- ```vue
216
- <!-- Vue -->
217
- <Component v-if="condition" />
218
- <ComponentA v-if="condition" />
219
- <ComponentB v-else />
220
- ```
221
-