@x33025/sveltely 0.1.2 → 0.1.4

package/dist/components/Library/Dropdown/Dropdown.svelte

@@ -1,145 +1,71 @@
-<script lang="ts" generics="T extends string | number = string">
-	import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from '@lucide/svelte';
-	import Divider from '../Divider';
+<script lang="ts" generics="TValue = unknown">
+	import { ChevronDownIcon } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
 	import Floating from '../Floating/Floating.svelte';
-	import SearchInput from '../SearchInput';
 	import { surfaceStyle, type StyleProps } from '../../../style/surface';
 	import type { Anchor } from '../../../utils/positioning';
-	import type {
-		DropdownAction,
-		DropdownDivider,
-		DropdownEntry,
-		DropdownGroup,
-		DropdownItem,
-		DropdownSubmenu
-	} from './types';
+	import { setDropdownContext, type DropdownTriggerState } from './context';
 
 	type Props = {
-		items: DropdownEntry<T>[];
-		value?: T | null;
+		value?: TValue | null;
 		open?: boolean;
 		label?: string;
 		placeholder?: string;
+		selectedLabel?: string | null;
 		disabled?: boolean;
 		closeOnSelect?: boolean;
 		showCheck?: boolean;
-		searchPlaceholder?: string;
 		placement?: Anchor;
-		onSearch?: (query: string) => void | Promise<void>;
-		onSelect?: (item: DropdownItem<T>) => void;
+		trigger?: Snippet<[DropdownTriggerState<TValue>]>;
+		children?: Snippet;
+		onValueChange?: (value: TValue) => void;
 	} & StyleProps;
 
-	const isGroup = (entry: DropdownEntry<T>): entry is DropdownGroup<T> =>
-		'type' in entry && entry.type === 'group';
-	const isAction = (entry: DropdownItem<T> | DropdownAction): entry is DropdownAction =>
-		'type' in entry && entry.type === 'action';
-	const isDivider = (entry: DropdownEntry<T>): entry is DropdownDivider =>
-		'type' in entry && entry.type === 'divider';
-	const isSubmenu = (entry: DropdownEntry<T>): entry is DropdownSubmenu<T> =>
-		'type' in entry && entry.type === 'submenu';
-
 	let {
-		items,
-		value = $bindable<T | null>(null),
+		value = $bindable<TValue | null>(null),
 		open = $bindable(false),
 		label = 'Select option',
 		placeholder = 'Select option',
+		selectedLabel = null,
 		disabled = false,
 		closeOnSelect = true,
 		showCheck = true,
-		searchPlaceholder = 'Search',
 		placement = 'bottom',
-		onSearch,
-		onSelect,
+		trigger: triggerContent,
+		children,
+		onValueChange,
 		...styleProps
 	}: Props = $props();
 
 	const dropdownStyle = $derived.by(() => surfaceStyle(styleProps, 'dropdown'));
+	const triggerText = $derived(selectedLabel ?? (value === null ? placeholder : String(value)));
 
-	let query = $state('');
-	let lastSearchedQuery = '';
-
-	const searchEnabled = $derived(!!onSearch);
-
-	const flattenItems = (
-		entries: DropdownEntry<T>[],
-		inheritedDisabled = false
-	): DropdownItem<T>[] =>
-		entries.flatMap((entry) => {
-			if (isDivider(entry)) {
-				return [];
-			}
-
-			const nextDisabled = inheritedDisabled || !!entry.disabled;
-			if (isGroup(entry) || isSubmenu(entry)) {
-				return flattenItems(entry.items, nextDisabled);
-			}
-			if (isAction(entry)) {
-				return [];
-			}
-			return [{ ...entry, disabled: nextDisabled || entry.disabled }];
-		});
-
-	const findFirstRenderableLabel = (entries: DropdownEntry<T>[]): string | null => {
-		for (const entry of entries) {
-			if (isGroup(entry)) {
-				const nested = findFirstRenderableLabel(entry.items);
-				if (nested) return nested;
-				continue;
-			}
-			if (isDivider(entry)) {
-				continue;
-			}
-			return entry.label;
-		}
-		return null;
-	};
-
-	const flatItems = $derived.by(() => flattenItems(items));
-
-	const selectedItem = $derived.by(
-		() => flatItems.find((item) => item.value === value) ?? null
-	);
-
-	const triggerText = $derived(selectedItem?.label ?? placeholder);
-
-	const filteredItems = $derived(items);
-
-	const firstRenderableLabel = $derived.by(() => findFirstRenderableLabel(filteredItems));
-
-	const itemRadiusSourceEnabled = $derived.by(() => {
-		if (searchEnabled) return false;
-		const firstEntry = filteredItems[0];
-		if (!firstEntry) return false;
-		if (isGroup(firstEntry)) {
-			return !firstEntry.label;
-		}
-		return true;
-	});
-
-	function handleSelect(item: DropdownItem<T>) {
-		if (disabled || item.disabled) return;
-		value = item.value;
-		onSelect?.(item);
+	function select(nextValue: TValue) {
+		if (disabled) return;
+		value = nextValue;
+		onValueChange?.(nextValue);
 		if (closeOnSelect) open = false;
 	}
 
-	function handleAction(item: DropdownAction) {
-		if (disabled || item.disabled) return;
-		item.onSelect();
-		if (closeOnSelect) open = false;
-	}
-
-	const isEntryDisabled = (entry: { disabled?: boolean }, inheritedDisabled = false) =>
-		disabled || inheritedDisabled || !!entry.disabled;
-
-	const isRadiusSource = (label: string) => itemRadiusSourceEnabled && label === firstRenderableLabel;
-
-	$effect(() => {
-		if (!onSearch) return;
-		if (query === lastSearchedQuery) return;
-		lastSearchedQuery = query;
-		void onSearch(query);
+	function close() {
+		open = false;
+	}
+
+	setDropdownContext<TValue>({
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get closeOnSelect() {
+			return closeOnSelect;
+		},
+		get showCheck() {
+			return showCheck;
+		},
+		select,
+		close
 	});
 </script>
 
@@ -153,123 +79,41 @@
 	matchPanelRadiusToSource={true}
 >
 	{#snippet trigger(floating)}
-		<button
-			use:floating.useTrigger
-			type="button"
-			class="dropdown-trigger justify-between"
-			aria-label={label}
-			aria-disabled={disabled}
-			disabled={disabled}
-			style={dropdownStyle}
-			aria-expanded={floating.open}
-			aria-haspopup="dialog"
-			onclick={floating.toggle}
-		>
-			<span class="dropdown-trigger-label">{triggerText}</span>
-			<ChevronDownIcon class="size-4 text-zinc-500" />
-		</button>
+		{#if triggerContent}
+			{@render triggerContent({
+				useTrigger: floating.useTrigger,
+				open: floating.open,
+				value,
+				selectedLabel: triggerText,
+				placeholder,
+				disabled,
+				toggle: floating.toggle,
+				openPanel: floating.openPanel,
+				closePanel: floating.closePanel
+			})}
+		{:else}
+			<button
+				use:floating.useTrigger
+				type="button"
+				class="dropdown-trigger justify-between"
+				aria-label={label}
+				aria-disabled={disabled}
+				{disabled}
+				style={dropdownStyle}
+				aria-expanded={floating.open}
+				aria-haspopup="dialog"
+				onclick={floating.toggle}
+			>
+				<span class="dropdown-trigger-label">{triggerText}</span>
+				<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
+			</button>
+		{/if}
 	{/snippet}
 
-	<div
-		class="dropdown-content vstack"
-		style={`${dropdownStyle} --dropdown-item-radius: ${searchEnabled ? 'var(--sveltely-border-radius)' : 'var(--sveltely-border-radius-nested)'};`}
-	>
-		{#if searchEnabled}
-			<SearchInput
-				bind:value={query}
-				placeholder={searchPlaceholder}
-				radiusSource={true}
-			/>
+	<div class="dropdown-content vstack" style={dropdownStyle}>
+		{#if children}
+			{@render children()}
 		{/if}
-		{#snippet renderEntries(entries: DropdownEntry<T>[], inheritedDisabled = false)}
-			{#each entries as entry, index (`${index}-${entry.type ?? 'option'}-${isDivider(entry) ? 'divider' : entry.label}`)}
-				{#if isDivider(entry)}
-					<Divider />
-				{:else if isGroup(entry)}
-					<div class="dropdown-group vstack">
-						{#if entry.label}
-							<div class="dropdown-group-label">{entry.label}</div>
-						{/if}
-						{@render renderEntries(entry.items, inheritedDisabled || !!entry.disabled)}
-					</div>
-				{:else if isSubmenu(entry)}
-					<Floating
-						placement={entry.placement ?? 'right'}
-						rootClass="dropdown-submenu-root relative w-full"
-						panelClass="dropdown-panel fixed z-50 focus:outline-none"
-						panelStyle={dropdownStyle}
-						contentStyle=""
-						matchPanelRadiusToSource={true}
-						closeOnPointerLeave={true}
-					>
-						{#snippet trigger(floating)}
-							<button
-								use:floating.useTrigger
-								type="button"
-								class="dropdown-item dropdown-submenu-trigger inline-flex items-center justify-between text-left"
-								class:dropdown-item-open={floating.open}
-								data-popover-radius-source={isRadiusSource(entry.label) ? 'true' : undefined}
-								disabled={isEntryDisabled(entry, inheritedDisabled)}
-								aria-expanded={floating.open}
-								aria-haspopup="menu"
-								onmouseenter={() => {
-									if (!isEntryDisabled(entry, inheritedDisabled)) {
-										void floating.openPanel();
-									}
-								}}
-								onclick={(event) => {
-									event.stopPropagation();
-									floating.toggle();
-								}}
-							>
-								<span>{entry.label}</span>
-								<ChevronRightIcon class="size-4 text-zinc-500" />
-							</button>
-						{/snippet}
-
-						<div
-							class="dropdown-content vstack"
-							style={`${dropdownStyle} --dropdown-item-radius: var(--sveltely-border-radius-nested);`}
-						>
-							{@render renderEntries(entry.items, inheritedDisabled || !!entry.disabled)}
-						</div>
-					</Floating>
-				{:else if isAction(entry)}
-					<button
-						type="button"
-						class="dropdown-item inline-flex items-center justify-between text-left"
-						data-popover-radius-source={isRadiusSource(entry.label) ? 'true' : undefined}
-						disabled={isEntryDisabled(entry, inheritedDisabled)}
-						onclick={() =>
-							handleAction({
-								...entry,
-								disabled: inheritedDisabled || entry.disabled
-							})}
-					>
-						<span>{entry.label}</span>
-					</button>
-				{:else}
-					<button
-						type="button"
-						class="dropdown-item inline-flex items-center justify-between text-left"
-						data-popover-radius-source={isRadiusSource(entry.label) ? 'true' : undefined}
-						disabled={isEntryDisabled(entry, inheritedDisabled)}
-						onclick={() =>
-							handleSelect({
-								...entry,
-								disabled: inheritedDisabled || entry.disabled
-							})}
-					>
-						<span>{entry.label}</span>
-						{#if showCheck && entry.value === value}
-							<CheckIcon class="size-4 text-zinc-700" />
-						{/if}
-					</button>
-				{/if}
-			{/each}
-		{/snippet}
-
-		{@render renderEntries(filteredItems)}
 	</div>
 </Floating>
 
@@ -279,7 +123,7 @@
 		--sveltely-nested-inset: var(--dropdown-inset);
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
+		background: var(--sveltely-background-color);
 		padding: var(--dropdown-inset);
 	}
 
@@ -290,13 +134,16 @@
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
-		color: var(--color-zinc-800);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
 		line-height: 1.25rem;
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
 	.dropdown-trigger-label {
@@ -315,22 +162,10 @@
 		background: var(--sveltely-hover-color);
 	}
 
-	.dropdown-group-label {
-		padding-inline: 0.25rem;
-		padding-top: 0.25rem;
-		color: var(--color-zinc-500);
-		font-size: 0.75rem;
-		line-height: 1rem;
-		font-weight: 500;
-	}
-
 	.dropdown-content {
 		--dropdown-item-padding-x: calc(var(--sveltely-padding-x) * 0.67);
 		--dropdown-item-padding-y: calc(var(--sveltely-padding-y) * 0.33);
-		gap: var(--sveltely-inset);
-	}
-
-	.dropdown-group {
+		--dropdown-item-radius: var(--sveltely-border-radius-nested);
 		gap: var(--sveltely-inset);
 	}
 
@@ -340,28 +175,4 @@
 		margin-block: calc(var(--sveltely-inset) * 0.5);
 		background: var(--sveltely-border-color);
 	}
-
-	.dropdown-item {
-		width: 100%;
-		gap: calc(var(--sveltely-inset) * 2);
-		border-radius: var(--dropdown-item-radius, var(--sveltely-border-radius-nested));
-		padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
-	}
-
-	.dropdown-item :global(*) {
-		border-radius: inherit;
-	}
-
-	.dropdown-item:hover {
-		background: var(--sveltely-hover-color);
-	}
-
-	.dropdown-item-open {
-		background: var(--sveltely-hover-color);
-	}
-
-	.dropdown-item:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
 </style>

package/dist/components/Library/Dropdown/Dropdown.svelte.d.ts

@@ -1,40 +1,41 @@
+import type { Snippet } from 'svelte';
 import { type StyleProps } from '../../../style/surface';
 import type { Anchor } from '../../../utils/positioning';
-import type { DropdownEntry, DropdownItem } from './types';
-declare function $$render<T extends string | number = string>(): {
+import { type DropdownTriggerState } from './context';
+declare function $$render<TValue = unknown>(): {
     props: {
-        items: DropdownEntry<T>[];
-        value?: T | null;
+        value?: TValue | null;
         open?: boolean;
         label?: string;
         placeholder?: string;
+        selectedLabel?: string | null;
         disabled?: boolean;
         closeOnSelect?: boolean;
         showCheck?: boolean;
-        searchPlaceholder?: string;
         placement?: Anchor;
-        onSearch?: (query: string) => void | Promise<void>;
-        onSelect?: (item: DropdownItem<T>) => void;
+        trigger?: Snippet<[DropdownTriggerState<TValue>]>;
+        children?: Snippet;
+        onValueChange?: (value: TValue) => void;
     } & StyleProps;
     exports: {};
     bindings: "value" | "open";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends string | number = string> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<TValue = unknown> {
+    props(): ReturnType<typeof $$render<TValue>>['props'];
+    events(): ReturnType<typeof $$render<TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TValue>>['slots'];
     bindings(): "value" | "open";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends string | number = string>(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 = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    new <TValue = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TValue>['props']>, ReturnType<__sveltets_Render<TValue>['events']>, ReturnType<__sveltets_Render<TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TValue>['exports']>;
+    <TValue = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<TValue>['props']> & {}): ReturnType<__sveltets_Render<TValue>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Dropdown: $$IsomorphicComponent;
-type Dropdown<T extends string | number = string> = InstanceType<typeof Dropdown<T>>;
+type Dropdown<TValue = unknown> = InstanceType<typeof Dropdown<TValue>>;
 export default Dropdown;

package/dist/components/Library/Dropdown/Item.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" generics="TValue = unknown">
+	import { CheckIcon } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import { getDropdownContext, type DropdownItemState } from './context';
+
+	type Props = {
+		value: TValue;
+		disabled?: boolean;
+		showCheck?: boolean;
+		children?: Snippet<[DropdownItemState<TValue>]>;
+	};
+
+	let { value, disabled = false, showCheck, children }: Props = $props();
+
+	const dropdown = getDropdownContext<TValue>();
+	const selected = $derived(dropdown.value === value);
+	const resolvedDisabled = $derived(dropdown.disabled || disabled);
+	const resolvedShowCheck = $derived(showCheck ?? dropdown.showCheck);
+
+	function select() {
+		if (resolvedDisabled) return;
+		dropdown.select(value);
+	}
+</script>
+
+<button
+	type="button"
+	class="dropdown-item inline-flex items-center text-left"
+	data-popover-radius-source
+	disabled={resolvedDisabled}
+	aria-pressed={selected}
+	onclick={select}
+>
+	{#if children}
+		{@render children({
+			value,
+			selected,
+			disabled: resolvedDisabled,
+			close: dropdown.close,
+			select
+		})}
+	{/if}
+	{#if resolvedShowCheck && selected}
+		<CheckIcon class="dropdown-item-check size-4 text-[var(--sveltely-primary-color)]" />
+	{/if}
+</button>
+
+<style>
+	.dropdown-item {
+		width: 100%;
+		gap: calc(var(--sveltely-inset) * 2);
+		border-radius: var(--dropdown-item-radius, var(--sveltely-border-radius-nested));
+		padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+	}
+
+	.dropdown-item :global(*) {
+		border-radius: inherit;
+	}
+
+	.dropdown-item:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.dropdown-item:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	:global(.dropdown-item-check) {
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/Library/Dropdown/Item.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import { type DropdownItemState } from './context';
+declare function $$render<TValue = unknown>(): {
+    props: {
+        value: TValue;
+        disabled?: boolean;
+        showCheck?: boolean;
+        children?: Snippet<[DropdownItemState<TValue>]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TValue = unknown> {
+    props(): ReturnType<typeof $$render<TValue>>['props'];
+    events(): ReturnType<typeof $$render<TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TValue>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TValue = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TValue>['props']>, ReturnType<__sveltets_Render<TValue>['events']>, ReturnType<__sveltets_Render<TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TValue>['exports']>;
+    <TValue = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<TValue>['props']> & {}): ReturnType<__sveltets_Render<TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Item: $$IsomorphicComponent;
+type Item<TValue = unknown> = InstanceType<typeof Item<TValue>>;
+export default Item;

package/dist/components/Library/Dropdown/Section.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		label?: string;
+		children?: Snippet;
+	};
+
+	let { label, children }: Props = $props();
+</script>
+
+<div class="dropdown-section vstack">
+	{#if label}
+		<div class="dropdown-section-label">{label}</div>
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.dropdown-section {
+		gap: var(--sveltely-inset);
+	}
+
+	.dropdown-section-label {
+		padding-inline: 0.25rem;
+		padding-top: 0.25rem;
+		color: var(--sveltely-secondary-color);
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 500;
+	}
+</style>

package/dist/components/Library/Dropdown/Section.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    label?: string;
+    children?: Snippet;
+};
+declare const Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/components/Library/Dropdown/context.d.ts

@@ -0,0 +1,34 @@
+import type { Action } from 'svelte/action';
+export type DropdownValue = unknown;
+export type DropdownTriggerState<TValue = DropdownValue> = {
+    useTrigger: Action<HTMLElement>;
+    open: boolean;
+    value: TValue | null;
+    selectedLabel: string;
+    placeholder: string;
+    disabled: boolean;
+    toggle: () => void;
+    openPanel: () => Promise<void>;
+    closePanel: () => void;
+};
+export type DropdownItemState<TValue = DropdownValue> = {
+    value: TValue;
+    selected: boolean;
+    disabled: boolean;
+    close: () => void;
+    select: () => void;
+};
+export type DropdownActionState = {
+    disabled: boolean;
+    close: () => void;
+};
+export type DropdownContext<TValue = DropdownValue> = {
+    get value(): TValue | null;
+    get disabled(): boolean;
+    get closeOnSelect(): boolean;
+    get showCheck(): boolean;
+    select: (value: TValue) => void;
+    close: () => void;
+};
+export declare const setDropdownContext: <TValue>(context: DropdownContext<TValue>) => void;
+export declare const getDropdownContext: <TValue>() => DropdownContext<TValue>;

package/dist/components/Library/Dropdown/context.js

@@ -0,0 +1,6 @@
+import { getContext, setContext } from 'svelte';
+const dropdownContextKey = Symbol('dropdown');
+export const setDropdownContext = (context) => {
+    setContext(dropdownContextKey, context);
+};
+export const getDropdownContext = () => getContext(dropdownContextKey);