ropav 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "packageManager": "pnpm@11.9.0",
   "engines": {
@@ -45,18 +45,10 @@
       "types": "./dist/components/switch/index.d.ts",
       "import": "./dist/components/switch/index.js"
     },
-    "./tabs": {
-      "types": "./dist/components/tabs/index.d.ts",
-      "import": "./dist/components/tabs/index.js"
-    },
     "./textarea": {
       "types": "./dist/components/textarea/index.d.ts",
       "import": "./dist/components/textarea/index.js"
     },
-    "./tooltip": {
-      "types": "./dist/components/tooltip/index.d.ts",
-      "import": "./dist/components/tooltip/index.js"
-    },
     "./base.css": "./dist/base.css",
     "./scss/*": "./src/styles/*"
   },
@@ -64,8 +56,12 @@
     "dev": "pnpm run storybook",
     "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
     "tokens:check": "node scripts/check-tokens.mjs",
-    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json",
+    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
     "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
     "test": "vitest run --project=unit",
     "test:exports": "node scripts/check-exports.mjs",
     "test:watch": "vitest --project=unit",
@@ -83,20 +79,25 @@
     "vue": "^3.6.0-beta.4"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.2.116",
     "@storybook/addon-themes": "^10.4.6",
     "@storybook/addon-vitest": "^10.4.6",
     "@storybook/vue3-vite": "^10.4.6",
     "@types/node": "^25.9.4",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/browser-playwright": "^4.1.9",
+    "@vue/compiler-vapor": "3.6.0-beta.17",
     "@vue/tsconfig": "^0.9.1",
     "bumpp": "^11.1.0",
     "jsdom": "^29.1.1",
+    "oxfmt": "^0.57.0",
+    "oxlint": "^1.72.0",
     "playwright": "^1.61.1",
     "sass-embedded": "^1.100.0",
     "storybook": "^10.4.6",
     "style-dictionary": "5.5.0",
     "typescript": "~6.0.3",
+    "unplugin-icons": "^23.0.1",
     "vite": "^8.1.3",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.9",

package/src/styles/_mixins.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 @mixin flex-center {
     display: inline-flex;
     align-items: center;
@@ -5,7 +7,7 @@
 }
 
 @mixin focus-ring {
-    border-color: var(--rp-color-control-border-focus);
+    border-color: var(--rp-color-primary);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 
@@ -75,7 +77,11 @@
     }
 }
 
-@mixin menu-surface($z-index: var(--rp-z-index-dropdown), $surface: var(--rp-color-surface-raised), $radius: var(--rp-radius-lg)) {
+@mixin menu-surface(
+    $z-index: $z-index-dropdown,
+    $surface: var(--rp-color-surface-raised),
+    $radius: var(--rp-radius-lg)
+) {
     z-index: $z-index;
     background-color: $surface;
     border: var(--rp-border-width-thin) solid var(--rp-color-border);
@@ -98,13 +104,15 @@
 }
 
 @mixin semantic-colors($var-name) {
-    @each $name in primary, secondary, success, warning, danger, info {
-        &--#{$name} { #{$var-name}: var(--rp-color-#{$name}-fg); }
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
+        &--#{$name} {
+            #{$var-name}: var(--rp-color-#{$name}-fg);
+        }
     }
 }
 
 @mixin semantic-color-pair($color-var, $foreground-var) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$color-var}: var(--rp-color-#{$name});
             #{$foreground-var}: var(--rp-color-on-#{$name});
@@ -113,14 +121,16 @@
 }
 
 @mixin semantic-state-colors($prefix) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$prefix}-bg: var(--rp-color-#{$name});
-            #{$prefix}-bg-hover: color-mix(in srgb, var(--rp-color-#{$name}) 90%, var(--rp-color-black));
-            #{$prefix}-bg-active: color-mix(in srgb, var(--rp-color-#{$name}) 80%, var(--rp-color-black));
-            #{$prefix}-subtle-bg: color-mix(in srgb, var(--rp-color-#{$name}) 10%, transparent);
-            #{$prefix}-subtle-bg-hover: color-mix(in srgb, var(--rp-color-#{$name}) 14%, transparent);
-            #{$prefix}-subtle-bg-active: color-mix(in srgb, var(--rp-color-#{$name}) 18%, transparent);
+            #{$prefix}-bg-hover: var(--rp-color-#{$name}-hover);
+            #{$prefix}-bg-active: var(--rp-color-#{$name}-active);
+            #{$prefix}-subtle-bg: var(--rp-color-#{$name}-subtle-bg);
+            #{$prefix}-subtle-bg-hover: var(--rp-color-#{$name}-subtle-bg-hover);
+            #{$prefix}-subtle-bg-active: var(--rp-color-#{$name}-subtle-bg-active);
+            #{$prefix}-border: var(--rp-color-#{$name}-border);
+            #{$prefix}-border-hover: var(--rp-color-#{$name}-border-hover);
             #{$prefix}-fg: var(--rp-color-#{$name}-fg);
             #{$prefix}-on-bg: var(--rp-color-on-#{$name});
         }

package/src/styles/_tokens.scss

@@ -8,62 +8,105 @@
     --rp-font-family: #{$font-family-base};
 
     // Colors
-    --rp-color-primary             : #{$color-primary};
-    --rp-color-secondary           : #{$color-secondary};
-    --rp-color-success             : #{$color-success};
-    --rp-color-warning             : #{$color-warning};
-    --rp-color-danger              : #{$color-danger};
-    --rp-color-info                : #{$color-info};
-    --rp-color-white               : #{$color-white};
-    --rp-color-black               : #{$color-black};
-    --rp-color-gray-50             : #{$color-gray-50};
-    --rp-color-gray-100            : #{$color-gray-100};
-    --rp-color-gray-200            : #{$color-gray-200};
-    --rp-color-gray-300            : #{$color-gray-300};
-    --rp-color-gray-400            : #{$color-gray-400};
-    --rp-color-gray-500            : #{$color-gray-500};
-    --rp-color-gray-600            : #{$color-gray-600};
-    --rp-color-gray-700            : #{$color-gray-700};
-    --rp-color-gray-800            : #{$color-gray-800};
-    --rp-color-gray-900            : #{$color-gray-900};
-    --rp-color-text                : #{$color-text};
-    --rp-color-text-secondary      : #{$color-text-secondary};
-    --rp-color-text-disabled       : #{$color-text-disabled};
-    --rp-color-text-inverted       : var(--rp-color-white);
-    --rp-color-background          : #{$color-background};
-    --rp-color-surface             : var(--rp-color-white);
-    --rp-color-surface-raised      : var(--rp-color-white);
-    --rp-color-surface-muted       : var(--rp-color-gray-50);
-    --rp-color-surface-hover       : var(--rp-color-gray-100);
-    --rp-color-surface-inverted    : var(--rp-color-gray-900);
-    --rp-color-overlay             : rgba(3, 7, 18, 0.55);
-    --rp-color-border              : #{$color-border};
-    --rp-color-border-hover        : #{$color-border-hover};
-    --rp-color-focus-ring          : color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
-    --rp-color-control-bg          : var(--rp-color-surface);
-    --rp-color-control-readonly-bg : var(--rp-color-surface-muted);
-    --rp-color-control-fg          : var(--rp-color-text);
-    --rp-color-control-placeholder : var(--rp-color-text-secondary);
-    --rp-color-control-icon        : var(--rp-color-text-secondary);
-    --rp-color-control-border      : var(--rp-color-border);
-    --rp-color-control-border-hover: var(--rp-color-border-hover);
-    --rp-color-control-border-focus: var(--rp-color-primary);
-    --rp-color-control-track-bg    : var(--rp-color-gray-300);
-    --rp-color-control-thumb-bg    : var(--rp-color-white);
-    --rp-color-control-selected-bg : var(--rp-color-primary);
-    --rp-color-control-selected-fg : var(--rp-color-on-primary);
-    --rp-color-on-primary          : #{$color-on-primary};
-    --rp-color-on-secondary        : #{$color-on-secondary};
-    --rp-color-on-success          : #{$color-on-success};
-    --rp-color-on-warning          : #{$color-on-warning};
-    --rp-color-on-danger           : #{$color-on-danger};
-    --rp-color-on-info             : #{$color-on-info};
-    --rp-color-primary-fg          : var(--rp-color-primary);
-    --rp-color-secondary-fg        : var(--rp-color-secondary);
-    --rp-color-success-fg          : var(--rp-color-success);
-    --rp-color-warning-fg          : var(--rp-color-warning);
-    --rp-color-danger-fg           : var(--rp-color-danger);
-    --rp-color-info-fg             : var(--rp-color-info);
+    --rp-color-primary                   : #{$color-primary};
+    --rp-color-secondary                 : #{$color-secondary};
+    --rp-color-success                   : #{$color-success};
+    --rp-color-warning                   : #{$color-warning};
+    --rp-color-danger                    : #{$color-danger};
+    --rp-color-info                      : #{$color-info};
+    --rp-color-neutral                   : #{$color-neutral};
+    --rp-color-text                      : #{$color-text};
+    --rp-color-text-secondary            : #{$color-text-secondary};
+    --rp-color-text-disabled             : #{$color-text-disabled};
+    --rp-color-text-inverted             : #{$color-white};
+    --rp-color-background                : #{$color-background};
+    --rp-color-surface                   : #{$color-white};
+    --rp-color-surface-raised            : #{$color-white};
+    --rp-color-surface-muted             : #{$color-gray-2};
+    --rp-color-surface-hover             : #{$color-gray-3};
+    --rp-color-button-default-bg         : #{$color-gray-2};
+    --rp-color-button-default-bg-hover   : #{$color-gray-3};
+    --rp-color-button-default-bg-active  : #{$color-gray-4};
+    --rp-color-surface-inverted          : #{$color-gray-12};
+    --rp-color-overlay                   : rgba(17, 17, 17, 0.55);
+    --rp-color-border                    : #{$color-border};
+    --rp-color-border-hover              : #{$color-border-hover};
+    --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
+    --rp-color-control-bg                : #{$color-gray-2};
+    --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
+    --rp-color-control-fg                : var(--rp-color-text);
+    --rp-color-control-placeholder       : var(--rp-color-text-secondary);
+    --rp-color-control-icon              : var(--rp-color-text-secondary);
+    --rp-color-control-border            : var(--rp-color-border);
+    --rp-color-control-border-hover      : var(--rp-color-border-hover);
+    --rp-color-control-border-focus      : var(--rp-color-primary);
+    --rp-color-control-track-bg          : var(--rp-color-border);
+    --rp-color-control-thumb-bg          : #{$color-white};
+    --rp-color-control-selected-bg       : var(--rp-color-primary);
+    --rp-color-control-selected-fg       : var(--rp-color-on-primary);
+    --rp-color-on-primary                : #{$color-on-primary};
+    --rp-color-on-secondary              : #{$color-on-secondary};
+    --rp-color-on-success                : #{$color-on-success};
+    --rp-color-on-warning                : #{$color-on-warning};
+    --rp-color-on-danger                 : #{$color-on-danger};
+    --rp-color-on-info                   : #{$color-on-info};
+    --rp-color-on-neutral                : #{$color-on-neutral};
+    --rp-color-primary-hover             : color-mix(in srgb, var(--rp-color-primary) 90%, #{$color-black});
+    --rp-color-primary-active            : color-mix(in srgb, var(--rp-color-primary) 80%, #{$color-black});
+    --rp-color-primary-subtle-bg         : #e6f4fe;
+    --rp-color-primary-subtle-bg-hover   : #d5efff;
+    --rp-color-primary-subtle-bg-active  : #c2e5ff;
+    --rp-color-primary-border            : #8ec8f6;
+    --rp-color-primary-border-hover      : #5eb1ef;
+    --rp-color-primary-fg                : #113264;
+    --rp-color-secondary-hover           : color-mix(in srgb, var(--rp-color-secondary) 90%, #{$color-black});
+    --rp-color-secondary-active          : color-mix(in srgb, var(--rp-color-secondary) 80%, #{$color-black});
+    --rp-color-secondary-subtle-bg       : #f4f0fe;
+    --rp-color-secondary-subtle-bg-hover : #ebe4ff;
+    --rp-color-secondary-subtle-bg-active: #e1d9ff;
+    --rp-color-secondary-border          : #c2b5f5;
+    --rp-color-secondary-border-hover    : #aa99ec;
+    --rp-color-secondary-fg              : #2f265f;
+    --rp-color-success-hover             : color-mix(in srgb, var(--rp-color-success) 90%, #{$color-black});
+    --rp-color-success-active            : color-mix(in srgb, var(--rp-color-success) 80%, #{$color-black});
+    --rp-color-success-subtle-bg         : #e6f6eb;
+    --rp-color-success-subtle-bg-hover   : #d6f1df;
+    --rp-color-success-subtle-bg-active  : #c4e8d1;
+    --rp-color-success-border            : #8eceaa;
+    --rp-color-success-border-hover      : #5bb98b;
+    --rp-color-success-fg                : #193b2d;
+    --rp-color-warning-hover             : color-mix(in srgb, var(--rp-color-warning) 90%, #{$color-black});
+    --rp-color-warning-active            : color-mix(in srgb, var(--rp-color-warning) 80%, #{$color-black});
+    --rp-color-warning-subtle-bg         : #ffefd6;
+    --rp-color-warning-subtle-bg-hover   : #ffdfb5;
+    --rp-color-warning-subtle-bg-active  : #ffd19a;
+    --rp-color-warning-border            : #f5ae73;
+    --rp-color-warning-border-hover      : #ec9455;
+    --rp-color-warning-fg                : #582d1d;
+    --rp-color-danger-hover              : color-mix(in srgb, var(--rp-color-danger) 90%, #{$color-black});
+    --rp-color-danger-active             : color-mix(in srgb, var(--rp-color-danger) 80%, #{$color-black});
+    --rp-color-danger-subtle-bg          : #feebec;
+    --rp-color-danger-subtle-bg-hover    : #ffdbdc;
+    --rp-color-danger-subtle-bg-active   : #ffcdce;
+    --rp-color-danger-border             : #f4a9aa;
+    --rp-color-danger-border-hover       : #eb8e90;
+    --rp-color-danger-fg                 : #641723;
+    --rp-color-info-hover                : color-mix(in srgb, var(--rp-color-info) 90%, #{$color-black});
+    --rp-color-info-active               : color-mix(in srgb, var(--rp-color-info) 80%, #{$color-black});
+    --rp-color-info-subtle-bg            : #def7f9;
+    --rp-color-info-subtle-bg-hover      : #caf1f6;
+    --rp-color-info-subtle-bg-active     : #b5e9f0;
+    --rp-color-info-border               : #7dcedc;
+    --rp-color-info-border-hover         : #3db9cf;
+    --rp-color-info-fg                   : #0d3c48;
+    --rp-color-neutral-hover             : color-mix(in srgb, var(--rp-color-neutral) 90%, #{$color-black});
+    --rp-color-neutral-active            : color-mix(in srgb, var(--rp-color-neutral) 80%, #{$color-black});
+    --rp-color-neutral-subtle-bg         : #f0f0f0;
+    --rp-color-neutral-subtle-bg-hover   : #e8e8e8;
+    --rp-color-neutral-subtle-bg-active  : #e0e0e0;
+    --rp-color-neutral-border            : #cecece;
+    --rp-color-neutral-border-hover      : #bbbbbb;
+    --rp-color-neutral-fg                : #202020;
 
     // Font sizes
     --rp-font-size-xs  : #{$font-size-xs};
@@ -102,11 +145,9 @@
     // Border radius
     --rp-radius-none: #{$radius-none};
     --rp-radius-sm  : #{$radius-sm};
-    --rp-radius-base: #{$radius-base};
     --rp-radius-md  : #{$radius-md};
     --rp-radius-lg  : #{$radius-lg};
     --rp-radius-xl  : #{$radius-xl};
-    --rp-radius-2xl : #{$radius-2xl};
     --rp-radius-full: #{$radius-full};
 
     // Border widths
@@ -118,14 +159,6 @@
     --rp-size-control-md: #{$size-control-md};
     --rp-size-control-lg: #{$size-control-lg};
 
-    // Component tokens
-    --rp-component-menu-min-width : #{$component-menu-min-width};
-    --rp-component-menu-max-height: #{$component-menu-max-height};
-
-    // Z-index
-    --rp-z-index-dropdown: #{$z-index-dropdown};
-    --rp-z-index-tooltip : #{$z-index-tooltip};
-
     // Opacity
     --rp-opacity-disabled: #{$opacity-disabled};
 
@@ -144,36 +177,75 @@
 
 html.dark {
     // Colors
-    --rp-color-text                : var(--rp-color-gray-50);
-    --rp-color-text-secondary      : var(--rp-color-gray-400);
-    --rp-color-text-disabled       : var(--rp-color-gray-600);
-    --rp-color-text-inverted       : var(--rp-color-gray-900);
-    --rp-color-background          : var(--rp-color-gray-900);
-    --rp-color-surface             : var(--rp-color-gray-900);
-    --rp-color-surface-raised      : var(--rp-color-gray-800);
-    --rp-color-surface-muted       : var(--rp-color-gray-800);
-    --rp-color-surface-hover       : var(--rp-color-gray-700);
-    --rp-color-surface-inverted    : var(--rp-color-gray-100);
-    --rp-color-overlay             : rgba(3, 7, 18, 0.75);
-    --rp-color-border              : var(--rp-color-gray-700);
-    --rp-color-border-hover        : var(--rp-color-gray-600);
-    --rp-color-focus-ring          : color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
-    --rp-color-control-bg          : var(--rp-color-gray-900);
-    --rp-color-control-readonly-bg : var(--rp-color-gray-800);
-    --rp-color-control-fg          : var(--rp-color-gray-50);
-    --rp-color-control-placeholder : var(--rp-color-gray-500);
-    --rp-color-control-icon        : var(--rp-color-gray-400);
-    --rp-color-control-border      : var(--rp-color-gray-700);
-    --rp-color-control-border-hover: var(--rp-color-gray-600);
-    --rp-color-control-border-focus: var(--rp-color-primary);
-    --rp-color-control-track-bg    : var(--rp-color-gray-700);
-    --rp-color-control-thumb-bg    : var(--rp-color-gray-50);
-    --rp-color-primary-fg          : color-mix(in srgb, var(--rp-color-primary) 65%, var(--rp-color-white));
-    --rp-color-secondary-fg        : color-mix(in srgb, var(--rp-color-secondary) 65%, var(--rp-color-white));
-    --rp-color-success-fg          : color-mix(in srgb, var(--rp-color-success) 65%, var(--rp-color-white));
-    --rp-color-warning-fg          : color-mix(in srgb, var(--rp-color-warning) 65%, var(--rp-color-white));
-    --rp-color-danger-fg           : color-mix(in srgb, var(--rp-color-danger) 65%, var(--rp-color-white));
-    --rp-color-info-fg             : color-mix(in srgb, var(--rp-color-info) 65%, var(--rp-color-white));
+    --rp-color-text                      : #eeeeee;
+    --rp-color-text-secondary            : #b4b4b4;
+    --rp-color-text-disabled             : #6e6e6e;
+    --rp-color-text-inverted             : #{$color-gray-12};
+    --rp-color-background                : #111111;
+    --rp-color-surface                   : #111111;
+    --rp-color-surface-raised            : #191919;
+    --rp-color-surface-muted             : #191919;
+    --rp-color-surface-hover             : #222222;
+    --rp-color-button-default-bg         : #191919;
+    --rp-color-button-default-bg-hover   : #222222;
+    --rp-color-button-default-bg-active  : #2a2a2a;
+    --rp-color-surface-inverted          : #{$color-gray-2};
+    --rp-color-overlay                   : rgba(17, 17, 17, 0.75);
+    --rp-color-border                    : #3a3a3a;
+    --rp-color-border-hover              : #606060;
+    --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+    --rp-color-control-bg                : #191919;
+    --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
+    --rp-color-control-fg                : #eeeeee;
+    --rp-color-control-placeholder       : #6e6e6e;
+    --rp-color-control-icon              : #b4b4b4;
+    --rp-color-control-border            : #3a3a3a;
+    --rp-color-control-border-hover      : #606060;
+    --rp-color-control-border-focus      : var(--rp-color-primary);
+    --rp-color-control-track-bg          : var(--rp-color-border);
+    --rp-color-control-thumb-bg          : var(--rp-color-surface-inverted);
+    --rp-color-primary-subtle-bg         : #0d2847;
+    --rp-color-primary-subtle-bg-hover   : #003362;
+    --rp-color-primary-subtle-bg-active  : #004074;
+    --rp-color-primary-border            : #205d9e;
+    --rp-color-primary-border-hover      : #2870bd;
+    --rp-color-primary-fg                : #70b8ff;
+    --rp-color-secondary-subtle-bg       : #291f43;
+    --rp-color-secondary-subtle-bg-hover : #33255b;
+    --rp-color-secondary-subtle-bg-active: #3c2e69;
+    --rp-color-secondary-border          : #56468b;
+    --rp-color-secondary-border-hover    : #6958ad;
+    --rp-color-secondary-fg              : #baa7ff;
+    --rp-color-success-subtle-bg         : #132d21;
+    --rp-color-success-subtle-bg-hover   : #113b29;
+    --rp-color-success-subtle-bg-active  : #174933;
+    --rp-color-success-border            : #28684a;
+    --rp-color-success-border-hover      : #2f7c57;
+    --rp-color-success-fg                : #3dd68c;
+    --rp-color-warning-subtle-bg         : #331e0b;
+    --rp-color-warning-subtle-bg-hover   : #462100;
+    --rp-color-warning-subtle-bg-active  : #562800;
+    --rp-color-warning-border            : #7e451d;
+    --rp-color-warning-border-hover      : #a35829;
+    --rp-color-warning-fg                : #ffa057;
+    --rp-color-danger-subtle-bg          : #3b1219;
+    --rp-color-danger-subtle-bg-hover    : #500f1c;
+    --rp-color-danger-subtle-bg-active   : #611623;
+    --rp-color-danger-border             : #8c333a;
+    --rp-color-danger-border-hover       : #b54548;
+    --rp-color-danger-fg                 : #ff9592;
+    --rp-color-info-subtle-bg            : #082c36;
+    --rp-color-info-subtle-bg-hover      : #003848;
+    --rp-color-info-subtle-bg-active     : #004558;
+    --rp-color-info-border               : #12677e;
+    --rp-color-info-border-hover         : #11809c;
+    --rp-color-info-fg                   : #4ccce6;
+    --rp-color-neutral-subtle-bg         : #222222;
+    --rp-color-neutral-subtle-bg-hover   : #2a2a2a;
+    --rp-color-neutral-subtle-bg-active  : #313131;
+    --rp-color-neutral-border            : #484848;
+    --rp-color-neutral-border-hover      : #606060;
+    --rp-color-neutral-fg                : #eeeeee;
 
     // Shadows
     --rp-shadow-sm  : 0 1px 2px 0 rgba(0, 0, 0, 0.3);

package/src/styles/_variables.scss

@@ -5,36 +5,40 @@
 $font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
 
 // Colors
-$color-primary       : #2563eb !default;
-$color-secondary     : #4f46e5 !default;
-$color-success       : #15803d !default;
-$color-warning       : #b45309 !default;
-$color-danger        : #dc2626 !default;
-$color-info          : #0e7490 !default;
+$color-primary       : #0d74ce !default;
+$color-secondary     : #6550b9 !default;
+$color-success       : #218358 !default;
+$color-warning       : #cc4e00 !default;
+$color-danger        : #ce2c31 !default;
+$color-info          : #107d98 !default;
+$color-neutral       : #646464 !default;
 $color-white         : #ffffff !default;
-$color-black         : #09090b !default;
-$color-gray-50       : #fafafa !default;
-$color-gray-100      : #f4f4f5 !default;
-$color-gray-200      : #e4e4e7 !default;
-$color-gray-300      : #d4d4d8 !default;
-$color-gray-400      : #a1a1aa !default;
-$color-gray-500      : #71717a !default;
-$color-gray-600      : #52525b !default;
-$color-gray-700      : #3f3f46 !default;
-$color-gray-800      : #27272a !default;
-$color-gray-900      : #18181b !default;
-$color-text          : $color-gray-900 !default;
-$color-text-secondary: $color-gray-600 !default;
-$color-text-disabled : $color-gray-500 !default;
+$color-black         : #111111 !default;
+$color-gray-1        : #fcfcfc !default;
+$color-gray-2        : #f9f9f9 !default;
+$color-gray-3        : #f0f0f0 !default;
+$color-gray-4        : #e8e8e8 !default;
+$color-gray-5        : #e0e0e0 !default;
+$color-gray-6        : #d9d9d9 !default;
+$color-gray-7        : #cecece !default;
+$color-gray-8        : #bbbbbb !default;
+$color-gray-9        : #8d8d8d !default;
+$color-gray-10       : #838383 !default;
+$color-gray-11       : #646464 !default;
+$color-gray-12       : #202020 !default;
+$color-text          : $color-gray-12 !default;
+$color-text-secondary: $color-gray-11 !default;
+$color-text-disabled : $color-gray-9 !default;
 $color-background    : $color-white !default;
-$color-border        : $color-gray-200 !default;
-$color-border-hover  : $color-gray-400 !default;
+$color-border        : $color-gray-6 !default;
+$color-border-hover  : $color-gray-8 !default;
 $color-on-primary    : $color-white !default;
 $color-on-secondary  : $color-white !default;
 $color-on-success    : $color-white !default;
 $color-on-warning    : $color-white !default;
 $color-on-danger     : $color-white !default;
 $color-on-info       : $color-white !default;
+$color-on-neutral    : $color-white !default;
 
 // Font sizes
 $font-size-xs  : 0.75rem !default;
@@ -72,12 +76,10 @@ $spacing-12: 3rem !default;
 
 // Border radius
 $radius-none: 0 !default;
-$radius-sm  : 0.125rem !default;
-$radius-base: 0.25rem !default;
-$radius-md  : 0.375rem !default;
-$radius-lg  : 0.5rem !default;
-$radius-xl  : 0.75rem !default;
-$radius-2xl : 1rem !default;
+$radius-sm  : 0.375rem !default;
+$radius-md  : 0.75rem !default;
+$radius-lg  : 1rem !default;
+$radius-xl  : 1.5rem !default;
 $radius-full: 9999px !default;
 
 // Border widths

package/dist/components/_internal/icons/CheckIcon.d.ts

@@ -1,18 +0,0 @@
-declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => import('vue').VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
-};
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};

package/dist/components/_internal/icons/ChevronDownIcon.d.ts

@@ -1,18 +0,0 @@
-declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => import('vue').VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
-};
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};

package/dist/components/_internal/icons/MinusIcon.d.ts

@@ -1,18 +0,0 @@
-declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => import('vue').VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
-};
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};

package/dist/components/_internal/icons/index.d.ts

@@ -1,3 +0,0 @@
-export { default as CheckIcon } from './CheckIcon';
-export { default as ChevronDownIcon } from './ChevronDownIcon';
-export { default as MinusIcon } from './MinusIcon';

package/dist/components/_internal/optionList.d.ts

@@ -1,9 +0,0 @@
-export interface OptionListItem {
-    label: string;
-    value: string | number;
-    disabled?: boolean;
-}
-export type OptionListValue = string | number | null;
-export declare function hasOptionListValue(value: OptionListValue): boolean;
-export declare function getOptionListDisplayLabel<T extends OptionListItem>(options: T[] | undefined, value: OptionListValue): string;
-export declare function getOptionListActiveDescendantId(baseId: string, focusedIndex: number): string | undefined;

package/dist/components/tabs/index.d.ts

@@ -1,5 +0,0 @@
-export { default as Tabs } from './tabs';
-export { default as TabsList } from './tabs-list';
-export { default as TabsTrigger } from './tabs-trigger';
-export { default as TabPanel } from './tab-panel';
-export type { TabsProps, TabsTriggerProps, TabPanelProps } from './types';

package/dist/components/tabs/index.js

@@ -1,2 +0,0 @@
-import { i as tabs_default, n as tabs_trigger_default, r as tabs_list_default, t as tab_panel_default } from "../../tabs.js";
-export { tab_panel_default as TabPanel, tabs_default as Tabs, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger };

package/dist/components/tabs/tab-panel.d.ts

@@ -1,21 +0,0 @@
-import { TabPanelProps } from './types';
-declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<TabPanelProps> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        default?: (props: {}) => any;
-    };
-    emit: {};
-}>) => import('vue').VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
-};
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};