\n Overview •\n Design Invariants •\n Visual Preview •\n Installation •\n Quick Start •\n Design Tokens •\n Component API •\n License\n
\n\nDeployment will initiate mTLS mutual handshake across all regional nodes.
\n \n \n );\n}\n```\n\n---\n\n## Design Tokens\n\nTokens are exposed as standard CSS Custom Properties and adapt automatically based on the `data-theme` attribute (`light`, `dark`, or `midnight`).\n\n```html\n\n```\n\n### Surface & Canvas Tokens\n\n| Token | Light (`light`) | Dark (`dark`) | Midnight (`midnight`) | Description |\n| :--- | :--- | :--- | :--- | :--- |\n| `--p-app` | `#f2f3f6` | `#08080a` | `#020204` | Application canvas canvas |\n| `--p-surface` | `#ffffff` | `#141419` | `#0e0e13` | Elevated card container |\n| `--p-soft` | `#e8e9ef` | `#1c1c24` | `#161620` | Inner widget background |\n| `--p-input-bg` | `#eaebee` | `#14141a` | `#0b0b10` | Tactile recessed input |\n| `--p-hover` | `#dedfe7` | `#252530` | `#20202e` | Interactive hover state |\n| `--p-t-900` | `#0f0f13` | `#fafafc` | `#ffffff` | Primary text |\n| `--p-t-500` | `#717180` | `#6c6c7c` | `#5a5a68` | Secondary / muted text |\n| `--p-success` | `#16a34a` | `#34d399` | `#34d399` | Success / live indicator |\n| `--p-danger` | `#dc2626` | `#f87171` | `#f87171` | Error / danger state |\n\n### Motion & Radius Tokens\n\n```css\n--p-r-sm: 6px;\n--p-r-md: 10px;\n--p-r-lg: 14px;\n--p-r-xl: 18px;\n--p-r-full: 9999px;\n\n--p-ease: cubic-bezier(0.22, 0.61, 0.36, 1);\n--p-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n--p-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n```\n\n---\n\n## Component API\n\nThe library exports 100+ primitives and composite modules organized across functional domains:\n\n### 1. Structure & Shell\n- `Card`: Zero-border container with header, subtitle, actions, and surface contrast.\n- `SectionHeader`: Section titles with metadata counters and action slots.\n- `Divider`: Pure surface separator without 1px border lines.\n- `Breadcrumb`: Interactive navigation path with click handlers.\n- `Stack`: Flexible flexbox alignment container.\n\n### 2. Form Controls & Inputs\n- `Input`: Single-line text field with icon prefixes, suffixes, and error states.\n- `PasswordInput`: Masked input with toggle visibility action.\n- `PinInput`: 2FA OTP segmented input with automatic key navigation and backspace handling.\n- `NumberInput`: Stepper control with increment and decrement constraints.\n- `Textarea`: Multi-line text input with automatic line height calculation.\n- `SearchInput`: Search control with keyboard shortcut (`⌘K`) indicator and clear action.\n- `Dropzone`: Drag-and-drop file upload zone.\n\n### 3. Selection & Ranges\n- `Select`: Custom dropdown selector with keyboard navigation.\n- `MultiSelect`: Multi-item pill selector with individual tag removal.\n- `Slider`: Range slider with tactile thumb physics.\n- `RangeSlider`: Dual-handle min/max range selector.\n- `DatePicker`: Calendar date picker with month navigation.\n- `ColorPicker`: Palette swatch selector.\n- `SegmentedControl`: Sliding pill selector with spring transitions.\n- `Checkbox`: Tactile toggle box.\n- `Switch`: iOS-style binary switch.\n- `RadioGroup`: Segmented radio option list.\n\n### 4. FinTech & Telemetry\n- `Sparkline`: Lightweight SVG trend sparkline chart with customizable stroke and fill.\n- `StatCard`: KPI summary card with percentage delta, direction indicators, and icon slots.\n- `ActivityHeatmap`: Contribution and activity matrix grid.\n- `PricingTier`: SaaS subscription tier card with feature checklist and popular highlight.\n- `CreditCardPreview`: Virtual credit card renderer with chip and masked PAN.\n- `InvoiceRow`: Financial transaction row item with status badge.\n\n### 5. Overlays & Dialogs\n- `Dialog`: macOS-style sheet dialog with `16px` backdrop blur and escape key handling.\n- `Drawer`: Slide-out panel for configurations and complex forms.\n- `CommandPalette`: Global `⌘K` command search palette with fuzzy filtering.\n- `ContextMenu`: Right-click contextual action menu.\n- `DropdownMenu`: Anchor-aligned action menu.\n- `Tooltip`: Micro-interaction tooltip with automatic positioning.\n\n### 6. Data & Feedback\n- `Table`: Zero-border fixed data table with hover highlighting and row click callbacks.\n- `Badge`: Capsule badge with status dot indicators (`success`, `danger`, `neutral`, `pro`).\n- `StatusDot`: Animated heartbeat status indicator.\n- `Progress`: Linear progress indicator with percentage output.\n- `CircularProgress`: Radial progress gauge with SVG stroke calculations.\n- `Spinner`: Micro-interaction loading indicator.\n- `Skeleton`: Content placeholder shimmer with rectangle, circle, and text variants.\n- `Toast`: Imperative notification toast system.\n- `Accordion`: Collapsible disclosure panel with spring physics.\n- `Tree`: Hierarchical folder and node tree navigator.\n- `Timeline`: Chronological event sequence list.\n\n---\n\n## Local Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/your-username/antislop-ui.git\n\n# Navigate to project directory\ncd antislop-ui\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Run production build validation\nnpm run build\n```\n\n---\n\n## License\n\nMIT License © 2026 **AntiSlop UI Foundation**\n\nFree for use in personal, open-source, and commercial SaaS applications.\n","readmeFilename":"README.md"}