compote-ui 0.10.0 → 0.12.0

package/dist/components/field/field.svelte

@@ -3,9 +3,36 @@
 	import type { FieldRootProps } from './types';
 	import { cn } from 'tailwind-variants';
 
-	let { class: className, children, ...rest }: FieldRootProps = $props();
+	let {
+		form,
+		field,
+		label,
+		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)}
+>
+	{#if label}
+		<Field.Label>{label}<Field.RequiredIndicator /></Field.Label>
+	{/if}
 	{@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,16 @@
 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;
+    label?: string;
+    helperText?: string;
 }
 export interface FieldLabelProps extends FieldLabelBaseProps {
     class?: string;

package/dist/components/fieldset/fieldset-error-text.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Fieldset } from '@ark-ui/svelte/fieldset';
+	import type { FieldsetErrorTextProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldsetErrorTextProps = $props();
+</script>
+
+<Fieldset.ErrorText {...rest} class={cn('text-xs font-medium text-danger', className)}>
+	{@render children?.()}
+</Fieldset.ErrorText>

package/dist/components/fieldset/fieldset-error-text.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldsetErrorTextProps } from './types';
+declare const FieldsetErrorText: import("svelte").Component<FieldsetErrorTextProps, {}, "">;
+type FieldsetErrorText = ReturnType<typeof FieldsetErrorText>;
+export default FieldsetErrorText;

package/dist/components/fieldset/fieldset-helper-text.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Fieldset } from '@ark-ui/svelte/fieldset';
+	import type { FieldsetHelperTextProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldsetHelperTextProps = $props();
+</script>
+
+<Fieldset.HelperText {...rest} class={cn('text-sm text-ink-dim', className)}>
+	{@render children?.()}
+</Fieldset.HelperText>

package/dist/components/fieldset/fieldset-helper-text.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldsetHelperTextProps } from './types';
+declare const FieldsetHelperText: import("svelte").Component<FieldsetHelperTextProps, {}, "">;
+type FieldsetHelperText = ReturnType<typeof FieldsetHelperText>;
+export default FieldsetHelperText;

package/dist/components/fieldset/fieldset-legend.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Fieldset } from '@ark-ui/svelte/fieldset';
+	import type { FieldsetLegendProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldsetLegendProps = $props();
+</script>
+
+<Fieldset.Legend
+	{...rest}
+	class={cn(
+		'mb-1 font-semibold data-disabled:cursor-not-allowed data-disabled:opacity-70',
+		className
+	)}
+>
+	{@render children?.()}
+</Fieldset.Legend>

package/dist/components/fieldset/fieldset-legend.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldsetLegendProps } from './types';
+declare const FieldsetLegend: import("svelte").Component<FieldsetLegendProps, {}, "">;
+type FieldsetLegend = ReturnType<typeof FieldsetLegend>;
+export default FieldsetLegend;

package/dist/components/fieldset/fieldset.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Fieldset } from '@ark-ui/svelte/fieldset';
+	import type { FieldsetRootProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldsetRootProps = $props();
+</script>
+
+<Fieldset.Root {...rest} class={cn('m-0 flex min-w-0 flex-col gap-3 border-0 p-0', className)}>
+	{@render children?.()}
+</Fieldset.Root>

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

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

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

@@ -0,0 +1,5 @@
+export { default as Root } from './fieldset.svelte';
+export { default as Legend } from './fieldset-legend.svelte';
+export { default as HelperText } from './fieldset-helper-text.svelte';
+export { default as ErrorText } from './fieldset-error-text.svelte';
+export type { FieldsetRootProps, FieldsetLegendProps, FieldsetHelperTextProps, FieldsetErrorTextProps } from './types';

package/dist/components/fieldset/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './fieldset.svelte';
+export { default as Legend } from './fieldset-legend.svelte';
+export { default as HelperText } from './fieldset-helper-text.svelte';
+export { default as ErrorText } from './fieldset-error-text.svelte';

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

@@ -0,0 +1,13 @@
+import type { FieldsetRootBaseProps, FieldsetLegendBaseProps, FieldsetHelperTextBaseProps, FieldsetErrorTextBaseProps } from '@ark-ui/svelte/fieldset';
+export interface FieldsetRootProps extends FieldsetRootBaseProps {
+    class?: string;
+}
+export interface FieldsetLegendProps extends FieldsetLegendBaseProps {
+    class?: string;
+}
+export interface FieldsetHelperTextProps extends FieldsetHelperTextBaseProps {
+    class?: string;
+}
+export interface FieldsetErrorTextProps extends FieldsetErrorTextBaseProps {
+    class?: string;
+}

package/dist/components/fieldset/types.js

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

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>
@@ -53,7 +50,7 @@
 		>
 			<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/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';

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
 export * as Menu from './components/menu';
 export * as Field from './components/field';
+export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { createListCollection, createTreeCollection } from './utils/collections';
 export type { ListItem, TreeItem } from './utils/collections';

package/dist/index.js

@@ -19,5 +19,6 @@ export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
 export * as Menu from './components/menu';
 export * as Field from './components/field';
+export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { createListCollection, createTreeCollection } from './utils/collections';

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "compote-ui",
-	"version": "0.10.0",
+	"version": "0.12.0",
+	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",