ropav 0.0.2

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "ropav",
+  "version": "0.0.2",
+  "type": "module",
+  "packageManager": "pnpm@11.9.0",
+  "engines": {
+    "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/index.d.ts",
+      "import": "./dist/components/button/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "import": "./dist/components/checkbox/index.js"
+    },
+    "./input": {
+      "types": "./dist/components/input/index.d.ts",
+      "import": "./dist/components/input/index.js"
+    },
+    "./radio": {
+      "types": "./dist/components/radio/index.d.ts",
+      "import": "./dist/components/radio/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/index.d.ts",
+      "import": "./dist/components/select/index.js"
+    },
+    "./switch": {
+      "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/*"
+  },
+  "scripts": {
+    "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:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
+    "test": "vitest run --project=unit",
+    "test:exports": "node scripts/check-exports.mjs",
+    "test:watch": "vitest --project=unit",
+    "test:typecheck": "vitest run --project=unit --typecheck",
+    "test:storybook": "vitest run --project=storybook",
+    "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
+    "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
+    "prepublishOnly": "pnpm run build && pnpm run tokens:check",
+    "preview": "vite preview",
+    "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
+    "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
+    "release": "bumpp"
+  },
+  "peerDependencies": {
+    "vue": "^3.6.0-beta.4"
+  },
+  "devDependencies": {
+    "@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/tsconfig": "^0.9.1",
+    "bumpp": "^11.1.0",
+    "jsdom": "^29.1.1",
+    "playwright": "^1.61.1",
+    "sass-embedded": "^1.100.0",
+    "storybook": "^10.4.6",
+    "style-dictionary": "5.5.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.3",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9",
+    "vue": "beta",
+    "vue-tsc": "^3.3.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/daopk/ropav"
+  }
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,128 @@
+@mixin flex-center {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin focus-ring {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+
+@mixin visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+@mixin reset-button {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+@mixin icon-close-button {
+    @include flex-center;
+    @include reset-button;
+    color: inherit;
+    opacity: 0.6;
+    flex-shrink: 0;
+    transition: opacity var(--rp-transition-fast);
+
+    &:hover {
+        opacity: 1;
+    }
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@mixin disabled-state {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+
+@mixin control-size-vars($prefix) {
+    &--sm {
+        #{$prefix}-height: var(--rp-size-control-sm);
+        #{$prefix}-font: var(--rp-font-size-sm);
+        #{$prefix}-px: var(--rp-spacing-3);
+        #{$prefix}-radius: var(--rp-radius-md);
+    }
+
+    &--md {
+        #{$prefix}-height: var(--rp-size-control-md);
+        #{$prefix}-font: var(--rp-font-size-base);
+        #{$prefix}-px: var(--rp-spacing-4);
+        #{$prefix}-radius: var(--rp-radius-lg);
+    }
+
+    &--lg {
+        #{$prefix}-height: var(--rp-size-control-lg);
+        #{$prefix}-font: var(--rp-font-size-lg);
+        #{$prefix}-px: var(--rp-spacing-6);
+        #{$prefix}-radius: var(--rp-radius-lg);
+    }
+}
+
+@mixin menu-surface($z-index: var(--rp-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);
+    border-radius: $radius;
+    box-shadow: var(--rp-shadow-md);
+    padding: var(--rp-spacing-1) 0;
+}
+
+@mixin inline-icon($size: 1em) {
+    display: inline-flex;
+    align-items: center;
+    width: $size;
+    height: $size;
+    flex-shrink: 0;
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@mixin semantic-colors($var-name) {
+    @each $name in primary, secondary, success, warning, danger, info {
+        &--#{$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 {
+        &--#{$name} {
+            #{$color-var}: var(--rp-color-#{$name});
+            #{$foreground-var}: var(--rp-color-on-#{$name});
+        }
+    }
+}
+
+@mixin semantic-state-colors($prefix) {
+    @each $name in primary, secondary, success, warning, danger, info {
+        &--#{$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}-fg: var(--rp-color-#{$name}-fg);
+            #{$prefix}-on-bg: var(--rp-color-on-#{$name});
+        }
+    }
+}

package/src/styles/_tokens.scss

@@ -0,0 +1,184 @@
+// This file is generated by Style Dictionary.
+// Do not edit directly; update tokens/**/*.tokens.json instead.
+
+@use 'variables' as *;
+
+:root {
+    // Font family
+    --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);
+
+    // Font sizes
+    --rp-font-size-xs  : #{$font-size-xs};
+    --rp-font-size-sm  : #{$font-size-sm};
+    --rp-font-size-base: #{$font-size-base};
+    --rp-font-size-lg  : #{$font-size-lg};
+    --rp-font-size-xl  : #{$font-size-xl};
+    --rp-font-size-2xl : #{$font-size-2xl};
+    --rp-font-size-3xl : #{$font-size-3xl};
+
+    // Font weights
+    --rp-font-weight-normal  : #{$font-weight-normal};
+    --rp-font-weight-medium  : #{$font-weight-medium};
+    --rp-font-weight-semibold: #{$font-weight-semibold};
+    --rp-font-weight-bold    : #{$font-weight-bold};
+
+    // Line heights
+    --rp-line-height-none   : #{$line-height-none};
+    --rp-line-height-tight  : #{$line-height-tight};
+    --rp-line-height-normal : #{$line-height-normal};
+    --rp-line-height-relaxed: #{$line-height-relaxed};
+    --rp-line-height-loose  : #{$line-height-loose};
+
+    // Spacing
+    --rp-spacing-0 : #{$spacing-0};
+    --rp-spacing-1 : #{$spacing-1};
+    --rp-spacing-2 : #{$spacing-2};
+    --rp-spacing-3 : #{$spacing-3};
+    --rp-spacing-4 : #{$spacing-4};
+    --rp-spacing-5 : #{$spacing-5};
+    --rp-spacing-6 : #{$spacing-6};
+    --rp-spacing-8 : #{$spacing-8};
+    --rp-spacing-10: #{$spacing-10};
+    --rp-spacing-12: #{$spacing-12};
+
+    // 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
+    --rp-border-width-thin  : #{$border-width-thin};
+    --rp-border-width-medium: #{$border-width-medium};
+
+    // Control sizes
+    --rp-size-control-sm: #{$size-control-sm};
+    --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};
+
+    // Shadows
+    --rp-shadow-sm  : #{$shadow-sm};
+    --rp-shadow-base: #{$shadow-base};
+    --rp-shadow-md  : #{$shadow-md};
+    --rp-shadow-lg  : #{$shadow-lg};
+
+    // Transitions
+    --rp-transition-fast: #{$transition-fast};
+    --rp-transition-base: #{$transition-base};
+    --rp-transition-slow: #{$transition-slow};
+
+}
+
+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));
+
+    // Shadows
+    --rp-shadow-sm  : 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+    --rp-shadow-md  : 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+    --rp-shadow-lg  : 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+
+}

package/src/styles/_variables.scss

@@ -0,0 +1,112 @@
+// This file is generated by Style Dictionary.
+// Do not edit directly; update tokens/**/*.tokens.json instead.
+
+// Font family
+$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-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-background    : $color-white !default;
+$color-border        : $color-gray-200 !default;
+$color-border-hover  : $color-gray-400 !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;
+
+// Font sizes
+$font-size-xs  : 0.75rem !default;
+$font-size-sm  : 0.875rem !default;
+$font-size-base: 1rem !default;
+$font-size-lg  : 1.125rem !default;
+$font-size-xl  : 1.25rem !default;
+$font-size-2xl : 1.5rem !default;
+$font-size-3xl : 1.875rem !default;
+
+// Font weights
+$font-weight-normal  : 400 !default;
+$font-weight-medium  : 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold    : 700 !default;
+
+// Line heights
+$line-height-none   : 1 !default;
+$line-height-tight  : 1.25 !default;
+$line-height-normal : 1.4 !default;
+$line-height-relaxed: 1.5 !default;
+$line-height-loose  : 1.6 !default;
+
+// Spacing
+$spacing-0 : 0 !default;
+$spacing-1 : 0.25rem !default;
+$spacing-2 : 0.5rem !default;
+$spacing-3 : 0.75rem !default;
+$spacing-4 : 1rem !default;
+$spacing-5 : 1.25rem !default;
+$spacing-6 : 1.5rem !default;
+$spacing-8 : 2rem !default;
+$spacing-10: 2.5rem !default;
+$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-full: 9999px !default;
+
+// Border widths
+$border-width-thin  : 1px !default;
+$border-width-medium: 2px !default;
+
+// Control sizes
+$size-control-sm: 32px !default;
+$size-control-md: 40px !default;
+$size-control-lg: 48px !default;
+
+// Component tokens
+$component-menu-min-width : 180px !default;
+$component-menu-max-height: 240px !default;
+
+// Z-index
+$z-index-dropdown: 100 !default;
+$z-index-tooltip : 1000 !default;
+
+// Opacity
+$opacity-disabled: 0.5 !default;
+
+// Shadows
+$shadow-sm  : 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !default;
+$shadow-md  : 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !default;
+$shadow-lg  : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !default;
+
+// Transitions
+$transition-fast: 150ms ease !default;
+$transition-base: 200ms ease !default;
+$transition-slow: 300ms ease !default;

package/src/styles/base.scss

@@ -0,0 +1 @@
+@use './tokens';