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

package/dist/components/stepper/stepper-content.svelte

@@ -1,45 +1,45 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { StepperBond } from './bond.svelte';
-	import type { StepperContentProps } from './types';
-
-	const bond = StepperBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		preset = 'stepper.content' as const,
-		...restProps
-	}: StepperContentProps<E, B> = $props();
-	
-	const activeStep = $derived(bond?.state?.getStep(bond?.state?.props?.step));
-	const activeStepContent = $derived(bond?.state?.activeStepContent);
-
-	const contentKlass = $derived(activeStepContent?.props.class)
-	const contentProps = $derived.by(()=> {
-		const { class: klass, ...restContentProps } = activeStepContent?.props ?? {};
-		return {
-			...restContentProps,
-			...restProps
-		}
-	});
-
-
-</script>
-
-{#if activeStepContent}
-	{#key activeStepContent}
-		<HtmlAtom
-			{preset}
-			{bond}
-			class={['stepper-content w-full', '$preset', contentKlass, klass]}
-			{...contentProps}
-		>
-			<!-- Render teleported step content -->
-			{@render activeStepContent.children({ step: activeStep })}
-
-			<!-- Optional custom content wrapper -->
-			<!-- {@render children?.({ stepper: bond })} -->
-		</HtmlAtom>
-	{/key}
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { StepperBond } from './bond.svelte';
+	import type { StepperContentProps } from './types';
+
+	const bond = StepperBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		preset = 'stepper.content' as const,
+		...restProps
+	}: StepperContentProps<E, B> = $props();
+	
+	const activeStep = $derived(bond?.state?.getStep(bond?.state?.props?.step));
+	const activeStepContent = $derived(bond?.state?.activeStepContent);
+
+	const contentKlass = $derived(activeStepContent?.props.class)
+	const contentProps = $derived.by(()=> {
+		const { class: klass, ...restContentProps } = activeStepContent?.props ?? {};
+		return {
+			...restContentProps,
+			...restProps
+		}
+	});
+
+
+</script>
+
+{#if activeStepContent}
+	{#key activeStepContent}
+		<HtmlAtom
+			{preset}
+			{bond}
+			class={['stepper-content w-full', '$preset', contentKlass, klass]}
+			{...contentProps}
+		>
+			<!-- Render teleported step content -->
+			{@render activeStepContent.children({ step: activeStep })}
+
+			<!-- Optional custom content wrapper -->
+			<!-- {@render children?.({ stepper: bond })} -->
+		</HtmlAtom>
+	{/key}
+{/if}

package/dist/components/stepper/stepper-footer.svelte

@@ -1,31 +1,31 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { StepperBond } from './bond.svelte';
-	import type { StepperFooterProps } from './types';
-
-	const bond = StepperBond.get();
-
-	if(!bond) {
-		throw new Error('StepperFooter must be used within a Stepper component.');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		preset = 'stepper.footer' as const,
-		...restProps
-	}: StepperFooterProps<E, B> = $props();
-
-	const footerProps = $derived({
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	{bond}
-	class={['stepper-footer w-full', '$preset', klass]}
-	{...footerProps}
->
-	{@render children?.({ stepper: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { StepperBond } from './bond.svelte';
+	import type { StepperFooterProps } from './types';
+
+	const bond = StepperBond.get();
+
+	if(!bond) {
+		throw new Error('StepperFooter must be used within a Stepper component.');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		preset = 'stepper.footer' as const,
+		...restProps
+	}: StepperFooterProps<E, B> = $props();
+
+	const footerProps = $derived({
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	{bond}
+	class={['stepper-footer w-full', '$preset', klass]}
+	{...footerProps}
+>
+	{@render children?.({ stepper: bond })}
+</HtmlAtom>

package/dist/components/stepper/stepper-header.svelte

@@ -1,39 +1,27 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { StepperBond } from './bond.svelte';
-	import type { StepperHeaderProps } from './types';
-
-	const bond = StepperBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		preset = 'stepper.header' as const,
-		...restProps
-	}: StepperHeaderProps<E, B> = $props();
-
-	const headerProps = $derived({
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	{bond}
-	class={['stepper-header w-full', '$preset', klass]}
-	onmount={onmount?.bind(bond?.state)}
-	ondestroy={ondestroy?.bind(bond?.state)}
-	enter={enter?.bind(bond?.state)}
-	exit={exit?.bind(bond?.state)}
-	initial={initial?.bind(bond?.state)}
-	animate={animate?.bind(bond?.state)}
-	{...headerProps}
->
-	{@render children?.({ stepper: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { StepperBond } from './bond.svelte';
+	import type { StepperHeaderProps } from './types';
+
+	const bond = StepperBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		preset = 'stepper.header' as const,
+		...restProps
+	}: StepperHeaderProps<E, B> = $props();
+
+	const headerProps = $derived({
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	{bond}
+	class={['stepper-header w-full', '$preset', klass]}
+	{...headerProps}
+>
+	{@render children?.({ stepper: bond })}
+</HtmlAtom>

package/dist/components/stepper/stepper-root.svelte

@@ -1,61 +1,55 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { StepperBond, StepperState, type StepperStateProps } from './bond.svelte';
-	import type { StepperRootProps } from './types';
-	import type { Factory } from '../../types';
-
-	let {
-		step = $bindable(0),
-		linear = false,
-		disabled = false,
-		class: klass = '',
-		children = undefined,
-		factory = _factory as Factory<StepperBond>,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		preset = 'stepper' as const,
-		...restProps
-	}: StepperRootProps<E, B> = $props();
-
-	const bondProps = defineState<StepperStateProps>([
-		defineProperty(
-			'step',
-			() => step,
-			(v) => {
-				step = v;
-			}
-		),
-		defineProperty('linear', () => linear),
-		defineProperty('disabled', () => disabled),
-		defineProperty('rest', () => restProps)
-	]);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps = bondProps) {
-		const bondState = new StepperState(() => props);
-		return new StepperBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{preset}
-	{bond}
-	class={['flex flex-col', '$preset', klass]}
-	{...rootProps}
->
-	{@render children?.({ stepper: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { StepperBond, StepperState, type StepperStateProps } from './bond.svelte';
+	import type { StepperRootProps } from './types';
+	import type { Factory } from '../../types';
+
+	let {
+		step = $bindable(0),
+		linear = false,
+		disabled = false,
+		class: klass = '',
+		children = undefined,
+		factory = _factory as Factory<StepperBond>,
+		preset = 'stepper' as const,
+		...restProps
+	}: StepperRootProps<E, B> = $props();
+
+	const bondProps = defineState<StepperStateProps>([
+		defineProperty(
+			'step',
+			() => step,
+			(v) => {
+				step = v;
+			}
+		),
+		defineProperty('linear', () => linear),
+		defineProperty('disabled', () => disabled),
+		defineProperty('rest', () => restProps)
+	]);
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps = bondProps) {
+		const bondState = new StepperState(() => props);
+		return new StepperBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	{bond}
+	class={['flex flex-col', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ stepper: bond })}
+</HtmlAtom>

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

@@ -1,8 +1,12 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory } from '../../types';
 import type { StepperBond } from './bond.svelte';
-export interface StepperRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
+export interface StepperSnippetProps extends SnippetProps {
+    stepper: StepperBond;
+}
+export type StepperChildren = Snippet<[StepperSnippetProps]>;
+export interface StepperRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepperChildren> {
     /**
      * The active step index (0-based)
      * @bindable
@@ -22,42 +26,12 @@ export interface StepperRootProps<E extends keyof HTMLElementTagNameMap = 'div',
      * Custom factory for creating stepper bond
      */
     factory?: Factory<StepperBond>;
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        stepper: StepperBond;
-    }]>;
 }
-export interface StepperHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        stepper?: StepperBond;
-    }]>;
+export interface StepperHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepperChildren> {
 }
-export interface StepperBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        stepper?: StepperBond;
-    }]>;
+export interface StepperBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepperChildren> {
 }
-export interface StepperFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        stepper?: StepperBond;
-    }]>;
+export interface StepperFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepperChildren> {
 }
-export interface StepperContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'> {
-    /**
-     * Child render function
-     */
-    children?: Snippet<[{
-        stepper?: StepperBond;
-    }]>;
+export interface StepperContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StepperChildren> {
 }

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

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

package/dist/components/swatch/index.js

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

package/dist/components/swatch/swatch.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import type { ClassValue } from 'svelte/elements';
+
+	let {
+		class: klass = '',
+		color = '',
+		...restProps
+	}: {
+		class?: ClassValue;
+		color: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const isEmpty = $derived(!color.trim());
+</script>
+
+<span
+	role="img"
+	aria-label={isEmpty ? 'No color' : `Color: ${color}`}
+	title={color || undefined}
+	class={cn('swatch', klass)}
+	{...restProps}
+>
+	<span aria-hidden="true" class="checkerboard absolute inset-[0.5px] rounded-inherit"></span>
+	{#if !isEmpty}
+		<span aria-hidden="true" class="fill absolute -inset-px" style="background-color: {color};"></span>
+	{/if}
+</span>
+
+<style>
+	.swatch {
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+		overflow: hidden;
+		isolation: isolate;
+		/* Background fills the anti-aliased edge gap at rounded corners */
+		background-color: color-mix(in oklch, var(--foreground) 5%, transparent);
+	}
+
+	.checkerboard {
+		background-image:
+			repeating-conic-gradient(
+				color-mix(in oklch, var(--foreground) 100%, transparent) 0% 25%,
+				transparent 0% 50%
+			),
+			repeating-conic-gradient(
+				color-mix(in oklch, var(--foreground) 100%, transparent) 0% 25%,
+				transparent 0% 50%
+			);
+		background-size: 8px 8px, 8px 8px;
+		background-position: 0 0, 4px 4px;
+		mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
+		-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
+    class?: ClassValue;
+    color: string;
+    [key: string]: unknown;
+};
+declare const Swatch: import("svelte").Component<$$ComponentProps, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;

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

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

package/dist/components/switch/index.js

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

package/dist/components/switch/switch.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import type { SwitchProps } from './types';
+
+	let {
+		class: klass = '',
+		checked = $bindable(false),
+		disabled = false,
+		id,
+		name,
+		value,
+		preset = 'switch',
+		onclick = undefined,
+		onchange = undefined,
+		children = undefined,
+		...restProps
+	}: SwitchProps & HTMLAttributes<HTMLButtonElement> = $props();
+
+	function handleClick(ev: MouseEvent) {
+		if (disabled) return;
+
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) return;
+
+		checked = !checked;
+		onchange?.(ev, { checked });
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	as="button"
+	type="button"
+	class={[
+		'switch-root border-border bg-input outline-primary relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border transition-colors duration-200 outline-0 outline-offset-2',
+		checked && 'bg-foreground',
+		disabled && 'cursor-not-allowed opacity-50',
+		'$preset',
+		klass
+	]}
+	role="switch"
+	aria-checked={checked}
+	aria-disabled={disabled || undefined}
+	onclick={handleClick}
+	{...restProps}
+>
+	<input
+		{id}
+		{name}
+		{value}
+		{disabled}
+		type="checkbox"
+		bind:checked
+		hidden
+		tabindex="-1"
+		class="pointer-events-none"
+		aria-hidden="true"
+	/>
+
+	<!-- Thumb -->
+	<HtmlAtom
+		preset="switch.thumb"
+		as="span"
+		class={[
+			'switch-thumb bg-background pointer-events-none block h-4 w-4 rounded-full shadow-sm transition-transform duration-200',
+			checked ? 'translate-x-6' : 'translate-x-1',
+			'$preset'
+		]}
+	/>
+</HtmlAtom>
+
+{#if children}
+	{@render children()}
+{/if}

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SwitchProps } from './types';
+type $$ComponentProps = SwitchProps & HTMLAttributes<HTMLButtonElement>;
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps } from '../atom';
+/**
+ * Extend this interface to add custom switch properties in your application.
+ */
+export interface SwitchExtendProps {
+}
+export interface SwitchProps extends HtmlAtomProps<'button'>, SwitchExtendProps {
+    /**
+     * Whether the switch is on
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The id attribute (forwarded to the hidden input)
+     */
+    id?: string;
+    /**
+     * The name attribute (forwarded to the hidden input)
+     */
+    name?: string;
+    /**
+     * The value attribute (forwarded to the hidden input)
+     */
+    value?: string;
+    /**
+     * Child content (label)
+     */
+    children?: Snippet<[]>;
+    /**
+     * Click handler
+     */
+    onclick?: (ev?: MouseEvent) => void;
+    /**
+     * Change handler
+     */
+    onchange?: (ev?: Event, options?: {
+        checked: boolean;
+    }) => void;
+}

package/dist/components/switch/types.js

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