@x33025/sveltely 0.0.55 → 0.0.57

package/dist/components/AnimatedNumber.demo.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'AnimatedNumber',
+		description: 'Spring-driven numeric transitions.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import AnimatedNumber from './AnimatedNumber.svelte';
+
+	let value = $state(1234);
+
+	const bump = () => {
+		value += Math.round(100 + Math.random() * 900);
+	};
+</script>
+
+<div class="vstack center gap-3">
+	<AnimatedNumber {value} class="text-3xl font-semibold text-zinc-900" />
+	<button
+		type="button"
+		class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
+		onclick={bump}
+	>
+		Change number
+	</button>
+</div>

package/dist/components/AnimatedNumber.demo.svelte.d.ts

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

package/dist/components/AsyncButton.demo.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'AsyncButton',
+		description: 'Async action button with loading and error states.'
+	};
+</script>
+
+<script lang="ts">
+	import { SaveIcon } from '@lucide/svelte';
+	import AsyncButton from './AsyncButton.svelte';
+
+	const runDemo = async () => {
+		await new Promise<void>((resolve) => {
+			setTimeout(resolve, 1000);
+		});
+	};
+</script>
+
+<AsyncButton
+	icon={SaveIcon}
+	label="Run async action"
+	action={runDemo}
+	class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
+/>

package/dist/components/AsyncButton.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import AsyncButton from './AsyncButton.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AsyncButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AsyncButton = InstanceType<typeof AsyncButton>;
+export default AsyncButton;

package/dist/components/ChipInput.demo.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'ChipInput',
+		description: 'Editable chip list with bindable tags.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import ChipInput from './ChipInput.svelte';
+
+	let tags = $state(['svelte', 'ui', 'search']);
+</script>
+
+<div class="vstack w-full max-w-sm gap-2">
+	<ChipInput bind:tags />
+	<p class="text-xs text-zinc-500">Tags: {tags.join(', ')}</p>
+</div>

package/dist/components/ChipInput.demo.svelte.d.ts

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

package/dist/components/Local/ComponentGrid.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import HeroCard from './HeroCard.svelte';
+
+	type DemoEntry = {
+		component: Component;
+		name: string;
+		description: string;
+		isProminent: boolean;
+		columnSpan?: 1 | 2;
+	};
+
+	type Props = {
+		demos: DemoEntry[];
+	};
+
+	let { demos }: Props = $props();
+</script>
+
+<div
+	class="component-grid grid gap-4 overflow-auto p-6 md:grid-flow-dense md:grid-cols-2 xl:grid-cols-3"
+>
+	{#each demos as entry}
+		{@const DemoComponent = entry.component}
+		<HeroCard
+			title={entry.name}
+			description={entry.description}
+			isProminent={entry.isProminent}
+			columnSpan={entry.columnSpan ?? 1}
+		>
+			<DemoComponent />
+		</HeroCard>
+	{/each}
+</div>
+
+<style>
+	.component-grid :global(.hero-card) {
+		min-height: 14rem;
+		border: 1px solid rgb(228 228 231);
+		border-radius: 1rem;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+		align-items: stretch;
+	}
+
+	.component-grid :global(.hero-card h1) {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	.component-grid :global(.hero-card p) {
+		max-width: none;
+	}
+</style>

package/dist/components/Local/ComponentGrid.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+type DemoEntry = {
+    component: Component;
+    name: string;
+    description: string;
+    isProminent: boolean;
+    columnSpan?: 1 | 2;
+};
+type Props = {
+    demos: DemoEntry[];
+};
+declare const ComponentGrid: Component<Props, {}, "">;
+type ComponentGrid = ReturnType<typeof ComponentGrid>;
+export default ComponentGrid;

package/dist/components/Local/HeroCard.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		children?: Snippet;
+		isProminent?: boolean;
+		columnSpan?: 1 | 2;
+	};
+
+	let { title, description = '', children, isProminent = false, columnSpan = 1 }: Props = $props();
+</script>
+
+<div class="hero-card vstack gap-2" data-column-span={columnSpan}>
+	{#if title}
+		<h1 class="text-3xl font-semibold tracking-tight text-zinc-950">{title}</h1>
+		{#if description}
+			<p class="max-w-3xl text-sm text-zinc-600">{description}</p>
+		{/if}
+	{/if}
+	<div
+		class="hero-card-content center flex"
+		class:overflow-hidden={isProminent}
+		class:rounded-xl={isProminent}
+		class:bg-zinc-50={isProminent}
+		class:p-4={isProminent}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.hero-card {
+		background: white;
+		padding: 1.5rem;
+	}
+
+	.hero-card-content {
+		min-height: 0;
+		flex: 1 1 auto;
+	}
+
+	@media (min-width: 48rem) {
+		.hero-card[data-column-span='2'] {
+			grid-column: span 2;
+		}
+	}
+</style>

package/dist/components/Local/HeroCard.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    isProminent?: boolean;
+    columnSpan?: 1 | 2;
+};
+declare const HeroCard: import("svelte").Component<Props, {}, "">;
+type HeroCard = ReturnType<typeof HeroCard>;
+export default HeroCard;

package/dist/components/NavigationStack/NavigationStack.svelte

@@ -6,9 +6,10 @@
 		left?: Snippet;
 		right?: Snippet;
 		children?: Snippet;
+		chrome?: boolean;
 	}
 
-	let { left, right, children }: Props = $props();
+	let { left, right, children, chrome = true }: Props = $props();
 
 	const existingContext = getContext<{
 		leftOpen?: boolean;
@@ -38,14 +39,14 @@
 	});
 </script>
 
-<div class="hstack size-full">
+<div class="navigation-stack hstack size-full" data-chrome={chrome ? 'true' : 'false'}>
 	{#if left}
 		<div
-			class="h-full overflow-hidden border-r border-zinc-200 transition-all duration-300 ease-in-out"
+			class="navigation-stack-sidebar navigation-stack-sidebar-left h-full overflow-hidden transition-all duration-300 ease-in-out"
 			style="width: {leftOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
 		>
 			<div
-				class="vstack h-full overflow-auto bg-zinc-50 p-4"
+				class="navigation-stack-sidebar-inner vstack h-full overflow-auto p-4"
 				style="width: var(--navigation-stack-sidebar-width);"
 			>
 				{@render left()}
@@ -53,7 +54,7 @@
 		</div>
 	{/if}
 
-	<div class="vstack flex-1">
+	<div class="navigation-stack-content vstack flex-1">
 		{#if children}
 			{@render children()}
 		{/if}
@@ -61,11 +62,11 @@
 
 	{#if right}
 		<div
-			class="h-full overflow-hidden border-l border-zinc-200 transition-all duration-300 ease-in-out"
+			class="navigation-stack-sidebar navigation-stack-sidebar-right h-full overflow-hidden transition-all duration-300 ease-in-out"
 			style="width: {rightOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
 		>
 			<div
-				class="vstack h-full overflow-auto bg-zinc-50 p-4"
+				class="navigation-stack-sidebar-inner vstack h-full overflow-auto p-4"
 				style="width: var(--navigation-stack-sidebar-width);"
 			>
 				{@render right()}

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

@@ -3,6 +3,7 @@ interface Props {
     left?: Snippet;
     right?: Snippet;
     children?: Snippet;
+    chrome?: boolean;
 }
 declare const NavigationStack: import("svelte").Component<Props, {}, "">;
 type NavigationStack = ReturnType<typeof NavigationStack>;

package/dist/components/NavigationStack/Toolbar.svelte

@@ -4,19 +4,20 @@
 	interface Props {
 		header?: Snippet;
 		children?: Snippet;
+		chrome?: boolean;
 	}
 
-	let { header, children }: Props = $props();
+	let { header, children, chrome = true }: Props = $props();
 </script>
 
-<div class="vstack h-full">
+<div class="navigation-stack-toolbar-shell vstack h-full" data-chrome={chrome ? 'true' : 'false'}>
 	{#if header}
-		<div class="flex items-center gap-2 border-b border-zinc-200 bg-white p-2">
+		<div class="navigation-stack-toolbar flex items-center gap-2 p-2">
 			{@render header()}
 		</div>
 	{/if}
 
-	<div class="vstack h-full">
+	<div class="navigation-stack-toolbar-content vstack h-full">
 		{#if children}
 			{@render children()}
 		{/if}

package/dist/components/NavigationStack/Toolbar.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     header?: Snippet;
     children?: Snippet;
+    chrome?: boolean;
 }
 declare const Toolbar: import("svelte").Component<Props, {}, "">;
 type Toolbar = ReturnType<typeof Toolbar>;

package/dist/components/Pagination.demo.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Pagination',
+		description: 'Pagination control with local demo state.',
+		isProminent: false,
+		columnSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Pagination from './Pagination.svelte';
+
+	let data = $state({
+		view: 'list',
+		page: 3,
+		totalPages: 12,
+		hasNext: true
+	});
+
+	const onPageChange = (page: number) => {
+		data = { ...data, page, hasNext: page < data.totalPages };
+	};
+</script>
+
+<div class="w-fit">
+	<Pagination {data} showFirstLast={true} onPageChange={(page) => onPageChange(page)} />
+</div>

package/dist/components/Pagination.demo.svelte.d.ts

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

package/dist/components/Popover/Popover.demo.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Popover',
+		description: 'Composable popover with trigger and content snippets.'
+	};
+</script>
+
+<script lang="ts">
+	import Popover from './Popover.svelte';
+	import SearchInput from '../SearchInput.svelte';
+
+	let search = $state('');
+</script>
+
+<Popover align="center">
+	{#snippet trigger()}
+		<button
+			type="button"
+			class="rounded-full border border-zinc-300 px-3 py-2 text-sm text-zinc-800"
+		>
+			Open popover
+		</button>
+	{/snippet}
+
+	<div class="vstack gap-2">
+		<label for="popover-demo-search" class="text-sm font-medium text-zinc-700">Search</label>
+		<SearchInput
+			id="popover-demo-search"
+			bind:value={search}
+			placeholder="Type to search..."
+			confirmText="Enter"
+			class="w-64"
+		/>
+	</div>
+</Popover>

package/dist/components/Popover/Popover.demo.svelte.d.ts

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

package/dist/components/Popover/Popover.svelte

@@ -224,6 +224,12 @@
 		}
 	}
 
+	function handleTriggerKeydown(event: KeyboardEvent) {
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		event.preventDefault();
+		toggle();
+	}
+
 	function handleOutsideClick(event: MouseEvent) {
 		if (!open) return;
 		if (isEventInPopoverTree(event)) return;
@@ -273,15 +279,17 @@
 	data-popover-parent-id={parentPopoverId ?? ''}
 >
 	<div bind:this={triggerEl}>
-		<button
-			type="button"
+		<div
 			class="text-left"
+			role="button"
+			tabindex="0"
 			onclick={toggle}
+			onkeydown={handleTriggerKeydown}
 			aria-expanded={open}
 			aria-haspopup="dialog"
 		>
 			{@render trigger()}
-		</button>
+		</div>
 	</div>
 
 	{#if open}

package/dist/components/SearchInput.demo.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'SearchInput',
+		description: 'Search field with icon, input, and optional confirmation hint.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import SearchInput from './SearchInput.svelte';
+
+	let value = $state('');
+</script>
+
+<div class="vstack w-full max-w-sm gap-2">
+	<SearchInput bind:value placeholder="Search components..." confirmText="Enter" class="w-full" />
+	<p class="text-xs text-zinc-500">Value: {value || 'empty'}</p>
+</div>

package/dist/components/SearchInput.demo.svelte.d.ts

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

package/dist/components/SearchInput.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { SearchIcon } from '@lucide/svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = {
+		value?: string;
+		confirmText?: string | null;
+		inputClass?: string;
+	} & Omit<HTMLInputAttributes, 'children' | 'type' | 'value'>;
+
+	let {
+		value = $bindable(''),
+		confirmText = null,
+		inputClass = '',
+		class: className = '',
+		disabled = false,
+		placeholder = 'Search',
+		...props
+	}: Props = $props();
+</script>
+
+<label class="search-input {className}" data-disabled={disabled ? 'true' : 'false'}>
+	<span class="search-input-icon" aria-hidden="true">
+		<SearchIcon class="size-4" />
+	</span>
+	<input
+		type="search"
+		bind:value
+		{disabled}
+		{placeholder}
+		class="search-input-field {inputClass}"
+		{...props}
+	/>
+	{#if confirmText}
+		<span class="search-input-confirm">
+			{confirmText}
+		</span>
+	{/if}
+</label>

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

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    value?: string;
+    confirmText?: string | null;
+    inputClass?: string;
+} & Omit<HTMLInputAttributes, 'children' | 'type' | 'value'>;
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/SegmentedPicker.demo.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'SegmentedPicker',
+		description: 'Segmented selection between fixed options.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import SegmentedPicker from './SegmentedPicker.svelte';
+
+	const options = [
+		{ label: 'Day', value: 'day' },
+		{ label: 'Week', value: 'week', disabled: true },
+		{ label: 'Month', value: 'month' }
+	];
+
+	let value = $state('week');
+</script>
+
+<div class="vstack center gap-2">
+	<SegmentedPicker {options} bind:value />
+	<p class="text-xs text-zinc-500">Selected: {value}</p>
+</div>

package/dist/components/SegmentedPicker.demo.svelte.d.ts

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

package/dist/components/SegmentedPicker.svelte

@@ -2,6 +2,7 @@
 	type Option = {
 		label: string;
 		value: string;
+		disabled?: boolean;
 	};
 
 	let {
@@ -22,7 +23,16 @@
 	class:segmented-picker-disabled={disabled}
 >
 	{#each options as option}
-		{#if option.value === value}
+		{#if option.disabled}
+			<span
+				class={`segmented-picker-button segmented-picker-button-disabled ${
+					option.value === value ? 'segmented-picker-button-disabled-selected' : ''
+				}`}
+				aria-disabled="true"
+			>
+				{option.label}
+			</span>
+		{:else if option.value === value}
 			<span class="segmented-picker-button segmented-picker-button-active">{option.label}</span>
 		{:else}
 			<button

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

@@ -1,6 +1,7 @@
 type Option = {
     label: string;
     value: string;
+    disabled?: boolean;
 };
 type $$ComponentProps = {
     options: Option[];

package/dist/components/Sheet/Sheet.demo.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Sheet',
+		description: 'Overlay sheet with local open state.'
+	};
+</script>
+
+<script lang="ts">
+	import Sheet from './Sheet.svelte';
+
+	let open = $state(false);
+</script>
+
+<button
+	type="button"
+	class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
+	onclick={() => (open = true)}
+>
+	Open sheet
+</button>
+
+<Sheet bind:open label="Example Sheet">
+	<div class="vstack gap-3">
+		<p class="text-sm text-zinc-700">This is a simple sheet example.</p>
+		<div class="rounded border border-gray-200/70 p-3 text-sm text-gray-700">
+			<div>Panel one content.</div>
+			<div class="mt-2">Panel two content.</div>
+			<div class="mt-2">Panel three content.</div>
+		</div>
+		<button
+			type="button"
+			class="rounded-full border border-zinc-300 px-3 py-2 text-sm text-zinc-800"
+			onclick={() => (open = false)}
+		>
+			Close
+		</button>
+	</div>
+</Sheet>

package/dist/components/Sheet/Sheet.demo.svelte.d.ts

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