Package Exports
- @cal.macconnachie/web-components
- @cal.macconnachie/web-components/components/auth-form.js
- @cal.macconnachie/web-components/components/base-button.js
- @cal.macconnachie/web-components/components/base-card.js
- @cal.macconnachie/web-components/components/base-date-picker.js
- @cal.macconnachie/web-components/components/base-datetime-picker.js
- @cal.macconnachie/web-components/components/base-drawer.js
- @cal.macconnachie/web-components/components/base-input.js
- @cal.macconnachie/web-components/components/base-select.js
- @cal.macconnachie/web-components/components/base-tab.js
- @cal.macconnachie/web-components/components/base-tabs.js
- @cal.macconnachie/web-components/components/base-textarea.js
- @cal.macconnachie/web-components/components/base-time-picker.js
- @cal.macconnachie/web-components/components/favicon.ico
- @cal.macconnachie/web-components/components/index
- @cal.macconnachie/web-components/components/index.d.ts
- @cal.macconnachie/web-components/components/quantity-select.js
- @cal.macconnachie/web-components/components/theme-toggle.js
- @cal.macconnachie/web-components/stylesheets/main
Readme
@cal.macconnachie/web-components
A collection of lightweight, framework-agnostic web components built with Lit.
Components
- auth-form - Authentication with OAuth and email/password
- base-button - Customizable button component
- base-card - Card container component
- base-date-picker - Date selection input
- base-datetime-picker - Combined date and time picker
- base-drawer - Slide-out drawer panel
- base-input - Text input field
- base-select - Dropdown select menu
- base-tabs & base-tab - Tabbed content interface
- base-textarea - Multi-line text input
- base-time-picker - Time selection input
- quantity-select - Quantity increment/decrement control
- theme-toggle - Light/dark mode switcher
Quick Start
Load from CDN:
<!-- Load all components -->
<script type="module" src="https://cdn.cals-api.com/index.js"></script>
<!-- Or load individual components -->
<script type="module" src="https://cdn.cals-api.com/components/auth-form.js"></script>Use in your HTML:
<base-button>Click me</base-button>
<auth-form app-name="My App"></auth-form>Playground
View live examples and documentation at https://cdn.cals-api.com/