@x33025/sveltely 0.0.58 → 0.1.0

package/dist/components/Library/Popover/Popover.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Floating from '../Floating/Floating.svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { Anchor } from '../../../utils/positioning';
+
+	interface Props {
+		trigger: Snippet;
+		children: Snippet;
+		open?: boolean;
+		placement?: Anchor;
+		styleTrigger?: boolean;
+	}
+
+	let {
+		trigger: triggerContent,
+		children,
+		open = $bindable(false),
+		placement = 'bottom',
+		styleTrigger = true,
+		...restProps
+	}: Props & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const popoverStyle = $derived.by(() => surfaceStyle(styleProps, 'popover'));
+</script>
+
+<Floating
+	bind:open
+	{placement}
+	rootClass="relative inline-block text-left"
+	rootStyle=""
+	panelClass="popover fixed z-50 focus:outline-none"
+	panelStyle={popoverStyle}
+	contentStyle=""
+	matchPanelRadiusToSource={true}
+	{...props}
+>
+	{#snippet trigger(floating)}
+		<div
+			use:floating.useTrigger
+			class="popover-trigger text-left"
+			style={popoverStyle}
+			data-styled={styleTrigger ? 'true' : 'false'}
+			role="button"
+			tabindex="0"
+			onclick={floating.toggle}
+			onkeydown={(event) => {
+				if (event.key !== 'Enter' && event.key !== ' ') return;
+				event.preventDefault();
+				floating.toggle();
+			}}
+			aria-expanded={floating.open}
+			aria-haspopup="dialog"
+		>
+			{@render triggerContent()}
+		</div>
+	{/snippet}
+
+	{@render children()}
+</Floating>
+
+<style>
+	:global(.popover) {
+		--popover-inset: var(--sveltely-inset);
+		--sveltely-nested-inset: var(--popover-inset);
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: white;
+		padding: var(--popover-inset);
+	}
+
+	:global(.popover-trigger[data-styled='true']) {
+		display: inline-flex;
+		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;
+	}
+
+	:global(.popover-trigger[data-styled='true']:hover) {
+		background: var(--sveltely-hover-color);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
+import type { Anchor } from '../../../utils/positioning';
+interface Props {
+    trigger: Snippet;
+    children: Snippet;
+    open?: boolean;
+    placement?: Anchor;
+    styleTrigger?: boolean;
+}
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/{Popover → Library/Popover}/PopoverDebugOverlay.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { portalContent } from '../../actions/portal';
+	import { portalContent } from '../../../actions/portal';
 	import { getOpenPopoverIds, getParentId } from './registry.svelte';
 
 	type Point = { x: number; y: number };

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

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

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

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

package/dist/components/Library/ScrollView/ScrollView.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children: Snippet;
+		viewport?: HTMLElement | null;
+		axis?: 'vertical' | 'horizontal' | 'both';
+		contentStyles?: StyleProps;
+	};
+
+	let {
+		children,
+		viewport = $bindable<HTMLElement | null>(null),
+		axis = 'vertical',
+		contentStyles = {},
+		...restProps
+	}: Props & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const viewportStyle = $derived.by(() => surfaceStyle(styleProps, 'scroll-view'));
+	const contentStyle = $derived.by(() => surfaceStyle(contentStyles, 'scroll-view-content'));
+</script>
+
+<div
+	bind:this={viewport}
+	class="scroll-view"
+	class:scroll-view-vertical={axis === 'vertical'}
+	class:scroll-view-horizontal={axis === 'horizontal'}
+	class:scroll-view-both={axis === 'both'}
+	style={viewportStyle}
+	{...props}
+>
+	<div class="scroll-view-content" style={contentStyle}>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.scroll-view {
+		min-width: 0;
+		min-height: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: var(--scroll-view-border-radius, var(--sveltely-border-radius));
+		background: var(--scroll-view-background, transparent);
+		color: var(--scroll-view-color, inherit);
+		scrollbar-gutter: stable;
+		overscroll-behavior: contain;
+	}
+
+	.scroll-view-vertical {
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.scroll-view-horizontal {
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+
+	.scroll-view-both {
+		overflow: auto;
+	}
+
+	.scroll-view-content {
+		min-width: 100%;
+		min-height: 100%;
+		padding:
+			var(--scroll-view-content-padding-y, var(--sveltely-inset))
+			var(--scroll-view-content-padding-x, var(--sveltely-inset));
+	}
+
+	.scroll-view-horizontal .scroll-view-content {
+		min-height: 100%;
+		width: max-content;
+	}
+
+	.scroll-view-vertical .scroll-view-content {
+		min-width: 100%;
+	}
+
+	.scroll-view-both .scroll-view-content {
+		width: max-content;
+		min-width: 100%;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children: Snippet;
+    viewport?: HTMLElement | null;
+    axis?: 'vertical' | 'horizontal' | 'both';
+    contentStyles?: StyleProps;
+};
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const ScrollView: import("svelte").Component<$$ComponentProps, {}, "viewport">;
+type ScrollView = ReturnType<typeof ScrollView>;
+export default ScrollView;

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

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

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

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

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

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

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

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

package/dist/components/Library/SearchInput/SearchInput.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { SearchIcon } from '@lucide/svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		value?: string;
+		radiusSource?: boolean;
+	} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
+
+	let {
+		value = $bindable(''),
+		radiusSource = true,
+		disabled = false,
+		placeholder = 'Search',
+		...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, 'search-input'));
+</script>
+
+<label
+	class="search-input"
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+	data-popover-radius-source={radiusSource ? 'true' : undefined}
+>
+	<span class="search-input-icon" aria-hidden="true">
+		<SearchIcon class="size-4" />
+	</span>
+	<input
+		type="search"
+		bind:value
+		{disabled}
+		{placeholder}
+		class="search-input-field"
+		{...props}
+	/>
+</label>
+
+<style>
+	.search-input {
+		display: inline-flex;
+		width: 100%;
+		align-items: center;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: white;
+		color: var(--color-zinc-900);
+		gap: var(--search-input-gap, calc(var(--sveltely-padding-x) * 0.67));
+		padding:
+			var(--search-input-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--search-input-padding-x, var(--sveltely-padding-x))
+			var(--search-input-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--search-input-padding-leading, calc(var(--sveltely-padding-y) * 0.67));
+		font-size: var(--search-input-font-size, 0.875rem);
+		line-height: 1.25rem;
+		transition: color 150ms, border-color 150ms, background-color 150ms;
+	}
+
+	.search-input:focus-within {
+		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+	}
+
+	.search-input[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.search-input-icon {
+		flex-shrink: 0;
+		color: var(--color-zinc-500);
+	}
+
+	.search-input-field {
+		min-width: 0;
+		flex: 1 1 auto;
+		background: transparent;
+		outline: none;
+	}
+
+	.search-input-field::-webkit-search-cancel-button {
+		appearance: none;
+	}
+</style>

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

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

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

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

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

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

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

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'SegmentedPicker',
-		description: 'Segmented selection between fixed options.',
-		isProminent: false
+		description: 'Segmented selection between fixed options.'
 	};
 </script>
 

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

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

package/dist/components/Library/SegmentedPicker/SegmentedPicker.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Option = {
+		label: string;
+		value: string;
+		disabled?: boolean;
+	};
+
+	let {
+		options,
+		value = $bindable(''),
+		disabled = false,
+		...restProps
+	}: {
+		options: Option[];
+		value: string;
+		disabled?: boolean;
+	} & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'segmented-picker'));
+</script>
+
+<div
+	class="segmented-picker hstack w-fit"
+	style={rootStyle}
+	class:segmented-picker-disabled={disabled}
+	{...props}
+>
+	{#each options as option}
+		{#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
+				type="button"
+				{disabled}
+				class="segmented-picker-button"
+				onclick={() => {
+					if (disabled) return;
+					value = option.value;
+				}}
+			>
+				{option.label}
+			</button>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.segmented-picker {
+		--segmented-picker-inset: var(--sveltely-inset);
+		--segmented-picker-font-size: calc(var(--sveltely-font-size) * 0.875);
+		--segmented-picker-scale: calc(var(--segmented-picker-font-size) / 0.875rem);
+		--sveltely-nested-inset: var(--segmented-picker-inset);
+		border-radius: var(--sveltely-border-radius);
+		background: var(--color-zinc-100);
+		gap: var(--segmented-picker-inset);
+		font-size: var(--segmented-picker-font-size);
+		padding: var(--segmented-picker-inset);
+	}
+
+	.segmented-picker-disabled {
+		opacity: 0.5;
+		filter: grayscale(1);
+	}
+
+	.segmented-picker-button {
+		border-radius: var(--sveltely-border-radius-nested);
+		transition: background-color 150ms;
+		padding:
+			calc(var(--sveltely-padding-y) * 0.33 * var(--segmented-picker-scale))
+			calc(var(--sveltely-padding-x) * 0.83 * var(--segmented-picker-scale));
+	}
+
+	.segmented-picker-button:hover:not(.segmented-picker-button-active) {
+		background: var(--sveltely-hover-color);
+	}
+
+	.segmented-picker-button-active {
+		background: var(--sveltely-primary-color);
+		color: white;
+	}
+
+	.segmented-picker-button-disabled {
+		cursor: not-allowed;
+		color: var(--color-zinc-400);
+		pointer-events: none;
+	}
+
+	.segmented-picker-button-disabled-selected {
+		background: color-mix(in oklab, var(--sveltely-primary-color) 35%, white);
+		color: var(--color-zinc-400);
+	}
+</style>

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

@@ -1,3 +1,4 @@
+import { type StyleProps } from '../../../style/surface';
 type Option = {
     label: string;
     value: string;
@@ -7,8 +8,7 @@ type $$ComponentProps = {
     options: Option[];
     value: string;
     disabled?: boolean;
-    class?: string;
-};
+} & StyleProps & Record<string, unknown>;
 declare const SegmentedPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
 type SegmentedPicker = ReturnType<typeof SegmentedPicker>;
 export default SegmentedPicker;

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

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

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

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

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

@@ -7,19 +7,13 @@
 
 <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 label="Example Sheet">
+	{#snippet trigger()}
+		<span>Open sheet</span>
+	{/snippet}
 
-<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">
@@ -27,12 +21,5 @@
 			<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/Library/Sheet/Sheet.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Sheet from './Sheet.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 Sheet: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Sheet = InstanceType<typeof Sheet>;
+export default Sheet;