Package Exports

@gersak/ty
@gersak/ty/css
@gersak/ty/css/ty.css
@gersak/ty/ty-calendar
@gersak/ty/ty-calendar-month
@gersak/ty/ty-date-picker
@gersak/ty/ty-dropdown
@gersak/ty/ty-lazy
@gersak/ty/ty-multiselect

Readme

Ty Components - Modern Web Components Library

Modern web components library built with ClojureScript that provides reusable UI components as native Web Components. Zero runtime dependencies, semantic design system, and advanced modular architecture.

⚡ Quick Start with CDN

Core Library (Required)

<!-- Core ty components -->
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/css/ty.css">

<!-- Initialize components -->
<script>
  ty.core.init();
</script>

Individual Component Modules (On-Demand)

<!-- Load specific components as needed -->
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty-calendar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty-dropdown.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty-multiselect.js"></script>

Complete Setup Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ty Components Demo</title>
  
  <!-- Ty CSS Variables & Components -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/css/ty.css">
</head>
<body>
  <!-- Your components work immediately -->
  <ty-button>Click me!</ty-button>
  <ty-input placeholder="Type here..."></ty-input>
  <ty-calendar></ty-calendar>

  <!-- Load core library -->
  <script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty.js"></script>
  
  <!-- Load component modules -->
  <script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty-calendar.js"></script>
  
  <!-- Initialize -->
  <script>
    ty.core.init();
  </script>
</body>
</html>

📦 Module Architecture

Ty uses an advanced modular system where you can load only what you need:

Core Module (Always Required)

ty.js - Core web component utilities, CSS variables system, base functionality

Component Modules (Load as Needed)

ty-calendar-month.js - Month grid calendar component
ty-calendar.js - Full calendar with navigation (depends on ty-calendar-month)
ty-date-picker.js - Complete date picker interface (depends on ty-calendar)
ty-dropdown.js - Dropdown selection components
ty-multiselect.js - Multi-selection component (depends on ty-dropdown)

Dependency Chain

ty.js (core)
│
├── ty-calendar-month.js
│   └── ty-calendar.js
│       └── ty-date-picker.js
│
├── ty-dropdown.js
│   └── ty-multiselect.js

🎨 CSS Design System

Ty uses a sophisticated 5-variant semantic CSS variables system:

CSS Files Available on CDN

<!-- Complete CSS system (recommended) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/css/ty.css">

<!-- Or individual files -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/css/ty.variables.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/css/ty.utilities.css">

Semantic Color System

/* Text Colors (5-variant emphasis system) */
--ty-color-primary-strong: #0034c7;    /* Maximum emphasis */
--ty-color-primary-mild: #1c40a8;      /* High emphasis */
--ty-color-primary: #4367cd;           /* Base emphasis */
--ty-color-primary-soft: #60a5fa;      /* Reduced emphasis */
--ty-color-primary-faint: #93c5fd;     /* Minimal emphasis */

/* Background Colors */
--ty-bg-primary-mild: #bfdbfe;         /* Stronger background */
--ty-bg-primary: #dbeafe;              /* Base background */
--ty-bg-primary-soft: #eff6ff;         /* Softer background */

/* Available for: primary, secondary, success, danger, warning, info, neutral */

Dark Theme Support

<!-- Toggle dark theme -->
<script>
  document.documentElement.classList.toggle('dark');
</script>

🚀 Available Components

Form Components

<ty-button variant="primary">Primary Button</ty-button>
<ty-input placeholder="Enter text..." />
<ty-tag removable>Removable Tag</ty-tag>

Calendar & Date Selection

<ty-calendar-month year="2024" month="12"></ty-calendar-month>
<ty-calendar></ty-calendar>
<ty-date-picker value="2024-12-25"></ty-date-picker>

Selection Components

<ty-dropdown>
  <ty-option value="option1">Option 1</ty-option>
  <ty-option value="option2">Option 2</ty-option>
</ty-dropdown>

<ty-multiselect values='["tag1", "tag2"]'></ty-multiselect>

Layout & Interaction

<ty-modal id="my-modal">
  <h2>Modal Content</h2>
  <p>Your content here...</p>
</ty-modal>

<ty-popup trigger="click">
  <button slot="trigger">Click me</button>
  <div slot="content">Popup content</div>
</ty-popup>

<ty-tooltip message="Helpful information">
  <span>Hover for tooltip</span>
</ty-tooltip>

🔧 Framework Integration

React

export function MyComponent() {
  return (
    <div>
      <ty-button onClick={handleClick}>Click me</ty-button>
      <ty-calendar onDateSelect={handleDateSelect} />
    </div>
  );
}

Vue.js

<template>
  <div>
    <ty-button @click="handleClick">Click me</ty-button>
    <ty-calendar @date-select="handleDateSelect" />
  </div>
</template>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})

<ty-button (click)="handleClick()">Click me</ty-button>
<ty-calendar (date-select)="handleDateSelect($event)"></ty-calendar>

🌍 Internationalization

<script>
  // Set locale for date/number formatting
  ty.i18n.setLocale('en-US');
  
  // Components automatically use proper formatting
</script>

📊 Bundle Sizes

Module	Gzipped Size	Components
`ty.js` (core)	~45KB	Base system, utilities
`ty-calendar-month.js`	~8KB	Calendar month grid
`ty-calendar.js`	~12KB	Full calendar + navigation
`ty-date-picker.js`	~6KB	Date picker interface
`ty-dropdown.js`	~15KB	Dropdown components
`ty-multiselect.js`	~10KB	Multi-selection

🎯 Version Management

Use Specific Versions

<!-- Lock to specific version -->
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@0.1.4/ty.js"></script>

<!-- Use latest minor/patch versions -->
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@0.1/ty.js"></script>

<!-- Always latest (development only) -->
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty.js"></script>

jsDelivr Features

Global CDN: 700+ locations worldwide
HTTP/2 Support: Optimized delivery
Compression: Automatic gzip/brotli
Caching: Intelligent edge caching
Fallback: Multiple CDN providers

🔒 Content Security Policy (CSP)

<meta http-equiv="Content-Security-Policy" content="
  script-src 'self' cdn.jsdelivr.net;
  style-src 'self' cdn.jsdelivr.net 'unsafe-inline';
">

🎪 Examples & Demos

Basic Component Usage

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/css/ty.css">
</head>
<body class="ty-content">
  <div class="p-8">
    <h1 class="ty-text-primary-strong">Ty Components Demo</h1>
    
    <div class="space-y-4">
      <ty-button variant="primary">Primary Action</ty-button>
      <ty-input placeholder="Enter your email..."></ty-input>
      <ty-calendar></ty-calendar>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty-calendar.js"></script>
  <script>
    ty.core.init();
    
    // Event handling
    document.body.addEventListener('date-select', (event) => {
      console.log('Selected date:', event.detail.date);
    });
  </script>
</body>
</html>

Advanced Theme Switching

<script>
function toggleTheme() {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

// Initialize theme from localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  document.documentElement.classList.add('dark');
}
</script>

<ty-button onclick="toggleTheme()">Toggle Dark Mode</ty-button>

📚 API Documentation

Component Events

All ty components dispatch standard DOM events:

// Calendar date selection
element.addEventListener('date-select', (event) => {
  const { date, value, context } = event.detail;
});

// Input value changes
element.addEventListener('input', (event) => {
  const { value, formattedValue, rawValue } = event.detail;
});

// Multiselect changes
element.addEventListener('change', (event) => {
  const { values, action, item } = event.detail;
});

CSS Custom Properties

Customize the entire design system:

:root {
  /* Override brand colors */
  --ty-color-primary: #your-brand-color;
  --ty-color-secondary: #your-secondary-color;
  
  /* Adjust spacing */
  --ty-spacing-base: 1rem;
  
  /* Modify typography */
  --ty-font-sans: 'Your Font', system-ui, sans-serif;
}

🤝 Contributing

Visit our GitHub repository to:

Report issues
Request features
Submit pull requests
View source code

📄 License

MIT License - feel free to use in personal and commercial projects.

🔗 Links

Made with ❤️ using ClojureScript and Web Standards