Package Exports

@gersak/ty
@gersak/ty/button
@gersak/ty/calendar
@gersak/ty/calendar-month
@gersak/ty/calendar-navigation
@gersak/ty/cdn
@gersak/ty/checkbox
@gersak/ty/copy
@gersak/ty/css/ty.css
@gersak/ty/date-picker
@gersak/ty/dropdown
@gersak/ty/icon
@gersak/ty/icons/fontawesome/brands.d.ts
@gersak/ty/icons/fontawesome/brands.d.ts.map
@gersak/ty/icons/fontawesome/brands.js
@gersak/ty/icons/fontawesome/brands.js.map
@gersak/ty/icons/fontawesome/regular.d.ts
@gersak/ty/icons/fontawesome/regular.d.ts.map
@gersak/ty/icons/fontawesome/regular.js
@gersak/ty/icons/fontawesome/regular.js.map
@gersak/ty/icons/fontawesome/solid.d.ts
@gersak/ty/icons/fontawesome/solid.d.ts.map
@gersak/ty/icons/fontawesome/solid.js
@gersak/ty/icons/fontawesome/solid.js.map
@gersak/ty/icons/heroicons/micro.d.ts
@gersak/ty/icons/heroicons/micro.d.ts.map
@gersak/ty/icons/heroicons/micro.js
@gersak/ty/icons/heroicons/micro.js.map
@gersak/ty/icons/heroicons/mini.d.ts
@gersak/ty/icons/heroicons/mini.d.ts.map
@gersak/ty/icons/heroicons/mini.js
@gersak/ty/icons/heroicons/mini.js.map
@gersak/ty/icons/heroicons/outline.d.ts
@gersak/ty/icons/heroicons/outline.d.ts.map
@gersak/ty/icons/heroicons/outline.js
@gersak/ty/icons/heroicons/outline.js.map
@gersak/ty/icons/heroicons/solid.d.ts
@gersak/ty/icons/heroicons/solid.d.ts.map
@gersak/ty/icons/heroicons/solid.js
@gersak/ty/icons/heroicons/solid.js.map
@gersak/ty/icons/lucide
@gersak/ty/icons/material/filled.d.ts
@gersak/ty/icons/material/filled.d.ts.map
@gersak/ty/icons/material/filled.js
@gersak/ty/icons/material/filled.js.map
@gersak/ty/icons/material/outlined.d.ts
@gersak/ty/icons/material/outlined.d.ts.map
@gersak/ty/icons/material/outlined.js
@gersak/ty/icons/material/outlined.js.map
@gersak/ty/icons/material/round.d.ts
@gersak/ty/icons/material/round.d.ts.map
@gersak/ty/icons/material/round.js
@gersak/ty/icons/material/round.js.map
@gersak/ty/icons/material/sharp.d.ts
@gersak/ty/icons/material/sharp.d.ts.map
@gersak/ty/icons/material/sharp.js
@gersak/ty/icons/material/sharp.js.map
@gersak/ty/icons/material/two-tone.d.ts
@gersak/ty/icons/material/two-tone.d.ts.map
@gersak/ty/icons/material/two-tone.js
@gersak/ty/icons/material/two-tone.js.map
@gersak/ty/icons/registry
@gersak/ty/input
@gersak/ty/modal
@gersak/ty/multiselect
@gersak/ty/option
@gersak/ty/popup
@gersak/ty/tab
@gersak/ty/tabs
@gersak/ty/tag
@gersak/ty/textarea
@gersak/ty/tooltip

Readme

@gersak/ty

TypeScript web components for universal UI development.

Framework-agnostic evolution of Toddler — same components (calendar, dropdown, routing, icons), rebuilt with Web Components to work everywhere, not just React.

Installation

npm install @gersak/ty

Usage

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 install

Development Server

npm run dev

Opens development server at http://localhost:3000 with hot module reloading.

Build

npm run build

Builds optimized production bundles with type declarations.

Type Checking

npm run type-check

Preview Production Build

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:

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-icons

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:

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