Utilities | tcpsystems/ui

Tracking

Name the action on the component. Nothing is sent unless you connect a sink and consent is given.

Svelte

<Button track="signup_start">Start free</Button>

App-wide defaults

Set once in a layout. Explicit props still win.

+layout.svelte

<script>
	import { setDefaults } from '@tcpsystems/ui/foundation/extend';
	setDefaults({ Button: { size: 'sm' } });
</script>

Your own variants

TypeScript

import { registerVariant } from '@tcpsystems/ui/foundation/extend';
registerVariant('Button', 'brand');
/* your CSS: .tcp-button[data-variant='brand'] { ... } */

Plugins

TypeScript

import { registerPlugin } from '@tcpsystems/ui/foundation/extend';
registerPlugin({ name: 'acme', setup({ registerVariant }) { registerVariant('Badge', 'acme'); } });

Rune utilities

Debounce, disclosure, selection and similar utilities are being added under @tcpsystems/ui/utils.