compote-ui 0.32.0 → 0.33.0

package/dist/components/data-table/data-table.svelte

@@ -0,0 +1,342 @@
+<script lang="ts" generics="TData extends RowData, TSelected = object">
+	import { useLocaleContext } from '@ark-ui/svelte/locale';
+	import { FlexRender } from '@tanstack/svelte-table';
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import { PhArrowSquareOut, PhCaretDown, PhCaretUp } from '../../icons';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Header, RowData } from '@tanstack/svelte-table';
+	import {
+		getDataTableCellConfig,
+		hasCustomDataTableCell,
+		type DataTable,
+		type DataTableCell,
+		type DataTableCellConfig,
+		type DataTableColumnAlign,
+		type DataTableColumnMeta,
+		type DataTableFeatures
+	} from './core';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+		table: DataTable<TData, TSelected>;
+		class?: ClassValue;
+		tableClass?: ClassValue;
+	};
+
+	let { table, class: className, tableClass, ...rest }: Props = $props();
+
+	const locale = useLocaleContext();
+	const columnCount = $derived(table.getVisibleLeafColumns().length);
+	const headerGroupCount = $derived(table.getHeaderGroups().length);
+	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
+	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
+	const tableColumnCount = $derived(columnCount + (isRowSelectionEnabled ? 1 : 0));
+	const allRowsSelected = $derived(table.getIsAllRowsSelected());
+	const someRowsSelected = $derived(table.getIsSomeRowsSelected());
+	const allRowsSelectionState = $derived(
+		allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false
+	);
+	const rowSelectionColumnSize = 40;
+	const tableSize = $derived(
+		table.getTotalSize() + (isRowSelectionEnabled ? rowSelectionColumnSize : 0)
+	);
+	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
+
+	function formatNumericValue(
+		value: unknown,
+		options: Intl.NumberFormatOptions & { locale?: string }
+	) {
+		if (typeof value !== 'number') return formatTextValue(value);
+		const { locale: optionLocale, ...numberFormatOptions } = options;
+		return new Intl.NumberFormat(optionLocale ?? locale().locale, numberFormatOptions).format(
+			value
+		);
+	}
+
+	function formatTextValue(value: unknown, fallback = '') {
+		if (value === null || value === undefined || value === '') return fallback;
+		return String(value);
+	}
+
+	function fractionOptions(options: { fractionDigits?: number }) {
+		if (options.fractionDigits === undefined) return {};
+
+		return {
+			minimumFractionDigits: options.fractionDigits,
+			maximumFractionDigits: options.fractionDigits
+		};
+	}
+
+	function isNumericCellConfig(cellConfig: DataTableCellConfig<TData> | undefined) {
+		return (
+			cellConfig?.type === 'number' ||
+			cellConfig?.type === 'currency' ||
+			cellConfig?.type === 'percentage'
+		);
+	}
+
+	function getLinkHref<TValue>(
+		cell: DataTableCell<TData, TValue>,
+		href: string | ((value: TValue, row: TData) => string) | undefined
+	) {
+		const value = cell.getValue();
+		if (!href) return formatTextValue(value);
+		return typeof href === 'function' ? href(value, cell.row.original) : href;
+	}
+
+	function getLinkLabel(value: unknown, fallback = 'Open link') {
+		return formatTextValue(value, fallback);
+	}
+
+	function getCellMeta<TValue>(cell: DataTableCell<TData, TValue>) {
+		return (cell.column.columnDef.meta as DataTableColumnMeta<TData, TValue> | undefined)
+			?.dataTable;
+	}
+
+	function getHeaderMeta(header: Header<DataTableFeatures, TData, unknown>) {
+		return header.column.columnDef.meta as DataTableColumnMeta<TData> | undefined;
+	}
+
+	function getColumnAlign(
+		align: DataTableColumnAlign | undefined,
+		cellConfig: DataTableCellConfig<TData> | undefined
+	) {
+		return align ?? (isNumericCellConfig(cellConfig) ? 'right' : 'left');
+	}
+
+	function alignClass(align: DataTableColumnAlign | undefined) {
+		return {
+			left: 'text-left',
+			center: 'text-center',
+			right: 'text-right'
+		}[align ?? 'left'];
+	}
+
+	function justifyClass(align: DataTableColumnAlign | undefined) {
+		return {
+			left: 'justify-start',
+			center: 'justify-center',
+			right: 'justify-end'
+		}[align ?? 'left'];
+	}
+
+	function sortButtonDirectionClass(align: DataTableColumnAlign | undefined) {
+		return align === 'right' ? 'flex-row-reverse' : 'flex-row';
+	}
+
+	function columnSizeStyle(size: number) {
+		return `width: ${size}px`;
+	}
+
+	function tableSizeStyle() {
+		return `width: max(100%, ${tableSize}px)`;
+	}
+
+	function resizeHandleStyle(header: Header<DataTableFeatures, TData, unknown>) {
+		if (table.options.columnResizeMode !== 'onEnd') return undefined;
+		const deltaOffset = table.store.state.columnResizing.deltaOffset;
+		if (!header.column.getIsResizing() || deltaOffset === null) return undefined;
+		return `transform: translateX(${deltaOffset}px)`;
+	}
+
+	function getHeaderSortDirection(
+		header: Header<DataTableFeatures, TData, unknown>,
+		sortingState: unknown
+	) {
+		void sortingState;
+		return header.column.getIsSorted();
+	}
+
+	function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc') {
+		if (sortDirection === 'asc') return 'Sorted ascending';
+		if (sortDirection === 'desc') return 'Sorted descending';
+		return 'Not sorted';
+	}
+
+	function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc') {
+		if (sortDirection === 'asc') return 'ascending';
+		if (sortDirection === 'desc') return 'descending';
+		return 'none';
+	}
+</script>
+
+<div
+	class={cn('max-h-full min-h-0 overflow-auto rounded-lg border border-surface-3', className)}
+	{...rest}
+>
+	{#if isColumnResizing}
+		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
+	{/if}
+
+	<table class={cn('table-fixed border-collapse text-sm', tableClass)} style={tableSizeStyle()}>
+		<colgroup>
+			{#if isRowSelectionEnabled}
+				<col style={columnSizeStyle(rowSelectionColumnSize)} />
+			{/if}
+			{#each table.getVisibleLeafColumns() as column (column.id)}
+				<col style={columnSizeStyle(column.getSize())} />
+			{/each}
+		</colgroup>
+		<thead class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim">
+			{#each table.getHeaderGroups() as headerGroup, headerGroupIndex (headerGroup.id)}
+				<tr>
+					{#if isRowSelectionEnabled && headerGroupIndex === 0}
+						<th
+							class="border-b border-surface-3 bg-surface-2 px-3 py-2 text-center align-middle font-medium"
+							rowspan={headerGroupCount}
+						>
+							{#if isMultiRowSelectionEnabled}
+								<Checkbox
+									size="sm"
+									aria-label="Select all rows"
+									class="mx-auto size-4"
+									checked={allRowsSelectionState}
+									onCheckedChange={({ checked }) => table.toggleAllRowsSelected(checked === true)}
+								/>
+							{/if}
+						</th>
+					{/if}
+					{#each headerGroup.headers as header (header.id)}
+						{@const headerMeta = getHeaderMeta(header)?.dataTable}
+						{@const headerAlign = getColumnAlign(headerMeta?.align, headerMeta?.cell)}
+						{@const sortDirection = getHeaderSortDirection(header, table.store.state.sorting)}
+						<th
+							class={cn(
+								'relative border-b border-surface-3 bg-surface-2 px-3 py-2 font-medium',
+								alignClass(headerAlign)
+							)}
+							colspan={header.colSpan}
+							aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
+						>
+							{#if !header.isPlaceholder}
+								{#if header.column.getCanSort()}
+									<button
+										type="button"
+										class={cn(
+											'inline-flex max-w-full items-center gap-1 rounded-sm outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
+											justifyClass(headerAlign),
+											sortButtonDirectionClass(headerAlign)
+										)}
+										aria-label={`${getHeaderSortLabel(sortDirection)}. Toggle sorting.`}
+										onclick={header.column.getToggleSortingHandler()}
+									>
+										<span class="min-w-0 truncate">
+											<FlexRender {header} />
+										</span>
+										<span
+											class="inline-flex size-3.5 shrink-0 items-center justify-center text-ink-dim"
+										>
+											{#if sortDirection === 'asc'}
+												<PhCaretUp class="size-3.5" />
+											{:else if sortDirection === 'desc'}
+												<PhCaretDown class="size-3.5" />
+											{/if}
+										</span>
+									</button>
+								{:else}
+									<FlexRender {header} />
+								{/if}
+							{/if}
+							{#if header.column.getCanResize()}
+								<div
+									aria-hidden="true"
+									class={cn(
+										'absolute top-0 -right-1 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none before:h-4 before:w-px before:bg-border before:content-[""]'
+									)}
+									style={resizeHandleStyle(header)}
+									ondblclick={() => header.column.resetSize()}
+									onmousedown={header.getResizeHandler()}
+									ontouchstart={header.getResizeHandler()}
+								></div>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			{/each}
+		</thead>
+		<tbody>
+			{#each table.getRowModel().rows as row (row.id)}
+				<tr class="border-b border-surface-3 last:border-b-0">
+					{#if isRowSelectionEnabled}
+						<td class="px-3 py-2 text-center align-middle">
+							<Checkbox
+								size="sm"
+								aria-label="Select row"
+								class="mx-auto size-4"
+								checked={row.getIsSelected()}
+								disabled={!row.getCanSelect()}
+								onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
+							/>
+						</td>
+					{/if}
+					{#each row.getVisibleCells() as cell (cell.id)}
+						{@const cellMeta = getCellMeta(cell)}
+						{@const cellConfig = getDataTableCellConfig(cell)}
+						{@const cellAlign = getColumnAlign(cellMeta?.align, cellConfig)}
+						<td
+							class={cn(
+								'px-3 py-2',
+								alignClass(cellAlign),
+								isNumericCellConfig(cellConfig) && 'tabular-nums'
+							)}
+						>
+							{#if cellConfig && !hasCustomDataTableCell(cell)}
+								{@const value = cell.getValue()}
+								{#if cellConfig.type === 'number'}
+									{formatNumericValue(value, {
+										...cellConfig,
+										...fractionOptions(cellConfig)
+									})}
+								{:else if cellConfig.type === 'currency'}
+									{formatNumericValue(value, {
+										...cellConfig,
+										...fractionOptions(cellConfig),
+										style: 'currency'
+									})}
+								{:else if cellConfig.type === 'percentage'}
+									{formatNumericValue(value, {
+										...cellConfig,
+										...fractionOptions(cellConfig),
+										style: 'percent'
+									})}
+								{:else if cellConfig.type === 'boolean'}
+									{value === true
+										? (cellConfig.trueLabel ?? 'Yes')
+										: value === false
+											? (cellConfig.falseLabel ?? 'No')
+											: (cellConfig.nullLabel ?? '')}
+								{:else if cellConfig.type === 'link'}
+									{@const href = getLinkHref(cell, cellConfig.href)}
+									{#if href}
+										<a
+											class="inline-flex size-7 items-center justify-center rounded-md text-primary hover:bg-surface-2"
+											{href}
+											target={cellConfig.target ?? '_blank'}
+											rel="external noreferrer"
+											aria-label={getLinkLabel(value, cellConfig.fallback)}
+											title={getLinkLabel(value, cellConfig.fallback)}
+										>
+											<PhArrowSquareOut class="size-4" />
+										</a>
+									{:else}
+										{formatTextValue(value, cellConfig.fallback)}
+									{/if}
+								{:else}
+									{formatTextValue(value, cellConfig.fallback)}
+								{/if}
+							{:else}
+								<FlexRender {cell} />
+							{/if}
+						</td>
+					{/each}
+				</tr>
+			{:else}
+				<tr>
+					<td class="px-3 py-6 text-center text-ink-dim" colspan={tableColumnCount}>
+						No results.
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>

package/dist/components/data-table/data-table.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type ClassValue } from 'tailwind-variants';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { RowData } from '@tanstack/svelte-table';
+import { type DataTable } from './core';
+declare function $$render<TData extends RowData, TSelected = object>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+        table: DataTable<TData, TSelected>;
+        class?: ClassValue;
+        tableClass?: ClassValue;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData, TSelected = object> {
+    props(): ReturnType<typeof $$render<TData, TSelected>>['props'];
+    events(): ReturnType<typeof $$render<TData, TSelected>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TSelected>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends RowData, TSelected = object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TSelected>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TSelected>['props']>, ReturnType<__sveltets_Render<TData, TSelected>['events']>, ReturnType<__sveltets_Render<TData, TSelected>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TSelected>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
+    <TData extends RowData, TSelected = object>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TSelected>['props']> & {}): ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<TData extends RowData, TSelected = object> = InstanceType<typeof DataTable<TData, TSelected>>;
+export default DataTable;

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Root } from './data-table.svelte';
+export { default as Toolbar } from './data-table-toolbar.svelte';
+export { default as Title } from './data-table-title.svelte';
+export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
+export { default as Filters } from './data-table-filters.svelte';
+export * from './core';
+export * from '@tanstack/svelte-table';

package/dist/components/data-table/index.js

@@ -0,0 +1,7 @@
+export { default as Root } from './data-table.svelte';
+export { default as Toolbar } from './data-table-toolbar.svelte';
+export { default as Title } from './data-table-title.svelte';
+export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
+export { default as Filters } from './data-table-filters.svelte';
+export * from './core';
+export * from '@tanstack/svelte-table';

package/dist/components/number-input/number-input.svelte

@@ -11,6 +11,7 @@
 		label,
 		layout = 'vertical',
 		name,
+		onValueChange,
 		...restProps
 	}: NumberInputProps = $props();
 	const locale = useLocaleContext();
@@ -30,7 +31,9 @@
 	value={value?.toString()}
 	readOnly={readonly}
 	onValueChange={(valueChangeDetails) => {
+		onValueChange?.(valueChangeDetails);
 		if (isNaN(valueChangeDetails.valueAsNumber)) {
+			value = null;
 			return;
 		}
 		value = valueChangeDetails.valueAsNumber;

package/dist/components/popover/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from './popover-root.svelte';
+export { default as Trigger } from './popover-trigger.svelte';
+export { default as Content } from './popover-content.svelte';
+export { default as Title } from './popover-title.svelte';
+export { default as Description } from './popover-description.svelte';
+export { default as CloseTrigger } from './popover-close-trigger.svelte';

package/dist/components/popover/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './popover-root.svelte';
+export { default as Trigger } from './popover-trigger.svelte';
+export { default as Content } from './popover-content.svelte';
+export { default as Title } from './popover-title.svelte';
+export { default as Description } from './popover-description.svelte';
+export { default as CloseTrigger } from './popover-close-trigger.svelte';

package/dist/components/popover/popover-close-trigger.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverCloseTriggerBaseProps } from '@ark-ui/svelte/popover';
+	import { PhX } from '../../icons';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props extends PopoverCloseTriggerBaseProps {
+		class?: ClassValue;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Popover.CloseTrigger
+	{...rest}
+	class={className ??
+		'absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50'}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhX class="size-4" />
+		<span class="sr-only">Close</span>
+	{/if}
+</Popover.CloseTrigger>

package/dist/components/popover/popover-close-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverCloseTriggerBaseProps } from '@ark-ui/svelte/popover';
+import type { ClassValue } from 'svelte/elements';
+interface Props extends PopoverCloseTriggerBaseProps {
+    class?: ClassValue;
+}
+declare const PopoverCloseTrigger: import("svelte").Component<Props, {}, "">;
+type PopoverCloseTrigger = ReturnType<typeof PopoverCloseTrigger>;
+export default PopoverCloseTrigger;

package/dist/components/popover/popover-content.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { cn } from 'tailwind-variants';
+	import type { ClassValue } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: ClassValue;
+		children: Snippet;
+		showArrow?: boolean;
+	}
+
+	let { class: className, children, showArrow = true }: Props = $props();
+</script>
+
+<Portal>
+	<Popover.Positioner>
+		<Popover.Content
+			class={cn(
+				'z-50 w-72 rounded-md border bg-surface-1 p-4 shadow-md outline-none [--arrow-background:var(--compote-surface-1)] [--arrow-size:10px]',
+				'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+				'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+				className
+			)}
+		>
+			{#if showArrow}
+				<Popover.Arrow>
+					<Popover.ArrowTip class="border-t border-l border-border" />
+				</Popover.Arrow>
+			{/if}
+			{@render children()}
+		</Popover.Content>
+	</Popover.Positioner>
+</Portal>
+
+<style>
+	:global([data-scope='popover'][data-part='content']) {
+		transform-origin: var(--transform-origin);
+	}
+
+	:global([data-scope='popover'][data-part='content'][data-state='open']) {
+		animation: popover-in 150ms ease-out;
+	}
+
+	:global([data-scope='popover'][data-part='content'][data-state='closed']) {
+		animation: popover-out 100ms ease-in;
+	}
+
+	@keyframes popover-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes popover-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+</style>

package/dist/components/popover/popover-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: ClassValue;
+    children: Snippet;
+    showArrow?: boolean;
+}
+declare const PopoverContent: import("svelte").Component<Props, {}, "">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

package/dist/components/popover/popover-description.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverDescriptionBaseProps } from '@ark-ui/svelte/popover';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props extends PopoverDescriptionBaseProps {
+		class?: ClassValue;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Popover.Description {...rest} class={className ?? 'mt-1 text-sm text-ink-dim'}>
+	{@render children?.()}
+</Popover.Description>

package/dist/components/popover/popover-description.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverDescriptionBaseProps } from '@ark-ui/svelte/popover';
+import type { ClassValue } from 'svelte/elements';
+interface Props extends PopoverDescriptionBaseProps {
+    class?: ClassValue;
+}
+declare const PopoverDescription: import("svelte").Component<Props, {}, "">;
+type PopoverDescription = ReturnType<typeof PopoverDescription>;
+export default PopoverDescription;

package/dist/components/popover/popover-root.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverRootBaseProps } from '@ark-ui/svelte/popover';
+	import type { Snippet } from 'svelte';
+
+	interface Props extends PopoverRootBaseProps {
+		open?: boolean;
+		children: Snippet;
+		lazyMount?: boolean;
+		unmountOnExit?: boolean;
+	}
+
+	let {
+		open = $bindable(),
+		children,
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: Props = $props();
+</script>
+
+<Popover.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
+	{@render children()}
+</Popover.Root>

package/dist/components/popover/popover-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { PopoverRootBaseProps } from '@ark-ui/svelte/popover';
+import type { Snippet } from 'svelte';
+interface Props extends PopoverRootBaseProps {
+    open?: boolean;
+    children: Snippet;
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+}
+declare const PopoverRoot: import("svelte").Component<Props, {}, "open">;
+type PopoverRoot = ReturnType<typeof PopoverRoot>;
+export default PopoverRoot;

package/dist/components/popover/popover-title.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverTitleBaseProps } from '@ark-ui/svelte/popover';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props extends PopoverTitleBaseProps {
+		class?: ClassValue;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Popover.Title {...rest} class={className ?? 'text-sm font-semibold'}>
+	{@render children?.()}
+</Popover.Title>

package/dist/components/popover/popover-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverTitleBaseProps } from '@ark-ui/svelte/popover';
+import type { ClassValue } from 'svelte/elements';
+interface Props extends PopoverTitleBaseProps {
+    class?: ClassValue;
+}
+declare const PopoverTitle: import("svelte").Component<Props, {}, "">;
+type PopoverTitle = ReturnType<typeof PopoverTitle>;
+export default PopoverTitle;

package/dist/components/popover/popover-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverTriggerBaseProps } from '@ark-ui/svelte/popover';
+	import type { ClassValue } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface Props extends PopoverTriggerBaseProps {
+		class?: ClassValue;
+		children: Snippet;
+	}
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Popover.Trigger class={className} {...restProps}>
+	{@render children()}
+</Popover.Trigger>

package/dist/components/popover/popover-trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PopoverTriggerBaseProps } from '@ark-ui/svelte/popover';
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends PopoverTriggerBaseProps {
+    class?: ClassValue;
+    children: Snippet;
+}
+declare const PopoverTrigger: import("svelte").Component<Props, {}, "">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

package/dist/components/scroll-area/scroll-area-content.svelte

@@ -10,6 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<ScrollArea.Content {...rest} class={cn('pe-3', className)}>
+<ScrollArea.Content {...rest} class={cn('py-3 ps-4 pe-6', className)}>
 	{@render children?.()}
 </ScrollArea.Content>