compote-ui 0.0.6 → 0.2.0

package/dist/components/button/Button.svelte

@@ -3,17 +3,17 @@
 	import { tv } from 'tailwind-variants';
 
 	const button = tv({
-		base: 'inline-flex items-center justify-center font-medium transition-colors cursor-pointer bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-50 disabled:pointer-events-none',
+		base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
 		variants: {
 			variant: {
-				solid: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
-				outline: 'border border-border text-foreground hover:bg-muted',
+				solid: 'text-primary-foreground bg-primary hover:bg-primary/90 active:bg-primary/80',
+				outline: 'border-border text-foreground hover:bg-muted border',
 				ghost: 'text-foreground hover:bg-muted'
 			},
 			size: {
-				sm: 'h-8 px-3 text-sm rounded-sm gap-1.5',
-				md: 'h-10 px-4 text-base rounded-md gap-2',
-				lg: 'h-12 px-6 text-lg rounded-lg gap-2.5'
+				sm: 'h-8 gap-1.5 px-2 text-sm',
+				md: 'h-9 gap-2 px-3 text-base',
+				lg: 'h-10 gap-2.5 px-4 text-lg'
 			}
 		},
 		defaultVariants: { variant: 'solid', size: 'md' }

package/dist/components/checkbox/Checkbox-group.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="T extends string | number">
+	import { Checkbox } from '@ark-ui/svelte/checkbox';
+	import type { CheckboxGroupProps } from './checkbox-group.types';
+	import CheckboxItem from './Checkbox.svelte';
+
+	let {
+		items,
+		value = $bindable([]),
+		onValueChange,
+		orientation = 'horizontal',
+		...rest
+	}: CheckboxGroupProps<T> = $props();
+
+	const arkValue = $derived(value.map(String));
+</script>
+
+<Checkbox.Group
+	value={arkValue}
+	onValueChange={(newValue) => {
+		value = items.filter((item) => newValue.includes(String(item.value))).map((item) => item.value);
+		onValueChange?.(newValue);
+	}}
+	{...rest}
+	class={orientation === 'vertical' ? 'flex flex-col gap-0.5' : 'flex flex-wrap gap-4'}
+>
+	{#each items as item (item.value)}
+		<CheckboxItem value={String(item.value)} label={item.label} />
+	{/each}
+</Checkbox.Group>

package/dist/components/checkbox/Checkbox-group.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CheckboxGroupProps } from './checkbox-group.types';
+declare function $$render<T extends string | number>(): {
+    props: CheckboxGroupProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CheckboxGroup: $$IsomorphicComponent;
+type CheckboxGroup<T extends string | number> = InstanceType<typeof CheckboxGroup<T>>;
+export default CheckboxGroup;

package/dist/components/checkbox/Checkbox.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import { Checkbox } from '@ark-ui/svelte/checkbox';
-	import type { CheckboxProps as Props } from './checkbox-props.js';
-	import PhCheck from '../../icons/CheckBold.svelte';
+	import type { CheckboxProps as Props } from './checkbox.types.js';
+	import PhCheck from '../../icons/PhCheck.svelte';
 
 	let { checked = $bindable(), label, children, ...rest }: Props = $props();
 </script>
 
-<Checkbox.Root bind:checked class="inline-flex cursor-pointer items-start gap-2" {...rest}>
+<Checkbox.Root
+	bind:checked
+	class="inline-flex cursor-pointer gap-2 {children ? 'items-start' : 'items-center'}"
+	{...rest}
+>
 	<Checkbox.Control
-		class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary"
+		class="{children
+			? 'mt-0.5'
+			: ''} flex size-5 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary"
 	>
 		<Checkbox.Indicator>
 			<PhCheck class="size-3.5 text-primary-foreground" />
@@ -16,11 +22,13 @@
 	</Checkbox.Control>
 	{#if label}
 		<div class="flex flex-col gap-0.5">
-			<Checkbox.Label class="text-base text-foreground select-none data-disabled:opacity-50"
-				>{label}</Checkbox.Label
-			>
+			<Checkbox.Label class="text-base select-none data-disabled:opacity-50">
+				{label}
+			</Checkbox.Label>
 			{#if children}
-				<span class="text-sm text-foreground/60">{@render children()}</span>
+				<span class="text-sm text-ink-dim">
+					{@render children()}
+				</span>
 			{/if}
 		</div>
 	{/if}

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Checkbox } from '@ark-ui/svelte/checkbox';
-import type { CheckboxProps as Props } from './checkbox-props.ts';
+import type { CheckboxProps as Props } from './checkbox.types.ts';
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/checkbox/checkbox-group.types.d.ts

@@ -0,0 +1,11 @@
+import type { CheckboxGroupBaseProps } from '@ark-ui/svelte/checkbox';
+export interface CheckboxGroupProps<T = string | number> extends Omit<CheckboxGroupBaseProps, 'value'> {
+    label?: string;
+    description?: string;
+    items: {
+        value: T;
+        label: string;
+    }[];
+    value: T[];
+    orientation?: 'horizontal' | 'vertical';
+}

package/dist/components/checkbox/checkbox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/combobox/Combobox.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" generics="T extends ComboboxItem">
+	import { Combobox, createListCollection } from '@ark-ui/svelte/combobox';
+	import { Field } from '@ark-ui/svelte/field';
+	import { useFilter } from '@ark-ui/svelte/locale';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import type { ComboboxItem, ComboboxProps } from './types';
+	import { cn } from 'tailwind-variants';
+	import PhCaretDown from '../../icons/PhCaretDown.svelte';
+	import PhCheck from '../../icons/PhCheck.svelte';
+	import PhX from '../../icons/PhX.svelte';
+
+	let {
+		value = $bindable(),
+		items,
+		label,
+		placeholder,
+		layout = 'vertical',
+		name,
+		readonly,
+		multiple,
+		...restProps
+	}: ComboboxProps<T> = $props();
+
+	// Client-side filtering state
+	let filterText = $state('');
+	const filters = useFilter({ sensitivity: 'base' });
+
+	// Base collection — only rebuilds when items prop changes
+	const baseCollection = $derived(
+		createListCollection({
+			items,
+			itemToString: (item) => item?.label ?? '',
+			itemToValue: (item) => item?.value?.toString() ?? ''
+		})
+	);
+
+	// Filtered view — lightweight .filter() on keystroke, full collection when empty
+	const collection = $derived(
+		filterText
+			? baseCollection.filter((itemString) => filters().contains(itemString, filterText))
+			: baseCollection
+	);
+
+	// Handle input change — only filter on actual user typing, not on selection/clear events
+	function handleInputChange(details: Combobox.InputValueChangeDetails) {
+		if (details.reason === 'input-change') {
+			filterText = details.inputValue;
+		} else {
+			filterText = '';
+		}
+	}
+
+	// Compute display label for current value — handles async-loaded items
+	const displayValue = $derived.by(() => {
+		if (value == null || multiple) return undefined;
+		const v = Array.isArray(value) ? value[0] : value;
+		const found = items.find((item) => item.value.toString() === v?.toString());
+		return found ? found.label : undefined;
+	});
+
+	// Memoize value/inputValue props to prevent reactive cascade (new array/object refs cause Zag loops)
+	const valueProp = $derived(
+		value != null
+			? Array.isArray(value)
+				? value.map((v) => v.toString())
+				: [value.toString()]
+			: []
+	);
+	const controlledInputValue = $derived(multiple ? undefined : (displayValue ?? ''));
+
+	// Handle value change - look up typed value from items prop by string match
+	function handleValueChange(details: Combobox.ValueChangeDetails<T>) {
+		if (details.value.length === 0) {
+			value = multiple ? [] : null;
+		} else if (multiple) {
+			value = details.value
+				.map((v) => items.find((item) => item.value.toString() === v)?.value)
+				.filter((v) => v !== undefined);
+		} else {
+			const found = items.find((item) => item.value.toString() === details.value[0]);
+			value = found?.value ?? null;
+		}
+	}
+</script>
+
+<Combobox.Root
+	{collection}
+	value={valueProp}
+	inputValue={controlledInputValue}
+	onValueChange={handleValueChange}
+	onInputValueChange={handleInputChange}
+	openOnClick
+	{multiple}
+	readOnly={readonly}
+	{...restProps}
+	class={cn(layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5')}
+>
+	{#if label}
+		<Combobox.Label>
+			{label}
+			<Field.RequiredIndicator />
+		</Combobox.Label>
+	{/if}
+
+	<Combobox.Control
+		class={cn(
+			'rounded-ark flex min-h-9 items-center gap-1 border px-3 shadow-sm',
+			'focus-within:ring-1 focus-within:ring-(--ark-ring)',
+			multiple && 'flex-wrap py-1'
+		)}
+	>
+		{#if multiple && Array.isArray(value) && value.length > 0}
+			<div class="flex flex-wrap gap-1">
+				{#each value as v (v)}
+					{@const item = items.find((i) => i.value === v)}
+					{#if item}
+						<span
+							class="inline-flex items-center gap-1 rounded bg-(--ark-hover-bg) px-2 py-0.5 text-xs"
+						>
+							{item.label}
+							{#if !readonly}
+								<button
+									type="button"
+									onclick={() => {
+										value = (value as (number | string)[]).filter((x) => x !== v);
+									}}
+									class="hover:text-(--ark-error)"
+								>
+									<PhX class="size-3" />
+								</button>
+							{/if}
+						</span>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+		<Combobox.Input
+			placeholder={placeholder ?? 'Search...'}
+			class="flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed disabled:opacity-50"
+		/>
+		{#if value != null && !readonly && !multiple}
+			<Combobox.ClearTrigger class="text-ink-dim transition-colors hover:text-ink">
+				<PhX class="size-4" />
+			</Combobox.ClearTrigger>
+		{/if}
+		<Combobox.Trigger class="text-ink-dim">
+			<PhCaretDown class="size-4 opacity-50" />
+		</Combobox.Trigger>
+	</Combobox.Control>
+
+	<Portal>
+		<Combobox.Positioner class="data-[state=closed]:pointer-events-none">
+			<Combobox.Content
+				class="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 z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-1 p-1  shadow-md"
+			>
+				<Combobox.Empty class="py-2 text-center text-sm text-ink-dim">
+					No results found
+				</Combobox.Empty>
+
+				{#each collection.items as item (item.value)}
+					<Combobox.Item
+						{item}
+						class="relative flex cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm text-(--ark-accent-fg) select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:bg-surface-2"
+					>
+						<Combobox.ItemText>{item.label}</Combobox.ItemText>
+						<Combobox.ItemIndicator class="absolute right-2 items-center justify-center">
+							<PhCheck class="size-3.5" />
+						</Combobox.ItemIndicator>
+					</Combobox.Item>
+				{/each}
+			</Combobox.Content>
+		</Combobox.Positioner>
+	</Portal>
+
+	{#if multiple && Array.isArray(value)}
+		{#each value as v, i (v)}
+			<input type="hidden" name="{name}[{i}]" value={v ?? ''} />
+		{/each}
+	{:else if value != null}
+		<input type="hidden" {name} {value} />
+	{/if}
+</Combobox.Root>

package/dist/components/combobox/Combobox.svelte.d.ts

@@ -0,0 +1,26 @@
+import { Combobox } from '@ark-ui/svelte/combobox';
+import type { ComboboxItem, ComboboxProps } from './types';
+declare function $$render<T extends ComboboxItem>(): {
+    props: ComboboxProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends ComboboxItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<T extends ComboboxItem> = InstanceType<typeof Combobox<T>>;
+export default Combobox;

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

@@ -0,0 +1,16 @@
+import type { ComboboxRootBaseProps } from '@ark-ui/svelte/combobox';
+export interface ComboboxItem<T = number | string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps<T extends ComboboxItem> extends Omit<ComboboxRootBaseProps<T>, 'value' | 'collection'> {
+    value?: number | string | null | (number | string)[];
+    items: T[];
+    label?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    name?: string;
+    multiple?: boolean;
+    layout?: 'vertical' | 'horizontal';
+}

package/dist/components/combobox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/gray-oklch.min.css

@@ -0,0 +1 @@
+:where(*){--gray-0:oklch(99% var(--gray-chroma,none) var(--gray-hue,none));--gray-1:oklch(95% var(--gray-chroma,none) var(--gray-hue,none));--gray-2:oklch(88% var(--gray-chroma,none) var(--gray-hue,none));--gray-3:oklch(80% var(--gray-chroma,none) var(--gray-hue,none));--gray-4:oklch(74% var(--gray-chroma,none) var(--gray-hue,none));--gray-5:oklch(68% var(--gray-chroma,none) var(--gray-hue,none));--gray-6:oklch(63% var(--gray-chroma,none) var(--gray-hue,none));--gray-7:oklch(58% var(--gray-chroma,none) var(--gray-hue,none));--gray-8:oklch(53% var(--gray-chroma,none) var(--gray-hue,none));--gray-9:oklch(49% var(--gray-chroma,none) var(--gray-hue,none));--gray-10:oklch(43% var(--gray-chroma,none) var(--gray-hue,none));--gray-11:oklch(37% var(--gray-chroma,none) var(--gray-hue,none));--gray-12:oklch(31% var(--gray-chroma,none) var(--gray-hue,none));--gray-13:oklch(25% var(--gray-chroma,none) var(--gray-hue,none));--gray-14:oklch(18% var(--gray-chroma,none) var(--gray-hue,none));--gray-15:oklch(10% var(--gray-chroma,none) var(--gray-hue,none))}

package/dist/green-hsl.min.css

@@ -0,0 +1 @@
+:where(html){--green-0-hsl:131 67% 95%;--green-1-hsl:128 76% 90%;--green-2-hsl:128 71% 82%;--green-3-hsl:129 68% 73%;--green-4-hsl:130 61% 64%;--green-5-hsl:130 57% 56%;--green-6-hsl:131 50% 50%;--green-7-hsl:131 53% 46%;--green-8-hsl:131 54% 40%;--green-9-hsl:132 52% 35%;--green-10-hsl:132 52% 29%;--green-11-hsl:132 53% 22%;--green-12-hsl:131 53% 16%}

package/dist/icons/PhCaretDown.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32"
+	/>
+</svg>

package/dist/icons/PhCaretDown.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhCaretDown: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhCaretDown = ReturnType<typeof PhCaretDown>;
+export default PhCaretDown;

package/dist/icons/PhCheck.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { class: cls = '', ...restProps } = $props();
+	let { class: className = '', ...restProps } = $props();
 </script>
 
 <!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
@@ -8,10 +8,11 @@
 	width="1em"
 	height="1em"
 	viewBox="0 0 256 256"
+	class={className}
 	{...restProps}
 >
 	<path
-		fill="#888888"
+		fill="currentColor"
 		d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32"
 	/>
 </svg>

package/dist/icons/PhMinus.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path fill="currentColor" d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8" />
+</svg>

package/dist/icons/PhMinus.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhMinus: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhMinus = ReturnType<typeof PhMinus>;
+export default PhMinus;

package/dist/icons/PhX.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhX.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhX: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhX = ReturnType<typeof PhX>;
+export default PhX;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 export { default as Button } from './components/button/Button.svelte';
+export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
+export { default as CheckboxGroup } from './components/checkbox/Checkbox-group.svelte';
+export { default as Combobox } from './components/combobox/Combobox.svelte';

package/dist/index.js

@@ -1,3 +1,5 @@
 // Reexport your entry components here
-export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 export { default as Button } from './components/button/Button.svelte';
+export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
+export { default as CheckboxGroup } from './components/checkbox/Checkbox-group.svelte';
+export { default as Combobox } from './components/combobox/Combobox.svelte';

package/dist/props.colors-oklch-hues.css

@@ -0,0 +1,14 @@
+:where(html) {
+  --hue-red: 25;
+  --hue-pink: 350;
+  --hue-purple: 310;
+  --hue-violet: 290;
+  --hue-indigo: 270;
+  --hue-blue: 240;
+  --hue-cyan: 210;
+  --hue-teal: 185;
+  --hue-green: 145;
+  --hue-lime: 125;
+  --hue-yellow: 100;
+  --hue-orange: 75;
+}

package/dist/props.colors-oklch.css

@@ -0,0 +1,19 @@
+:where(*) {
+  --color-0: oklch(99% .03 var(--color-hue, 0));
+  --color-1: oklch(95% .06 var(--color-hue, 0));
+  --color-2: oklch(88% .12 var(--color-hue, 0));
+  --color-3: oklch(80% .14 var(--color-hue, 0));
+  --color-4: oklch(74% .16 var(--color-hue, 0));
+  --color-5: oklch(68% .19 var(--color-hue, 0));
+  --color-6: oklch(63% .20 var(--color-hue, 0));
+  --color-7: oklch(58% .21 var(--color-hue, 0));
+  --color-8: oklch(53% .20 var(--color-hue, 0));
+  --color-9: oklch(49% .19 var(--color-hue, 0));
+  --color-10: oklch(42% .17 var(--color-hue, 0));
+  --color-11: oklch(35% .15 var(--color-hue, 0));
+  --color-12: oklch(27% .12 var(--color-hue, 0));
+  --color-13: oklch(20% .09 var(--color-hue, 0));
+  --color-14: oklch(14% .07 var(--color-hue, 0));
+  --color-15: oklch(11% .05 var(--color-hue, 0));
+  --color-bright: oklch(65% .3 var(--color-hue, 0));
+}

package/dist/props.gray-oklch.css

@@ -0,0 +1,18 @@
+:where(*) {
+  --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
+}

package/dist/theme.css

@@ -1,74 +1,52 @@
+@import './props.colors-oklch-hues.css';
+@import './props.colors-oklch.css';
+@import './props.gray-oklch.css';
+
 :root {
+	--dim: 0.3;
 	--radius: 6px;
-
-	--background: oklch(0.9885 0.0057 84.5659);
-	--foreground: oklch(0.366 0.0251 49.6085);
-	--card: oklch(0.9686 0.0091 78.2818);
-	--card-foreground: oklch(0.366 0.0251 49.6085);
-	--popover: oklch(0.9686 0.0091 78.2818);
-	--popover-foreground: oklch(0.366 0.0251 49.6085);
-	--primary: oklch(0.5553 0.1455 48.9975);
-	--primary-foreground: oklch(1 0 0);
-	--secondary: oklch(0.8276 0.0752 74.44);
-	--secondary-foreground: oklch(0.4444 0.0096 73.639);
-	--muted: oklch(0.9363 0.0218 83.2637);
-	--muted-foreground: oklch(0.5534 0.0116 58.0708);
-	--accent: oklch(0.9 0.05 74.9889);
-	--accent-foreground: oklch(0.4444 0.0096 73.639);
-	--destructive: oklch(0.4437 0.1613 26.8994);
-	--destructive-foreground: oklch(1 0 0);
-	--border: oklch(0.8866 0.0404 89.6994);
-	--input: oklch(0.8866 0.0404 89.6994);
-	--ring: oklch(0.5553 0.1455 48.9975);
 	--font-sans: 'Wix Madefor Text Variable', sans-serif;
 	--font-serif: Merriweather, serif;
 	--font-mono: Fira Code, monospace;
+
+	--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-primary: var(--color-7);
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--background: oklch(26.21% 0.009 248.19);
-		--foreground: oklch(0.9699 0.0013 106.4238);
-		--card: oklch(34.51% 0.013 248.21);
-		--card-foreground: oklch(0.9699 0.0013 106.4238);
-		--popover: oklch(0.2685 0.0063 34.2976);
-		--popover-foreground: oklch(0.9699 0.0013 106.4238);
-		--primary: oklch(0.7049 0.1867 47.6044);
-		--primary-foreground: oklch(1 0 0);
-		--secondary: oklch(0.4444 0.0096 73.639);
-		--secondary-foreground: oklch(0.9232 0.0026 48.7171);
-		--muted: oklch(0.233 0.0073 67.4563);
-		--muted-foreground: oklch(0.7161 0.0091 56.259);
-		--accent: oklch(0.3598 0.0497 229.3202);
-		--accent-foreground: oklch(0.9232 0.0026 48.7171);
-		--destructive: oklch(0.5771 0.2152 27.325);
-		--destructive-foreground: oklch(1 0 0);
-		--border: oklch(42.76% 0.015 248.17);
-		--input: oklch(0.3741 0.0087 67.5582);
-		--ring: oklch(0.7049 0.1867 47.6044);
+		--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: var(--color-7);
 	}
 }
 
 @theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
+	--color-ink: var(--compote-ink);
+	--color-ink-dim: var(--compote-ink-dim);
+	--color-surface-3: var(--compote-surface-3);
+	--color-surface-2: var(--compote-surface-2);
+	--color-surface-1: var(--compote-surface-1);
+	--color-surface-document: var(--compote-surface-document);
+	--color-well: var(--compote-well);
+
+	--color-primary: var(--compote-primary);
 
 	--font-sans: var(--font-sans);
 	--font-mono: var(--font-mono);
@@ -82,9 +60,9 @@
 
 @layer base {
 	* {
-		@apply border-border outline-ring/50;
+		@apply border-surface-3;
 	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-surface-document text-ink;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.0.6",
+	"version": "0.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/icons/CheckBold.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	let { class: cls = '', ...rest } = $props();
-</script>
-
-<svg class={cls} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...rest}>
-	<path
-		fill="currentColor"
-		d="m232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183L215.51 63.51a12 12 0 0 1 17 17Z"
-	/>
-</svg>

package/dist/icons/CheckBold.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const CheckBold: import("svelte").Component<{
-    class?: string;
-} & Record<string, any>, {}, "">;
-type CheckBold = ReturnType<typeof CheckBold>;
-export default CheckBold;