compote-ui 0.11.0 → 0.13.0

package/dist/components/button/button.variants.js

@@ -3,7 +3,7 @@ export const button = tv({
     base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
     variants: {
         variant: {
-            default: 'bg-primary text-white hover:bg-primary/90 active:bg-primary/80',
+            default: 'bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80',
             outline: 'border text-ink hover:bg-surface-2',
             ghost: 'text-ink hover:bg-surface-2'
         },

package/dist/components/checkbox/checkbox.svelte

@@ -18,10 +18,10 @@
 			: ''} data-focus-visible:outline-ring flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
 	>
 		<Checkbox.Indicator>
-			<PhCheck class="size-3.5 text-white" />
+			<PhCheck class="size-3.5 text-ink-inverse" />
 		</Checkbox.Indicator>
 		<Checkbox.Indicator indeterminate>
-			<PhMinus class="size-3.5 text-white" />
+			<PhMinus class="size-3.5 text-ink-inverse" />
 		</Checkbox.Indicator>
 	</Checkbox.Control>
 	{#if label}

package/dist/components/dialog/alert-dialog.svelte

@@ -20,8 +20,8 @@
 
 	const confirmClass = $derived(
 		variant === 'destructive'
-			? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-white shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary'
-			: 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary'
+			? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+			: 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
 	);
 </script>
 
@@ -46,7 +46,7 @@
 				{/if}
 				<div class="mt-6 flex justify-end gap-3">
 					<Dialog.CloseTrigger
-						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none"
+						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 						onclick={onCancel}
 					>
 						{cancelLabel}
@@ -56,7 +56,7 @@
 					</button>
 				</div>
 				<Dialog.CloseTrigger
-					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none"
 				>
 					<PhX class="h-4 w-4" />
 					<span class="sr-only">Close</span>

package/dist/components/dialog/dialog.svelte

@@ -48,7 +48,7 @@
 				{/if}
 
 				<Dialog.CloseTrigger
-					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
+					class="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"
 				>
 					<PhX class="size-4" />
 					<span class="sr-only">Close</span>

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

@@ -24,7 +24,7 @@
 		{...rest}
 		bind:value
 		class={cn(
-			'flex h-9 w-full rounded-md border bg-surface-1 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
+			'flex h-9 w-full rounded-md border bg-surface-1 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
 			startIcon && 'pl-9',
 			endIcon && 'pr-9',
 			className

package/dist/components/field/field-textarea.svelte

@@ -10,7 +10,7 @@
 	{...rest}
 	{value}
 	class={cn(
-		'flex min-h-20 w-full resize-y rounded-md border bg-surface-1 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
+		'flex min-h-20 w-full resize-y rounded-md border bg-surface-1 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
 		className
 	)}
 />

package/dist/components/field/field.svelte

@@ -3,9 +3,32 @@
 	import type { FieldRootProps } from './types';
 	import { cn } from 'tailwind-variants';
 
-	let { class: className, children, ...rest }: FieldRootProps = $props();
+	let {
+		form,
+		field,
+		helperText,
+		class: className,
+		invalid,
+		required,
+		children,
+		...rest
+	}: FieldRootProps = $props();
+
+	const isInvalid = $derived(form && field ? form.invalid(field) : (invalid ?? false));
+	const isRequired = $derived(form && field ? form.isRequired(field) : (required ?? false));
+	const errorText = $derived(form && field ? (form.errors[field]?.[0] ?? null) : null);
 </script>
 
-<Field.Root {...rest} class={cn('group flex flex-col gap-1.5', className)}>
+<Field.Root
+	{...rest}
+	invalid={isInvalid}
+	required={isRequired}
+	class={cn('group flex flex-col gap-1.5', className)}
+>
 	{@render children?.()}
+	{#if errorText}
+		<Field.ErrorText>{errorText}</Field.ErrorText>
+	{:else if helperText}
+		<Field.HelperText>{helperText}</Field.HelperText>
+	{/if}
 </Field.Root>

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

@@ -4,4 +4,4 @@ export { default as Input } from './field-input.svelte';
 export { default as Textarea } from './field-textarea.svelte';
 export { default as HelperText } from './field-helper-text.svelte';
 export { default as ErrorText } from './field-error-text.svelte';
-export type { FieldRootProps, FieldLabelProps, FieldInputProps, FieldTextareaProps, FieldHelperTextProps, FieldErrorTextProps } from './types';
+export type { FormAdapter, FieldRootProps, FieldLabelProps, FieldInputProps, FieldTextareaProps, FieldHelperTextProps, FieldErrorTextProps } from './types';

package/dist/components/field/types.d.ts

@@ -1,7 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { FieldRootBaseProps, FieldLabelBaseProps, FieldInputProps as ArkFieldInputProps, FieldTextareaProps as ArkFieldTextareaProps, FieldHelperTextBaseProps, FieldErrorTextBaseProps } from '@ark-ui/svelte/field';
+export interface FormAdapter {
+    invalid(field: string): boolean;
+    isRequired(field: string): boolean;
+    errors: Record<string, string[]>;
+}
 export interface FieldRootProps extends FieldRootBaseProps {
     class?: string;
+    form?: FormAdapter;
+    field?: string;
+    helperText?: string;
 }
 export interface FieldLabelProps extends FieldLabelBaseProps {
     class?: string;

package/dist/components/listbox/listbox.svelte

@@ -66,7 +66,7 @@
 		<Listbox.Input
 			placeholder={filterPlaceholder}
 			oninput={(e) => (filterText = e.currentTarget.value)}
-			class="h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary"
+			class="h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring"
 		/>
 	{/if}
 	<Listbox.Content class="flex min-h-0 w-full flex-1 flex-col gap-1 overflow-y-auto outline-none">

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

@@ -47,7 +47,7 @@
 	{/if}
 	<NumberInput.Control class="relative isolate">
 		<NumberInput.Input
-			class="h-9 w-full rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
+			class="h-9 w-full rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
 		/>
 		<div
 			class="absolute top-px right-px bottom-px z-10 flex w-6 flex-col overflow-hidden rounded-r border-l"

package/dist/components/select/select.svelte

@@ -17,9 +17,6 @@
 		name,
 		...restProps
 	}: SelectProps<T> = $props();
-	const rootClass = $derived(
-		layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5'
-	);
 
 	const collection = $derived(createListCollection(items));
 </script>
@@ -30,7 +27,7 @@
 	deselectable
 	value={value ? [value.toString()] : []}
 	onValueChange={(valueChangeDetails) => {
-		if (valueChangeDetails.items.length === 0 || valueChangeDetails.items == null) {
+		if (valueChangeDetails.items == null || valueChangeDetails.items.length === 0) {
 			value = null;
 		} else {
 			value = valueChangeDetails.items[0].value;
@@ -39,7 +36,7 @@
 			restProps.onValueChange(valueChangeDetails);
 		}
 	}}
-	class={rootClass}
+	class={cn(layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5')}
 >
 	{#if label}
 		<Select.Label>
@@ -49,11 +46,11 @@
 	{/if}
 	<Select.Control>
 		<Select.Trigger
-			class="flex h-9 w-full cursor-pointer items-center justify-between rounded-md border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger"
+			class="flex h-9 w-full cursor-pointer items-center justify-between rounded-md border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger"
 		>
 			<div class="flex items-center gap-2">
 				<Select.ValueText
-					placeholder={placeholder ?? 'Select a item'}
+					placeholder={placeholder ?? 'Select an item'}
 					class={cn('text-nowrap', value ? '' : 'text-ink-dim')}
 				/>
 			</div>
@@ -84,5 +81,4 @@
 		</Select.Positioner>
 	</Portal>
 	<input type="hidden" {name} value={value ?? ''} />
-	<Select.HiddenSelect />
 </Select.Root>

package/dist/components/switch/switch.svelte

@@ -25,7 +25,7 @@
 {/if}
 <Switch.Root {...rootProps} bind:checked class={rootClass}>
 	<Switch.Control
-		class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent bg-surface-3 transition-colors duration-150 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-hidden data-invalid:ring-2 data-invalid:ring-danger data-invalid:ring-offset-2 data-[state=checked]:bg-primary"
+		class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent bg-surface-3 transition-colors duration-150 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden data-invalid:ring-2 data-invalid:ring-danger data-invalid:ring-offset-2 data-[state=checked]:bg-primary"
 	>
 		<Switch.Thumb
 			class="pointer-events-none block size-5 rounded-full bg-white shadow-sm ring-0 transition-transform duration-150 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"

package/dist/components/tree-view/tree-view.svelte

@@ -8,7 +8,6 @@
 	import PhCaretRight from '../../icons/PhCaretRight.svelte';
 	import PhMinus from '../../icons/PhMinus.svelte';
 	import PhCheck from '../../icons/PhCheck.svelte';
-	import PhListMagnifyingGlass from '../../icons/PhListMagnifyingGlass.svelte';
 	import PhArrowsInSimple from '../../icons/PhArrowsInSimple.svelte';
 	import { Button, Field } from '../..';
 	import { SvelteSet } from 'svelte/reactivity';
@@ -68,7 +67,6 @@
 			contextNode = nodeId ?? null;
 		}
 	}
-	$inspect('searchTerm:', searchTerm);
 </script>
 
 <div class="flex h-full flex-col" role="none" oncontextmenu={handleContextMenu}>
@@ -147,7 +145,7 @@
 
 {#snippet nodeCheckbox()}
 	<TreeView.NodeCheckbox
-		class="border-input bg-background text-primary-foreground inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
+		class="inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border bg-transparent text-ink-inverse data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
 	>
 		<TreeView.NodeCheckboxIndicator>
 			{#snippet indeterminate()}
@@ -182,7 +180,7 @@
 					</TreeView.BranchText>
 				</TreeView.BranchControl>
 				<TreeView.BranchContent class="relative">
-					<TreeView.BranchIndentGuide class="bg-border absolute inset-y-0 w-px" />
+					<TreeView.BranchIndentGuide class="absolute inset-y-0 w-px bg-border" />
 					{#each node.children as child, childIndex (child.value)}
 						{@render renderNode(child as T, [...indexPath, childIndex])}
 					{/each}

package/dist/theme.css

@@ -5,6 +5,8 @@
 @source './components/**/*.svelte';
 
 :root {
+	color-scheme: light dark;
+
 	--dim: 0.3;
 	--radius: 6px;
 	--font-sans: 'Wix Madefor Text Variable', sans-serif;
@@ -14,42 +16,32 @@
 	--color-hue: var(--hue-orange);
 	--gray-hue: 250;
 
-	--compote-ink: var(--gray-15);
-	--compote-ink-dim: var(--gray-11);
-	--compote-surface-3: var(--gray-5);
-	--compote-surface-2: var(--gray-4);
-	--compote-surface-1: var(--gray-3);
-	--compote-surface-document: var(--gray-2);
-	--compote-well: var(--gray-1);
+	--compote-ink: light-dark(var(--gray-15), var(--gray-1));
+	--compote-ink-dim: light-dark(var(--gray-11), var(--gray-5));
+	--compote-ink-inverse: white;
+	--compote-surface-3: light-dark(var(--gray-5), var(--gray-11));
+	--compote-surface-2: light-dark(var(--gray-4), var(--gray-12));
+	--compote-surface-1: light-dark(var(--gray-3), var(--gray-13));
+	--compote-surface-document: light-dark(var(--gray-2), var(--gray-14));
+	--compote-well: light-dark(var(--gray-1), var(--gray-15));
 
 	--compote-primary: oklch(from var(--color-7) l c var(--hue-orange));
 	--compote-danger: oklch(from var(--color-7) l c var(--hue-red));
 	--compote-warning: oklch(from var(--color-7) l c var(--hue-yellow));
 	--compote-success: oklch(from var(--color-7) l c var(--hue-green));
 	--compote-info: oklch(from var(--color-7) l c var(--hue-blue));
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--compote-ink: var(--gray-1);
-		--compote-ink-dim: var(--gray-5);
-		--compote-surface-3: var(--gray-11);
-		--compote-surface-2: var(--gray-12);
-		--compote-surface-1: var(--gray-13);
-		--compote-surface-document: var(--gray-14);
-		--compote-well: var(--gray-15);
 
-		--compote-primary: oklch(from var(--color-7) l c var(--hue-orange));
-		--compote-danger: oklch(from var(--color-7) l c var(--hue-red));
-		--compote-warning: oklch(from var(--color-7) l c var(--hue-yellow));
-		--compote-success: oklch(from var(--color-7) l c var(--hue-green));
-		--compote-info: oklch(from var(--color-7) l c var(--hue-blue));
-	}
+	--compote-border: var(--compote-surface-3);
+	--compote-ring: var(--compote-primary);
 }
 
+.dark  { color-scheme: dark; }
+.light { color-scheme: light; }
+
 @theme inline {
 	--color-ink: var(--compote-ink);
 	--color-ink-dim: var(--compote-ink-dim);
+	--color-ink-inverse: var(--compote-ink-inverse);
 	--color-surface-3: var(--compote-surface-3);
 	--color-surface-2: var(--compote-surface-2);
 	--color-surface-1: var(--compote-surface-1);
@@ -62,6 +54,9 @@
 	--color-success: var(--compote-success);
 	--color-info: var(--compote-info);
 
+	--color-border: var(--compote-border);
+	--color-ring: var(--compote-ring);
+
 	--font-sans: var(--font-sans);
 	--font-mono: var(--font-mono);
 	--font-serif: var(--font-serif);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.11.0",
+	"version": "0.13.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",