@pegasusheavy/ngx-tailwindcss 0.1.0 → 0.1.1

package/.prettierignore

@@ -1,19 +0,0 @@
-# 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

@@ -1,163 +0,0 @@
-# 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.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.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/README.md

@@ -1,342 +0,0 @@
-# @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

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