compote-ui 0.9.0 → 0.11.0

package/dist/components/combobox/combobox.svelte

@@ -1,9 +1,10 @@
-<script lang="ts" generics="T extends ComboboxItem">
-	import { Combobox, createListCollection } from '@ark-ui/svelte/combobox';
+<script lang="ts" generics="T extends ListItem">
+	import { Combobox } 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 type { ComboboxProps } from './types';
+	import { createListCollection, type ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
 	import PhCaretDown from '../../icons/PhCaretDown.svelte';
 	import PhCheck from '../../icons/PhCheck.svelte';
@@ -27,13 +28,7 @@
 	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() ?? ''
-		})
-	);
+	const baseCollection = $derived(createListCollection(items));
 
 	// Filtered view — lightweight .filter() on keystroke, full collection when empty
 	const collection = $derived(

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

@@ -1,13 +1,14 @@
 import { Combobox } from '@ark-ui/svelte/combobox';
-import type { ComboboxItem, ComboboxProps } from './types';
-declare function $$render<T extends ComboboxItem>(): {
+import type { ComboboxProps } from './types';
+import { type ListItem } from '../../utils/collections';
+declare function $$render<T extends ListItem>(): {
     props: ComboboxProps<T>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends ComboboxItem> {
+declare class __sveltets_Render<T extends ListItem> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -15,12 +16,12 @@ declare class __sveltets_Render<T extends ComboboxItem> {
     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']>> & {
+    new <T extends ListItem>(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']>;
+    <T extends ListItem>(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>>;
+type Combobox<T extends ListItem> = InstanceType<typeof Combobox<T>>;
 export default Combobox;

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

@@ -1,10 +1,6 @@
 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'> {
+import type { ListItem } from '../../utils/collections';
+export interface ComboboxProps<T extends ListItem> extends Omit<ComboboxRootBaseProps<T>, 'value' | 'collection'> {
     value?: number | string | null | (number | string)[];
     items: T[];
     label?: 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/listbox/listbox.svelte

@@ -1,12 +1,13 @@
 <script module>
 	// eslint-disable-next-line no-import-assign
-	export type { ListboxItem, ListboxProps } from './types';
+	export type { ListboxProps } from './types';
 </script>
 
 <script lang="ts" generics="T extends number | string = number | string">
 	import { Listbox, createListCollection } from '@ark-ui/svelte/listbox';
 	import { useFilter } from '@ark-ui/svelte/locale';
-	import type { ListboxItem, ListboxProps } from './types';
+	import type { ListboxProps } from './types';
+	import type { ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
 	import PhCheck from '../../icons/PhCheck.svelte';
 
@@ -33,7 +34,7 @@
 			items,
 			itemToValue: (item) => item.value.toString(),
 			isItemDisabled: (item) => item.disabled === true,
-			...(hasGroups ? { groupBy: (item: ListboxItem<T>) => item.group ?? '' } : {})
+			...(hasGroups ? { groupBy: (item: ListItem<T>) => item.group ?? '' } : {})
 		})
 	);
 

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

@@ -1,4 +1,4 @@
-export type { ListboxItem, ListboxProps } from './types';
+export type { ListboxProps } from './types';
 import { Listbox } from '@ark-ui/svelte/listbox';
 import type { ListboxProps } from './types';
 declare function $$render<T extends number | string = number | string>(): {

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

@@ -1,12 +1,7 @@
 import type { ListboxRootBaseProps } from '@ark-ui/svelte/listbox';
-export interface ListboxItem<T = number | string> {
-    value: T;
-    label: string;
-    disabled?: boolean;
-    group?: string;
-}
-export interface ListboxProps<T extends number | string = number | string> extends Omit<ListboxRootBaseProps<ListboxItem<T>>, 'collection' | 'value'> {
-    items: ListboxItem<T>[];
+import type { ListItem } from '../../utils/collections';
+export interface ListboxProps<T extends number | string = number | string> extends Omit<ListboxRootBaseProps<ListItem<T>>, 'collection' | 'value'> {
+    items: ListItem<T>[];
     value?: T[];
     label?: string;
     name?: string;

package/dist/components/select/select.svelte

@@ -1,8 +1,9 @@
-<script lang="ts" generics="T extends SelectItem">
+<script lang="ts" generics="T extends ListItem">
 	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 { Select } from '@ark-ui/svelte/select';
+	import type { SelectProps } from './types';
+	import { createListCollection, type ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
 	import PhCaretDown from '../../icons/PhCaretDown.svelte';
 	import PhCheck from '../../icons/PhCheck.svelte';
@@ -20,13 +21,7 @@
 		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
-		})
-	);
+	const collection = $derived(createListCollection(items));
 </script>
 
 <Select.Root

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

@@ -1,13 +1,14 @@
 import { Select } from '@ark-ui/svelte/select';
-import type { SelectItem, SelectProps } from './types';
-declare function $$render<T extends SelectItem>(): {
+import type { SelectProps } from './types';
+import { type ListItem } from '../../utils/collections';
+declare function $$render<T extends ListItem>(): {
     props: SelectProps<T>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends SelectItem> {
+declare class __sveltets_Render<T extends ListItem> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -15,12 +16,12 @@ declare class __sveltets_Render<T extends SelectItem> {
     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']>> & {
+    new <T extends ListItem>(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']>;
+    <T extends ListItem>(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>>;
+type Select<T extends ListItem> = InstanceType<typeof Select<T>>;
 export default Select;

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

@@ -1,10 +1,6 @@
 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'> {
+import type { ListItem } from '../../utils/collections';
+export interface SelectProps<T extends ListItem> extends Omit<SelectRootBaseProps<T>, 'value' | 'collection'> {
     value?: number | string | null;
     items: T[];
     label?: string;

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

@@ -1,7 +1,8 @@
-<script lang="ts" generics="T extends TreeNode">
-	import { TreeView, createTreeCollection } from '@ark-ui/svelte/tree-view';
+<script lang="ts" generics="T extends TreeItem">
+	import { TreeView } from '@ark-ui/svelte/tree-view';
 	import { useFilter } from '@ark-ui/svelte/locale';
-	import type { TreeNode, TreeViewProps } from './types';
+	import type { TreeViewProps } from './types';
+	import { createTreeCollection, type TreeItem } from '../../utils/collections';
 	import { Debounced } from 'runed';
 	import PhX from '../../icons/PhX.svelte';
 	import PhCaretRight from '../../icons/PhCaretRight.svelte';
@@ -30,13 +31,7 @@
 	const filterFns = useFilter({ sensitivity: 'base' });
 	let searchTerm: string | undefined = $state();
 	const debouncedSearchTerm = new Debounced(() => searchTerm, 250);
-	const baseCollection = $derived(
-		createTreeCollection<T>({
-			nodeToValue: (node) => node.value.toString(),
-			nodeToString: (node) => node.label,
-			rootNode: { value: 'ROOT', label: '', children: items } as unknown as T
-		})
-	);
+	const baseCollection = $derived(createTreeCollection(items));
 	const collection = $derived.by(() => {
 		const term = debouncedSearchTerm.current ?? '';
 		return term.length > 0

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

@@ -1,13 +1,14 @@
 import { TreeView } from '@ark-ui/svelte/tree-view';
-import type { TreeNode, TreeViewProps } from './types';
-declare function $$render<T extends TreeNode>(): {
+import type { TreeViewProps } from './types';
+import { type TreeItem } from '../../utils/collections';
+declare function $$render<T extends TreeItem>(): {
     props: TreeViewProps<T>;
     exports: {};
     bindings: "selectedValue" | "checkedValue" | "contextNode";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends TreeNode> {
+declare class __sveltets_Render<T extends TreeItem> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -15,12 +16,12 @@ declare class __sveltets_Render<T extends TreeNode> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends TreeNode>(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']>> & {
+    new <T extends TreeItem>(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 TreeNode>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TreeItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const TreeView: $$IsomorphicComponent;
-type TreeView<T extends TreeNode> = InstanceType<typeof TreeView<T>>;
+type TreeView<T extends TreeItem> = InstanceType<typeof TreeView<T>>;
 export default TreeView;

package/dist/components/tree-view/types.d.ts

@@ -1,11 +1,6 @@
 import type { UseTreeViewProps } from '@ark-ui/svelte/tree-view';
-export interface TreeNode {
-    value: number | string;
-    label: string;
-    disabled?: boolean;
-    children?: TreeNode[];
-}
-export interface TreeViewProps<T extends TreeNode> extends Omit<UseTreeViewProps<T>, 'collection'> {
+import type { TreeItem } from '../../utils/collections';
+export interface TreeViewProps<T extends TreeItem> extends Omit<UseTreeViewProps<T>, 'collection'> {
     items?: T[];
     label?: string;
     contextNode?: string | null;

package/dist/index.d.ts

@@ -25,9 +25,8 @@ 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 type { TreeNode } from './components/tree-view/types';
-export { createListCollection } from '@ark-ui/svelte/collection';
-export type { CollectionItem, CollectionOptions, ListCollection } from '@ark-ui/svelte/collection';
-export { createTreeCollection } from '@ark-ui/svelte/collection';
-export type { TreeCollection, TreeCollectionOptions } from '@ark-ui/svelte/collection';
+export { createListCollection, createTreeCollection } from './utils/collections';
+export type { ListItem, TreeItem } from './utils/collections';
+export type { ListCollection, TreeCollection } from '@ark-ui/svelte/collection';

package/dist/index.js

@@ -19,6 +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 } from '@ark-ui/svelte/collection';
-export { createTreeCollection } from '@ark-ui/svelte/collection';
+export { createListCollection, createTreeCollection } from './utils/collections';

package/dist/utils/collections.d.ts

@@ -0,0 +1,15 @@
+import type { ListCollection, TreeCollection } from '@ark-ui/svelte/collection';
+export interface ListItem<T = number | string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+}
+export interface TreeItem {
+    value: number | string;
+    label: string;
+    disabled?: boolean;
+    children?: TreeItem[];
+}
+export declare function createListCollection<T extends ListItem>(items: T[]): ListCollection<T>;
+export declare function createTreeCollection<T extends TreeItem>(items: T[]): TreeCollection<T>;

package/dist/utils/collections.js

@@ -0,0 +1,17 @@
+import { createListCollection as arkCreateListCollection, createTreeCollection as arkCreateTreeCollection } from '@ark-ui/svelte/collection';
+export function createListCollection(items) {
+    return arkCreateListCollection({
+        items,
+        itemToValue: (item) => item.value.toString(),
+        itemToString: (item) => item.label,
+        isItemDisabled: (item) => item.disabled === true
+    });
+}
+export function createTreeCollection(items) {
+    return arkCreateTreeCollection({
+        nodeToValue: (node) => node.value.toString(),
+        nodeToString: (node) => node.label,
+        nodeToChildren: (node) => (node.children ?? []),
+        rootNode: { value: 'ROOT', label: '', children: items }
+    });
+}

package/package.json

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

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

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

package/dist/components/switch/index.js

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