da-style 0.1.1 → 0.1.3

package/dist/src/token/typography.d.ts

@@ -0,0 +1,86 @@
+/**
+ * da-style Typography System
+ *
+ * Cyberpunk-informed type scale: monospace primary for that
+ * hacker/terminal feel, system-ui for headings where readability
+ * at large sizes matters.
+ */
+export declare const fontMono = "'Courier New', 'Consolas', 'Source Code Pro', monospace";
+export declare const fontSans = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+export declare const fontHeading = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+export declare const fontBody = "'Courier New', Consolas, monospace";
+export declare const textXs = "12px";
+export declare const textSm = "14px";
+export declare const textBase = "16px";
+export declare const textLg = "18px";
+export declare const textXl = "20px";
+export declare const text2xl = "24px";
+export declare const text3xl = "30px";
+export declare const weightRegular = "400";
+export declare const weightMedium = "500";
+export declare const weightSemibold = "600";
+export declare const weightBold = "700";
+export declare const leadingTight = "1.2";
+export declare const leadingNormal = "1.5";
+export declare const leadingRelaxed = "1.75";
+export declare const trackingTight = "-0.02em";
+export declare const trackingNormal = "0";
+export declare const trackingWide = "0.08em";
+export declare const cssVars: {
+    readonly font: {
+        readonly mono: "--d-font-mono";
+        readonly sans: "--d-font-sans";
+        readonly heading: "--d-font-heading";
+        readonly body: "--d-font-body";
+    };
+    readonly size: {
+        readonly xs: "--d-text-xs";
+        readonly sm: "--d-text-sm";
+        readonly base: "--d-text-base";
+        readonly lg: "--d-text-lg";
+        readonly xl: "--d-text-xl";
+        readonly '2xl': "--d-text-2xl";
+        readonly '3xl': "--d-text-3xl";
+    };
+    readonly weight: {
+        readonly regular: "--d-weight-regular";
+        readonly medium: "--d-weight-medium";
+        readonly semibold: "--d-weight-semibold";
+        readonly bold: "--d-weight-bold";
+    };
+    readonly leading: {
+        readonly tight: "--d-leading-tight";
+        readonly normal: "--d-leading-normal";
+        readonly relaxed: "--d-leading-relaxed";
+    };
+    readonly tracking: {
+        readonly tight: "--d-tracking-tight";
+        readonly normal: "--d-tracking-normal";
+        readonly wide: "--d-tracking-wide";
+    };
+};
+export interface TypographyTokens {
+    fontMono: string;
+    fontSans: string;
+    fontHeading: string;
+    fontBody: string;
+    textXs: string;
+    textSm: string;
+    textBase: string;
+    textLg: string;
+    textXl: string;
+    text2xl: string;
+    text3xl: string;
+    weightRegular: string;
+    weightMedium: string;
+    weightSemibold: string;
+    weightBold: string;
+    leadingTight: string;
+    leadingNormal: string;
+    leadingRelaxed: string;
+    trackingTight: string;
+    trackingNormal: string;
+    trackingWide: string;
+}
+/** All typography tokens as a flat object */
+export declare const typography: TypographyTokens;

package/package.json

@@ -1,45 +1,39 @@
 {
   "name": "da-style",
-  "version": "0.1.1",
-  "main": "lib/da-style.common.js",
-  "author": "da9527",
+  "version": "0.1.3",
+  "description": "赛博朋克风格 Vue3 组件库",
+  "type": "module",
   "private": false,
+  "license": "MIT",
+  "author": "da",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lib": "vue-cli-service build --target lib --name da-style --dest lib packages/index.js",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit"
   },
+  "files": [
+    "dist",
+    "skills",
+    "README.md"
+  ],
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.5.38"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.9",
+    "vue-tsc": "^3.3.5"
+  }
 }

package/skills/da-style/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: da-style
+description: >
+  Cyberpunk-styled Vue 3 component library with neon glow effects, geometric clipped borders,
+  and deep black backgrounds. Use when user needs to install, configure, or use da-style
+  components (DButton, DInput, DTag, DLoading, DIcon) in a Vue 3 project. Triggers on
+  "da-style", "cyberpunk components", "赛博朋克组件", or requests for neon/glow UI elements.
+---
+
+# da-style Component Library
+
+Cyberpunk Vue 3 component library. Deep black backgrounds (#0a0a0f), neon cyan (#00f0ff) / magenta (#ff00c8) accents, geometric clipped borders, multi-layer glow shadows.
+
+## Install
+
+```bash
+npm install da-style
+# or
+pnpm add da-style
+# or
+yarn add da-style
+```
+
+## Setup
+
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import DaStyle from 'da-style'
+import 'da-style/dist/da-style.css'
+
+createApp(App).use(DaStyle).mount('#app')
+```
+
+Or import individual components:
+
+```vue
+<script setup>
+import { DButton, DInput } from 'da-style'
+import 'da-style/dist/da-style.css'
+</script>
+```
+
+## Components
+
+5 components: **DButton**, **DInput**, **DTag**, **DLoading**, **DIcon**.
+
+For full API details, read `references/components.md`.
+
+Quick usage:
+
+```vue
+<DButton status="primary" glow>Click Me</DButton>
+<DInput placeholder="Enter text" clearable glow />
+<DTag status="success" closable>Active</DTag>
+<DLoading type="dots" text="Loading..." />
+<DIcon name="check" spin />
+```
+
+## Design Tokens
+
+CSS variables are available globally (on `:root`). Use them directly:
+
+```css
+.my-box {
+  background: var(--d-bg-secondary);
+  border: 1px solid var(--d-cyan);
+  box-shadow: var(--d-glow-cyan);
+  color: var(--d-text-primary);
+  font-family: var(--d-font-mono);
+}
+```
+
+For full token list, read `references/tokens.md`.
+
+## Key Design Principles
+
+- **No rounded corners** — use `clip-path` for geometric cuts
+- **Neon glow** — multi-layer `box-shadow` on interactive elements
+- **Scanline overlay** — `repeating-linear-gradient` pseudo-elements
+- **Monospace typography** — JetBrains Mono / Rajdhani fonts
+- **Status colors**: primary=cyan, success=green, warning=yellow, danger=red, info=purple

package/skills/da-style/references/components.md

@@ -0,0 +1,113 @@
+# da-style Components API
+
+## DButton
+
+Cyberpunk button with neon glow and geometric clipped borders.
+
+```vue
+<DButton status="primary" size="medium" glow>Button</DButton>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | Color variant |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Button size |
+| disabled | `boolean` | `false` | Disabled state |
+| loading | `boolean` | `false` | Loading spinner |
+| glow | `boolean` | `false` | Neon glow effect |
+| ghost | `boolean` | `false` | Transparent background |
+| block | `boolean` | `false` | Full width |
+| round | `boolean` | `false` | Rounded corners |
+| circle | `boolean` | `false` | Circle shape |
+
+| Event | Description |
+|-------|-------------|
+| click | Emitted on click (not when disabled/loading) |
+
+---
+
+## DInput
+
+Input with scanline overlay and focus glow.
+
+```vue
+<DInput v-model="text" placeholder="Enter..." clearable glow />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| modelValue | `string` | `''` | Bound value (v-model) |
+| type | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'` | `'text'` | Input type |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Input size |
+| disabled | `boolean` | `false` | Disabled state |
+| readonly | `boolean` | `false` | Read-only state |
+| placeholder | `string` | `''` | Placeholder text |
+| clearable | `boolean` | `false` | Show clear button |
+| glow | `boolean` | `false` | Focus glow effect |
+| prefix | `string` | — | Prefix text |
+| suffix | `string` | — | Suffix text |
+
+| Slot | Description |
+|------|-------------|
+| prefix | Custom prefix content |
+| suffix | Custom suffix content |
+
+---
+
+## DTag
+
+Tag with neon border and optional glow.
+
+```vue
+<DTag status="success" closable glow>Active</DTag>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | Color variant |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Tag size |
+| closable | `boolean` | `false` | Show close button |
+| ghost | `boolean` | `false` | Transparent background |
+| glow | `boolean` | `false` | Neon glow effect |
+| round | `boolean` | `false` | Rounded corners |
+
+| Event | Description |
+|-------|-------------|
+| close | Emitted when close button clicked |
+
+---
+
+## DLoading
+
+Loading indicator with spinner, dots, or pulse animations.
+
+```vue
+<DLoading type="spinner" text="Loading..." />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'spinner' \| 'dots' \| 'pulse'` | `'spinner'` | Animation type |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Loader size |
+| color | `string` | — | Custom color |
+| text | `string` | — | Loading text |
+| fullscreen | `boolean` | `false` | Fullscreen overlay |
+
+---
+
+## DIcon
+
+SVG icon with neon glow.
+
+```vue
+<DIcon name="check" size="large" color="#00f0ff" spin />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `IconName` | — | Icon name (required) |
+| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Icon size |
+| color | `string` | — | Stroke color |
+| spin | `boolean` | `false` | Rotation animation |
+
+Available icons: `close`, `check`, `chevron-left`, `chevron-right`, `chevron-down`, `chevron-up`, `loading`, `search`, `info`, `warning`, `error`, `success`, `eye`, `eye-off`

package/skills/da-style/references/tokens.md

@@ -0,0 +1,78 @@
+# da-style Design Tokens
+
+All tokens are CSS custom properties defined on `:root`. Use directly in CSS.
+
+## Colors
+
+| Variable | Value | Usage |
+|----------|-------|-------|
+| `--d-bg-primary` | `#0a0a0f` | Main background |
+| `--d-bg-secondary` | `#12121a` | Card/surface background |
+| `--d-bg-elevated` | `#1a1a2e` | Elevated surface |
+| `--d-bg-overlay` | `rgba(0,0,0,0.85)` | Modal overlay |
+| `--d-text-primary` | `#e0e0ff` | Main text |
+| `--d-text-secondary` | `#8888aa` | Muted text |
+| `--d-text-disabled` | `#444466` | Disabled text |
+| `--d-text-inverse` | `#0a0a0f` | Text on light bg |
+
+## Neon Accents
+
+| Variable | Value |
+|----------|-------|
+| `--d-cyan` | `#00f0ff` |
+| `--d-magenta` | `#ff00c8` |
+| `--d-purple` | `#7000ff` |
+| `--d-blue` | `#0066ff` |
+| `--d-yellow` | `#ffea00` |
+| `--d-green` | `#00ff41` |
+| `--d-orange` | `#ff6600` |
+| `--d-red` | `#ff003c` |
+
+RGB variants available: `--d-cyan-rgb`, `--d-magenta-rgb`, etc. for use with `rgba()`.
+
+## Semantic Colors
+
+| Variable | Maps to |
+|----------|---------|
+| `--d-color-primary` | `var(--d-cyan)` |
+| `--d-color-success` | `var(--d-green)` |
+| `--d-color-warning` | `var(--d-yellow)` |
+| `--d-color-danger` | `var(--d-red)` |
+| `--d-color-info` | `var(--d-purple)` |
+
+## Spacing
+
+`--d-spacing-1` (4px) through `--d-spacing-12` (48px), plus `--d-container-sm/md/lg/xl`.
+
+## Typography
+
+| Variable | Default |
+|----------|---------|
+| `--d-font-mono` | JetBrains Mono, Fira Code, monospace |
+| `--d-font-sans` | Rajdhani, Exo 2, system-ui |
+| `--d-font-heading` | Rajdhani, Exo 2, system-ui |
+| `--d-font-body` | JetBrains Mono, Fira Code, monospace |
+
+Sizes: `--d-text-xs` (11px) through `--d-text-3xl` (32px).
+
+## Shadows & Glow
+
+| Variable | Description |
+|----------|-------------|
+| `--d-glow-cyan` | Multi-layer cyan neon glow |
+| `--d-glow-magenta` | Multi-layer magenta neon glow |
+| `--d-glow-purple` | Multi-layer purple neon glow |
+| `--d-glow-green` | Multi-layer green neon glow |
+| `--d-glow-yellow` | Multi-layer yellow neon glow |
+| `--d-glow-red` | Multi-layer red neon glow |
+| `--d-shadow-sm/md/lg` | Standard elevation shadows |
+
+## Clip Paths
+
+| Variable | Description |
+|----------|-------------|
+| `--d-clip-cut-sm` | 8px geometric cut |
+| `--d-clip-cut-md` | 12px geometric cut |
+| `--d-clip-cut-lg` | 16px geometric cut |
+
+Usage: `clip-path: var(--d-clip-cut-sm);`