angular-tailwind-components 1.0.2 → 1.0.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.
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ Your consuming project must have **Tailwind CSS v4** configured. Add the library
|
|
|
25
25
|
|
|
26
26
|
```css
|
|
27
27
|
@import 'tailwindcss';
|
|
28
|
-
@import 'angular-tailwind-components/
|
|
28
|
+
@import 'angular-tailwind-components/styles/tailwind.css';
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
Or define your own theme tokens following the design system schema.
|
|
@@ -59,59 +59,49 @@ export class ExampleComponent {
|
|
|
59
59
|
|
|
60
60
|
### Form Controls (with ControlValueAccessor)
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
| TimePicker | `atc-time-picker` | Time input |
|
|
71
|
-
| DateTimePicker | `atc-datetime-picker` | Combined date + time |
|
|
62
|
+
- **Input** (`tailwind-input`): Text, email, password, number, search
|
|
63
|
+
- **Checkbox** (`tailwind-checkbox`): Single checkbox with label
|
|
64
|
+
- **Radio Group** (`tailwind-radio-group`): Radio button group with options
|
|
65
|
+
- **Select** (`tailwind-select`): Native select with custom styling
|
|
66
|
+
- **Toggle** (`tailwind-toggle`): Switch on/off
|
|
67
|
+
- **DatePicker** (`tailwind-date-picker`): Calendar date selection
|
|
68
|
+
- **TimePicker** (`tailwind-time-picker`): Time input
|
|
69
|
+
- **DateTimePicker** (`tailwind-datetime-picker`): Combined date + time
|
|
72
70
|
|
|
73
71
|
### Display
|
|
74
72
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
| Chip | `atc-chip` | Removable tags |
|
|
81
|
-
| Tag | `atc-tag` | Semantic labels |
|
|
73
|
+
- **Button** (`tailwind-button`): Primary, secondary, outline, ghost, danger
|
|
74
|
+
- **Badge** (`tailwind-badge`): Status badges with dot indicator
|
|
75
|
+
- **Card** (`tailwind-card`): Content card with header/body/footer
|
|
76
|
+
- **Chip** (`tailwind-chip`): Removable tags
|
|
77
|
+
- **Tag** (`tailwind-tag`): Semantic labels
|
|
82
78
|
|
|
83
79
|
### Feedback
|
|
84
80
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
| Message | `atc-message` | Form-level inline message |
|
|
93
|
-
| Skeleton | `atc-skeleton` | Loading placeholder |
|
|
81
|
+
- **Alert** (`tailwind-alert`): Contextual alerts (info, success, warning, danger)
|
|
82
|
+
- **Spinner** (`tailwind-spinner`): Loading indicator
|
|
83
|
+
- **Progress Bar** (`tailwind-progress-bar`): Determinate/indeterminate progress
|
|
84
|
+
- **Toast** (`tailwind-toast-container`): Global toast notifications (use `TailwindToastService`)
|
|
85
|
+
- **Notification** (`tailwind-notification`): Inline notification with actions
|
|
86
|
+
- **Message** (`tailwind-message`): Form-level inline message
|
|
87
|
+
- **Skeleton** (`tailwind-skeleton`): Loading placeholder
|
|
94
88
|
|
|
95
89
|
### Navigation
|
|
96
90
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
| Menu | `atc-menu` | Dropdown menu |
|
|
103
|
-
| Stepper | `atc-stepper` | Step-by-step wizard |
|
|
91
|
+
- **Tab Group** (`tailwind-tab-group`): Tabbed content
|
|
92
|
+
- **Breadcrumb** (`tailwind-breadcrumb`): Navigation breadcrumbs
|
|
93
|
+
- **Pagination** (`tailwind-pagination`): Page navigation
|
|
94
|
+
- **Menu** (`tailwind-menu`): Dropdown menu
|
|
95
|
+
- **Stepper** (`tailwind-stepper`): Step-by-step wizard
|
|
104
96
|
|
|
105
97
|
### Layout / Overlay
|
|
106
98
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
| Form | `atc-form` | Form wrapper |
|
|
114
|
-
| Table | `atc-table` | Data table with sorting |
|
|
99
|
+
- **Modal** (`tailwind-modal`): Dialog overlay
|
|
100
|
+
- **Drawer** (`tailwind-drawer`): Slide-in panel
|
|
101
|
+
- **Accordion** (`tailwind-accordion`): Expandable sections
|
|
102
|
+
- **Tooltip** (`tailwind-tooltip`): Hover tooltip
|
|
103
|
+
- **Form** (`tailwind-form`): Form wrapper
|
|
104
|
+
- **Table** (`tailwind-table`): Data table with sorting
|
|
115
105
|
|
|
116
106
|
## Design System
|
|
117
107
|
|
|
@@ -147,14 +137,6 @@ ng build angular-tailwind-components
|
|
|
147
137
|
npm run storybook
|
|
148
138
|
```
|
|
149
139
|
|
|
150
|
-
## Adding New Components
|
|
151
|
-
|
|
152
|
-
1. Create a directory under `projects/angular-tailwind-components/src/lib/components/<name>/`
|
|
153
|
-
2. Create `<name>.ts` with inline template, styles, and component logic
|
|
154
|
-
3. Create `<name>.spec.ts` for unit tests
|
|
155
|
-
4. Export from `components/index.ts`
|
|
156
|
-
5. Add a story in `storybook/<name>.stories.ts`
|
|
157
|
-
|
|
158
140
|
### Component Conventions
|
|
159
141
|
|
|
160
142
|
- Use `input()` and `output()` signal functions (not decorators)
|