@lukeashford/aurelius 1.0.1 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 lukeashford
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,93 +1,146 @@
-# Aurelius Design System
+# Aurelius
 
-**A cohesive visual language for creative technologists — combining technical sophistication with an
-artistic sensibility.**
+[![npm version](https://img.shields.io/npm/v/@lukeashford/aurelius.svg)](https://www.npmjs.com/package/@lukeashford/aurelius)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-[View the Live Demo](https://aurelius.lukeashford.com/)
+**A dark-mode design system for creative technologists** — combining technical sophistication with a
+cinematic aesthetic.
+
+[Live Demo](https://aurelius.lukeashford.com/)
 
 ---
 
-## The Philosophy
+## Philosophy
 
-Aurelius blends technical precision with a cinematic aesthetic, relying on deep blacks, rich golds,
-and refined typography to convey stability, trust, and quiet luxury.
+Aurelius relies on deep blacks, rich golds, and refined typography to convey stability, trust, and
+quiet luxury.
 
-**Core Principles:**
+**Core principles:**
 
-1. **Cinematic:** Strict dark mode. No white backgrounds.
-2. **Refined:** Gold (#c9a227) is reserved for primary actions.
-3. **Grounded:** 1px subtle borders (`border-ash`) replace heavy drop shadows.
+- **Cinematic:** Strictly dark mode. No white backgrounds.
+- **Refined:** Gold (`#c9a227`) is reserved for primary actions and key highlights.
+- **Grounded:** Subtle 1px borders over heavy drop shadows.
 
-**Implementation Strategy:**
-We follow a strict hierarchy:
+**Usage hierarchy:**
 
-1. **React Components** (`<Button />`) — *Always prefer these.*
-2. **Component Classes** (`.btn`) — *Fallback for non-React.*
-3. **Utility Classes** (`bg-obsidian`) — *For custom layouts.*
-4. **Design Tokens** — *Last resort.*
+1. **React Components** — Use `<Button />`, `<Card />`, etc. whenever possible
+2. **Tailwind utilities** — Build custom layouts with token-based classes (`bg-obsidian`,
+   `text-gold`)
+3. **Design tokens** — Direct access to values as a last resort
 
 ---
 
-## AI Agent Support 🤖
+## AI Agent Optimization 🤖
+
+This package includes a machine-readable manifest and ESLint enforcement for AI coding assistants.
+
+**Prompt your agent:**
+
+> Use the Aurelius design system for this project.
+>
+> 1. Run `npm install @lukeashford/aurelius`
+> 2. Read `node_modules/@lukeashford/aurelius/llms.md` completely before writing any code
+> 3. Follow its setup instructions (Tailwind config, ESLint, fonts)
+> 4. Use only the components and Tailwind classes listed in that file
 
-This package is **AI-Optimized**. It includes a machine-readable manifest file that helps AI coding
-assistants understand the design system without hallucinating styles.
+The manifest provides complete setup instructions, so agents can bootstrap a project from scratch
+while staying within design system constraints.
 
-**How to Prompt Your Agent:**
-> "I have installed `@lukeashford/aurelius`. Before writing any code, read
-`node_modules/@lukeashford/aurelius/dist/llms.md`. This file contains the Design Philosophy (
-> which you must strictly follow) and the Component API you have available."
+[View the manifest](./llms.md)
 
 ---
 
-## Installation
+## Quick Start
 
-### 1. Install Package
+### 1. Install
 
 ```bash
 npm install @lukeashford/aurelius
+npm install -D eslint eslint-plugin-tailwindcss
+```
+
+### 2. Import the design system
+
+Create or update your `index.css`:
+
+```css
+/* Import the complete Aurelius design system (includes Tailwind v4, fonts, and theme) */
+@import '@lukeashford/aurelius/styles/base.css';
+
+/* Tell Tailwind to scan the Aurelius package for utility classes */
+@source "../node_modules/@lukeashford/aurelius/dist";
 ```
 
-### 2. Configure Tailwind
+Then import it in your entry file:
+
+```typescript
+// main.tsx or index.tsx
+import './index.css'
+```
+
+### 3. Configure ESLint
+
+This enforces the design system — agents and developers get errors when using arbitrary values or
+non-Aurelius classes.
 
 ```javascript
-// tailwind.config.js
-const aureliusPreset = require('@lukeashford/aurelius/tailwind.preset')
+// eslint.config.js
+import tailwindcss from 'eslint-plugin-tailwindcss';
+
+export default [
+  {
+    plugins: {tailwindcss},
+    rules: {
+      'tailwindcss/no-arbitrary-value': 'error',
+      'tailwindcss/no-custom-classname': 'error',
+    },
+  },
+];
+```
+
+<details>
+<summary>Legacy .eslintrc.js format</summary>
 
+```javascript
 module.exports = {
-  presets: [aureliusPreset],
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@lukeashford/aurelius/**/*.{js,mjs,ts}',
-  ],
+  plugins: ['tailwindcss'],
+  rules: {
+    'tailwindcss/no-arbitrary-value': 'error',
+    'tailwindcss/no-custom-classname': 'error',
+  },
 }
 ```
 
-### 3. Import Styles
+</details>
 
-```css
-/* In your global CSS */
-@import '@lukeashford/aurelius/styles/base.css';
-```
+### 4. Update package.json scripts
 
----
+```json
+{
+  "scripts": {
+    "lint": "eslint src --max-warnings 0",
+    "dev": "npm run lint && vite",
+    "build": "npm run lint && vite build"
+  }
+}
+```
 
-## Quick Start
+### 5. Use components
 
 ```tsx
 import {Button, Card, Input} from '@lukeashford/aurelius'
 
-export function LoginForm() {
+function LoginForm() {
   return (
       <Card variant="featured" className="p-8 max-w-sm mx-auto">
         <h2 className="text-gold text-2xl mb-6">Sign In</h2>
-        <div className="space-y-4">
-          <Input placeholder="email@example.com"/>
-          <Button variant="primary" className="w-full">
-            Enter the System
-          </Button>
-        </div>
+        <Input placeholder="email@example.com"/>
+        <Button variant="primary" className="w-full mt-4">
+          Enter
+        </Button>
       </Card>
   )
 }
 ```
+
+---

package/dist/index.d.mts

@@ -1,7 +1,4 @@
-export { default as tailwindPreset } from './tailwind.preset.mjs';
-export { ColorToken, DurationToken, EasingToken, RadiusToken, ShadowToken, SpacingToken, TypographyToken, colors, duration, easing, radii, shadows, spacing, typography } from './tokens/index.mjs';
 import React from 'react';
-import 'tailwindcss';
 
 type ButtonVariant = 'primary' | 'important' | 'elevated' | 'outlined' | 'featured' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -27,12 +24,13 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarStatus = 'online' | 'offline' | 'busy';
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
     name?: string;
     size?: AvatarSize;
-    status?: 'online' | 'offline' | 'busy';
+    status?: AvatarStatus;
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -42,11 +40,12 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
+type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 interface TooltipProps {
     content: React.ReactNode;
     children: React.ReactElement;
     open?: boolean;
-    side?: 'top' | 'right' | 'bottom' | 'left';
+    side?: TooltipSide;
 }
 declare const Tooltip: React.FC<TooltipProps>;
 
@@ -100,8 +99,9 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
 
+type SpinnerSize = 'sm' | 'md' | 'lg';
 interface SpinnerProps extends React.SVGAttributes<SVGElement> {
-    size?: 'sm' | 'md' | 'lg';
+    size?: SpinnerSize;
 }
 declare const Spinner: {
     ({ className, size, ...rest }: SpinnerProps): React.JSX.Element;
@@ -129,8 +129,11 @@ declare const Modal: {
  *
  * A cohesive visual language for creative technologists.
  * Combines technical sophistication with artistic sensibility.
+ *
+ * CSS-first Tailwind v4 design system.
+ * Import '@lukeashford/aurelius/styles/base.css' for complete styling.
  */
 
-declare const version = "1.0.0";
+declare const version = "2.0.0";
 
 export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, HelperText, type HelperTextProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, version };

package/dist/index.d.ts

@@ -1,7 +1,4 @@
-export { default as tailwindPreset } from './tailwind.preset.js';
-export { ColorToken, DurationToken, EasingToken, RadiusToken, ShadowToken, SpacingToken, TypographyToken, colors, duration, easing, radii, shadows, spacing, typography } from './tokens/index.js';
 import React from 'react';
-import 'tailwindcss';
 
 type ButtonVariant = 'primary' | 'important' | 'elevated' | 'outlined' | 'featured' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -27,12 +24,13 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type AvatarStatus = 'online' | 'offline' | 'busy';
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
     name?: string;
     size?: AvatarSize;
-    status?: 'online' | 'offline' | 'busy';
+    status?: AvatarStatus;
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -42,11 +40,12 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
+type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 interface TooltipProps {
     content: React.ReactNode;
     children: React.ReactElement;
     open?: boolean;
-    side?: 'top' | 'right' | 'bottom' | 'left';
+    side?: TooltipSide;
 }
 declare const Tooltip: React.FC<TooltipProps>;
 
@@ -100,8 +99,9 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
 
+type SpinnerSize = 'sm' | 'md' | 'lg';
 interface SpinnerProps extends React.SVGAttributes<SVGElement> {
-    size?: 'sm' | 'md' | 'lg';
+    size?: SpinnerSize;
 }
 declare const Spinner: {
     ({ className, size, ...rest }: SpinnerProps): React.JSX.Element;
@@ -129,8 +129,11 @@ declare const Modal: {
  *
  * A cohesive visual language for creative technologists.
  * Combines technical sophistication with artistic sensibility.
+ *
+ * CSS-first Tailwind v4 design system.
+ * Import '@lukeashford/aurelius/styles/base.css' for complete styling.
  */
 
-declare const version = "1.0.0";
+declare const version = "2.0.0";
 
 export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, HelperText, type HelperTextProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, version };