@lukeashford/aurelius 2.0.0 → 2.2.0

package/README.md

@@ -56,7 +56,7 @@ while staying within design system constraints.
 
 ```bash
 npm install @lukeashford/aurelius
-npm install -D eslint eslint-plugin-tailwindcss
+npm install -D eslint @typescript-eslint/parser eslint-plugin-better-tailwindcss @poupe/eslint-plugin-tailwindcss @eslint/css tailwind-csstree
 ```
 
 ### 2. Import the design system
@@ -78,40 +78,33 @@ Then import it in your entry file:
 import './index.css'
 ```
 
-### 3. Configure ESLint
+### 3. Configure ESLint (simplest form)
 
-This enforces the design system — agents and developers get errors when using arbitrary values or
-non-Aurelius classes.
+Aurelius ships with a default ESLint config you can re-export in one line. It enforces design system
+constraints — if ESLint complains, you're leaving the rails.
 
 ```javascript
-// eslint.config.js
-import tailwindcss from 'eslint-plugin-tailwindcss';
-
-export default [
-  {
-    plugins: {tailwindcss},
-    rules: {
-      'tailwindcss/no-arbitrary-value': 'error',
-      'tailwindcss/no-custom-classname': 'error',
-    },
-  },
-];
+// eslint.config.mjs
+export {default} from '@lukeashford/aurelius/eslint';
 ```
 
-<details>
-<summary>Legacy .eslintrc.js format</summary>
+**Need a different CSS entry point?**
 
 ```javascript
-module.exports = {
-  plugins: ['tailwindcss'],
-  rules: {
-    'tailwindcss/no-arbitrary-value': 'error',
-    'tailwindcss/no-custom-classname': 'error',
-  },
-}
+// eslint.config.mjs
+import {createAureliusESLintConfig} from '@lukeashford/aurelius/eslint';
+
+export default createAureliusESLintConfig({
+  entryPoint: './app/styles.css'
+});
 ```
 
-</details>
+**What this enforces:**
+
+- **JS/TS/JSX/TSX files:** No custom/non-Aurelius class names, no arbitrary value utilities like
+  `bg-[#123456]` or `text-[15px]`
+- **CSS files:** Tailwind v4 CSS best practices, valid `@apply` directives, no arbitrary value
+  overuse, and proper theme token usage
 
 ### 4. Update package.json scripts
 

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Config } from 'dompurify';
 
 type ButtonVariant = 'primary' | 'important' | 'elevated' | 'outlined' | 'featured' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -18,8 +19,12 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 
 type CardVariant = 'default' | 'elevated' | 'outlined' | 'ghost' | 'featured';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
     variant?: CardVariant;
+    /** Enables hover effects and cursor pointer */
     interactive?: boolean;
+    /** Shows selected state with checkmark */
+    selected?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -124,6 +129,81 @@ declare const Modal: {
     displayName: string;
 };
 
+type StepStatus = 'complete' | 'error';
+interface Step {
+    id: string | number;
+    label: string;
+}
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    steps: Step[];
+    currentStep: string | number;
+    status?: StepStatus;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+
+type MessageVariant = 'user' | 'assistant';
+interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: MessageVariant;
+    content: string;
+    isStreaming?: boolean;
+}
+declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ChatHistoryItem extends Omit<MessageProps, 'variant' | 'children'> {
+    id?: string;
+    variant?: MessageVariant;
+}
+interface ChatHistoryProps extends React.HTMLAttributes<HTMLDivElement> {
+    messages: ChatHistoryItem[];
+}
+declare const ChatHistory: React.ForwardRefExoticComponent<ChatHistoryProps & React.RefAttributes<HTMLDivElement>>;
+
+interface StreamingCursorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'block' | 'line' | 'underscore';
+}
+declare const StreamingCursor: React.ForwardRefExoticComponent<StreamingCursorProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface MarkdownContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    sanitizeConfig?: Config;
+}
+declare const MarkdownContent: React.ForwardRefExoticComponent<MarkdownContentProps & React.RefAttributes<HTMLDivElement>>;
+
+type BrandIconSize = 'sm' | 'md' | 'lg';
+type BrandIconVariant = 'solid' | 'outline';
+interface BrandIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: BrandIconSize;
+    variant?: BrandIconVariant;
+}
+declare const BrandIcon: React.ForwardRefExoticComponent<BrandIconProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ColorSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
+    color: string;
+    label?: string;
+}
+declare const ColorSwatch: React.ForwardRefExoticComponent<ColorSwatchProps & React.RefAttributes<HTMLDivElement>>;
+
+type AspectRatioPreset = 'landscape' | 'portrait' | 'square';
+type AspectRatio = AspectRatioPreset | `${number}/${number}`;
+interface ImageCardProps extends Omit<CardProps, 'title'> {
+    src: string;
+    alt: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    aspectRatio?: AspectRatio;
+    objectFit?: 'cover' | 'contain';
+    overlay?: React.ReactNode;
+    mediaClassName?: string;
+    contentClassName?: string;
+}
+declare const ImageCard: React.ForwardRefExoticComponent<ImageCardProps & React.RefAttributes<HTMLDivElement>>;
+
+type SectionHeadingLevel = 'h2' | 'h3';
+interface SectionHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    level?: SectionHeadingLevel;
+}
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+
 /**
  * Aurelius Design System
  *
@@ -136,4 +216,4 @@ declare const Modal: {
 
 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 };
+export { Alert, type AlertProps, type AlertVariant, type AspectRatio, type AspectRatioPreset, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, BrandIcon, type BrandIconProps, type BrandIconSize, type BrandIconVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, ChatHistory, type ChatHistoryItem, type ChatHistoryProps, Checkbox, type CheckboxProps, ColorSwatch, type ColorSwatchProps, HelperText, type HelperTextProps, ImageCard, type ImageCardProps, Input, type InputProps, Label, type LabelProps, MarkdownContent, type MarkdownContentProps, Message, type MessageProps, type MessageVariant, Modal, type ModalProps, Radio, type RadioProps, SectionHeading, type SectionHeadingLevel, type SectionHeadingProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type Step, type StepStatus, Stepper, type StepperProps, StreamingCursor, type StreamingCursorProps, Switch, type SwitchProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, version };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Config } from 'dompurify';
 
 type ButtonVariant = 'primary' | 'important' | 'elevated' | 'outlined' | 'featured' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -18,8 +19,12 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 
 type CardVariant = 'default' | 'elevated' | 'outlined' | 'ghost' | 'featured';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
     variant?: CardVariant;
+    /** Enables hover effects and cursor pointer */
     interactive?: boolean;
+    /** Shows selected state with checkmark */
+    selected?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -124,6 +129,81 @@ declare const Modal: {
     displayName: string;
 };
 
+type StepStatus = 'complete' | 'error';
+interface Step {
+    id: string | number;
+    label: string;
+}
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    steps: Step[];
+    currentStep: string | number;
+    status?: StepStatus;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+
+type MessageVariant = 'user' | 'assistant';
+interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: MessageVariant;
+    content: string;
+    isStreaming?: boolean;
+}
+declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ChatHistoryItem extends Omit<MessageProps, 'variant' | 'children'> {
+    id?: string;
+    variant?: MessageVariant;
+}
+interface ChatHistoryProps extends React.HTMLAttributes<HTMLDivElement> {
+    messages: ChatHistoryItem[];
+}
+declare const ChatHistory: React.ForwardRefExoticComponent<ChatHistoryProps & React.RefAttributes<HTMLDivElement>>;
+
+interface StreamingCursorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'block' | 'line' | 'underscore';
+}
+declare const StreamingCursor: React.ForwardRefExoticComponent<StreamingCursorProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface MarkdownContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    sanitizeConfig?: Config;
+}
+declare const MarkdownContent: React.ForwardRefExoticComponent<MarkdownContentProps & React.RefAttributes<HTMLDivElement>>;
+
+type BrandIconSize = 'sm' | 'md' | 'lg';
+type BrandIconVariant = 'solid' | 'outline';
+interface BrandIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: BrandIconSize;
+    variant?: BrandIconVariant;
+}
+declare const BrandIcon: React.ForwardRefExoticComponent<BrandIconProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ColorSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
+    color: string;
+    label?: string;
+}
+declare const ColorSwatch: React.ForwardRefExoticComponent<ColorSwatchProps & React.RefAttributes<HTMLDivElement>>;
+
+type AspectRatioPreset = 'landscape' | 'portrait' | 'square';
+type AspectRatio = AspectRatioPreset | `${number}/${number}`;
+interface ImageCardProps extends Omit<CardProps, 'title'> {
+    src: string;
+    alt: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    aspectRatio?: AspectRatio;
+    objectFit?: 'cover' | 'contain';
+    overlay?: React.ReactNode;
+    mediaClassName?: string;
+    contentClassName?: string;
+}
+declare const ImageCard: React.ForwardRefExoticComponent<ImageCardProps & React.RefAttributes<HTMLDivElement>>;
+
+type SectionHeadingLevel = 'h2' | 'h3';
+interface SectionHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    level?: SectionHeadingLevel;
+}
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+
 /**
  * Aurelius Design System
  *
@@ -136,4 +216,4 @@ declare const Modal: {
 
 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 };
+export { Alert, type AlertProps, type AlertVariant, type AspectRatio, type AspectRatioPreset, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, BrandIcon, type BrandIconProps, type BrandIconSize, type BrandIconVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, ChatHistory, type ChatHistoryItem, type ChatHistoryProps, Checkbox, type CheckboxProps, ColorSwatch, type ColorSwatchProps, HelperText, type HelperTextProps, ImageCard, type ImageCardProps, Input, type InputProps, Label, type LabelProps, MarkdownContent, type MarkdownContentProps, Message, type MessageProps, type MessageVariant, Modal, type ModalProps, Radio, type RadioProps, SectionHeading, type SectionHeadingLevel, type SectionHeadingProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type Step, type StepStatus, Stepper, type StepperProps, StreamingCursor, type StreamingCursorProps, Switch, type SwitchProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, version };