@lumaui/angular 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +18 -118
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -9,161 +9,61 @@ Angular components for **Luma UI** - a Neo-Minimal design system built with calm
9
9
  - Type-safe variants with class-variance-authority
10
10
  - Angular 19+ standalone components
11
11
  - Tailwind CSS v4 compatible
12
+ - Fully customizable via CSS tokens
12
13
 
13
- ## Installation
14
-
15
- ```bash
16
- npm install @lumaui/angular
17
- ```
14
+ ## Prerequisites
18
15
 
19
- > **Note:** `@lumaui/tokens` and `@lumaui/core` are installed automatically as dependencies.
16
+ Tailwind CSS v4 must be installed in your Angular project.
20
17
 
21
- ### Peer Dependencies
18
+ Follow the official guide: **[Tailwind CSS Angular Installation](https://tailwindcss.com/docs/installation/framework-guides/angular)**
22
19
 
23
- You may need to install `class-variance-authority` if not already in your project:
20
+ ## Installation
24
21
 
25
22
  ```bash
26
- npm install class-variance-authority
23
+ npm install @lumaui/angular
27
24
  ```
28
25
 
29
- ## Setup
30
-
31
- ### 1. Configure PostCSS
26
+ > `@lumaui/tokens` and `@lumaui/core` are installed automatically as dependencies.
32
27
 
33
- Ensure your project has the Tailwind v4 PostCSS plugin configured:
34
-
35
- **postcss.config.js:**
36
-
37
- ```js
38
- export default {
39
- plugins: {
40
- '@tailwindcss/postcss': {},
41
- },
42
- };
43
- ```
44
-
45
- ### 2. Import Styles
28
+ ## Setup
46
29
 
47
30
  Add to your `styles.css`:
48
31
 
49
32
  ```css
50
33
  @import 'tailwindcss';
51
- @import '@lumaui/tokens/styles.css';
34
+ @import '@lumaui/tokens';
52
35
 
53
36
  /* Optional: Dark theme support */
54
- @import '@lumaui/tokens/styles/dark.css';
55
-
56
- /* If automatic content detection doesn't pick up node_modules, add: */
57
- @source "../node_modules/@lumaui";
37
+ @import '@lumaui/tokens/dark.css';
58
38
  ```
59
39
 
60
- > **Note:** Tailwind v4 uses CSS-based configuration instead of `tailwind.config.js`. The `@source` directive is only needed if Luma classes aren't being detected automatically.
61
-
62
40
  ## Usage
63
41
 
64
- ### Button
65
-
66
- ```typescript
67
- import { ButtonDirective } from '@lumaui/angular';
68
-
69
- @Component({
70
- imports: [ButtonDirective],
71
- template: `
72
- <button lumaButton lmVariant="primary" lmSize="md">Click me</button>
73
- `,
74
- })
75
- export class MyComponent {}
76
- ```
77
-
78
- **Variants:** `primary` | `outline` | `ghost` | `danger`
79
-
80
- **Sizes:** `sm` | `md` | `lg` | `full`
81
-
82
- **Inputs:**
83
-
84
- | Input | Type | Default | Description |
85
- | ------------ | ----------------------------------------------- | ----------- | --------------------- |
86
- | `lmVariant` | `'primary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | Visual style variant |
87
- | `lmSize` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Size variant |
88
- | `lmDisabled` | `boolean` | `false` | Disabled state |
89
- | `lmType` | `'button' \| 'submit' \| 'reset'` | `'button'` | Button type attribute |
90
-
91
- ### Card
92
-
93
42
  ```typescript
94
43
  import {
44
+ ButtonDirective,
95
45
  CardComponent,
96
- CardHeaderDirective,
97
46
  CardTitleDirective,
98
- CardDescriptionDirective,
99
- CardContentDirective,
100
47
  } from '@lumaui/angular';
101
48
 
102
49
  @Component({
103
- imports: [
104
- CardComponent,
105
- CardHeaderDirective,
106
- CardTitleDirective,
107
- CardDescriptionDirective,
108
- CardContentDirective,
109
- ],
50
+ imports: [ButtonDirective, CardComponent, CardTitleDirective],
110
51
  template: `
52
+ <button lumaButton lmVariant="primary" lmSize="md">Click me</button>
53
+
111
54
  <luma-card lmVariant="default">
112
- <div lumaCardHeader>
113
- <h3 lumaCardTitle lmSize="large">Card Title</h3>
114
- <p lumaCardDescription>Optional description</p>
115
- </div>
116
- <div lumaCardContent>Your content here</div>
55
+ <h3 lumaCardTitle>Card Title</h3>
117
56
  </luma-card>
118
57
  `,
119
58
  })
120
59
  export class MyComponent {}
121
60
  ```
122
61
 
123
- **Card Variants:** `default` | `shadow` | `nested` | `preview`
124
-
125
- ## Components Reference
126
-
127
- | Component | Selector | Description |
128
- | -------------------------- | ------------------------------------- | -------------------- |
129
- | `ButtonDirective` | `button[lumaButton]`, `a[lumaButton]` | Styled button/link |
130
- | `CardComponent` | `luma-card` | Card container |
131
- | `CardHeaderDirective` | `[lumaCardHeader]` | Card header section |
132
- | `CardTitleDirective` | `[lumaCardTitle]` | Card title |
133
- | `CardDescriptionDirective` | `[lumaCardDescription]` | Card description |
134
- | `CardContentDirective` | `[lumaCardContent]` | Card content section |
135
-
136
- ## Dark Theme
137
-
138
- Toggle dark theme by adding the `dark` class to your document:
139
-
140
- ```typescript
141
- // Enable dark theme
142
- document.documentElement.classList.add('dark');
143
-
144
- // Disable dark theme
145
- document.documentElement.classList.remove('dark');
146
- ```
147
-
148
- ## Input Naming Convention
149
-
150
- All Luma inputs use the `lm` prefix to avoid conflicts with native HTML attributes:
151
-
152
- | Input | Type | Default | Description |
153
- | ------------ | ------- | ---------- | --------------------- |
154
- | `lmVariant` | string | varies | Visual style variant |
155
- | `lmSize` | string | `'md'` | Size variant |
156
- | `lmDisabled` | boolean | `false` | Disabled state |
157
- | `lmType` | string | `'button'` | Button type attribute |
158
-
159
- ## Design Philosophy
62
+ ## Documentation
160
63
 
161
- Luma follows **Neo-Minimalism** principles:
64
+ For complete documentation, component reference, customization guide, and interactive examples:
162
65
 
163
- - **Visual Silence** - Elements don't compete for attention
164
- - **Functional Whitespace** - Space creates hierarchy
165
- - **Calm Interactions** - Gentle, natural feedback
166
- - **Silent Accessibility** - Accessibility is inherent, not an afterthought
66
+ **[Luma UI Documentation](https://lumaui.github.io/luma-ui/)**
167
67
 
168
68
  ## Browser Support
169
69
 
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@lumaui/angular",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "Angular components for Luma UI - Neo-Minimal design system",
5
5
  "dependencies": {
6
6
  "@lumaui/core": "^0.1.2",
7
- "@lumaui/tokens": "^0.1.1",
7
+ "@lumaui/tokens": "^0.1.2",
8
8
  "tslib": "^2.3.0"
9
9
  },
10
10
  "peerDependencies": {
@@ -27,14 +27,14 @@
27
27
  ],
28
28
  "repository": {
29
29
  "type": "git",
30
- "url": "https://github.com/pureartisan/lumo.git",
30
+ "url": "git+https://github.com/lumaui/luma-ui.git",
31
31
  "directory": "packages/angular"
32
32
  },
33
33
  "license": "MIT",
34
34
  "author": "Luma UI Team",
35
- "homepage": "https://github.com/pureartisan/lumo#readme",
35
+ "homepage": "https://github.com/lumaui/luma-ui#readme",
36
36
  "bugs": {
37
- "url": "https://github.com/pureartisan/lumo/issues"
37
+ "url": "https://github.com/lumaui/luma-ui/issues"
38
38
  },
39
39
  "module": "fesm2022/lumaui-angular.mjs",
40
40
  "typings": "types/lumaui-angular.d.ts",