compote-ui 0.2.0 → 0.5.0

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import { NumberInput } from '@ark-ui/svelte/number-input';
+	import type { NumberInputProps } from './types';
+	import PhCaretDown from '../../icons/PhCaretDown.svelte';
+	import PhCaretUp from '../../icons/PhCaretUp.svelte';
+	import { useLocaleContext } from '@ark-ui/svelte/locale';
+
+	let {
+		value = $bindable(),
+		readonly,
+		label,
+		layout = 'vertical',
+		name,
+		...restProps
+	}: NumberInputProps = $props();
+	const locale = useLocaleContext();
+	const rootClass = $derived(
+		layout === 'horizontal'
+			? 'flex items-center gap-1.5 w-full max-w-48 data-disabled:opacity-50 data-disabled:grayscale'
+			: 'flex flex-col gap-1.5 w-full max-w-48 data-disabled:opacity-50 data-disabled:grayscale'
+	);
+</script>
+
+<input type="hidden" {name} value={Number.isNaN(value) ? undefined : value?.toString()} />
+
+<NumberInput.Root
+	{...restProps}
+	allowMouseWheel
+	locale={locale().locale}
+	value={value?.toString()}
+	readOnly={readonly}
+	onValueChange={(valueChangeDetails) => {
+		console.log(valueChangeDetails);
+		if (isNaN(valueChangeDetails.valueAsNumber)) {
+			return;
+		}
+		value = valueChangeDetails.valueAsNumber;
+	}}
+	class={rootClass}
+>
+	{#if label}
+		<NumberInput.Label>
+			{label}
+			<Field.RequiredIndicator />
+		</NumberInput.Label>
+	{/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"
+		/>
+		<div
+			class="absolute top-px right-px bottom-px z-10 flex w-6 flex-col overflow-hidden rounded-r border-l"
+		>
+			<NumberInput.IncrementTrigger
+				class="inline-flex flex-1 cursor-pointer items-center justify-center border-none text-ink-dim hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary active:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-dim"
+			>
+				<PhCaretUp class="h-4 w-4 shrink-0" />
+			</NumberInput.IncrementTrigger>
+			<NumberInput.DecrementTrigger
+				class="inline-flex flex-1 cursor-pointer items-center justify-center border-t text-ink-dim hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary active:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-dim"
+			>
+				<PhCaretDown class="h-4 w-4 shrink-0" />
+			</NumberInput.DecrementTrigger>
+		</div>
+	</NumberInput.Control>
+</NumberInput.Root>

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

@@ -0,0 +1,5 @@
+import { NumberInput } from '@ark-ui/svelte/number-input';
+import type { NumberInputProps } from './types';
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/number-input/types.d.ts

@@ -0,0 +1,7 @@
+import type { NumberInputRootBaseProps } from '@ark-ui/svelte/number-input';
+export interface NumberInputProps extends Omit<NumberInputRootBaseProps, 'value' | 'readOnly'> {
+    value?: number | null;
+    readonly?: boolean;
+    label?: string;
+    layout?: 'vertical' | 'horizontal';
+}

package/dist/components/number-input/types.js

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

package/dist/components/select/select.svelte

@@ -0,0 +1,93 @@
+<script lang="ts" generics="T extends SelectItem">
+	import { Field } from '@ark-ui/svelte/field';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { Select, createListCollection } from '@ark-ui/svelte/select';
+	import type { SelectItem, SelectProps } from './types';
+	import { cn } from 'tailwind-variants';
+	import PhCaretDown from '../../icons/PhCaretDown.svelte';
+	import PhCheck from '../../icons/PhCheck.svelte';
+
+	let {
+		value = $bindable(),
+		items = [],
+		label,
+		placeholder,
+		layout = 'vertical',
+		name,
+		...restProps
+	}: SelectProps<T> = $props();
+	const rootClass = $derived(
+		layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5'
+	);
+
+	const collection = $derived(
+		createListCollection<T>({
+			items: items,
+			itemToValue: (item) => item.value.toString(),
+			isItemDisabled: (item) => item.disabled === true
+		})
+	);
+</script>
+
+<Select.Root
+	{collection}
+	{...restProps}
+	deselectable
+	value={value ? [value.toString()] : []}
+	onValueChange={(valueChangeDetails) => {
+		if (valueChangeDetails.items.length === 0 || valueChangeDetails.items == null) {
+			value = null;
+		} else {
+			value = valueChangeDetails.items[0].value;
+		}
+		if (restProps.onValueChange) {
+			restProps.onValueChange(valueChangeDetails);
+		}
+	}}
+	class={rootClass}
+>
+	{#if label}
+		<Select.Label>
+			{label}
+			<Field.RequiredIndicator />
+		</Select.Label>
+	{/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"
+		>
+			<div class="flex items-center gap-2">
+				<Select.ValueText
+					placeholder={placeholder ?? 'Select a item'}
+					class={cn('text-nowrap', value ? '' : 'text-ink-dim')}
+				/>
+			</div>
+			<Select.Indicator>
+				<PhCaretDown class="h-4 w-4 opacity-50" />
+			</Select.Indicator>
+		</Select.Trigger>
+	</Select.Control>
+	<Portal>
+		<Select.Positioner>
+			<Select.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 text-ink shadow-md"
+			>
+				<Select.ItemGroup>
+					{#each items as item (item.value)}
+						<Select.Item
+							{item}
+							class="relative flex cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm text-ink select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:bg-surface-2"
+						>
+							<Select.ItemText>{item.label}</Select.ItemText>
+							<Select.ItemIndicator class="absolute right-2 items-center justify-center">
+								<PhCheck class="size-3.5" />
+							</Select.ItemIndicator>
+						</Select.Item>
+					{/each}
+				</Select.ItemGroup>
+			</Select.Content>
+		</Select.Positioner>
+	</Portal>
+	<input type="hidden" {name} value={value ?? ''} />
+	<Select.HiddenSelect />
+</Select.Root>

package/dist/components/select/select.svelte.d.ts

@@ -0,0 +1,26 @@
+import { Select } from '@ark-ui/svelte/select';
+import type { SelectItem, SelectProps } from './types';
+declare function $$render<T extends SelectItem>(): {
+    props: SelectProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends SelectItem> {
+    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 SelectItem>(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 SelectItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T extends SelectItem> = InstanceType<typeof Select<T>>;
+export default Select;

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

@@ -0,0 +1,13 @@
+import type { SelectRootBaseProps } from '@ark-ui/svelte/select';
+export interface SelectItem<T = number | string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps<T extends SelectItem> extends Omit<SelectRootBaseProps<T>, 'value' | 'collection'> {
+    value?: number | string | null;
+    items: T[];
+    label?: string;
+    placeholder?: string;
+    layout?: 'vertical' | 'horizontal';
+}

package/dist/components/select/types.js

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

package/dist/components/splitter/splitter.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Splitter } from '@ark-ui/svelte/splitter';
+	import { cn } from 'tailwind-variants';
+	import type { SplitterProps } from './types';
+
+	let {
+		panels,
+		class: className,
+		orientation = 'horizontal',
+		...restProps
+	}: SplitterProps = $props();
+
+	const isHorizontal = $derived(orientation === 'horizontal');
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const arkPanels = $derived(panels.map(({ content: _content, ...rest }) => rest));
+</script>
+
+<Splitter.Root
+	{orientation}
+	panels={arkPanels}
+	{...restProps}
+	class={cn('flex h-full w-full', !isHorizontal && 'flex-col', className)}
+>
+	{#each panels as panelConfig, i (panelConfig.id)}
+		<Splitter.Panel
+			id={panelConfig.id}
+			class={cn('overflow-auto p-2', isHorizontal ? 'min-w-0' : 'min-h-0')}
+		>
+			{@render panelConfig.content()}
+		</Splitter.Panel>
+
+		{#if i < panels.length - 1}
+			<Splitter.ResizeTrigger
+				id={`${panelConfig.id}:${panels[i + 1].id}`}
+				aria-label={`Resize ${panelConfig.id} and ${panels[i + 1].id}`}
+				class={cn(
+					'group relative flex shrink-0 items-center justify-center border-none bg-transparent p-0 outline-none',
+					isHorizontal ? 'w-1.5 cursor-col-resize' : 'h-1.5 cursor-row-resize'
+				)}
+			>
+				<!-- Divider line -->
+				<div
+					class={cn(
+						'absolute bg-surface-3 transition-colors group-focus-within:bg-primary group-hover:bg-primary/40 group-data-dragging:bg-primary',
+						isHorizontal
+							? 'inset-y-0 left-1/2 w-px -translate-x-1/2'
+							: 'inset-x-0 top-1/2 h-px -translate-y-1/2'
+					)}
+				></div>
+				<!-- Handle pill -->
+				<div
+					class={cn(
+						'relative z-10 rounded-full bg-surface-3 shadow-sm transition-colors group-hover:bg-primary/40 group-data-dragging:bg-primary',
+						isHorizontal ? 'h-6 w-1' : 'h-1 w-6'
+					)}
+				></div>
+			</Splitter.ResizeTrigger>
+		{/if}
+	{/each}
+</Splitter.Root>

package/dist/components/splitter/splitter.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Splitter } from '@ark-ui/svelte/splitter';
+import type { SplitterProps } from './types';
+declare const Splitter: import("svelte").Component<SplitterProps, {}, "">;
+type Splitter = ReturnType<typeof Splitter>;
+export default Splitter;

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

@@ -0,0 +1,9 @@
+import type { SplitterRootBaseProps, SplitterPanelData } from '@ark-ui/svelte/splitter';
+import type { Snippet } from 'svelte';
+export interface SplitterPanelConfig extends SplitterPanelData {
+    content: Snippet;
+}
+export interface SplitterProps extends Omit<SplitterRootBaseProps, 'panels'> {
+    panels: SplitterPanelConfig[];
+    class?: string;
+}

package/dist/components/splitter/types.js

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

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

@@ -0,0 +1,2 @@
+export { default as Switch } from './switch.svelte';
+export type { SwitchProps } from './types';

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { default as Switch } from './switch.svelte';

package/dist/components/switch/switch.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Switch, type SwitchRootBaseProps } from '@ark-ui/svelte/switch';
+
+	interface Props extends SwitchRootBaseProps {
+		labelSpacer?: boolean;
+		layout?: 'vertical' | 'horizontal';
+	}
+
+	let {
+		checked = $bindable(),
+		label,
+		labelSpacer = false,
+		layout = 'horizontal',
+		...rootProps
+	}: Props = $props();
+	const rootClass = $derived(
+		layout === 'vertical'
+			? 'flex flex-col items-start gap-1 data-disabled:cursor-not-allowed data-disabled:opacity-50'
+			: 'inline-flex cursor-pointer items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50'
+	);
+</script>
+
+{#if labelSpacer}
+	<div style="height: calc(var(--ark-label-height) + var(--ark-field-gap))"></div>
+{/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"
+	>
+		<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"
+		/>
+	</Switch.Control>
+	{#if label}
+		<Switch.Label class="cursor-pointer text-sm font-medium text-ink select-none">
+			{label}
+		</Switch.Label>
+	{/if}
+	<Switch.HiddenInput />
+</Switch.Root>

package/dist/components/switch/switch.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Switch, type SwitchRootBaseProps } from '@ark-ui/svelte/switch';
+interface Props extends SwitchRootBaseProps {
+    labelSpacer?: boolean;
+    layout?: 'vertical' | 'horizontal';
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

@@ -0,0 +1,5 @@
+import type { SwitchRootBaseProps } from '@ark-ui/svelte/switch';
+export interface SwitchProps extends SwitchRootBaseProps {
+    label?: string | undefined;
+    labelSpacer?: boolean;
+}

package/dist/components/switch/types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Root } from './tabs.svelte';
+export { default as Trigger } from './tab-trigger.svelte';
+export { default as Content } from './tab-content.svelte';
+export type { TabsProps } from './types';

package/dist/components/tabs/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './tabs.svelte';
+export { default as Trigger } from './tab-trigger.svelte';
+export { default as Content } from './tab-content.svelte';

package/dist/components/tabs/tab-content.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Tabs } from '@ark-ui/svelte/tabs';
+	import type { TabContentBaseProps } from '@ark-ui/svelte/tabs';
+
+	interface Props extends TabContentBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Tabs.Content
+	{...rest}
+	class={className ??
+		'flex-1 pt-4 outline-none data-[orientation=vertical]:pt-0 data-[orientation=vertical]:pl-4'}
+>
+	{@render children?.()}
+</Tabs.Content>

package/dist/components/tabs/tab-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TabContentBaseProps } from '@ark-ui/svelte/tabs';
+interface Props extends TabContentBaseProps {
+    class?: string;
+}
+declare const TabContent: import("svelte").Component<Props, {}, "">;
+type TabContent = ReturnType<typeof TabContent>;
+export default TabContent;

package/dist/components/tabs/tab-trigger.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Tabs } from '@ark-ui/svelte/tabs';
+	import type { TabTriggerBaseProps } from '@ark-ui/svelte/tabs';
+
+	interface Props extends TabTriggerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Tabs.Trigger
+	{...rest}
+	class={className ??
+		'inline-flex h-8 items-center justify-center gap-2 rounded-md bg-transparent px-3 text-sm whitespace-nowrap text-ink-dim transition-colors outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 data-selected:font-medium data-selected:text-ink data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:py-2'}
+>
+	{@render children?.()}
+</Tabs.Trigger>

package/dist/components/tabs/tab-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TabTriggerBaseProps } from '@ark-ui/svelte/tabs';
+interface Props extends TabTriggerBaseProps {
+    class?: string;
+}
+declare const TabTrigger: import("svelte").Component<Props, {}, "">;
+type TabTrigger = ReturnType<typeof TabTrigger>;
+export default TabTrigger;

package/dist/components/tabs/tabs.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Tabs } from '@ark-ui/svelte/tabs';
+	import { ClientOnly } from '@ark-ui/svelte/client-only';
+	import type { TabsProps } from './types';
+
+	let {
+		indicator = false,
+		value = $bindable(),
+		defaultValue,
+		orientation = 'horizontal',
+		triggers,
+		children,
+		...rootProps
+	}: TabsProps = $props();
+</script>
+
+<ClientOnly>
+	<Tabs.Root
+		{...rootProps}
+		bind:value
+		{defaultValue}
+		{orientation}
+		class="flex data-[orientation='horizontal']:flex-col data-[orientation='vertical']:flex-row"
+	>
+		<Tabs.List
+			class="relative isolate inline-flex gap-1 data-[orientation='horizontal']:flex-row data-[orientation='vertical']:flex-col"
+		>
+			{#if triggers}
+				{@render triggers()}
+			{/if}
+			{#if indicator}
+				<Tabs.Indicator
+					class="absolute -z-10 rounded-md bg-surface-2 transition-[width,height,left,top] duration-200 ease-out data-[orientation='horizontal']:h-8 data-[orientation='horizontal']:w-(--width) data-[orientation='vertical']:h-(--height) data-[orientation='vertical']:w-full"
+				/>
+			{/if}
+		</Tabs.List>
+		{@render children?.()}
+	</Tabs.Root>
+</ClientOnly>

package/dist/components/tabs/tabs.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Tabs } from '@ark-ui/svelte/tabs';
+import type { TabsProps } from './types';
+declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

@@ -0,0 +1,8 @@
+import type { TabsRootBaseProps } from '@ark-ui/svelte/tabs';
+import type { Snippet } from 'svelte';
+export interface TabsProps extends TabsRootBaseProps {
+    /** Whether to show the animated indicator behind the active tab */
+    indicator?: boolean;
+    /** Snippet for rendering tab triggers inside the list */
+    triggers?: Snippet;
+}

package/dist/components/tabs/types.js

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