# @gersak/ty
TypeScript web components for universal UI development.
**Framework-agnostic evolution of [Toddler](https://github.com/gersak/toddler)** — same components (calendar, dropdown, routing, icons), rebuilt with Web Components to work everywhere, not just React.
## Installation
```bash
npm install @gersak/ty
```
## Usage
### Import All Components
```javascript
import '@gersak/ty'
// Or with React
import { TyButton, TyModal, TyInput } from '@gersak/ty'
```
### Import Individual Components (Tree-Shaking)
```javascript
import '@gersak/ty/button'
import '@gersak/ty/modal'
import '@gersak/ty/input'
```
### Use in HTML
```html
Click Me
Modal Content
```
## Available Components
- **ty-button** - Button with multiple flavors (primary, secondary, success, danger, warning)
- **ty-modal** - Modal dialog with backdrop, ESC key, focus trap
- **ty-input** - Input field with validation, number formatting
- **ty-dropdown** - Dropdown with positioning, keyboard navigation
- **ty-checkbox** - Checkbox with form integration
- **ty-textarea** - Textarea with auto-resize
- **ty-popup** - Popup positioning system
- **ty-tooltip** - Tooltip with hover/focus triggers
- **ty-tag** - Tag with removable state
- **ty-option** - Option for dropdown/multiselect
- **ty-icon** - Icon with registry system
- **ty-copy** - Copy-to-clipboard field for API keys, tokens, URLs
- **ty-calendar** - Full calendar with navigation and date selection
- **ty-calendar-month** - Month view component
- **ty-calendar-navigation** - Calendar navigation controls
- **ty-date-picker** - Date picker with calendar popup
- **ty-multiselect** - Multi-select dropdown with tags
## Development
### Setup
```bash
cd packages/core
npm install
```
### Development Server
```bash
npm run dev
```
Opens development server at `http://localhost:3000` with hot module reloading.
### Build
```bash
npm run build
```
Builds optimized production bundles with type declarations.
### Type Checking
```bash
npm run type-check
```
### Preview Production Build
```bash
npm run preview
```
## Project Structure
```
packages/core/
├── src/
│ ├── components/ # Web component implementations
│ ├── styles/ # Component styles
│ ├── utils/ # Utility functions
│ ├── types/ # TypeScript type definitions
│ └── index.ts # Main entry point
├── dev/
│ ├── index.html # Development test page
│ └── ty.css # Symlink to resources/ty.css
├── dist/ # Build output
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
└── package.json
```
## TypeScript Support
Full TypeScript support with type declarations:
```typescript
import { TyButton, TyModal, type TyButtonElement } from '@gersak/ty'
import { registerIcons } from '@gersak/ty/icons/registry'
// Icons are in separate @gersak/ty-icons package (optional)
// npm install @gersak/ty-icons
// import { check, heart } from '@gersak/ty-icons/lucide'
// registerIcons({ check, heart })
// Or register your own SVG icons:
registerIcons({
'my-icon': ''
})
const button: TyButtonElement = document.querySelector('ty-button')!
button.flavor = 'primary'
button.addEventListener('ty-click', (e) => {
console.log('Clicked:', e.detail)
})
```
### Icon System
The core package includes the icon registry utility but **not the icon libraries** themselves (to keep package size small).
**Option 1: Use the separate icon package** (coming soon):
```bash
npm install @gersak/ty-icons
```
```typescript
import { check, heart, star } from '@gersak/ty-icons/lucide'
import { registerIcons } from '@gersak/ty/icons/registry'
registerIcons({ check, heart, star })
```
**Option 2: Bring your own SVG icons**:
```typescript
import { registerIcons } from '@gersak/ty/icons/registry'
registerIcons({
'check': '',
'custom-logo': ''
})
```
**Option 3: Use the global API**:
```html
```
**Why separate packages?**
- Core package stays lightweight (~2.6MB)
- Install icons only if you need them
- Or use your own custom SVG icons
## Browser Support
- All modern browsers (Chrome, Firefox, Safari, Edge)
- Web Components (Custom Elements, Shadow DOM)
- ES2020+
## Zero Dependencies
This package has zero runtime dependencies. Everything is built on native web standards.
## License
MIT