@quinnjr/ngx-tailwindcss 1.0.0

package/.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git checkout:*)",
+      "Bash(git push:*)",
+      "Bash(ps:*)"
+    ]
+  }
+}

package/.cursorignore

@@ -0,0 +1,61 @@
+# Dependencies
+node_modules/
+.pnpm-store/
+
+# Build outputs
+dist/
+.angular/
+.ng-cache/
+coverage/
+
+# IDE and editor
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Lock files (large and auto-generated)
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+# Test artifacts
+.vitest/
+__snapshots__/
+
+# Generated files
+*.tsbuildinfo
+*.ngfactory.ts
+*.ngsummary.json
+*.metadata.json
+
+# Documentation build
+docs/.angular/
+docs/dist/
+docs/node_modules/
+
+# Screenshots (for PR/debugging)
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.webp
+
+# Temporary files
+tmp/
+temp/
+.tmp/
+.temp/
+

package/.prettierignore

@@ -0,0 +1,19 @@
+# Build outputs
+dist/
+out-tsc/
+.angular/
+coverage/
+
+# Dependencies
+node_modules/
+pnpm-lock.yaml
+package-lock.json
+
+# IDE
+.vscode/
+.idea/
+
+# Generated files
+*.d.ts
+*.tsbuildinfo
+

package/CHANGELOG.md

@@ -0,0 +1,356 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.4.0] - 2026-01-13
+
+### 🎯 Breaking Changes
+
+- **Native App Support**: Tauri and Electron packages are now **optional** peer dependencies
+  - The library still works perfectly without them - all imports are dynamic
+  - Install `@tauri-apps/*` packages only if you need native app features
+  - Install `electron` only if you're building an Electron app
+  - Native components gracefully fall back to web equivalents when these packages aren't installed
+
+### 🔒 Security
+
+- Added CodeQL security analysis workflow for automated vulnerability scanning
+
+### 🛠 CI/CD & Dependencies
+
+- Bumped GitHub Actions dependencies:
+  - `actions/checkout` from 4 to 6
+  - `actions/setup-node` from 4 to 6
+  - `actions/configure-pages` from 4 to 5
+  - `actions/upload-artifact` from 4 to 6
+  - `actions/upload-pages-artifact` from 3 to 4
+  - `orhun/git-cliff-action` from 3 to 4
+  - `github/codeql-action` from 3 to 4
+  - `amannn/action-semantic-pull-request` from 5 to 6
+- Bumped Angular dependencies in docs to 21.0.6:
+  - `@angular/core`
+  - `@angular/common`
+  - `@angular/compiler`
+  - `@angular/compiler-cli`
+  - `@angular/platform-browser`
+
+## [0.3.4] - 2025-12-31
+
+### 🐛 Bug Fixes
+
+- **Volume Dial**: Refactored to use Angular's `model()` input for proper two-way binding support, fixing `NG0303` warning about `value` not being a known property
+- **Pagination**: Fixed `NG0955` duplicate keys warning by using unique identifiers for left/right ellipsis in page number arrays
+- **Native Components**: Fixed bundler resolution errors for Tauri/Electron imports in web-only applications by implementing dynamic import utilities that prevent static analysis
+- **Dock Service**: Fixed `setBadge` method to properly use the `text` parameter by appending badge count to window title in Tauri (was previously calling `getCurrentWindow()` without using the result)
+
+### 🧹 Code Quality
+
+- Removed redundant `valueChange` output from volume dial (now handled automatically by `model()`)
+- Cleaned up unused imports in volume dial component
+- Added `dynamic-import.ts` utility for runtime-only imports of optional dependencies (Electron, Tauri)
+- Updated native services to use dynamic import utilities: FilePickerService, SystemTrayService, DockService, NativeNotificationsService, UpdateService
+
+## [0.3.3] - 2025-12-31
+
+### 🎨 Dark Mode & UI Improvements
+
+- Added dark mode variants to ghost and outline button variants
+- Fixed ghost button icon visibility in dark mode
+- Fixed avatar ring shapes (add rounded-full to prevent square rings)
+- Fixed notification badge clipping (move outside button overflow)
+- Removed redundant rounded corners from terminal and log-viewer
+- Increased terminal and log-viewer demo heights to prevent cutoff
+- Fixed DAW mixer fader styling (rectangular instead of rounded)
+
+### 📦 Dependencies
+
+- Updated `@angular/router` to 21.0.6 to match other Angular packages
+
+## [0.3.2] - 2025-12-30
+
+### 🛠 CI/CD Fixes
+
+- Fixed GitHub Pages deployment for documentation
+- Removed CNAME configuration for github.io deployment
+- Deployed docs from main branch instead of release tags
+- Allow docs deployment even if npm publish fails
+
+## [0.3.1] - 2025-12-29
+
+### 🧪 Testing
+
+- Added comprehensive unit test coverage (1006 tests)
+- All components now have spec files with thorough testing
+- Fixed test utilities and improved test infrastructure
+
+## [0.3.0] - 2025-12-28
+
+### ✨ Native App UI Components
+
+Complete suite of UI components for building desktop-like applications with Tauri, Electron, or PWAs:
+
+#### Window & Chrome Components
+- **Title Bar** - Custom draggable title bar with platform-specific controls
+- **Window Controls** - macOS traffic lights, Windows, and Linux style buttons
+- **Menu Bar** - Native-style menu bar with keyboard navigation
+- **Context Menu** - Right-click context menus with submenus
+
+#### Navigation Components
+- **Sidebar** - Collapsible sidebar with tree navigation
+- **File Tree** - Hierarchical file/folder explorer
+- **Breadcrumb Navigation** - Path-based breadcrumbs
+- **Tab Bar** - Document tabs with close/reorder
+
+#### Search & Commands
+- **Command Palette** - VS Code-style command palette (Cmd+K)
+- **Search Bar** - Global search with suggestions
+- **Quick Switcher** - Quick file/tab switcher
+
+#### Settings & Preferences
+- **Settings Panel** - Categorized settings layout
+- **Preferences Dialog** - macOS-style preferences
+- **Keyboard Shortcuts Editor** - Visual shortcut editor
+- **Theme Selector** - Light/Dark/System mode toggle
+
+#### Dialogs & Notifications
+- **Alert Dialog** - Info, Warning, Error, Success variants
+- **Confirm Dialog** - Confirmation with custom buttons
+- **Prompt Dialog** - Text input prompts
+- **About Dialog** - App info with version, credits
+- **Update Dialog** - Update available notifications
+- **Onboarding Wizard** - Step-by-step introductions
+
+#### Data Display
+- **Property Inspector** - Key-value property display
+- **Terminal/Console** - Terminal output with ANSI colors
+- **Log Viewer** - Log entries with filtering
+- **Code/JSON Viewer** - Syntax highlighted code display
+
+#### Status & Feedback
+- **Status Bar** - Bottom status bar with sections
+- **Toolbar** - Icon buttons with overflow menu
+- **Activity Indicator** - Loading states
+- **Connection Status** - Online/offline indicators
+
+#### Interaction & Input
+- **Resizable Panels** - Drag-to-resize split panels
+- **Keyboard Shortcut Display** - Visual key combinations
+- **Drag & Drop Directives** - twDraggable, twDropZone
+- **Shortcut Directive** - twShortcut for keyboard bindings
+
+### 🔧 Services
+
+- `NativeAppPlatformService` - Window management, system info
+- `StorageService` - Local, secure, and file storage
+- `IpcService` - Tauri/Electron IPC communication
+- `UpdateService` - App update management
+- `FilePickerService` - Native file/folder dialogs
+- `SystemTrayService` - System tray icon and menu
+- `NativeNotificationsService` - System notifications
+- `DockService` - Dock/taskbar integration
+
+## [0.2.0] - 2025-12-26
+
+### ✨ Music/Audio Components
+
+Professional DAW-style audio components for music applications:
+
+- **Piano Keyboard** - Interactive piano with MIDI support
+- **Volume Dial** - Rotary volume/parameter control
+- **Mixer Faders** - Multi-channel mixing interface
+- **Waveform Display** - Audio waveform visualization
+- **Spectrum Analyzer** - Real-time frequency display
+- **VU Meter** - Level metering with peak hold
+- **Transport Controls** - Play/pause/stop/record buttons
+- **Timeline Ruler** - Time/beat markers
+
+### 🔧 Audio Services
+
+- `AudioContextService` - Web Audio API management
+- `MidiService` - MIDI device integration
+- `MobileSupportService` - Touch device optimization
+- `AccessibilityService` - Screen reader support for audio controls
+
+## [0.1.2] - 2025-12-21
+
+### 🛠 Packaging & Reliability
+
+- Copied `README.md` into the published `/dist/ngx-tailwindcss` output so npmjs can render the project documentation even when the tarball is built from the compiled library.
+- Added a `publish:dist` script that runs the production build and publishes directly from `dist/ngx-tailwindcss` with `--access public`, keeping the published artifact aligned with the compiled bundle.
+- Raised the Vitest hook and test timeouts to 60 s so the longer-running directive specs no longer abort the Husky pre-push step.
+
+## [0.1.1] - 2025-12-19
+
+### 🛠 Packaging & Reliability
+
+- Ensured the npm release is produced from the compiled `/dist/ngx-tailwindcss` output so the published tarball includes the FESM bundle, typings, and theme CSS instead of just docs/config files.
+- Replaced the deprecated `husky install` step with a runtime `node -e "import('husky')..."` bootstrap and added dedicated pre-commit/pre-push/commit-msg scripts so lint/test/commitlint hooks run reliably without invoking the removed shim.
+
+## [0.1.0] - 2025-12-19
+
+### ✨ Features
+
+- Introduced a configurable theming system based on CSS custom properties, the `TwThemeService`, and `provideTwTheme()` so apps can swap palettes, override individual components, and keep `dark:` styles optional.
+- Added a default `theme.css` bundle with semantic light/dark values and exposed the CSS variables through `ng-packagr` assets, letting downstream consumers tweak every shade without touching the library source.
+- Delivered `TwDatatablesComponent`, a ready-to-go dashboard table with headers, toolbar slots, filters, pagination, and selection wired to the existing `tw-table` data layer.
+
+### 📝 Content & polish
+
+- Documented how to configure themes and added the DataTables docs page, ensuring the sidebar, nav, and theming routes all reach the new experiences.
+- Rebalanced the docs palette so dark mode text, containers, stack/grid/spacer demos, sticky/scroll-area/columns/bleed examples, and tabs are legible, spacing works, and the navbar no longer looks cramped.
+- Fixed the horizontal spacer sample to honor `size="auto"` by giving it `flex-1` and updated copy snippets throughout the docs to reflect the new UX.
+
+### 🛠 Tooling & quality
+
+- Added comprehensive `.npmignore`, removed single-use scripts, and wired Husky with linting pre-commit, test pre-push, and commitlint hooks.
+- Documented the new changelog entry, ensured dark-mode demos showcase `dark:text-slate-300`, and kept existing Tailwind `dark:` utilities as safe defaults while giving users CSS variable overrides for Tw components.
+
+## [0.1.0-beta.1] - 2025-12-15
+
+### 🎉 Initial Release
+
+First public release of `@pegasus-heavy/ngx-tailwindcss` - A highly customizable Angular component library for Tailwind CSS 4+.
+
+### ✨ Features
+
+#### Core
+- **TwClassService** - Intelligent Tailwind class merging with conflict resolution
+- **Global Configuration** - `provideTwConfig()` for app-wide default styling
+- **Class Override System** - `classOverride` and `classReplace` inputs on all components
+
+#### Form Components
+- **Button** - Multiple variants (primary, secondary, outline, ghost, link, danger), sizes, icons, loading states
+- **Input** - Text, password, email, number inputs with validation, prefixes, suffixes
+- **Checkbox** - Single and group checkboxes with indeterminate state
+- **Radio** - Radio buttons with group support
+- **Switch** - Toggle switches with labels
+- **Select** - Dropdown select with search, multi-select, custom templates
+- **Slider** - Range sliders with single/dual handles, steps, marks
+- **Rating** - Star rating with half-star support
+
+#### Layout Components
+- **Card** - Flexible card layouts with header, body, footer directives
+- **Accordion** - Collapsible panels with single/multiple open modes
+- **Tabs** - Tab navigation with lazy loading support
+- **Divider** - Horizontal/vertical dividers with labels
+
+#### Data Display Components
+- **Badge** - Status indicators with variants and sizes
+- **Avatar** - User avatars with images, initials, status indicators, groups
+- **Chip** - Removable chips/tags
+- **Table** - Data tables with sorting, pagination, row selection
+- **Tree** - Hierarchical tree view with expand/collapse
+- **Timeline** - Vertical timeline for events
+
+#### Navigation Components
+- **Breadcrumb** - Navigation breadcrumbs with custom separators
+- **Pagination** - Page navigation with customizable display
+- **Steps** - Step indicators for multi-step processes
+- **Menu** - Context menus and menu bars
+
+#### Feedback Components
+- **Alert** - Dismissible alerts with variants (info, success, warning, error)
+- **Toast** - Toast notifications with positioning and auto-dismiss
+- **Progress** - Linear and circular progress bars
+- **Spinner** - Loading spinners (border, dots, pulse, bars)
+- **Skeleton** - Loading placeholders (text, cards, tables)
+
+#### Overlay Components
+- **Modal** - Dialog modals with sizes and animations
+- **Dropdown** - Dropdown menus with portal rendering
+- **Sidebar** - Slide-out sidebar panels
+- **Popover** - Floating popovers with positioning
+
+#### Media Components
+- **Image** - Responsive images with lazy loading, preview mode
+
+#### Utility Components
+- **ScrollTop** - Scroll-to-top button
+
+### 🎯 Directives
+
+#### Core Directives
+- **TwRippleDirective** - Material-style ripple effects
+- **TwTooltipDirective** - Tooltip on hover
+- **TwClickOutsideDirective** - Detect clicks outside element
+- **TwFocusTrapDirective** - Trap focus within modals
+
+#### DX Enhancement Directives
+- **TwAutoFocusDirective** - Auto-focus elements on render
+- **TwInViewDirective** - Intersection Observer for visibility
+- **TwLongPressDirective** - Detect long press gestures
+- **TwDebounceClickDirective** - Debounce rapid clicks
+- **TwCopyClipboardDirective** - Copy text to clipboard
+- **TwKeyboardShortcutDirective** - Handle keyboard shortcuts
+- **TwSwipeDirective** - Detect swipe gestures
+- **TwResizeObserverDirective** - Observe element resize
+- **TwLazyImageDirective** - Lazy load images
+- **TwScrollToDirective** - Smooth scroll navigation
+- **TwHoverClassDirective** - Dynamic hover classes
+- **TwTrapScrollDirective** - Prevent scroll propagation
+
+#### ARIA Accessibility Directives
+- **TwSrOnlyDirective** - Screen reader only content
+- **TwAnnounceDirective** - Screen reader announcements
+- **TwAriaExpandedDirective** - Manage expanded state
+- **TwAriaSelectedDirective** - Manage selected state
+- **TwAriaCheckedDirective** - Manage checked state
+- **TwAriaPressedDirective** - Manage pressed state
+- **TwAriaDisabledDirective** - Manage disabled state
+- **TwAriaHiddenDirective** - Hide from assistive tech
+- **TwAriaLiveDirective** - Live region management
+- **TwAriaCurrentDirective** - Current navigation item
+- **TwAriaBusyDirective** - Busy/loading state
+- **TwAriaDescribedbyDirective** - Description relationships
+- **TwAriaLabelledbyDirective** - Label relationships
+- **TwAriaLabelDirective** - Accessible labels
+- **TwAriaValueDirective** - Range widget values
+- **TwRoleDirective** - ARIA roles
+- **TwAriaModalDirective** - Modal dialogs
+- **TwAriaHaspopupDirective** - Popup indicators
+
+### ♿ Accessibility
+- **TwAriaService** - Screen reader announcements (polite/assertive)
+- **AriaUtils** - Helper functions for ARIA IDs and attributes
+- All components built with WCAG 2.1 guidelines
+- Keyboard navigation support
+- Focus management
+
+### 🌐 Internationalization
+- **TwI18nService** - Translation and locale management
+- **provideTwTranslations()** - Custom translation provider
+- **provideTwLocale()** - Locale configuration
+- Default English translations for all components
+- RTL language support (Arabic, Hebrew, Persian, Urdu, etc.)
+- String interpolation for dynamic content
+
+### 📚 Documentation
+- Comprehensive docs website with live examples
+- Interactive component demos
+- Code snippets with copy functionality
+- SEO optimized with Open Graph and Twitter Cards
+- AI-friendly documentation (llms.txt, structured data)
+
+### 🛠️ Developer Experience
+- Angular 19, 20, and 21 support
+- Standalone components (no NgModule required)
+- Full TypeScript support with strict types
+- Tree-shakeable exports
+- Zero bundled CSS - works with your Tailwind config
+- Signals-based reactive state management
+
+[0.4.0]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.4.0
+[0.3.4]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.3.4
+[0.3.3]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.3.3
+[0.3.2]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.3.2
+[0.3.1]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.3.1
+[0.3.0]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.3.0
+[0.2.0]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.2.0
+[0.1.2]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.1.2
+[0.1.1]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.1.1
+[0.1.0]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.1.0
+[0.1.0-beta.1]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.1.0-beta.1
+

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Pegasus Heavy Industries LLC
+
+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

@@ -0,0 +1,342 @@
+# @pegasus-heavy/ngx-tailwindcss
+
+A highly customizable Angular component library designed for **Tailwind CSS 4+**. This library provides beautiful, accessible UI components that leverage Tailwind's utility-first approach while giving you complete control over styling.
+
+## Features
+
+- 🎨 **Fully Customizable** - Override any styling through class props or global configuration
+- 🌊 **Tailwind CSS 4+ Ready** - Built for the latest Tailwind with CSS-first configuration
+- ♿ **Accessible** - WCAG compliant with proper ARIA attributes and keyboard navigation
+- 📦 **Tree-Shakeable** - Import only what you need with secondary entry points
+- 🔧 **No Bundled CSS** - Your Tailwind config, your rules
+- ⚡ **Standalone Components** - No NgModule required, works with Angular 19+
+
+## Installation
+
+```bash
+pnpm add @pegasus-heavy/ngx-tailwindcss
+# or
+npm install @pegasus-heavy/ngx-tailwindcss
+```
+
+### Peer Dependencies
+
+```bash
+pnpm add @angular/cdk
+```
+
+## Tailwind CSS Configuration
+
+This library **does not** import Tailwind CSS directly. You must configure Tailwind in your application.
+
+### 1. Configure Content Paths
+
+Add the library's component templates to your Tailwind content configuration so the PostCSS parser can detect the utility classes used:
+
+**For Tailwind CSS 4+ (CSS-based config):**
+
+```css
+/* app.css or styles.css */
+@import "tailwindcss";
+
+@source "../node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}";
+```
+
+**For Tailwind CSS 3.x (tailwind.config.js):**
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+    "./node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}",
+  ],
+  // ... rest of your config
+};
+```
+
+### 2. Import Components
+
+Import components directly in your Angular components:
+
+```typescript
+import { Component } from '@angular/core';
+import {
+  TwButtonComponent,
+  TwCardComponent,
+  TwCardBodyDirective
+} from '@pegasus-heavy/ngx-tailwindcss';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TwButtonComponent, TwCardComponent, TwCardBodyDirective],
+  template: `
+    <tw-card>
+      <tw-card-body>
+        <tw-button variant="primary">Click me!</tw-button>
+      </tw-card-body>
+    </tw-card>
+  `,
+})
+export class ExampleComponent {}
+```
+
+Or import everything at once:
+
+```typescript
+import { TW_ALL } from '@pegasus-heavy/ngx-tailwindcss';
+
+@Component({
+  imports: [...TW_ALL],
+})
+export class ExampleComponent {}
+```
+
+## Global Configuration
+
+Customize default styles and behavior globally:
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideTwConfig } from '@pegasus-heavy/ngx-tailwindcss';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTwConfig({
+      theme: {
+        primary: 'bg-indigo-600 hover:bg-indigo-700 text-white',
+        secondary: 'bg-purple-600 hover:bg-purple-700 text-white',
+        // ... customize other variants
+      },
+      animationDuration: 300,
+    }),
+  ],
+};
+```
+
+## Components
+
+### Button
+
+```html
+<tw-button>Default</tw-button>
+<tw-button variant="primary">Primary</tw-button>
+<tw-button variant="danger" size="lg">Large Danger</tw-button>
+<tw-button variant="outline" [loading]="isLoading">Submit</tw-button>
+<tw-button variant="ghost" [iconOnly]="true">
+  <svg twButtonIcon>...</svg>
+</tw-button>
+```
+
+**Props:**
+- `variant`: `'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'ghost' | 'outline' | 'link'`
+- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+- `disabled`, `loading`, `fullWidth`, `iconOnly`: `boolean`
+- `classOverride`: Additional classes to merge
+- `classReplace`: Complete class replacement
+
+### Card
+
+```html
+<tw-card variant="elevated">
+  <tw-card-header>
+    <tw-card-title>Card Title</tw-card-title>
+    <tw-card-subtitle>Subtitle</tw-card-subtitle>
+  </tw-card-header>
+  <tw-card-body>
+    Content goes here
+  </tw-card-body>
+  <tw-card-footer>
+    <tw-button variant="primary">Action</tw-button>
+  </tw-card-footer>
+</tw-card>
+```
+
+### Input
+
+```html
+<tw-input
+  [(ngModel)]="email"
+  type="email"
+  label="Email"
+  placeholder="you@example.com"
+  hint="We'll never share your email"
+  [error]="emailError"
+  [clearable]="true">
+</tw-input>
+
+<tw-textarea
+  [(ngModel)]="bio"
+  label="Bio"
+  [rows]="4"
+  [maxlength]="500"
+  [showCount]="true"
+  [autoResize]="true">
+</tw-textarea>
+```
+
+### Badge
+
+```html
+<tw-badge variant="success">Active</tw-badge>
+<tw-badge variant="warning" badgeStyle="soft">Pending</tw-badge>
+<tw-badge variant="danger" badgeStyle="dot">Offline</tw-badge>
+<tw-badge variant="info" [pill]="true" [removable]="true" [remove]="onRemove">
+  Tag
+</tw-badge>
+```
+
+### Alert
+
+```html
+<tw-alert variant="success" alertStyle="soft" [dismissible]="true">
+  <tw-alert-title>Success!</tw-alert-title>
+  <tw-alert-description>Your changes have been saved.</tw-alert-description>
+</tw-alert>
+
+<tw-alert variant="danger" alertStyle="accent">
+  An error occurred while processing your request.
+</tw-alert>
+```
+
+### Modal
+
+```html
+<tw-button (click)="isOpen = true">Open Modal</tw-button>
+
+<tw-modal [(open)]="isOpen" size="md">
+  <tw-modal-header>
+    <tw-modal-title>Confirm Action</tw-modal-title>
+  </tw-modal-header>
+  <tw-modal-body>
+    Are you sure you want to continue?
+  </tw-modal-body>
+  <tw-modal-footer>
+    <tw-button variant="ghost" (click)="isOpen = false">Cancel</tw-button>
+    <tw-button variant="primary" (click)="confirm()">Confirm</tw-button>
+  </tw-modal-footer>
+</tw-modal>
+```
+
+### Dropdown
+
+```html
+<tw-dropdown>
+  <button twDropdownTrigger class="px-4 py-2 bg-white border rounded-lg">
+    Options
+  </button>
+  <tw-dropdown-menu>
+    <tw-dropdown-header>Actions</tw-dropdown-header>
+    <button twDropdownItem (click)="edit()">Edit</button>
+    <button twDropdownItem (click)="duplicate()">Duplicate</button>
+    <tw-dropdown-divider></tw-dropdown-divider>
+    <button twDropdownItem class="text-rose-600">Delete</button>
+  </tw-dropdown-menu>
+</tw-dropdown>
+```
+
+### Tabs
+
+```html
+<tw-tabs [(value)]="activeTab" variant="line">
+  <tw-tab-panel value="overview" label="Overview">
+    Overview content
+  </tw-tab-panel>
+  <tw-tab-panel value="settings" label="Settings">
+    Settings content
+  </tw-tab-panel>
+  <tw-tab-panel value="billing" label="Billing" [disabled]="!isPremium">
+    Billing content
+  </tw-tab-panel>
+</tw-tabs>
+```
+
+## Directives
+
+### Ripple Effect
+
+```html
+<button twRipple class="px-4 py-2 bg-blue-600 text-white rounded">
+  Click me
+</button>
+```
+
+### Tooltip
+
+```html
+<button twTooltip="Save changes" tooltipPosition="top">
+  Save
+</button>
+```
+
+### Click Outside
+
+```html
+<div (twClickOutside)="closeMenu()" [clickOutsideEnabled]="isMenuOpen">
+  Menu content
+</div>
+```
+
+### Focus Trap
+
+```html
+<div twFocusTrap [focusTrapAutoFocus]="true">
+  <input type="text">
+  <button>Submit</button>
+</div>
+```
+
+### Class Merge
+
+```html
+<!-- Intelligently merges Tailwind classes, resolving conflicts -->
+<div [twClass]="'px-4 py-2 bg-blue-500'" [twClassMerge]="'px-8 bg-red-500'">
+  Will have px-8 py-2 bg-red-500
+</div>
+```
+
+## Customization Examples
+
+### Per-Component Override
+
+```html
+<tw-button
+  variant="primary"
+  classOverride="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
+  Gradient Button
+</tw-button>
+```
+
+### Complete Class Replacement
+
+```html
+<tw-button classReplace="your-completely-custom-classes">
+  Custom Styled
+</tw-button>
+```
+
+### Using the Class Service
+
+```typescript
+import { TwClassService } from '@pegasus-heavy/ngx-tailwindcss';
+
+@Component({...})
+export class MyComponent {
+  private twClass = inject(TwClassService);
+
+  get buttonClasses() {
+    return this.twClass.merge(
+      'px-4 py-2 rounded',
+      this.isPrimary ? 'bg-blue-600 text-white' : 'bg-gray-100',
+      this.isDisabled && 'opacity-50 cursor-not-allowed'
+    );
+  }
+}
+```
+
+## License
+
+MIT © Pegasus Heavy Industries LLC
+

package/commitlint.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};
+

package/extract-inline.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,149 @@
+{
+  "name": "@quinnjr/ngx-tailwindcss",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A highly customizable Angular component library for Tailwind CSS 4+. Build beautiful, accessible UI components with full theming support, intelligent class merging, and zero bundled CSS. Features 30+ components including buttons, cards, modals, forms, tables, and more.",
+  "license": "MIT",
+  "author": {
+    "name": "Pegasus Heavy Industries LLC",
+    "url": "https://pegasusheavy.github.io/ngx-tailwindcss"
+  },
+  "homepage": "https://pegasusheavy.github.io/ngx-tailwindcss",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pegasusheavy/ngx-tailwindcss.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pegasusheavy/ngx-tailwindcss/issues"
+  },
+  "keywords": [
+    "angular",
+    "tailwindcss",
+    "tailwind",
+    "tailwind-css-4",
+    "components",
+    "ui",
+    "ui-library",
+    "ui-components",
+    "component-library",
+    "angular-components",
+    "angular-library",
+    "angular-ui",
+    "design-system",
+    "typescript",
+    "standalone-components",
+    "signals",
+    "accessible",
+    "accessibility",
+    "a11y",
+    "aria",
+    "wcag",
+    "screen-reader",
+    "i18n",
+    "internationalization",
+    "localization",
+    "l10n",
+    "rtl",
+    "translations",
+    "responsive",
+    "customizable",
+    "theming",
+    "forms",
+    "buttons",
+    "modals",
+    "cards",
+    "tables",
+    "dropdown",
+    "toast",
+    "accordion",
+    "tabs",
+    "pagination",
+    "avatar",
+    "badge",
+    "spinner",
+    "skeleton",
+    "progress",
+    "tree",
+    "timeline",
+    "stepper"
+  ],
+  "peerDependencies": {
+    "@angular/animations": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/cdk": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.2.0",
+    "@angular-devkit/build-angular": "^21.0.4",
+    "@angular/animations": "^21.0.6",
+    "@angular/build": "^21.0.4",
+    "@angular/cdk": "^21.0.5",
+    "@angular/cli": "^21.0.4",
+    "@angular/common": "^21.0.6",
+    "@angular/compiler": "^21.0.6",
+    "@angular/compiler-cli": "^21.0.6",
+    "@angular/core": "^21.0.6",
+    "@angular/forms": "^21.0.6",
+    "@angular/platform-browser": "^21.0.6",
+    "@angular/platform-browser-dynamic": "^21.0.6",
+    "@commitlint/cli": "^20.2.0",
+    "@commitlint/config-conventional": "^20.2.0",
+    "@eslint/js": "^9.39.2",
+    "@pegasusheavy/eslint-typescript-access": "^1.0.0",
+    "@testing-library/angular": "^18.1.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "@typescript-eslint/utils": "^8.50.0",
+    "@vitest/coverage-v8": "^4.0.16",
+    "angular-eslint": "^21.1.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsdoc": "^61.5.0",
+    "eslint-plugin-unicorn": "^62.0.0",
+    "husky": "^9.1.7",
+    "jsdom": "^27.3.0",
+    "ng-packagr": "^21.0.1",
+    "prettier": "^3.7.4",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.50.0",
+    "vitest": "^4.0.16",
+    "zone.js": "~0.16.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/pegasus-heavy-ngx-tailwindcss.mjs"
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build ngx-tailwindcss --configuration production",
+    "build:watch": "ng build ngx-tailwindcss --watch",
+    "publish:dist": "pnpm run build && pnpm publish dist/ngx-tailwindcss --no-git-checks --access public",
+    "postbuild": "cp README.md dist/ngx-tailwindcss/README.md",
+    "dev": "concurrently -n lib,docs -c cyan,green \"pnpm run build:watch\" \"pnpm run docs:dev\"",
+    "docs:dev": "cd docs && pnpm run dev",
+    "docs:start": "cd docs && pnpm run start",
+    "test": "vitest",
+    "test:run": "vitest run --testTimeout 60000 --hookTimeout 60000",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "lint": "eslint projects/",
+    "lint:fix": "eslint projects/ --fix",
+    "format": "prettier --write \"projects/**/*.{ts,html,scss,css,json}\"",
+    "format:check": "prettier --check \"projects/**/*.{ts,html,scss,css,json}\"",
+    "commitlint": "commitlint"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,17 @@
+packages:
+  - docs
+
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+  less: true
+  lmdb: true
+  msgpackr-extract: true
+
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - electron
+  - esbuild
+  - less
+  - lmdb
+  - msgpackr-extract