@gersak/ty
v0.1.917
Published
Ty Web Components - Framework-agnostic UI components with semantic design system
Maintainers
kovacnicaReadme
@gersak/ty
TypeScript web components for universal UI development.
Installation
npm install @gersak/tyUsage
Import All Components
import '@gersak/ty'
// Or with React
import { TyButton, TyModal, TyInput } from '@gersak/ty'Import Individual Components (Tree-Shaking)
import '@gersak/ty/button'
import '@gersak/ty/modal'
import '@gersak/ty/input'Use in HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/ty.css">
</head>
<body class="ty-canvas">
<ty-button flavor="primary">Click Me</ty-button>
<ty-input placeholder="Enter text..."></ty-input>
<ty-modal id="my-modal">
<div class="ty-elevated p-6 rounded-lg">
<h2>Modal Content</h2>
</div>
</ty-modal>
<script type="module">
import '@gersak/ty'
const modal = document.getElementById('my-modal')
modal.show()
</script>
</body>
</html>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
cd packages/core
npm installDevelopment Server
npm run devOpens development server at http://localhost:3000 with hot module reloading.
Build
npm run buildBuilds optimized production bundles with type declarations.
Type Checking
npm run type-checkPreview Production Build
npm run previewProject 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.jsonTypeScript Support
Full TypeScript support with type declarations:
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': '<svg>...</svg>'
})
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):
npm install @gersak/ty-iconsimport { 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:
import { registerIcons } from '@gersak/ty/icons/registry'
registerIcons({
'check': '<svg xmlns="http://www.w3.org/2000/svg">...</svg>',
'custom-logo': '<svg>...</svg>'
})Option 3: Use the global API:
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty/dist/ty.js"></script>
<script>
window.tyIcons.register({
'check': '<svg>...</svg>',
'heart': '<svg>...</svg>'
})
console.log(window.tyVersion) // '0.2.0'
console.log(window.tyIcons.has('check')) // true
console.log(window.tyIcons.list()) // ['check', 'heart']
</script>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