@x33025/sveltely 0.0.58 → 0.1.0

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    checked?: boolean;
+    label?: string;
+    children?: Snippet;
+} & StyleProps & Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/Library/Checkbox/index.d.ts

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

package/dist/components/Library/Checkbox/index.js

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

package/dist/components/{ChipInput.demo.svelte → Library/ChipInput/ChipInput.demo.svelte}

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'ChipInput',
-		description: 'Editable chip list with bindable tags.',
-		isProminent: false
+		description: 'Editable chip list with bindable tags.'
 	};
 </script>
 

package/dist/components/{ChipInput.demo.svelte.d.ts → Library/ChipInput/ChipInput.demo.svelte.d.ts}

@@ -1,7 +1,6 @@
 export declare const demo: {
     name: string;
     description: string;
-    isProminent: boolean;
 };
 import ChipInput from './ChipInput.svelte';
 declare const ChipInput: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/{ChipInput.svelte → Library/ChipInput/ChipInput.svelte}

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { tick } from 'svelte';
 	import { Plus } from '@lucide/svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 
 	type Props = {
 		placeholder?: string;
@@ -9,16 +10,22 @@
 		selection?: string[];
 		disabled?: boolean;
 		action?: Snippet;
-	};
+	} & StyleProps & Record<string, unknown>;
 
 	let {
 		placeholder = 'Add a tag...',
 		tags = $bindable<string[]>(),
 		selection = $bindable<string[] | undefined>(),
 		disabled = false,
-		action
+		action,
+		...restProps
 	}: Props = $props();
 
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'chip-input'));
+
 	let inputValue = $state('');
 	let showInput = $state(false);
 	let inputEl = $state<HTMLInputElement | null>(null);
@@ -237,8 +244,10 @@
 <div
 	bind:this={rootEl}
 	class="chip-input hstack w-full flex-wrap items-center"
+	style={rootStyle}
 	class:chip-input-disabled={disabled}
 	aria-disabled={disabled}
+	{...props}
 >
 	{#each tags as tag, index (tag)}
 		{#if editingTag === tag}
@@ -295,7 +304,7 @@
 			{disabled}
 			onclick={openInput}
 		>
-			<Plus class="size-3" />
+			<Plus class="chip-input-action-icon" />
 		</button>
 	{/if}
 
@@ -303,3 +312,68 @@
 		{@render action()}
 	{/if}
 </div>
+
+<style>
+	.chip-input {
+		--chip-input-font-size: calc(var(--sveltely-font-size) * 0.857);
+		--chip-input-line-height: calc(var(--chip-input-font-size) * 1.333);
+		--chip-input-scale: calc(var(--chip-input-font-size) / 0.75rem);
+		--chip-input-icon-size: calc(var(--chip-input-font-size) * 1);
+		--chip-input-padding-y: calc(var(--sveltely-padding-y) * 0.33 * var(--chip-input-scale));
+		--chip-input-padding-x: calc(var(--sveltely-padding-x) * 0.67 * var(--chip-input-scale));
+		--chip-input-control-height: calc(var(--chip-input-line-height) + (var(--chip-input-padding-y) * 2) + 2px);
+		gap: calc(var(--sveltely-gap) * 0.5);
+	}
+
+	.chip {
+		box-sizing: border-box;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: var(--color-zinc-100);
+		color: black;
+		min-height: var(--chip-input-control-height);
+		padding: var(--chip-input-padding-y) var(--chip-input-padding-x);
+		font-size: var(--chip-input-font-size);
+		line-height: var(--chip-input-line-height);
+		white-space: nowrap;
+	}
+
+	.chip-selected {
+		border-color: var(--color-zinc-300);
+	}
+
+	.chip:hover,
+	.chip-hovered {
+		background: var(--sveltely-hover-color);
+	}
+
+	.chip-input-field:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.chip-input-disabled {
+		pointer-events: none;
+	}
+
+	.chip-input-disabled .chip {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.chip-input-disabled .chip:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.chip-input-action {
+		padding: 0;
+		width: var(--chip-input-control-height);
+		min-width: var(--chip-input-control-height);
+		height: var(--chip-input-control-height);
+		min-height: var(--chip-input-control-height);
+	}
+
+	:global(.chip-input-action-icon) {
+		width: var(--chip-input-icon-size);
+		height: var(--chip-input-icon-size);
+	}
+</style>

package/dist/components/{ChipInput.svelte.d.ts → Library/ChipInput/ChipInput.svelte.d.ts}

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
 type Props = {
     placeholder?: string;
     tags: string[];
     selection?: string[];
     disabled?: boolean;
     action?: Snippet;
-};
+} & StyleProps & Record<string, unknown>;
 declare const ChipInput: import("svelte").Component<Props, {}, "tags" | "selection">;
 type ChipInput = ReturnType<typeof ChipInput>;
 export default ChipInput;

package/dist/components/Library/ChipInput/index.d.ts

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

package/dist/components/Library/ChipInput/index.js

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

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

@@ -0,0 +1,54 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Dropdown',
+		description: 'Structured dropdown menu with grouped items and automatic close on selection.'
+	};
+</script>
+
+<script lang="ts">
+	import Dropdown from './Dropdown.svelte';
+
+	const items = [
+		{
+			type: 'group' as const,
+			label: 'Publishing',
+			items: [
+				{ label: 'Draft', value: 'draft' },
+				{ label: 'Scheduled', value: 'scheduled' },
+				{
+					type: 'submenu' as const,
+					label: 'Advanced',
+					items: [
+						{ label: 'Review queue', value: 'review' },
+						{
+							type: 'action' as const,
+							label: 'Open workflow',
+							onSelect: () => {
+								console.log('Open workflow');
+							}
+						}
+					]
+				},
+				{
+					type: 'action' as const,
+					label: 'Create new status',
+					onSelect: () => {
+						console.log('Create new status');
+					}
+				}
+			]
+		},
+		{
+			type: 'group' as const,
+			label: 'Visibility',
+			items: [
+				{ label: 'Public', value: 'public' },
+				{ label: 'Private', value: 'private', disabled: true }
+			]
+		}
+	];
+
+	let value = $state<string | null>('draft');
+</script>
+
+<Dropdown {items} bind:value placeholder="Choose status" searchable={true} />

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

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Dropdown from './Dropdown.svelte';
+declare const Dropdown: import("svelte").Component<Record<string, never>, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

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

@@ -0,0 +1,346 @@
+<script lang="ts" generics="T extends string | number = string">
+	import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from '@lucide/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,
+		DropdownEntry,
+		DropdownGroup,
+		DropdownItem,
+		DropdownSubmenu
+	} from './types';
+
+	type Props = {
+		items: DropdownEntry<T>[];
+		value?: T | null;
+		open?: boolean;
+		label?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		closeOnSelect?: boolean;
+		showCheck?: boolean;
+		searchable?: boolean;
+		searchPlaceholder?: string;
+		placement?: Anchor;
+		onSelect?: (item: DropdownItem<T>) => 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 isSubmenu = (entry: DropdownEntry<T>): entry is DropdownSubmenu<T> =>
+		'type' in entry && entry.type === 'submenu';
+
+	let {
+		items,
+		value = $bindable<T | null>(null),
+		open = $bindable(false),
+		label = 'Select option',
+		placeholder = 'Select option',
+		disabled = false,
+		closeOnSelect = true,
+		showCheck = true,
+		searchable = false,
+		searchPlaceholder = 'Search',
+		placement = 'bottom',
+		onSelect,
+		...styleProps
+	}: Props = $props();
+
+	const dropdownStyle = $derived.by(() => surfaceStyle(styleProps, 'dropdown'));
+
+	let query = $state('');
+
+	const flattenItems = (
+		entries: DropdownEntry<T>[],
+		inheritedDisabled = false
+	): DropdownItem<T>[] =>
+		entries.flatMap((entry) => {
+			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 filterEntries = (entries: DropdownEntry<T>[]): DropdownEntry<T>[] =>
+		entries.flatMap((entry) => {
+			if (isGroup(entry)) {
+				const nextItems = filterEntries(entry.items);
+				return nextItems.length > 0 ? [{ ...entry, items: nextItems }] : [];
+			}
+
+			if (isSubmenu(entry)) {
+				const nextItems = filterEntries(entry.items);
+				const matches = entry.label.toLowerCase().includes(normalizedQuery);
+				if (!matches && nextItems.length === 0) {
+					return [];
+				}
+				return [{ ...entry, items: matches ? entry.items : nextItems }];
+			}
+
+			return entry.label.toLowerCase().includes(normalizedQuery) ? [entry] : [];
+		});
+
+	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;
+			}
+			return entry.label;
+		}
+		return null;
+	};
+
+	const normalizedQuery = $derived(query.trim().toLowerCase());
+
+	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.by(() =>
+		normalizedQuery ? filterEntries(items) : items
+	);
+
+	const firstRenderableLabel = $derived.by(() => findFirstRenderableLabel(filteredItems));
+
+	const itemRadiusSourceEnabled = $derived.by(() => {
+		if (searchable) 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);
+		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;
+</script>
+
+<Floating
+	bind:open
+	{placement}
+	rootClass="relative inline-block text-left"
+	panelClass="dropdown-panel fixed z-50 focus:outline-none"
+	panelStyle={dropdownStyle}
+	contentStyle=""
+	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>{triggerText}</span>
+			<ChevronDownIcon class="size-4 text-zinc-500" />
+		</button>
+	{/snippet}
+
+	<div
+		class="dropdown-content vstack"
+		style={`${dropdownStyle} --dropdown-item-radius: ${searchable ? 'var(--sveltely-border-radius)' : 'var(--sveltely-border-radius-nested)'};`}
+	>
+		{#if searchable}
+			<SearchInput
+				bind:value={query}
+				placeholder={searchPlaceholder}
+				radiusSource={true}
+				class="w-64"
+			/>
+		{/if}
+		{#snippet renderEntries(entries: DropdownEntry<T>[], inheritedDisabled = false)}
+			{#each entries as entry, index (`${index}-${entry.type ?? 'option'}-${entry.label}`)}
+				{#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>
+
+<style>
+	:global(.dropdown-panel) {
+		--dropdown-inset: var(--sveltely-inset);
+		--sveltely-nested-inset: var(--dropdown-inset);
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: white;
+		padding: var(--dropdown-inset);
+	}
+
+	.dropdown-trigger {
+		display: inline-flex;
+		min-width: 8rem;
+		align-items: center;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: white;
+		color: var(--color-zinc-800);
+		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;
+	}
+
+	.dropdown-trigger:hover {
+		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 {
+		gap: var(--sveltely-inset);
+	}
+
+	.dropdown-group {
+		gap: var(--sveltely-inset);
+	}
+
+	.dropdown-item {
+		width: 100%;
+		gap: calc(var(--sveltely-inset) * 2);
+		border-radius: var(--dropdown-item-radius, var(--sveltely-border-radius-nested));
+		padding: calc(var(--sveltely-padding-y) * 0.33) calc(var(--sveltely-padding-x) * 0.67);
+	}
+
+	.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

@@ -0,0 +1,40 @@
+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>(): {
+    props: {
+        items: DropdownEntry<T>[];
+        value?: T | null;
+        open?: boolean;
+        label?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        closeOnSelect?: boolean;
+        showCheck?: boolean;
+        searchable?: boolean;
+        searchPlaceholder?: string;
+        placement?: Anchor;
+        onSelect?: (item: DropdownItem<T>) => 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'];
+    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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Dropdown: $$IsomorphicComponent;
+type Dropdown<T extends string | number = string> = InstanceType<typeof Dropdown<T>>;
+export default Dropdown;

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

@@ -0,0 +1,2 @@
+export { default } from './Dropdown.svelte';
+export type { DropdownAction, DropdownEntry, DropdownGroup, DropdownItem, DropdownSubmenu } from './types';

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

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

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

@@ -0,0 +1,27 @@
+import type { Anchor } from '../../../utils/positioning';
+export type DropdownItem<TValue extends string | number = string> = {
+    type?: 'option';
+    label: string;
+    value: TValue;
+    disabled?: boolean;
+};
+export type DropdownAction = {
+    type: 'action';
+    label: string;
+    disabled?: boolean;
+    onSelect: () => void;
+};
+export type DropdownSubmenu<TValue extends string | number = string> = {
+    type: 'submenu';
+    label: string;
+    disabled?: boolean;
+    items: DropdownEntry<TValue>[];
+    placement?: Anchor;
+};
+export type DropdownGroup<TValue extends string | number = string> = {
+    type: 'group';
+    label?: string;
+    disabled?: boolean;
+    items: DropdownEntry<TValue>[];
+};
+export type DropdownEntry<TValue extends string | number = string> = DropdownItem<TValue> | DropdownAction | DropdownGroup<TValue> | DropdownSubmenu<TValue>;

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

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