@treeseed/core 0.8.8 → 0.8.9

package/dist/components/ui/data/Badge.astro

@@ -0,0 +1,19 @@
+---
+import type { Tone } from '../types.js';
+
+interface Props {
+	tone?: Tone;
+	size?: 'sm' | 'md';
+	class?: string;
+}
+
+const {
+	tone = 'default',
+	size = 'md',
+	class: className,
+} = Astro.props as Props;
+---
+
+<span class:list={['ts-badge', className]} data-tone={tone} data-size={size}>
+	<slot />
+</span>

package/dist/components/ui/data/DataTable.astro

@@ -0,0 +1,51 @@
+---
+interface DataTableColumn {
+	key: string;
+	label: string;
+}
+
+interface Props {
+	columns: DataTableColumn[];
+	rows: Array<Record<string, unknown>>;
+	caption?: string;
+	emptyLabel?: string;
+	class?: string;
+}
+
+const {
+	columns,
+	rows,
+	caption,
+	emptyLabel = 'No rows to show.',
+	class: className,
+} = Astro.props as Props;
+
+function cellValue(row: Record<string, unknown>, key: string) {
+	const value = row[key];
+	return value === null || value === undefined ? '' : String(value);
+}
+---
+
+<div class:list={['ts-data-table-wrap', className]}>
+	<table class="ts-data-table">
+		{caption ? <caption>{caption}</caption> : null}
+		<thead>
+			<tr>
+				{columns.map((column) => <th scope="col">{column.label}</th>)}
+			</tr>
+		</thead>
+		<tbody>
+			{rows.length > 0 ? rows.map((row) => (
+				<tr>
+					{columns.map((column) => (
+						<td data-label={column.label}>{cellValue(row, column.key)}</td>
+					))}
+				</tr>
+			)) : (
+				<tr>
+					<td colspan={columns.length}>{emptyLabel}</td>
+				</tr>
+			)}
+		</tbody>
+	</table>
+</div>

package/dist/components/ui/data/KeyValueList.astro

@@ -0,0 +1,28 @@
+---
+import type { Tone } from '../types.js';
+
+interface KeyValueItem {
+	key: string;
+	value: string | number;
+	tone?: Tone;
+}
+
+interface Props {
+	items: KeyValueItem[];
+	class?: string;
+}
+
+const {
+	items,
+	class: className,
+} = Astro.props as Props;
+---
+
+<dl class:list={['ts-key-value-list', className]}>
+	{items.map((item) => (
+		<div class="ts-key-value-list__item" data-tone={item.tone ?? 'default'}>
+			<dt>{item.key}</dt>
+			<dd>{item.value}</dd>
+		</div>
+	))}
+</dl>

package/dist/components/ui/data/MetricCard.astro

@@ -0,0 +1,25 @@
+---
+import type { Tone } from '../types.js';
+
+interface Props {
+	label: string;
+	value: string | number;
+	description?: string;
+	tone?: Tone;
+	class?: string;
+}
+
+const {
+	label,
+	value,
+	description,
+	tone = 'default',
+	class: className,
+} = Astro.props as Props;
+---
+
+<article class:list={['ts-metric-card', className]} data-tone={tone}>
+	<p class="ts-metric-card__label">{label}</p>
+	<p class="ts-metric-card__value">{value}</p>
+	{description ? <p class="ts-metric-card__description">{description}</p> : null}
+</article>

package/dist/components/ui/data/MetricGrid.astro

@@ -0,0 +1,27 @@
+---
+import MetricCard from './MetricCard.astro';
+import type { Tone } from '../types.js';
+
+interface MetricItem {
+	label: string;
+	value: string | number;
+	description?: string;
+	tone?: Tone;
+}
+
+interface Props {
+	metrics?: MetricItem[];
+	min?: string;
+	class?: string;
+}
+
+const {
+	metrics = [],
+	min = '12rem',
+	class: className,
+} = Astro.props as Props;
+---
+
+<div class:list={['ts-metric-grid', className]} style={`--ts-metric-grid-min: ${min}`}>
+	{metrics.length > 0 ? metrics.map((metric) => <MetricCard {...metric} />) : <slot />}
+</div>

package/dist/components/ui/data/StatusPill.astro

@@ -0,0 +1,20 @@
+---
+import type { Tone } from '../types.js';
+
+interface Props {
+	tone?: Tone;
+	label?: string;
+	class?: string;
+}
+
+const {
+	tone = 'default',
+	label,
+	class: className,
+} = Astro.props as Props;
+---
+
+<span class:list={['ts-status-pill', className]} data-tone={tone}>
+	<span class="ts-status-pill__dot" aria-hidden="true"></span>
+	<span><slot>{label}</slot></span>
+</span>

package/dist/components/ui/forms/Button.astro

@@ -0,0 +1,52 @@
+---
+import type { ButtonSize, ButtonVariant } from '../types.js';
+
+interface Props {
+	href?: string;
+	type?: 'button' | 'submit' | 'reset';
+	variant?: ButtonVariant;
+	size?: ButtonSize;
+	disabled?: boolean;
+	ariaLabel?: string;
+	class?: string;
+}
+
+const {
+	href,
+	type = 'button',
+	variant = 'primary',
+	size = 'md',
+	disabled = false,
+	ariaLabel,
+	class: className,
+} = Astro.props as Props;
+
+const classes = ['ts-button', className].filter(Boolean).join(' ');
+---
+
+{
+	href ? (
+		<a
+			href={disabled ? undefined : href}
+			class={classes}
+			data-variant={variant}
+			data-size={size}
+			aria-label={ariaLabel}
+			aria-disabled={disabled ? 'true' : undefined}
+			tabindex={disabled ? -1 : undefined}
+		>
+			<slot />
+		</a>
+	) : (
+		<button
+			type={type}
+			class={classes}
+			data-variant={variant}
+			data-size={size}
+			disabled={disabled}
+			aria-label={ariaLabel}
+		>
+			<slot />
+		</button>
+	)
+}

package/dist/components/ui/forms/Field.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+	label: string;
+	id?: string;
+	name?: string;
+	help?: string;
+	error?: string;
+	required?: boolean;
+	full?: boolean;
+	class?: string;
+}
+
+const {
+	label,
+	id,
+	name,
+	help,
+	error,
+	required = false,
+	full = false,
+	class: className,
+} = Astro.props as Props;
+
+const fieldId = id ?? name;
+const helpId = fieldId && help ? `${fieldId}-help` : undefined;
+const errorId = fieldId && error ? `${fieldId}-error` : undefined;
+---
+
+<div class:list={['ts-field', full && 'ts-field--full', className]}>
+	<label class="ts-field__label" for={fieldId}>
+		<span>{label}</span>
+		{required ? <span class="ts-field__required" aria-hidden="true">*</span> : null}
+	</label>
+	<div class="ts-field__control">
+		<slot helpId={helpId} errorId={errorId} describedBy={[helpId, errorId].filter(Boolean).join(' ') || undefined} />
+	</div>
+	{help ? <p class="ts-field__help" id={helpId}>{help}</p> : null}
+	{error ? <p class="ts-field__error" id={errorId}>{error}</p> : null}
+</div>

package/dist/components/ui/forms/FormActions.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+	align?: 'start' | 'end' | 'between';
+	class?: string;
+}
+
+const { align = 'end', class: className } = Astro.props as Props;
+---
+
+<div class:list={['ts-form-actions', `ts-form-actions--${align}`, className]}>
+	<slot />
+</div>

package/dist/components/ui/forms/PasswordMeter.astro

@@ -0,0 +1,80 @@
+---
+interface Props {
+	inputId?: string;
+	label?: string;
+	minLength?: number;
+	class?: string;
+}
+
+const {
+	inputId,
+	label = 'Password strength',
+	minLength = 12,
+	class: className,
+} = Astro.props as Props;
+---
+
+<div
+	class:list={['ts-password-meter', className]}
+	data-ts-password-meter
+	data-input-id={inputId}
+	data-min-length={minLength}
+>
+	<div class="ts-password-meter__header">
+		<span>{label}</span>
+		<span class="ts-password-meter__status" data-ts-password-meter-status>Not started</span>
+	</div>
+	<div class="ts-password-meter__track" aria-hidden="true">
+		<span class="ts-password-meter__bar" data-ts-password-meter-bar></span>
+	</div>
+	<ul class="ts-password-meter__rules">
+		<li data-ts-password-rule="length">Use at least {minLength} characters</li>
+		<li data-ts-password-rule="case">Mix upper and lower case letters</li>
+		<li data-ts-password-rule="number">Include a number</li>
+		<li data-ts-password-rule="symbol">Include a symbol</li>
+	</ul>
+</div>
+
+<script is:inline>
+	(() => {
+		function scorePassword(value, minLength) {
+			const checks = {
+				length: value.length >= minLength,
+				case: /[a-z]/.test(value) && /[A-Z]/.test(value),
+				number: /\d/.test(value),
+				symbol: /[^A-Za-z0-9]/.test(value),
+			};
+			return { checks, score: Object.values(checks).filter(Boolean).length };
+		}
+
+		function bindMeter(meter) {
+			if (!(meter instanceof HTMLElement)) return;
+			const minLength = Number(meter.dataset.minLength || 12);
+			const inputId = meter.dataset.inputId;
+			const input = inputId
+				? document.getElementById(inputId)
+				: meter.closest('form')?.querySelector('[data-ts-password-input], input[type="password"]');
+			if (!(input instanceof HTMLInputElement)) return;
+
+			const status = meter.querySelector('[data-ts-password-meter-status]');
+			const bar = meter.querySelector('[data-ts-password-meter-bar]');
+			const labels = ['Not started', 'Weak', 'Fair', 'Good', 'Strong'];
+
+			function update() {
+				const { checks, score } = scorePassword(input.value, minLength);
+				meter.dataset.strength = String(score);
+				if (status) status.textContent = input.value ? labels[score] : labels[0];
+				if (bar instanceof HTMLElement) bar.style.setProperty('--ts-password-strength', String(score));
+				for (const [rule, passed] of Object.entries(checks)) {
+					const item = meter.querySelector(`[data-ts-password-rule="${rule}"]`);
+					if (item instanceof HTMLElement) item.dataset.passed = passed ? 'true' : 'false';
+				}
+			}
+
+			input.addEventListener('input', update);
+			update();
+		}
+
+		document.querySelectorAll('[data-ts-password-meter]').forEach(bindMeter);
+	})();
+</script>

package/dist/components/ui/forms/RadioGroup.astro

@@ -0,0 +1,55 @@
+---
+interface RadioOption {
+	label: string;
+	value: string;
+	help?: string;
+	disabled?: boolean;
+}
+
+interface Props {
+	name: string;
+	legend: string;
+	value?: string;
+	options: RadioOption[];
+	required?: boolean;
+	class?: string;
+}
+
+const {
+	name,
+	legend,
+	value,
+	options,
+	required = false,
+	class: className,
+} = Astro.props as Props;
+---
+
+<fieldset class:list={['ts-radio-group', className]}>
+	<legend class="ts-radio-group__legend">
+		{legend}
+		{required ? <span class="ts-field__required" aria-hidden="true">*</span> : null}
+	</legend>
+	<div class="ts-radio-group__options">
+		{options.map((option) => {
+			const optionId = `${name}-${option.value}`;
+			return (
+				<label class="ts-radio-option" for={optionId} data-disabled={option.disabled ? 'true' : undefined}>
+					<input
+						id={optionId}
+						type="radio"
+						name={name}
+						value={option.value}
+						checked={option.value === value}
+						required={required}
+						disabled={option.disabled}
+					/>
+					<span class="ts-radio-option__body">
+						<span class="ts-radio-option__label">{option.label}</span>
+						{option.help ? <span class="ts-radio-option__help">{option.help}</span> : null}
+					</span>
+				</label>
+			);
+		})}
+	</div>
+</fieldset>

package/dist/components/ui/forms/Select.astro

@@ -0,0 +1,44 @@
+---
+interface SelectOption {
+	label: string;
+	value: string;
+	disabled?: boolean;
+}
+
+interface Props {
+	name: string;
+	id?: string;
+	value?: string;
+	options: SelectOption[];
+	required?: boolean;
+	disabled?: boolean;
+	ariaDescribedby?: string;
+	class?: string;
+}
+
+const {
+	name,
+	id = name,
+	value,
+	options,
+	required = false,
+	disabled = false,
+	ariaDescribedby,
+	class: className,
+} = Astro.props as Props;
+---
+
+<select
+	class:list={['ts-control', 'ts-control--select', className]}
+	id={id}
+	name={name}
+	required={required}
+	disabled={disabled}
+	aria-describedby={ariaDescribedby}
+>
+	{options.map((option) => (
+		<option value={option.value} selected={option.value === value} disabled={option.disabled}>
+			{option.label}
+		</option>
+	))}
+</select>

package/dist/components/ui/forms/TextInput.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+	name: string;
+	id?: string;
+	type?: 'text' | 'email' | 'url' | 'password' | 'search' | 'number' | 'tel';
+	value?: string | number;
+	placeholder?: string;
+	autocomplete?: string;
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	minlength?: number;
+	maxlength?: number;
+	pattern?: string;
+	inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+	ariaDescribedby?: string;
+	class?: string;
+	[key: string]: unknown;
+}
+
+const {
+	name,
+	id = name,
+	type = 'text',
+	value,
+	placeholder,
+	autocomplete,
+	required = false,
+	disabled = false,
+	readonly = false,
+	minlength,
+	maxlength,
+	pattern,
+	inputmode,
+	ariaDescribedby,
+	class: className,
+	...inputAttributes
+} = Astro.props as Props;
+---
+
+<input
+	{...inputAttributes}
+	class:list={['ts-control', className]}
+	id={id}
+	name={name}
+	type={type}
+	value={value}
+	placeholder={placeholder}
+	autocomplete={autocomplete}
+	required={required}
+	disabled={disabled}
+	readonly={readonly}
+	minlength={minlength}
+	maxlength={maxlength}
+	pattern={pattern}
+	inputmode={inputmode}
+	aria-describedby={ariaDescribedby}
+/>

package/dist/components/ui/forms/Textarea.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+	name: string;
+	id?: string;
+	value?: string;
+	placeholder?: string;
+	rows?: number;
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	minlength?: number;
+	maxlength?: number;
+	ariaDescribedby?: string;
+	class?: string;
+}
+
+const {
+	name,
+	id = name,
+	value,
+	placeholder,
+	rows = 4,
+	required = false,
+	disabled = false,
+	readonly = false,
+	minlength,
+	maxlength,
+	ariaDescribedby,
+	class: className,
+} = Astro.props as Props;
+---
+
+<textarea
+	class:list={['ts-control', 'ts-control--textarea', className]}
+	id={id}
+	name={name}
+	placeholder={placeholder}
+	rows={rows}
+	required={required}
+	disabled={disabled}
+	readonly={readonly}
+	minlength={minlength}
+	maxlength={maxlength}
+	aria-describedby={ariaDescribedby}
+>{value}</textarea>

package/dist/components/ui/layout/PageHeader.astro

@@ -0,0 +1,45 @@
+---
+import Button from '../forms/Button.astro';
+import type { ButtonAction } from '../types.js';
+
+interface Props {
+	eyebrow?: string;
+	title: string;
+	description?: string;
+	actions?: ButtonAction[];
+	class?: string;
+}
+
+const {
+	eyebrow,
+	title,
+	description,
+	actions = [],
+	class: className,
+} = Astro.props as Props;
+---
+
+<header class:list={['ts-page-header', className]}>
+	<div class="ts-page-header__content">
+		{eyebrow ? <p class="ts-page-header__eyebrow">{eyebrow}</p> : null}
+		<h1 class="ts-page-header__title">{title}</h1>
+		{description ? <p class="ts-page-header__description">{description}</p> : null}
+		<slot />
+	</div>
+	{actions.length > 0 || Astro.slots.has('actions') ? (
+		<div class="ts-page-header__actions">
+			{actions.map((action) => (
+				<Button
+					href={action.href}
+					type={action.type}
+					variant={action.variant ?? 'secondary'}
+					ariaLabel={action.ariaLabel}
+					disabled={action.disabled}
+				>
+					{action.label}
+				</Button>
+			))}
+			<slot name="actions" />
+		</div>
+	) : null}
+</header>