@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

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

@@ -1,76 +1,52 @@
 import type { Snippet } from 'svelte';
 import type { HtmlAtomProps, Base } from '../atom';
-import type { Override, Factory } from '../../types';
+import type { Factory } from '../../types';
 import type { FormBond } from './bond.svelte';
-import type { FieldBond } from './field/bond.svelte';
-import type { LabelProps } from '../label';
-import type { Schema } from './validation-adapters';
-/**
- * Extend this interface to add custom form root properties in your application.
- */
-export interface FormRootExtendProps {
+import type { FieldBond, FieldStateProps } from './field/bond.svelte';
+type SnippetProps = Record<string, unknown>;
+type Schema = unknown;
+export interface FormSnippetProps extends SnippetProps {
+    form: FormBond;
 }
-/**
- * Extend this interface to add custom field root properties in your application.
- */
-export interface FieldRootExtendProps {
+export type FormChildren = Snippet<[FormSnippetProps]>;
+export interface FieldSnippetProps extends SnippetProps {
+    field: FieldBond | undefined;
 }
-/**
- * Extend this interface to add custom field label properties in your application.
- */
-export interface FieldLabelExtendProps {
-}
-/**
- * Extend this interface to add custom field control properties in your application.
- */
-export interface FieldControlExtendProps {
-}
-interface CommonProps extends FormRootExtendProps {
+export type FieldChildren = Snippet<[FieldSnippetProps]>;
+interface CommonProps {
     factory?: Factory<FormBond>;
 }
-interface RenderlessProps {
-    renderless?: true;
-    children?: Snippet<[{
-        form: FormBond;
-    }]>;
-}
-interface RenderfullProps<B extends Base = Base> extends Override<HtmlAtomProps<'form', B>, {
-    renderless?: false;
-    children?: Snippet<[{
-        form: FormBond;
-    }]>;
-}> {
+export interface FormRootProps<B extends Base = Base> extends HtmlAtomProps<'form', B, FormChildren>, CommonProps {
+    renderless?: boolean;
+    children?: FormChildren;
 }
-export type FormRootProps<B extends Base = Base> = CommonProps & (RenderlessProps | RenderfullProps<B>);
-export type FieldRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    disabled: boolean;
-    readonly: boolean;
+export interface FieldRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
+    disabled?: boolean;
+    readonly?: boolean;
     name?: string;
-    value?: any;
+    value?: unknown;
     schema?: Schema;
-    parse: (schema: Schema) => void;
-    extend: any;
-    factory?: Factory<FieldBond>;
-    children?: Snippet<[{
-        field?: FieldBond;
-    }]>;
-}> & FieldRootExtendProps;
-export type FieldLabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> = Omit<LabelProps<E, B>, 'for'> & FieldLabelExtendProps;
-export type FieldControlProps<B extends Base<{
+    parse?: (schema: Schema) => void;
+    extend?: Record<string, unknown>;
+    factory?: ((props: FieldStateProps) => FieldBond) | Factory<FieldBond>;
+}
+export interface FieldLabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
+    for?: never;
+}
+export interface FieldControlProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
     value?: unknown;
-}>> = Override<HtmlAtomProps<any, B>, {
-    value?: any;
     valueAsDate?: Date;
     valueAsNumber?: number;
     checked?: boolean;
     files?: File[] | null;
     oninput?: (ev: CustomEvent, detail?: {
-        value: any;
+        value: unknown;
     }) => void;
-    children?: Snippet;
-}> & FieldControlExtendProps;
-/**
- * @deprecated Use FormRootExtendProps instead
- */
-export type FormExtendProps = FormRootExtendProps;
+    children?: FieldChildren;
+}
+export interface FieldHelperTextProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B, FieldChildren> {
+    children?: FieldChildren;
+}
+export interface FieldTextProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends FieldHelperTextProps<E, B> {
+}
 export {};

package/dist/components/icon/icon.svelte

@@ -1,40 +1,40 @@
-<script
-	lang="ts"
-	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
->
-	import type { Component } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import type { IconProps } from './types';
-	import './icon.css';
-
-	type Element = HtmlElementType<'div'>;
-
-	let {
-		class: klass = '',
-		src = undefined,
-		preset = 'icon',
-		children = undefined,
-		...restProps
-	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
-
-	const content = $derived(src ? sourceSnippet : children );
-</script>
-
-{#snippet sourceSnippet()}
-	{@const Src = src}
-	<Src />
-{/snippet}
-
-<HtmlAtom
-	{preset}
-	class={[
-		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
-		'$preset',
-		klass
-	]}
-	{...restProps}
->
-	{@render content?.()}
-</HtmlAtom>
+<script
+	lang="ts"
+	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
+>
+	import type { Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import type { IconProps } from './types';
+	import './icon.css';
+
+	type Element = HtmlElementType<'div'>;
+
+	let {
+		class: klass = '',
+		src = undefined,
+		preset = 'icon',
+		children = undefined,
+		...restProps
+	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
+
+	const content = $derived(src ? sourceSnippet : children );
+</script>
+
+{#snippet sourceSnippet()}
+	{@const Src = src}
+	<Src />
+{/snippet}
+
+<HtmlAtom
+	{preset}
+	class={[
+		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
+		'$preset',
+		klass
+	]}
+	{...restProps}
+>
+	{@render content?.()}
+</HtmlAtom>

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

@@ -1,11 +1,8 @@
 import type { Component, Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom icon properties in your application.
- */
-export interface IconExtendProps {
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+export interface IconSnippetProps extends SnippetProps {
 }
-export interface IconProps<Src extends Component = Component, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, IconExtendProps {
+export type IconChildren = Snippet<[IconSnippetProps]>;
+export interface IconProps<Src extends Component = Component, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, IconChildren> {
     src?: Src;
-    children?: Snippet;
 }

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

@@ -0,0 +1,2 @@
+export { default as Image } from './image.svelte';
+export * from './types';

package/dist/components/image/index.js

@@ -1 +1,2 @@
-"use strict";
+export { default as Image } from './image.svelte';
+export * from './types';

package/dist/components/index.d.ts

@@ -20,17 +20,20 @@ export * from './badge';
 export * from './breadcrumb';
 export * from './checkbox';
 export * from './combobox';
+export * from './context-menu';
 export * from './label';
 export * from './layer';
 export * from './link';
 export * from './list';
 export * from './menu';
+export * from './dropdown-menu';
 export * from './radio';
 export * from './sidebar';
 export * from './drawer';
 export * from './textarea';
 export * from './tree';
 export * from './dropdown';
+export * from './select';
 export * from './stack';
 export * from './stepper';
 export * from './element';
@@ -39,5 +42,15 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './swatch';
 export * from './lazy';
 export * from './chip';
+export * from './toast';
+export * from './context-menu';
+export * from './divider';
+export * from './image';
+export * from './virtual';
+export * from './switch';
+export * from './slider';
+export * from './progress';
+export * from './kbd';

package/dist/components/index.js

@@ -20,17 +20,20 @@ export * from './badge';
 export * from './breadcrumb';
 export * from './checkbox';
 export * from './combobox';
+export * from './context-menu';
 export * from './label';
 export * from './layer';
 export * from './link';
 export * from './list';
 export * from './menu';
+export * from './dropdown-menu';
 export * from './radio';
 export * from './sidebar';
 export * from './drawer';
 export * from './textarea';
 export * from './tree';
 export * from './dropdown';
+export * from './select';
 export * from './stack';
 export * from './stepper';
 export * from './element';
@@ -39,5 +42,15 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './swatch';
 export * from './lazy';
 export * from './chip';
+export * from './toast';
+export * from './context-menu';
+export * from './divider';
+export * from './image';
+export * from './virtual';
+export * from './switch';
+export * from './slider';
+export * from './progress';
+export * from './kbd';

package/dist/components/input/atoms.d.ts

@@ -1,8 +1,26 @@
 export { default as Root } from './input-root.svelte';
 /**
- * @deprecated use Input.Control instead
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
  */
 export { default as Value } from './input-control.svelte';
+/**
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
+ */
 export { default as Control } from './input-control.svelte';
+export { default as NumberControl } from './input-number-control.svelte';
+export { default as TimeControl } from './time/time-control.svelte';
+export { default as DateTimeControl } from './time/datetime-control.svelte';
+export { default as DateControl } from './time/datetime-control.svelte';
+export { default as FileControl } from './input-file-control.svelte';
+export { default as UrlControl } from './input-url-control.svelte';
+export { default as EmailControl } from './input-email-control.svelte';
+export { default as PasswordControl } from './input-password-control.svelte';
+export { default as TextControl } from './input-text-control.svelte';
+export { default as PhoneControl } from './input-phone-control.svelte';
+export { default as LocationControl } from './input-location.svelte';
+export { default as OtpControl } from './input-otp-control.svelte';
+export { default as CurrencyControl } from './input-currency-control.svelte';
+export { default as ColorControl } from './color/color-control.svelte';
+export { default as ColorSwatch } from './color/swatch.svelte';
 export { default as Icon } from './input-icon.svelte';
 export { default as Placeholder } from './input-placeholder.svelte';

package/dist/components/input/atoms.js

@@ -1,8 +1,26 @@
 export { default as Root } from './input-root.svelte';
 /**
- * @deprecated use Input.Control instead
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
  */
 export { default as Value } from './input-control.svelte';
+/**
+ * @deprecated use Input.XXXControl instead where XXX is the type of input you want to use
+ */
 export { default as Control } from './input-control.svelte';
+export { default as NumberControl } from './input-number-control.svelte';
+export { default as TimeControl } from './time/time-control.svelte';
+export { default as DateTimeControl } from './time/datetime-control.svelte';
+export { default as DateControl } from './time/datetime-control.svelte';
+export { default as FileControl } from './input-file-control.svelte';
+export { default as UrlControl } from './input-url-control.svelte';
+export { default as EmailControl } from './input-email-control.svelte';
+export { default as PasswordControl } from './input-password-control.svelte';
+export { default as TextControl } from './input-text-control.svelte';
+export { default as PhoneControl } from './input-phone-control.svelte';
+export { default as LocationControl } from './input-location.svelte';
+export { default as OtpControl } from './input-otp-control.svelte';
+export { default as CurrencyControl } from './input-currency-control.svelte';
+export { default as ColorControl } from './color/color-control.svelte';
+export { default as ColorSwatch } from './color/swatch.svelte';
 export { default as Icon } from './input-icon.svelte';
 export { default as Placeholder } from './input-placeholder.svelte';

package/dist/components/input/color/color-control.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { getPreset } from '../../../context';
+	import { resolvePreset } from '../../atom';
+	import { cn, toClassValue } from '../../../utils';
+	import type { PresetModuleName } from '../../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from '../bond.svelte';
+	import type { InputColorControlProps } from './types';
+	import type { ColorFormat, ChannelValues, ChannelDef } from './types';
+	import Segment from './segment.svelte';
+	import { FORMAT_DEFS, parseColor, buildColor, detectFormat } from './shared';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		format: formatProp = undefined,
+		alpha: showAlpha = false,
+		placeholder = 'oklch(0.5 0.2 250deg)',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.color',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputColorControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	// ── Active format ─────────────────────────────────────────────────────
+	const activeFormat = $derived<ColorFormat>(formatProp ?? detectFormat(value) ?? 'hex');
+	const def = $derived(FORMAT_DEFS[activeFormat]);
+
+	// ── Parsed channels ───────────────────────────────────────────────────
+	const parsed = $derived(parseColor(value));
+	const channels = $derived<ChannelValues>(
+		parsed?.format === activeFormat ? parsed.channels : {}
+	);
+	const alpha = $derived<number | undefined>(
+		parsed?.format === activeFormat ? parsed.alpha : undefined
+	);
+
+	// Whether to render the alpha segment
+	const hasAlpha = $derived(def.alpha && (showAlpha || alpha !== undefined));
+
+	// Alpha channel definition (stable, not inline)
+	const alphaDef: ChannelDef = { id: 'alpha', label: 'Alpha', kind: 'float', min: 0, max: 1, precision: 2 };
+
+	// ── Segment refs ──────────────────────────────────────────────────────
+	let segRefs = $state<Array<{ focus(): void } | undefined>>([]);
+
+	const segCount = $derived(def.channels.length + (hasAlpha ? 1 : 0));
+
+	function focusSeg(i: number) {
+		segRefs[Math.max(0, Math.min(segCount - 1, i))]?.focus();
+	}
+
+	// ── Keep bond in sync ────────────────────────────────────────────────
+	$effect(() => {
+		if (bond) bond.state.props.value = value;
+	});
+
+	// ── Emit helpers ─────────────────────────────────────────────────────
+	function emitLive(built: string) {
+		value = built;
+		if (bond) bond.state.props.value = built;
+		oninput?.(new Event('input'), { value: built });
+	}
+
+	function emitCommit(ev: Event, built: string) {
+		value = built;
+		if (bond) bond.state.props.value = built;
+		onchange?.(ev, { value: built });
+	}
+
+	// ── Channel change (live, from segment oninput) ───────────────────────
+	function handleChannelChange(channelId: string, val: number | string | undefined) {
+		const newChannels = channelId === 'alpha' ? channels : { ...channels, [channelId]: val };
+		const newAlpha    = channelId === 'alpha' ? (val as number | undefined) : alpha;
+		emitLive(buildColor(activeFormat, newChannels, newAlpha));
+	}
+
+	// ── Channel commit (on blur/Enter from segment) ───────────────────────
+	function handleChannelCommit(ev: Event, channelId: string, val: number | string | undefined) {
+		const newChannels = channelId === 'alpha' ? channels : { ...channels, [channelId]: val };
+		const newAlpha    = channelId === 'alpha' ? (val as number | undefined) : alpha;
+		emitCommit(ev, buildColor(activeFormat, newChannels, newAlpha));
+	}
+</script>
+
+<span
+	class={cn(
+		'inline-flex h-full items-center gap-0.5 px-2',
+		disabled && 'cursor-not-allowed opacity-50',
+		preset?.class,
+		toClassValue(klass, bond),
+	)}
+	{...restProps}
+>
+	{#if value || def}
+		{@const isHexFmt   = activeFormat === 'hex'}
+		{@const isNamedFmt = activeFormat === 'named'}
+		{@const alphaIdx   = def.channels.length}
+
+		<!-- Named: single plain-text input -->
+		{#if isNamedFmt}
+			<input
+				type="text"
+				spellcheck={false}
+				autocomplete="off"
+				value={String(channels['name'] ?? '')}
+				placeholder="e.g. red, cornflowerblue"
+				{disabled}
+				{readonly}
+				class="min-w-[12ch] bg-transparent font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground"
+				oninput={(ev) => {
+					const v = (ev.currentTarget as HTMLInputElement).value.replace(/\s/g, '');
+					emitLive(v);
+				}}
+				onchange={(ev) => {
+					const v = (ev.currentTarget as HTMLInputElement).value.replace(/\s/g, '');
+					emitCommit(ev, v);
+				}}
+			/>
+
+		<!-- Hex: # prefix then R G B [A] -->
+		{:else if isHexFmt}
+			<span class="select-none font-mono text-sm text-muted-foreground">#</span>
+			{#each def.channels as ch, i (ch.id)}
+				<Segment
+					bind:this={segRefs[i]}
+					value={channels[ch.id]}
+					channel={ch}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange(ch.id, v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, ch.id, v)}
+					onfocusmove={(dir) => focusSeg(i + dir)}
+				/>
+			{/each}
+			{#if hasAlpha}
+				<span class="mx-0.5 select-none font-mono text-sm text-muted-foreground/50">·</span>
+				<Segment
+					bind:this={segRefs[alphaIdx]}
+					value={alpha}
+					channel={alphaDef}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange('alpha', v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, 'alpha', v)}
+					onfocusmove={(dir) => focusSeg(alphaIdx + dir)}
+				/>
+			{/if}
+
+		<!-- Functional: fn( ch sep ch sep ch [/ alpha] ) -->
+		{:else}
+			<span class="select-none font-mono text-sm text-blue-500 dark:text-blue-400">{def.fn}</span>
+			{#if def.colorspace}
+				<span class="select-none font-mono text-sm text-muted-foreground">(</span>
+				<span class="mr-1 select-none font-mono text-sm text-violet-500 dark:text-violet-400">{def.colorspace}</span>
+			{:else}
+				<span class="select-none font-mono text-sm text-muted-foreground">(</span>
+			{/if}
+
+			{#each def.channels as ch, i (ch.id)}
+				{#if i > 0}
+					<span class="select-none font-mono text-sm text-muted-foreground/50">{def.sep.trim() || ' '}</span>
+				{/if}
+				<Segment
+					bind:this={segRefs[i]}
+					value={channels[ch.id]}
+					channel={ch}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange(ch.id, v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, ch.id, v)}
+					onfocusmove={(dir) => focusSeg(i + dir)}
+				/>
+			{/each}
+
+			{#if hasAlpha}
+				<span class="mx-0.5 select-none font-mono text-sm text-muted-foreground">/</span>
+				<Segment
+					bind:this={segRefs[alphaIdx]}
+					value={alpha}
+					channel={alphaDef}
+					{disabled} {readonly}
+					onchange={(v) => handleChannelChange('alpha', v)}
+					oncommit={(ev, v) => handleChannelCommit(ev, 'alpha', v)}
+					onfocusmove={(dir) => focusSeg(alphaIdx + dir)}
+				/>
+			{/if}
+
+			<span class="select-none font-mono text-sm text-muted-foreground">)</span>
+		{/if}
+	{:else}
+		<span class="font-mono text-sm text-muted-foreground">{placeholder}</span>
+	{/if}
+</span>

package/dist/components/input/color/color-control.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputColorControlProps } from './types';
+declare const ColorControl: import("svelte").Component<InputColorControlProps, {}, "value">;
+type ColorControl = ReturnType<typeof ColorControl>;
+export default ColorControl;

package/dist/components/input/color/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Segment } from './segment.svelte';
+export { default as ColorControl } from './color-control.svelte';
+export { default as ColorSwatch } from './swatch.svelte';
+export * from './types';
+export * from './shared';

package/dist/components/input/color/index.js

@@ -0,0 +1,5 @@
+export { default as Segment } from './segment.svelte';
+export { default as ColorControl } from './color-control.svelte';
+export { default as ColorSwatch } from './swatch.svelte';
+export * from './types';
+export * from './shared';