@duskmoon-dev/core 0.1.0 → 0.2.0

package/dist/types/theme.d.ts

@@ -0,0 +1,202 @@
+/**
+ * Theme Configuration Types
+ * TypeScript definitions for DuskMoonUI theme definitions
+ */
+/**
+ * HSL color value in space-separated format
+ * @example "240 80% 60%" (hue saturation lightness)
+ */
+export type HSLColor = string;
+/**
+ * Color scheme preference
+ */
+export type ColorScheme = 'light' | 'dark';
+/**
+ * Theme definition structure
+ * Defines all color tokens for a theme
+ */
+export interface ThemeDefinition {
+    /**
+     * Unique theme identifier
+     * @example "sunshine", "moonlight", "custom"
+     */
+    name: string;
+    /**
+     * Light or dark color scheme
+     * Used for browser color-scheme CSS property
+     */
+    colorScheme: ColorScheme;
+    /**
+     * Whether this is the default theme
+     * Only one theme can be default
+     */
+    default?: boolean;
+    /**
+     * Whether to use when user prefers dark mode
+     * Only one theme can have prefersDark
+     */
+    prefersDark?: boolean;
+    /**
+     * Theme colors
+     */
+    colors: ThemeColors;
+}
+/**
+ * Complete theme color token set
+ * 65+ tokens following Material Design 3 conventions
+ */
+export interface ThemeColors {
+    /**
+     * Primary brand color
+     * @example "30 90% 60%" (warm orange for sunshine theme)
+     */
+    primary: HSLColor;
+    /**
+     * Primary focus state (hover/active)
+     */
+    'primary-focus': HSLColor;
+    /**
+     * Content color on primary background
+     * Must meet WCAG AA contrast (4.5:1)
+     */
+    'primary-content': HSLColor;
+    /**
+     * Tinted primary container background
+     */
+    'primary-container': HSLColor;
+    /**
+     * Content color on primary container
+     */
+    'on-primary-container': HSLColor;
+    /**
+     * Secondary brand color
+     */
+    secondary: HSLColor;
+    'secondary-focus': HSLColor;
+    'secondary-content': HSLColor;
+    'secondary-container': HSLColor;
+    'on-secondary-container': HSLColor;
+    /**
+     * Tertiary brand color
+     */
+    tertiary: HSLColor;
+    'tertiary-focus': HSLColor;
+    'tertiary-content': HSLColor;
+    'tertiary-container': HSLColor;
+    'on-tertiary-container': HSLColor;
+    /**
+     * Base surface color
+     */
+    surface: HSLColor;
+    /**
+     * Dimmed surface for lower emphasis
+     */
+    'surface-dim': HSLColor;
+    /**
+     * Brightened surface for higher emphasis
+     */
+    'surface-bright': HSLColor;
+    /**
+     * Surface container variants (elevation levels)
+     */
+    'surface-container-lowest': HSLColor;
+    'surface-container-low': HSLColor;
+    'surface-container': HSLColor;
+    'surface-container-high': HSLColor;
+    'surface-container-highest': HSLColor;
+    /**
+     * Content on surface colors
+     */
+    'on-surface': HSLColor;
+    'on-surface-variant': HSLColor;
+    /**
+     * Info semantic color (blue tones)
+     */
+    info: HSLColor;
+    'info-content': HSLColor;
+    'info-container': HSLColor;
+    'on-info-container': HSLColor;
+    /**
+     * Success semantic color (green tones)
+     */
+    success: HSLColor;
+    'success-content': HSLColor;
+    'success-container': HSLColor;
+    'on-success-container': HSLColor;
+    /**
+     * Warning semantic color (yellow/orange tones)
+     */
+    warning: HSLColor;
+    'warning-content': HSLColor;
+    'warning-container': HSLColor;
+    'on-warning-container': HSLColor;
+    /**
+     * Error semantic color (red tones)
+     */
+    error: HSLColor;
+    'error-content': HSLColor;
+    'error-container': HSLColor;
+    'on-error-container': HSLColor;
+    /**
+     * Base neutral colors (grayscale)
+     * base-100 is lightest, base-900 is darkest
+     */
+    'base-100': HSLColor;
+    'base-200': HSLColor;
+    'base-300': HSLColor;
+    'base-400': HSLColor;
+    'base-500': HSLColor;
+    'base-600': HSLColor;
+    'base-700': HSLColor;
+    'base-800': HSLColor;
+    'base-900': HSLColor;
+    /**
+     * Default text color on base backgrounds
+     */
+    'base-content': HSLColor;
+    /**
+     * Primary outline color
+     */
+    outline: HSLColor;
+    /**
+     * Subtle outline variant
+     */
+    'outline-variant': HSLColor;
+}
+/**
+ * Partial theme colors for custom theme definitions
+ * Allows overriding only specific tokens
+ */
+export type PartialThemeColors = Partial<ThemeColors>;
+/**
+ * Theme configuration for plugin
+ */
+export type ThemeConfig = string | {
+    [themeName: string]: PartialThemeColors;
+};
+/**
+ * Validation result for theme colors
+ */
+export interface ThemeValidationResult {
+    valid: boolean;
+    errors: ThemeValidationError[];
+    warnings: ThemeValidationWarning[];
+}
+/**
+ * Theme validation error
+ */
+export interface ThemeValidationError {
+    token: string;
+    message: string;
+    value?: string;
+}
+/**
+ * Theme validation warning (non-blocking)
+ */
+export interface ThemeValidationWarning {
+    token: string;
+    message: string;
+    value?: string;
+    suggestion?: string;
+}
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/types/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,20 +1,254 @@
 {
   "name": "@duskmoon-dev/core",
-  "version": "0.1.0",
-  "description": "DuskMoonUI - Tailwind CSS component library with extended color system",
+  "version": "0.2.0",
+  "description": "DuskMoonUI - Tailwind CSS v4 plugin with Material Design 3 color system and component styles",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.css",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.css",
+      "style": "./dist/index.css",
+      "types": "./dist/types/index.d.ts"
     },
-    "./theme": {
-      "types": "./dist/theme.d.ts",
-      "import": "./dist/theme.js"
+    "./themes/sunshine": {
+      "style": "./dist/themes/sunshine.css"
+    },
+    "./themes/moonlight": {
+      "style": "./dist/themes/moonlight.css"
+    },
+    "./components": {
+      "style": "./dist/components/index.css"
+    },
+    "./components/accordion": {
+      "style": "./dist/components/accordion.css",
+      "import": "./dist/esm/components/accordion.js",
+      "default": "./dist/esm/components/accordion.js"
+    },
+    "./components/alert": {
+      "style": "./dist/components/alert.css",
+      "import": "./dist/esm/components/alert.js",
+      "default": "./dist/esm/components/alert.js"
+    },
+    "./components/appbar": {
+      "style": "./dist/components/appbar.css",
+      "import": "./dist/esm/components/appbar.js",
+      "default": "./dist/esm/components/appbar.js"
+    },
+    "./components/autocomplete": {
+      "style": "./dist/components/autocomplete.css",
+      "import": "./dist/esm/components/autocomplete.js",
+      "default": "./dist/esm/components/autocomplete.js"
+    },
+    "./components/avatar": {
+      "style": "./dist/components/avatar.css",
+      "import": "./dist/esm/components/avatar.js",
+      "default": "./dist/esm/components/avatar.js"
+    },
+    "./components/badge": {
+      "style": "./dist/components/badge.css",
+      "import": "./dist/esm/components/badge.js",
+      "default": "./dist/esm/components/badge.js"
+    },
+    "./components/bottom-navigation": {
+      "style": "./dist/components/bottom-navigation.css",
+      "import": "./dist/esm/components/bottom-navigation.js",
+      "default": "./dist/esm/components/bottom-navigation.js"
+    },
+    "./components/bottomsheet": {
+      "style": "./dist/components/bottomsheet.css",
+      "import": "./dist/esm/components/bottomsheet.js",
+      "default": "./dist/esm/components/bottomsheet.js"
+    },
+    "./components/button": {
+      "style": "./dist/components/button.css",
+      "import": "./dist/esm/components/button.js",
+      "default": "./dist/esm/components/button.js"
+    },
+    "./components/card": {
+      "style": "./dist/components/card.css",
+      "import": "./dist/esm/components/card.js",
+      "default": "./dist/esm/components/card.js"
+    },
+    "./components/checkbox": {
+      "style": "./dist/components/checkbox.css",
+      "import": "./dist/esm/components/checkbox.js",
+      "default": "./dist/esm/components/checkbox.js"
+    },
+    "./components/chip": {
+      "style": "./dist/components/chip.css",
+      "import": "./dist/esm/components/chip.js",
+      "default": "./dist/esm/components/chip.js"
+    },
+    "./components/collapse": {
+      "style": "./dist/components/collapse.css",
+      "import": "./dist/esm/components/collapse.js",
+      "default": "./dist/esm/components/collapse.js"
+    },
+    "./components/datepicker": {
+      "style": "./dist/components/datepicker.css",
+      "import": "./dist/esm/components/datepicker.js",
+      "default": "./dist/esm/components/datepicker.js"
+    },
+    "./components/dialog": {
+      "style": "./dist/components/dialog.css",
+      "import": "./dist/esm/components/dialog.js",
+      "default": "./dist/esm/components/dialog.js"
+    },
+    "./components/divider": {
+      "style": "./dist/components/divider.css",
+      "import": "./dist/esm/components/divider.js",
+      "default": "./dist/esm/components/divider.js"
+    },
+    "./components/drawer": {
+      "style": "./dist/components/drawer.css",
+      "import": "./dist/esm/components/drawer.js",
+      "default": "./dist/esm/components/drawer.js"
+    },
+    "./components/file-upload": {
+      "style": "./dist/components/file-upload.css",
+      "import": "./dist/esm/components/file-upload.js",
+      "default": "./dist/esm/components/file-upload.js"
+    },
+    "./components/form": {
+      "style": "./dist/components/form.css",
+      "import": "./dist/esm/components/form.js",
+      "default": "./dist/esm/components/form.js"
+    },
+    "./components/form-group": {
+      "style": "./dist/components/form-group.css",
+      "import": "./dist/esm/components/form-group.js",
+      "default": "./dist/esm/components/form-group.js"
+    },
+    "./components/input": {
+      "style": "./dist/components/input.css",
+      "import": "./dist/esm/components/input.js",
+      "default": "./dist/esm/components/input.js"
+    },
+    "./components/list": {
+      "style": "./dist/components/list.css",
+      "import": "./dist/esm/components/list.js",
+      "default": "./dist/esm/components/list.js"
+    },
+    "./components/markdown-body": {
+      "style": "./dist/components/markdown-body.css",
+      "import": "./dist/esm/components/markdown-body.js",
+      "default": "./dist/esm/components/markdown-body.js"
+    },
+    "./components/modal": {
+      "style": "./dist/components/modal.css",
+      "import": "./dist/esm/components/modal.js",
+      "default": "./dist/esm/components/modal.js"
+    },
+    "./components/multi-select": {
+      "style": "./dist/components/multi-select.css",
+      "import": "./dist/esm/components/multi-select.js",
+      "default": "./dist/esm/components/multi-select.js"
+    },
+    "./components/navigation": {
+      "style": "./dist/components/navigation.css",
+      "import": "./dist/esm/components/navigation.js",
+      "default": "./dist/esm/components/navigation.js"
+    },
+    "./components/otp-input": {
+      "style": "./dist/components/otp-input.css",
+      "import": "./dist/esm/components/otp-input.js",
+      "default": "./dist/esm/components/otp-input.js"
+    },
+    "./components/pin-input": {
+      "style": "./dist/components/pin-input.css",
+      "import": "./dist/esm/components/pin-input.js",
+      "default": "./dist/esm/components/pin-input.js"
+    },
+    "./components/popover": {
+      "style": "./dist/components/popover.css",
+      "import": "./dist/esm/components/popover.js",
+      "default": "./dist/esm/components/popover.js"
+    },
+    "./components/progress": {
+      "style": "./dist/components/progress.css",
+      "import": "./dist/esm/components/progress.js",
+      "default": "./dist/esm/components/progress.js"
+    },
+    "./components/radio": {
+      "style": "./dist/components/radio.css",
+      "import": "./dist/esm/components/radio.js",
+      "default": "./dist/esm/components/radio.js"
+    },
+    "./components/rating": {
+      "style": "./dist/components/rating.css",
+      "import": "./dist/esm/components/rating.js",
+      "default": "./dist/esm/components/rating.js"
+    },
+    "./components/segment-control": {
+      "style": "./dist/components/segment-control.css",
+      "import": "./dist/esm/components/segment-control.js",
+      "default": "./dist/esm/components/segment-control.js"
+    },
+    "./components/select": {
+      "style": "./dist/components/select.css",
+      "import": "./dist/esm/components/select.js",
+      "default": "./dist/esm/components/select.js"
+    },
+    "./components/skeleton": {
+      "style": "./dist/components/skeleton.css",
+      "import": "./dist/esm/components/skeleton.js",
+      "default": "./dist/esm/components/skeleton.js"
+    },
+    "./components/slider": {
+      "style": "./dist/components/slider.css",
+      "import": "./dist/esm/components/slider.js",
+      "default": "./dist/esm/components/slider.js"
+    },
+    "./components/snackbar": {
+      "style": "./dist/components/snackbar.css",
+      "import": "./dist/esm/components/snackbar.js",
+      "default": "./dist/esm/components/snackbar.js"
+    },
+    "./components/stepper": {
+      "style": "./dist/components/stepper.css",
+      "import": "./dist/esm/components/stepper.js",
+      "default": "./dist/esm/components/stepper.js"
+    },
+    "./components/switch": {
+      "style": "./dist/components/switch.css",
+      "import": "./dist/esm/components/switch.js",
+      "default": "./dist/esm/components/switch.js"
+    },
+    "./components/table": {
+      "style": "./dist/components/table.css",
+      "import": "./dist/esm/components/table.js",
+      "default": "./dist/esm/components/table.js"
+    },
+    "./components/textarea": {
+      "style": "./dist/components/textarea.css",
+      "import": "./dist/esm/components/textarea.js",
+      "default": "./dist/esm/components/textarea.js"
+    },
+    "./components/time-input": {
+      "style": "./dist/components/time-input.css",
+      "import": "./dist/esm/components/time-input.js",
+      "default": "./dist/esm/components/time-input.js"
+    },
+    "./components/timeline": {
+      "style": "./dist/components/timeline.css",
+      "import": "./dist/esm/components/timeline.js",
+      "default": "./dist/esm/components/timeline.js"
+    },
+    "./components/toast": {
+      "style": "./dist/components/toast.css",
+      "import": "./dist/esm/components/toast.js",
+      "default": "./dist/esm/components/toast.js"
+    },
+    "./components/tooltip": {
+      "style": "./dist/components/tooltip.css",
+      "import": "./dist/esm/components/tooltip.js",
+      "default": "./dist/esm/components/tooltip.js"
+    },
+    "./components/tree-select": {
+      "style": "./dist/components/tree-select.css",
+      "import": "./dist/esm/components/tree-select.js",
+      "default": "./dist/esm/components/tree-select.js"
     }
   },
   "files": [
@@ -24,12 +258,17 @@
   ],
   "scripts": {
     "dev": "bun run build --watch",
-    "build": "bun run clean && bun run build:bundle && bun run build:types",
-    "build:bundle": "bun build src/index.ts --outdir dist --target node --format esm --sourcemap && bun build src/index.ts --target node --format cjs --outfile src/index.cjs --sourcemap && mv src/index.cjs src/index.cjs.map dist/",
-    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build": "bun run clean && bun run build:css && bun run build:types",
+    "build:css": "bun run scripts/build-css.ts",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist/types",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
-    "test": "bun test"
+    "test": "bun test tests/unit",
+    "test:unit": "bun test tests/unit",
+    "test:visual": "playwright test --config=playwright.visual.config.ts",
+    "test:integration": "playwright test --config=playwright.integration.config.ts",
+    "test:a11y": "playwright test --config=playwright.integration.config.ts tests/accessibility/",
+    "test:all": "bun run test:unit && bun run test:visual && bun run test:integration && bun run test:a11y"
   },
   "keywords": [
     "tailwind",
@@ -57,12 +296,17 @@
     "url": "https://github.com/duskmoon-dev/duskmoonui/issues"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.0 || ^4.0.0"
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.8.0",
+    "@playwright/test": "^1.40.0",
     "@types/bun": "latest",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.6.0"
+    "axe-core": "^4.8.0",
+    "lightningcss": "^1.22.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.6.0",
+    "vitest": "^1.0.0"
   },
   "engines": {
     "node": ">=18.0.0",