@torch-ui/solid 0.1.3

package/src/components/actions/Copy.tsx

@@ -0,0 +1,98 @@
+import { type JSX, splitProps } from 'solid-js'
+import { Copy as CopyIcon, Check } from 'lucide-solid'
+import { Button } from './Button'
+import type { ButtonVariant, ButtonSize } from './Button'
+import { useCopyToClipboard } from './useCopyToClipboard'
+import { cn } from '../../utilities/classNames'
+
+export type CopyDisplay = 'text' | 'icon-and-text' | 'icon-only'
+
+const filledVariants: ButtonVariant[] = ['primary', 'danger', 'success', 'warning']
+const borderlessVariants: ButtonVariant[] = ['ghost', 'link', 'danger-link']
+
+export interface CopyProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'href' | 'target' | 'rel'> {
+	/** Text to copy to clipboard. */
+	text: string
+	/** How to show the button: "Copy" only, icon + "Copy", or icon only. */
+	display?: CopyDisplay
+	/** Label when not copied. Default: "Copy" */
+	label?: string
+	/** Label after copy. Default: "Copied" */
+	copiedLabel?: string
+	/** Button visual variant. Default: outlined */
+	variant?: ButtonVariant
+	size?: ButtonSize
+	class?: string
+	/** Called after successful copy. */
+	onCopied?: () => void
+}
+
+/**
+ * Button that copies the given text to the clipboard and shows visual feedback when copied.
+ * Use display="text" | "icon-and-text" | "icon-only" for word only, icon + word, or icon only.
+ */
+export function Copy(props: CopyProps) {
+	const [copy, copied] = useCopyToClipboard()
+	const [local, rest] = splitProps(props, [
+		'text',
+		'display',
+		'label',
+		'copiedLabel',
+		'variant',
+		'size',
+		'class',
+		'onCopied',
+	])
+	const [, others] = splitProps(rest, ['onChange'])
+
+	async function handleClick() {
+		const ok = await copy(local.text)
+		if (ok) local.onCopied?.()
+	}
+
+	const display = () => local.display ?? 'icon-and-text'
+	const label = () => {
+		const v = (local.label ?? 'Copy').trim()
+		return v || 'Copy'
+	}
+	const copiedLabel = () => {
+		const v = (local.copiedLabel ?? 'Copied').trim()
+		return v || 'Copied'
+	}
+	const isIconOnly = () => display() === 'icon-only'
+	const showIcon = () => display() === 'icon-and-text' || display() === 'icon-only'
+
+	const checkIcon = () => (
+		<Check class="h-4 w-4 shrink-0" aria-hidden />
+	)
+	const copyIcon = () => <CopyIcon class="h-4 w-4 shrink-0" aria-hidden />
+	const currentVariant = () => local.variant ?? 'outlined'
+	const resolvedVariant = (): ButtonVariant =>
+		copied()
+			? filledVariants.includes(currentVariant())
+				? 'success'
+				: 'success-outline'
+			: currentVariant()
+	/** When copied, ghost/link stay borderless (success-outline has a border; we remove it). */
+	const copiedClass = () =>
+		copied() && borderlessVariants.includes(currentVariant())
+			? '!border-0'
+			: ''
+
+	return (
+		<Button
+			type="button"
+			variant={resolvedVariant()}
+			size={local.size ?? 'sm'}
+			iconOnly={isIconOnly()}
+			icon={isIconOnly() ? (copied() ? checkIcon() : copyIcon()) : undefined}
+			startIcon={!isIconOnly() && showIcon() ? (copied() ? checkIcon() : copyIcon()) : undefined}
+			label={copied() ? copiedLabel() : label()}
+			class={cn('shrink-0', copiedClass(), local.class)}
+			title={isIconOnly() ? (copied() ? copiedLabel() : label()) : undefined}
+			aria-label={isIconOnly() ? (copied() ? copiedLabel() : label()) : undefined}
+			onClick={handleClick}
+			{...(others as Partial<import('./Button').ButtonProps>)}
+		/>
+	)
+}

package/src/components/actions/DarkModeToggle.tsx

@@ -0,0 +1,80 @@
+import { createSignal, onMount, Show } from 'solid-js'
+import { Sun, Moon } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+
+export interface DarkModeToggleProps {
+	/** Visual style. 'icon' renders a button with sun/moon icon (default). 'switch' renders a pill toggle. */
+	variant?: 'icon' | 'switch'
+	/** Extra classes on the root element */
+	class?: string
+	/** Element to toggle the dark class on. Defaults to document.documentElement (the html element) */
+	target?: () => HTMLElement
+}
+
+export function DarkModeToggle(props: DarkModeToggleProps) {
+	const [dark, setDark] = createSignal(false)
+
+	onMount(() => {
+		const stored = localStorage.getItem('torch-theme')
+		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+		const isDark = stored ? stored === 'dark' : prefersDark
+		setDark(isDark)
+		;(props.target?.() ?? document.documentElement).classList.toggle('dark', isDark)
+	})
+
+	function toggle() {
+		const next = !dark()
+		setDark(next)
+		;(props.target?.() ?? document.documentElement).classList.toggle('dark', next)
+		localStorage.setItem('torch-theme', next ? 'dark' : 'light')
+	}
+
+	const variant = () => props.variant ?? 'icon'
+
+	return (
+		<Show
+			when={variant() === 'switch'}
+			fallback={
+				<button
+					type="button"
+					onClick={toggle}
+					aria-label={dark() ? 'Switch to light mode' : 'Switch to dark mode'}
+					aria-pressed={dark()}
+					class={cn(
+						'inline-flex items-center justify-center rounded-lg p-2 text-ink-500 transition-colors',
+						'hover:bg-surface-overlay hover:text-ink-700',
+						'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+						props.class,
+					)}
+				>
+					{dark() ? <Sun class="h-4 w-4" /> : <Moon class="h-4 w-4" />}
+				</button>
+			}
+		>
+			<button
+				type="button"
+				role="switch"
+				onClick={toggle}
+				aria-checked={dark()}
+				aria-label={dark() ? 'Switch to light mode' : 'Switch to dark mode'}
+				class={cn(
+					'relative inline-flex h-7 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200',
+					'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2',
+					dark() ? 'bg-primary-500' : 'bg-surface-dim',
+					props.class,
+				)}
+			>
+				<span
+					class={cn(
+						'pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-white shadow-sm ring-0 transition-transform duration-200',
+						dark() ? 'translate-x-7' : 'translate-x-0',
+					)}
+				>
+					{dark()
+						? <Moon class="h-3 w-3 text-primary-600" />
+						: <Sun class="h-3 w-3 text-ink-400" />}
+				</span>
+			</button>
+		</Show>
+	)
+}

package/src/components/actions/Link.tsx

@@ -0,0 +1,37 @@
+import { type JSX, splitProps } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export type LinkVariant = 'primary' | 'muted'
+
+export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+	/** Visual style. Default: "primary" */
+	variant?: LinkVariant
+	children?: JSX.Element
+}
+
+const linkVariants: Record<LinkVariant, string> = {
+	primary:
+		'text-primary-500 font-medium hover:text-primary-600 hover:underline hover:underline-offset-4 focus-visible:ring-primary-500/50 dark:text-primary-400 dark:hover:text-primary-300',
+	muted:
+		'text-ink-500 hover:text-ink-700 dark:hover:text-ink-300 hover:underline hover:underline-offset-4 focus-visible:ring-ink-300/50 dark:focus-visible:ring-ink-500/50',
+}
+
+/** Styled anchor link with primary and muted variants. */
+export function Link(props: LinkProps) {
+	const [local, others] = splitProps(props, ['variant', 'class', 'children'])
+
+	const variant = () => local.variant ?? 'primary'
+
+	return (
+		<a
+			class={cn(
+				'inline outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-surface-base rounded',
+				linkVariants[variant()],
+				local.class
+			)}
+			{...others}
+		>
+			{local.children}
+		</a>
+	)
+}

package/src/components/actions/index.ts

@@ -0,0 +1,19 @@
+/** Actions: Button, Button Group, Copy, Link, DarkModeToggle */
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button'
+
+export {
+	ButtonGroup,
+	type ButtonGroupProps,
+	type ButtonGroupMainProps,
+	type ButtonGroupMenuProps,
+	type ButtonGroupMenuSlot,
+	type ToggleGroupOption,
+} from './ButtonGroup'
+
+export { Copy, type CopyProps, type CopyDisplay } from './Copy'
+
+export { useCopyToClipboard } from './useCopyToClipboard'
+
+export { Link, type LinkProps, type LinkVariant } from './Link'
+
+export { DarkModeToggle, type DarkModeToggleProps } from './DarkModeToggle'

package/src/components/actions/useCopyToClipboard.ts

@@ -0,0 +1,90 @@
+import { createSignal, onCleanup } from 'solid-js'
+
+const COPIED_RESET_MS = 2000
+
+const hasAsyncClipboard = () =>
+    typeof navigator !== 'undefined' &&
+    !!navigator.clipboard &&
+    typeof navigator.clipboard.writeText === 'function'
+
+/**
+ * Copy text to clipboard and show "copied" feedback for a short time.
+ * Returns [copy, copied, status] where status is 'idle' | 'copied' | 'error'.
+ */
+export function useCopyToClipboard(): [
+    (text: string) => Promise<boolean>,
+    () => boolean,
+    () => 'idle' | 'copied' | 'error',
+] {
+    const [copied, setCopied] = createSignal(false)
+    const [status, setStatus] = createSignal<'idle' | 'copied' | 'error'>('idle')
+    let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+    function setCopiedWithReset() {
+        if (timeoutId) clearTimeout(timeoutId)
+        setCopied(true)
+        setStatus('copied')
+        timeoutId = setTimeout(() => {
+            setCopied(false)
+            setStatus('idle')
+            timeoutId = undefined
+        }, COPIED_RESET_MS)
+    }
+
+    function setError() {
+        if (timeoutId) clearTimeout(timeoutId)
+        setCopied(false)
+        setStatus('error')
+        timeoutId = setTimeout(() => {
+            setStatus('idle')
+            timeoutId = undefined
+        }, COPIED_RESET_MS)
+    }
+
+    onCleanup(() => {
+        if (timeoutId) clearTimeout(timeoutId)
+    })
+
+    /** execCommand fallback for older browsers / non-HTTPS / WebViews. */
+    function fallbackCopy(text: string): boolean {
+        if (typeof document === 'undefined' || !document.body) return false
+        const ta = document.createElement('textarea')
+        ta.value = text
+        ta.setAttribute('readonly', '')
+        ta.style.position = 'fixed'
+        ta.style.left = '-9999px'
+        ta.style.opacity = '0'
+        document.body.appendChild(ta)
+        try {
+            ta.focus()
+            ta.select()
+            ta.setSelectionRange(0, ta.value.length)
+            return document.execCommand('copy')
+        } catch {
+            return false
+        } finally {
+            ta.parentNode?.removeChild(ta)
+        }
+    }
+
+    async function copy(text: string): Promise<boolean> {
+        if (hasAsyncClipboard()) {
+            try {
+                await navigator.clipboard.writeText(text)
+                setCopiedWithReset()
+                return true
+            } catch {
+                /* Permission denied or gesture requirement — try fallback. */
+            }
+        }
+        const ok = fallbackCopy(text)
+        if (ok) {
+            setCopiedWithReset()
+        } else {
+            setError()
+        }
+        return ok
+    }
+
+    return [copy, copied, status]
+}

package/src/components/charts/Chart.tsx

@@ -0,0 +1,331 @@
+import { onMount, onCleanup, createEffect, createSignal, createRoot, splitProps } from 'solid-js'
+import type { ChartConfiguration } from 'chart.js'
+import { cn } from '../../utilities/classNames'
+
+export type ChartType = 'line' | 'bar' | 'doughnut' | 'pie' | 'radar' | 'polarArea' | 'scatter' | 'bubble'
+
+/** Point for scatter charts (x, y) or bubble charts (x, y, r = radius). */
+export type ScatterPoint = { x: number; y: number }
+export type BubblePoint = { x: number; y: number; r: number }
+
+export interface ChartDataset {
+	label: string
+	/** For line/bar/pie/doughnut/radar/polarArea: number[]. For scatter: ScatterPoint[]. For bubble: BubblePoint[]. */
+	data: number[] | ScatterPoint[] | BubblePoint[]
+	backgroundColor?: string | string[]
+	borderColor?: string | string[]
+}
+
+export interface ChartData {
+	/** For scatter/bubble can be empty []. For other types, one label per data point. */
+	labels: string[]
+	datasets: ChartDataset[]
+}
+
+export interface ChartProps {
+	/** Chart type: line, bar, doughnut, pie, radar, polarArea, scatter, or bubble */
+	type: ChartType
+	/** Chart data: labels and datasets */
+	data: ChartData
+	/** When type is 'line', fill area under the line. Default false. Same idea as Sparkline fill. */
+	fill?: boolean
+	/** Optional Chart.js options override (merged with defaults) */
+	options?: ChartConfiguration<ChartType>['options']
+	/** Accessible label for the chart wrapper. When provided, the chart is exposed to assistive tech. */
+	'aria-label'?: string
+	/** ID of an element that labels the chart. When provided, the chart is exposed to assistive tech. */
+	'aria-labelledby'?: string
+	class?: string
+}
+
+/** Reads current theme from body class. */
+function isDark(): boolean {
+	if (typeof document === 'undefined') return false
+	return document.body.classList.contains('dark')
+}
+
+/** Shared dark-mode signal — one MutationObserver for all Chart instances.
+ *  Created inside createRoot so the signal is ownerless/global and not tied
+ *  to the reactive root of whichever component first calls getSharedDark(). */
+let sharedDarkSignal: { dark: () => boolean; subscribe: () => void; unsubscribe: () => void } | null = null
+let sharedDarkRefCount = 0
+
+function getSharedDark() {
+	if (!sharedDarkSignal) {
+		createRoot(() => {
+			const [dark, setDark] = createSignal(isDark())
+			let observer: MutationObserver | null = null
+			sharedDarkSignal = {
+				dark,
+				subscribe() {
+					sharedDarkRefCount++
+					if (sharedDarkRefCount === 1 && typeof document !== 'undefined') {
+						observer = new MutationObserver(() => setDark(isDark()))
+						observer.observe(document.body, { attributes: true, attributeFilter: ['class'] })
+					}
+				},
+				unsubscribe() {
+					sharedDarkRefCount--
+					if (sharedDarkRefCount <= 0 && observer) {
+						observer.disconnect()
+						observer = null
+						sharedDarkRefCount = 0
+					}
+				},
+			}
+		})
+	}
+	return sharedDarkSignal!
+}
+
+const THEME = {
+	gridColor: (dark: boolean) => (dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'),
+	tickColor: (dark: boolean) => (dark ? '#a1a1aa' : '#52525b'),
+	textColor: (dark: boolean) => (dark ? '#e4e4e7' : '#18181b'),
+	subtitleColor: (dark: boolean) => (dark ? '#a1a1aa' : '#52525b'),
+	tooltipBg: (dark: boolean) => (dark ? '#1e2328' : '#ffffff'),
+	tooltipBorder: (dark: boolean) => (dark ? '#3f3f46' : '#e4e4e7'),
+}
+
+/** Theme-aware options for plugins (legend, title, tooltip) and scale colors. Merged so charts read well in light/dark. */
+function getThemeOptions(dark: boolean, type: ChartType): ChartConfiguration<ChartType>['options'] {
+	const textColor = THEME.textColor(dark)
+	const opts: ChartConfiguration<ChartType>['options'] = {
+		plugins: {
+			legend: { labels: { color: textColor } },
+			title: { color: textColor },
+			subtitle: { color: THEME.subtitleColor(dark) },
+			tooltip: {
+				titleColor: textColor,
+				bodyColor: textColor,
+				backgroundColor: THEME.tooltipBg(dark),
+				borderColor: THEME.tooltipBorder(dark),
+				borderWidth: 1,
+			},
+		},
+	}
+	const gridColor = THEME.gridColor(dark)
+	const tickColor = THEME.tickColor(dark)
+	if (type === 'line' || type === 'bar' || type === 'scatter' || type === 'bubble') {
+		opts.scales = {
+			x: { grid: { color: gridColor }, ticks: { color: tickColor } },
+			y: { grid: { color: gridColor }, ticks: { color: tickColor } },
+		}
+	}
+	if (type === 'radar' || type === 'polarArea') {
+		opts.scales = {
+			r: { grid: { color: gridColor }, ticks: { color: tickColor, backdropColor: 'transparent' } },
+		}
+	}
+	return opts
+}
+
+/** Segment border style for doughnut/pie so lines are visible in light and dark mode */
+function getSegmentBorderForMode(dark: boolean): { borderColor: string; borderWidth: number } {
+	return dark
+		? { borderColor: 'rgba(255,255,255,0.25)', borderWidth: 1 }
+		: { borderColor: 'rgba(0,0,0,0.08)', borderWidth: 1 }
+}
+
+function applySegmentBorders(
+	chartInstance: import('chart.js').Chart,
+	type: ChartType,
+	dark: boolean
+): void {
+	if (type !== 'doughnut' && type !== 'pie') return
+	const { borderColor, borderWidth } = getSegmentBorderForMode(dark)
+	chartInstance.data.datasets.forEach((ds) => {
+		const len = 'data' in ds && Array.isArray(ds.data) ? ds.data.length : 0
+		;(ds as { borderColor?: string | string[]; borderWidth?: number }).borderColor = Array(len).fill(borderColor)
+		;(ds as { borderWidth?: number }).borderWidth = borderWidth
+	})
+	chartInstance.update('none')
+}
+
+function buildConfig(
+	type: ChartType,
+	data: ChartData,
+	dark: boolean,
+	optionsOverride?: ChartConfiguration<ChartType>['options'],
+	lineFill?: boolean
+): ChartConfiguration<ChartType> {
+	const segmentBorder =
+		type === 'doughnut' || type === 'pie' ? getSegmentBorderForMode(dark) : null
+	const isLine = type === 'line'
+	const themeOpts = getThemeOptions(dark, type)
+	const gridColor = THEME.gridColor(dark)
+	const tickColor = THEME.tickColor(dark)
+	const isScatterOrBubble = type === 'scatter' || type === 'bubble'
+	// Chart.js generics are loose — ChartConfiguration<ChartType>['data']['datasets'] is a union of
+	// all chart-type dataset arrays. We infer the element type so individual dataset objects can be
+	// built without casting to the full union. The `as DatasetItem` casts below are safe because
+	// buildConfig is always called with a concrete type that matches the dataset shape.
+	type ChartDataConfig = ChartConfiguration<ChartType>['data']
+	type DatasetItem = NonNullable<ChartDataConfig>['datasets'] extends (infer D)[] ? D : never
+	const datasets: DatasetItem[] = data.datasets.map((ds) => {
+		if (isScatterOrBubble) {
+			return {
+				label: ds.label,
+				data: ds.data,
+				backgroundColor: ds.backgroundColor,
+				borderColor: ds.borderColor,
+			} as DatasetItem
+		}
+		const len = (ds.data as number[]).length
+		const out: Record<string, unknown> = {
+			label: ds.label,
+			data: ds.data,
+			backgroundColor: ds.backgroundColor,
+			borderColor: ds.borderColor,
+			borderWidth: isLine ? 2 : segmentBorder?.borderWidth ?? 1,
+			tension: isLine ? 0.3 : 0,
+			fill: isLine ? (lineFill ?? false) : undefined,
+		}
+		if (segmentBorder && !ds.borderColor) {
+			out.borderColor = Array(len).fill(segmentBorder.borderColor)
+		}
+		return out as unknown as DatasetItem
+	})
+	const base: ChartConfiguration<ChartType> = {
+		type,
+		data: {
+			labels: data.labels,
+			datasets,
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			plugins: {
+				...(themeOpts?.plugins ?? {}),
+				legend: { position: 'bottom' as const, ...(themeOpts?.plugins?.legend ?? {}) },
+			},
+			...(isLine || type === 'bar'
+				? {
+						scales: {
+							x: { grid: { display: false, color: gridColor }, ticks: { color: tickColor } },
+							y: { beginAtZero: true, grace: '5%', grid: { color: gridColor }, ticks: { color: tickColor } },
+						},
+					}
+				: {}),
+			...(isScatterOrBubble
+				? {
+						scales: {
+							x: { type: 'linear' as const, grid: { color: gridColor }, ticks: { color: tickColor } },
+							y: { type: 'linear' as const, beginAtZero: true, grace: '5%', grid: { color: gridColor }, ticks: { color: tickColor } },
+						},
+					}
+				: {}),
+			...(type === 'radar' || type === 'polarArea' ? { scales: themeOpts?.scales } : {}),
+			...optionsOverride,
+		},
+	}
+	return base
+}
+
+/**
+ * Chart.js wrapper with automatic dark-mode theming. Renders to canvas which is
+ * inherently inaccessible — consumers should provide an accessible alternative
+ * (caption, summary text, or data table) when the chart conveys meaningful data.
+ */
+export function Chart(props: ChartProps) {
+	const [local] = splitProps(props, ['type', 'data', 'fill', 'options', 'aria-label', 'aria-labelledby', 'class'])
+	let canvasEl: HTMLCanvasElement | undefined
+	let chartInstance: import('chart.js').Chart | null = null
+	let ChartConstructor: typeof import('chart.js').Chart | null = null
+	const [chartReady, setChartReady] = createSignal(false)
+	const sharedDark = getSharedDark()
+	const dark = sharedDark.dark
+	let currentType: ChartType = local.type
+
+	function destroyChart() {
+		if (chartInstance) {
+			chartInstance.destroy()
+			chartInstance = null
+		}
+	}
+
+	function createChart(type: ChartType) {
+		if (!canvasEl || !ChartConstructor) return
+		destroyChart()
+		const config = buildConfig(type, local.data, dark(), local.options, local.fill)
+		chartInstance = new ChartConstructor(canvasEl, config as ChartConfiguration<ChartType>)
+		if (type === 'doughnut' || type === 'pie') {
+			applySegmentBorders(chartInstance, type, dark())
+		}
+		currentType = type
+	}
+
+	onMount(async () => {
+		if (!canvasEl) return
+		const mod = await import('chart.js/auto')
+		ChartConstructor = mod.Chart
+		createChart(local.type)
+		sharedDark.subscribe()
+		setChartReady(true)
+	})
+
+	// Single update path for data, options, fill, type, and theme changes.
+	createEffect(() => {
+		if (!chartReady()) return
+		const currentDark = dark()
+		const opts = local.options
+		const fill = local.fill
+		const type = local.type
+
+		// Type changed — must destroy + recreate (Chart.js requirement).
+		if (type !== currentType) {
+			createChart(type)
+			return
+		}
+
+		const ci = chartInstance
+		if (!ci) return
+
+		// Empty datasets — clear the chart.
+		if (!local.data.datasets.length) {
+			ci.data.labels = []
+			ci.data.datasets = []
+			ci.update('none')
+			return
+		}
+
+		const config = buildConfig(type, local.data, currentDark, opts, fill)
+		ci.options = config.options!
+		ci.data.labels = local.data.labels
+		ci.data.datasets = local.data.datasets.map((ds, i) => {
+			const prev = ci.data.datasets[i] as unknown as Record<string, unknown> | undefined
+			return {
+				...(prev ?? {}),
+				label: ds.label,
+				data: ds.data,
+				backgroundColor: ds.backgroundColor,
+				borderColor: ds.borderColor,
+				fill: type === 'line' ? (fill ?? false) : undefined,
+			}
+		})
+		if (type === 'doughnut' || type === 'pie') {
+			applySegmentBorders(ci, type, currentDark)
+		} else {
+			ci.update('none')
+		}
+	})
+
+	onCleanup(() => {
+		sharedDark.unsubscribe()
+		destroyChart()
+	})
+
+	const hasAccessibleName = () => !!local['aria-label'] || !!local['aria-labelledby']
+
+	return (
+		<div
+			class={cn('h-full w-full min-h-[200px]', local.class)}
+			aria-hidden={hasAccessibleName() ? undefined : 'true'}
+			aria-label={local['aria-label']}
+			aria-labelledby={local['aria-labelledby']}
+			role={hasAccessibleName() ? 'img' : undefined}
+		>
+			<canvas ref={canvasEl} />
+		</div>
+	)
+}