New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

ty-web-components

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ty-web-components

Modern Web Components Library built with ClojureScript - Zero Dependencies, Semantic Design System, Advanced Modular Architecture

latest
Source
npmnpm
Version
0.1.0
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

Ty Components - Modern Web Components Library

jsDelivr NPM Version Bundle Size

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/@ty/components@latest/ty.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ty/components@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/@ty/components@latest/ty-calendar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ty/components@latest/ty-dropdown.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ty/components@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/@ty/components@latest/dev/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/@ty/components@latest/dist/ty.js"></script>
  
  <!-- Load component modules -->
  <script src="https://cdn.jsdelivr.net/npm/@ty/components@latest/dist/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/@ty/components@latest/dev/css/ty.css">

<!-- Or individual files -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ty/components@latest/dev/css/ty.variables.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ty/components@latest/dev/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

ModuleGzipped SizeComponents
ty.js (core)~45KBBase system, utilities
ty-calendar-month.js~8KBCalendar month grid
ty-calendar.js~12KBFull calendar + navigation
ty-date-picker.js~6KBDate picker interface
ty-dropdown.js~15KBDropdown components
ty-multiselect.js~10KBMulti-selection

🎯 Version Management

Use Specific Versions

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

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

<!-- Always latest (development only) -->
<script src="https://cdn.jsdelivr.net/npm/@ty/components@latest/dist/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/@ty/components@latest/dev/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/@ty/components@latest/dist/ty.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@ty/components@latest/dist/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

Keywords

web-components
clojurescript
ui-library
design-system
modular
zero-dependencies

FAQs

Package last updated on 10 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Socket Named Top Sales Organization by RepVue

Company News

Socket Named Top Sales Organization by RepVue

Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.

By Sarah Gooding  -  Apr 17, 2026
Socket Selected for OpenAI's Cybersecurity Grant Program

Company News

/

Security News

Socket Selected for OpenAI's Cybersecurity Grant Program

Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.

By Sarah Gooding  -  Apr 16, 2026