{"_id":"@aetosky/vue-design-system","name":"@aetosky/vue-design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aetosky/vue-design-system","version":"1.0.0","type":"module","description":"A modern Vue 3 component library","author":{"name":"Aetosky","email":"dev@aetosky.com"},"license":"SEE LICENSE IN LICENSE","keywords":["aetosky","vue-design-system","typescript"],"publishConfig":{"access":"public"},"main":"./dist/vue-design-system.umd.cjs","module":"./dist/vue-design-system.js","types":"./dist/index.d.ts","style":"./dist/style.css","exports":{".":{"import":"./dist/vue-design-system.js","require":"./dist/vue-design-system.umd.cjs","types":"./dist/index.d.ts"},"./style.css":"./dist/style.css"},"sideEffects":["**/*.css","**/*.scss"],"scripts":{"dev":"vite --host","build":"vite build","build:lib":"vite build --mode lib","build:lib:check":"vue-tsc --noEmit && vite build --mode lib","preview":"vite preview","type-check":"vue-tsc --noEmit","prepack":"npm run build:lib","prepublishOnly":"npm run build:lib:check"},"peerDependencies":{"vue":"^3.3.0"},"dependencies":{"vue-router":"^4.6.4"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.4","sass":"^1.77.0","typescript":"^5.2.2","vite":"^5.2.0","vite-plugin-dts":"^3.9.1","vue":"^3.4.21","vue-tsc":"^2.0.6"},"_id":"@aetosky/vue-design-system@1.0.0","gitHead":"96fbd6e947486ddbcffe04464ea2369a302f1d1e","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-zuuJe6+08D6lohe2LNWVgE63jBQ9DOAUFTJW4oBkpBimQXhTjtx2VMWhNm6yWpPxKwy5Q2W+LjBFhWkZTJSH8A==","shasum":"cfda47ddda744fd2c681abd6ed8bba90b74197f3","tarball":"https://registry.npmjs.org/@aetosky/vue-design-system/-/vue-design-system-1.0.0.tgz","fileCount":77,"unpackedSize":1540435,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF93Pz0ur3yZVZHrD3o1g2GwJHilUaOgxkkSCYqQ06rmAiAremVOr/RYoefCSzDOZe4iRbFmalQ52XED1T3ry8VC9w=="}]},"_npmUser":{"name":"thai.bui","email":"thai.bui@aetosky.com"},"directories":{},"maintainers":[{"name":"thai.bui","email":"thai.bui@aetosky.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-design-system_1.0.0_1770895651645_0.9634262068733925"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-12T11:27:31.544Z","1.0.0":"2026-02-12T11:27:31.851Z","modified":"2026-02-12T11:27:32.011Z"},"maintainers":[{"name":"thai.bui","email":"thai.bui@aetosky.com"}],"description":"A modern Vue 3 component library","keywords":["aetosky","vue-design-system","typescript"],"author":{"name":"Aetosky","email":"dev@aetosky.com"},"license":"SEE LICENSE IN LICENSE","readme":"# Aetosky Design System\n\nA modern, customizable Vue 3 component library with TypeScript support and CSS custom properties for theming.\n\n**⚠️ This is a licensed package. A valid license key is required for use.**\n\n[See a live example here](https://package.dev.aetosky.com/)\n\n## Installation\n\n### Step 1: Install the Package\n\n```bash\nnpm install @aetosky/vue-design-system\n```\n\n### Step 2: Configure with License Key\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport DesignSystem from '@aetosky/vue-design-system'\nimport '@aetosky/vue-design-system/style.css'\n\nconst app = createApp(App)\n\napp.use(DesignSystem, {\n  licenseKey: 'pk_live_your_license_key_here'\n})\n\napp.mount('#app')\n```\n\n## Getting a License Key\n\nContact us to obtain a license key:\n- Email: trien.nguyen@aetosky.com\n- Website: https://aetosky.com\n\n## Features\n\n- 🚀 **Vue 3 + TypeScript** - Built with Composition API and full TypeScript support\n- 🎨 **Custom Design Tokens** - Comprehensive CSS variables for theming\n- 🌙 **Dark Mode Ready** - Built-in dark theme support\n- ♿ **Accessible** - ARIA-compliant with keyboard navigation\n- 📦 **Tree-shakable** - Import only what you need\n- 🔒 **Licensed** - Protected distribution with license validation\n\n## Components\n\n### Form Controls\n| Component    | Description |\n|--------------|-------------|\n| `AeButton`   | Versatile button with filled, outlined, text, and tonal variants |\n| `AeInput`    | Text input with outlined, filled, and underlined variants |\n| `AeTextarea` | Multi-line text input with character count |\n| `AeSelect`   | Dropdown select with search and custom options |\n\n### Selection Controls\n| Component    | Description |\n|--------------|-------------|\n| `AeCheckbox` | Checkbox with indeterminate state support |\n| `AeRadio`    | Radio button for single selection |\n| `AeSwitch`   | Toggle switch for boolean values |\n\n### Display Components\n| Component | Description |\n|-----------|-------------|\n| `AeCard`  | Content container with multiple variants |\n| `AeBadge` | Status indicators and labels |\n| `AeAlert` | Contextual feedback messages |\n\n## Usage Examples\n\n### Button\n\n```vue\n<template>\n  <AeButton variant=\"filled\" color=\"primary\">\n    Click Me\n  </AeButton>\n</template>\n```\n\n### Input with Validation\n\n```vue\n<template>\n  <AeInput \n    v-model=\"email\"\n    label=\"Email\"\n    type=\"email\"\n    :error-message=\"emailError\"\n  />\n</template>\n```\n\n### Card with Actions\n\n```vue\n<template>\n  <AeCard title=\"Welcome\" variant=\"elevated\">\n    <p>Card content here</p>\n    <template #actions>\n      <AeButton variant=\"text\">Cancel</AeButton>\n      <AeButton>Confirm</AeButton>\n    </template>\n  </AeCard>\n</template>\n```\n\n## Theming\n\nOverride CSS variables to customize the design:\n\n```css\n:root {\n    --sds-typography-family: 'Poppins', sans-serif;\n    --sds-color-brand-arctic-grey: #edf1f9ff;\n    --sds-color-brand-misty-grey: #d8dae2ff;\n    --sds-color-brand-slate-grey: #aaacb5ff;\n}\n```\n\n### Dark Mode\n\n```html\n<div data-theme=\"dark\">\n  <!-- Your app -->\n</div>\n```","readmeFilename":"README.md","_rev":"1-c4fca41e964d88a8ea6fdb0eee9e60dd"}