@lumaui/angular 0.1.0

package/README.md

@@ -0,0 +1,165 @@
+# @lumaui/angular
+
+Angular components for **Luma UI** - a Neo-Minimal design system built with calm, intentional simplicity.
+
+## Features
+
+- Neo-Minimal design philosophy
+- Dark theme support out of the box
+- Type-safe variants with class-variance-authority
+- Angular 19+ standalone components
+- Tailwind CSS v4 compatible
+
+## Installation
+
+```bash
+npm install @lumaui/angular @lumaui/tokens
+```
+
+### Peer Dependencies
+
+These are automatically installed with Angular projects:
+
+```bash
+npm install class-variance-authority
+```
+
+## Setup
+
+### 1. Import Styles
+
+Add to your `styles.css`:
+
+```css
+@import '@lumaui/tokens/styles.css';
+
+/* Optional: Dark theme support */
+@import '@lumaui/tokens/styles/dark.css';
+```
+
+### 2. Configure Tailwind (Required)
+
+Add the library to your Tailwind content paths in `tailwind.config.js`:
+
+```js
+export default {
+  content: ['./src/**/*.{html,ts}', './node_modules/@lumaui/**/*.{js,ts,mjs}'],
+};
+```
+
+## Usage
+
+### Button
+
+```typescript
+import { ButtonDirective } from '@lumaui/angular';
+
+@Component({
+  imports: [ButtonDirective],
+  template: `
+    <button lumaButton lmVariant="primary" lmSize="md">Click me</button>
+  `,
+})
+export class MyComponent {}
+```
+
+**Variants:** `primary` | `outline` | `ghost` | `danger`
+
+**Sizes:** `sm` | `md` | `lg` | `full`
+
+**Inputs:**
+
+| Input        | Type                                            | Default     | Description           |
+| ------------ | ----------------------------------------------- | ----------- | --------------------- |
+| `lmVariant`  | `'primary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | Visual style variant  |
+| `lmSize`     | `'sm' \| 'md' \| 'lg' \| 'full'`                | `'md'`      | Size variant          |
+| `lmDisabled` | `boolean`                                       | `false`     | Disabled state        |
+| `lmType`     | `'button' \| 'submit' \| 'reset'`               | `'button'`  | Button type attribute |
+
+### Card
+
+```typescript
+import {
+  CardComponent,
+  CardHeaderDirective,
+  CardTitleDirective,
+  CardDescriptionDirective,
+  CardContentDirective,
+} from '@lumaui/angular';
+
+@Component({
+  imports: [
+    CardComponent,
+    CardHeaderDirective,
+    CardTitleDirective,
+    CardDescriptionDirective,
+    CardContentDirective,
+  ],
+  template: `
+    <luma-card lmVariant="default">
+      <div lumaCardHeader>
+        <h3 lumaCardTitle lmSize="large">Card Title</h3>
+        <p lumaCardDescription>Optional description</p>
+      </div>
+      <div lumaCardContent>Your content here</div>
+    </luma-card>
+  `,
+})
+export class MyComponent {}
+```
+
+**Card Variants:** `default` | `shadow` | `nested` | `preview`
+
+## Components Reference
+
+| Component                  | Selector                              | Description          |
+| -------------------------- | ------------------------------------- | -------------------- |
+| `ButtonDirective`          | `button[lumaButton]`, `a[lumaButton]` | Styled button/link   |
+| `CardComponent`            | `luma-card`                           | Card container       |
+| `CardHeaderDirective`      | `[lumaCardHeader]`                    | Card header section  |
+| `CardTitleDirective`       | `[lumaCardTitle]`                     | Card title           |
+| `CardDescriptionDirective` | `[lumaCardDescription]`               | Card description     |
+| `CardContentDirective`     | `[lumaCardContent]`                   | Card content section |
+
+## Dark Theme
+
+Toggle dark theme by adding the `dark` class to your document:
+
+```typescript
+// Enable dark theme
+document.documentElement.classList.add('dark');
+
+// Disable dark theme
+document.documentElement.classList.remove('dark');
+```
+
+## Input Naming Convention
+
+All Luma inputs use the `lm` prefix to avoid conflicts with native HTML attributes:
+
+| Input        | Type    | Default    | Description           |
+| ------------ | ------- | ---------- | --------------------- |
+| `lmVariant`  | string  | varies     | Visual style variant  |
+| `lmSize`     | string  | `'md'`     | Size variant          |
+| `lmDisabled` | boolean | `false`    | Disabled state        |
+| `lmType`     | string  | `'button'` | Button type attribute |
+
+## Design Philosophy
+
+Luma follows **Neo-Minimalism** principles:
+
+- **Visual Silence** - Elements don't compete for attention
+- **Functional Whitespace** - Space creates hierarchy
+- **Calm Interactions** - Gentle, natural feedback
+- **Silent Accessibility** - Accessibility is inherent, not an afterthought
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@lumaui/angular",
+  "version": "0.1.0",
+  "description": "Angular components for Luma UI - Neo-Minimal design system",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./button": "./src/lib/button/index.ts",
+    "./card": "./src/lib/card/index.ts"
+  },
+  "files": [
+    "src/",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@lumaui/core": "^0.1.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "angular",
+    "components",
+    "design-system",
+    "neo-minimal",
+    "luma",
+    "lumaui",
+    "tailwind"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pureartisan/lumo.git",
+    "directory": "packages/angular"
+  },
+  "license": "MIT",
+  "author": "Luma UI Team",
+  "homepage": "https://github.com/pureartisan/lumo#readme",
+  "bugs": {
+    "url": "https://github.com/pureartisan/lumo/issues"
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+// Button exports
+export * from './lib/button/button.directive';
+
+// Card exports
+export * from './lib/card/card.component';
+export * from './lib/card/card-title.directive';
+export * from './lib/card/card-description.directive';
+export * from './lib/card/card-header.directive';
+export * from './lib/card/card-content.directive';