@atmo-dev/kit 0.0.0-stage → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 flo-bit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,10 @@
-# Temporary Holding Version
+# Atmo Kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte 5 and Tailwind CSS 4 components for Atmo apps.
+
+- Install: `pnpm add @atmo-dev/kit`.
+- Styles: import `@atmo-dev/kit/theme.css` after `tailwindcss`; wrap your app in `class="atmo zinc pink light"` (or `dark`).
+- Develop: `pnpm install && pnpm dev`. Components at `/components`, app mockups at `/preview`.
+- Validate: `pnpm lint && pnpm check && pnpm test:ci && pnpm build`.
+- Releases: `pnpm changeset`, then merge the generated release PR. [Details](.changeset/README.md).
+- License: [MIT](LICENSE).

package/dist/components/Avatar.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { UserRound } from '@sketchyicons/svelte';
+	import Icon from './Icon.svelte';
+	let {
+		name,
+		src,
+		size = 36,
+		class: className,
+		...rest
+	}: Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		name: string;
+		src?: string;
+		size?: number;
+	} = $props();
+	let failedSrc = $state<string>();
+</script>
+
+<span
+	{...rest}
+	class={cn(
+		'inline-grid size-(--ak-avatar-size) shrink-0 place-items-center overflow-hidden rounded-[45%_49%_44%_48%] border border-base-100 bg-accent-soft text-action dark:border-base-800',
+		className
+	)}
+	style:--ak-avatar-size={`${size}px`}
+	role="img"
+	aria-label={name}
+>
+	{#if src && src !== failedSrc}
+		<img {src} alt="" class="block size-full object-cover" onerror={() => (failedSrc = src)} />
+	{:else}
+		<Icon img={UserRound} class="size-3/5" />
+	{/if}
+</span>

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    name: string;
+    src?: string;
+    size?: number;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Badge.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		class: className,
+		variant = 'soft',
+		children,
+		...rest
+	}: HTMLAttributes<HTMLSpanElement> & { variant?: 'soft' | 'outline' } = $props();
+</script>
+
+<span
+	{...rest}
+	class={cn(
+		'inline-flex w-fit items-center gap-1.5 rounded-md border px-2 py-0.75 text-[.6875rem] leading-normal font-medium',
+		variant === 'soft'
+			? 'border-action/20 bg-accent-soft text-action'
+			: 'border-control-line bg-transparent text-muted',
+		className
+	)}>{@render children?.()}</span
+>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    variant?: 'soft' | 'outline';
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Button.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	export type ButtonProps = Omit<HTMLButtonAttributes, 'onclick'> &
+		Omit<HTMLAnchorAttributes, 'type' | 'onclick'> & {
+			variant?: 'primary' | 'secondary' | 'ghost' | 'link';
+			size?: 'sm' | 'md' | 'lg' | 'icon';
+			loading?: boolean;
+			ref?: HTMLButtonElement | HTMLAnchorElement | null;
+			onclick?: (event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) => void;
+		};
+	const variants = {
+		primary: 'bg-accent-400 text-base-950 hover:bg-accent-300 active:bg-accent-400',
+		secondary:
+			'border-line bg-surface text-ink hover:border-control-line hover:bg-recess active:bg-recess',
+		ghost: 'bg-transparent text-muted hover:bg-recess hover:text-ink active:bg-recess',
+		link: 'min-h-0 rounded px-0 py-1 text-action hover:underline underline-offset-4'
+	};
+	const sizes = {
+		sm: 'min-h-8.5 gap-1.5 px-3 py-1.5 text-xs',
+		md: 'min-h-10 px-3.5 py-2 text-[.8125rem]',
+		lg: 'min-h-11 px-5 py-2.5 text-sm',
+		icon: 'size-10 p-0'
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	import { LoaderCircle } from '@sketchyicons/svelte';
+	import Icon from './Icon.svelte';
+	let {
+		class: className,
+		variant = 'primary',
+		size = 'md',
+		loading = false,
+		disabled = false,
+		ref = $bindable(null),
+		href,
+		type = 'button',
+		onclick,
+		children,
+		...rest
+	}: ButtonProps = $props();
+	let classes = $derived(
+		cn(
+			'inline-flex shrink-0 cursor-pointer touch-manipulation items-center justify-center gap-2 rounded-(--atmo-radius-button) border border-transparent font-medium leading-snug no-underline transition-colors duration-(--atmo-duration) motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45 aria-busy:opacity-100 [&_svg]:shrink-0',
+			focus,
+			sizes[size],
+			variants[variant],
+			className
+		)
+	);
+</script>
+
+{#snippet content()}
+	{#if loading}<Icon img={LoaderCircle} size={16} class="motion-safe:animate-spin" />{/if}
+	{@render children?.()}
+{/snippet}
+{#if href !== undefined}
+	<a
+		{...rest}
+		bind:this={ref}
+		href={disabled || loading ? undefined : href}
+		role={disabled || loading ? 'link' : undefined}
+		class={classes}
+		data-slot="button"
+		data-variant={variant}
+		data-size={size}
+		aria-disabled={disabled || loading ? true : rest['aria-disabled']}
+		aria-busy={loading || rest['aria-busy']}
+		tabindex={disabled || loading ? -1 : rest.tabindex}
+		onclick={(event) => {
+			if (disabled || loading) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			onclick?.(event);
+		}}>{@render content()}</a
+	>
+{:else}
+	<button
+		{...rest}
+		bind:this={ref}
+		{type}
+		disabled={disabled || loading}
+		class={classes}
+		data-slot="button"
+		data-variant={variant}
+		data-size={size}
+		aria-busy={loading || rest['aria-busy']}
+		{onclick}>{@render content()}</button
+	>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export type ButtonProps = Omit<HTMLButtonAttributes, 'onclick'> & Omit<HTMLAnchorAttributes, 'type' | 'onclick'> & {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'link';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    loading?: boolean;
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+    onclick?: (event: MouseEvent & {
+        currentTarget: EventTarget & HTMLElement;
+    }) => void;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Checkbox.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	let {
+		class: className,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		ref = $bindable(null),
+		...rest
+	}: Omit<HTMLInputAttributes, 'type'> & {
+		indeterminate?: boolean;
+		ref?: HTMLInputElement | null;
+	} = $props();
+</script>
+
+<input
+	{...rest}
+	type="checkbox"
+	bind:checked
+	bind:indeterminate
+	bind:this={ref}
+	data-slot="checkbox"
+	class={cn(
+		'm-0 inline-block size-4.5 shrink-0 cursor-pointer appearance-auto align-middle accent-action focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-45',
+		focus,
+		className
+	)}
+/>

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

@@ -0,0 +1,8 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLInputAttributes, 'type'> & {
+    indeterminate?: boolean;
+    ref?: HTMLInputElement | null;
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/Heading.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		class: className,
+		level = 1,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: HTMLAttributes<HTMLHeadingElement> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		ref?: HTMLHeadingElement | null;
+	} = $props();
+</script>
+
+<svelte:element
+	this={`h${level}`}
+	{...rest}
+	bind:this={ref}
+	class={cn(
+		'm-0 text-[clamp(2rem,4vw,2.75rem)] leading-[1.15] font-medium tracking-[-.035em] text-ink',
+		className
+	)}>{@render children?.()}</svelte:element
+>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLHeadingElement> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    ref?: HTMLHeadingElement | null;
+};
+declare const Heading: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/components/Icon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import { SketchyIcon, type SketchyIconProps } from '@sketchyicons/svelte';
+	let {
+		img,
+		size = 20,
+		strokeWidth = 1.75,
+		label,
+		'aria-label': ariaLabel,
+		...rest
+	}: SVGAttributes<SVGSVGElement> & SketchyIconProps & { label?: string } = $props();
+	let accessibleLabel = $derived(label ?? ariaLabel);
+</script>
+
+<SketchyIcon
+	{img}
+	{size}
+	{strokeWidth}
+	{...rest}
+	role={accessibleLabel ? 'img' : rest.role}
+	aria-label={accessibleLabel}
+	aria-hidden={accessibleLabel ? undefined : (rest['aria-hidden'] ?? true)}
+	focusable="false"
+/>

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

@@ -0,0 +1,8 @@
+import type { SVGAttributes } from 'svelte/elements';
+import { type SketchyIconProps } from '@sketchyicons/svelte';
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & SketchyIconProps & {
+    label?: string;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/IconButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import Button, { type ButtonProps } from './Button.svelte';
+	import { cn } from '../utils.js';
+	let {
+		label,
+		class: className,
+		variant = 'ghost',
+		size = 'md',
+		ref = $bindable(null),
+		children,
+		...rest
+	}: Omit<ButtonProps, 'size'> & { label: string; size?: 'sm' | 'md' | 'lg' } = $props();
+</script>
+
+<Button
+	{...rest}
+	bind:ref
+	{variant}
+	size="icon"
+	aria-label={label}
+	title={rest.title ?? label}
+	class={cn(size === 'sm' && 'size-8', size === 'lg' && 'size-12', className)}
+	>{@render children?.()}</Button
+>

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

@@ -0,0 +1,8 @@
+import { type ButtonProps } from './Button.svelte';
+type $$ComponentProps = Omit<ButtonProps, 'size'> & {
+    label: string;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const IconButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/IconRail.svelte

@@ -0,0 +1,183 @@
+<script lang="ts" module>
+	import type { IconNode } from '@sketchyicons/svelte';
+	import type { ButtonProps } from './Button.svelte';
+	export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled'> & {
+		label: string;
+		icon: IconNode;
+		active?: boolean;
+		primary?: boolean;
+		badge?: boolean | number;
+	};
+</script>
+
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Tooltip } from 'bits-ui';
+	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
+	import Modal from './Modal.svelte';
+	import { cn } from '../utils.js';
+	let {
+		label,
+		items,
+		backed = false,
+		mobile = 'bar',
+		open = $bindable(false),
+		footer,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		label: string;
+		items: readonly IconRailItem[];
+		backed?: boolean;
+		mobile?: 'bar' | 'drawer';
+		open?: boolean;
+		footer?: Snippet<[{ expanded: boolean; close: () => void }]>;
+		ref?: HTMLElement | null;
+	} = $props();
+	const small = new MediaQuery('(width < 40rem)', false);
+	const close = () => (open = false);
+	let drawerWasOpen = false;
+	$effect(() => {
+		if (mobile !== 'drawer') return;
+		const leavingDrawer = !small.current && drawerWasOpen;
+		drawerWasOpen = small.current && open;
+		if (!small.current) open = false;
+		if (leavingDrawer) {
+			void tick().then(() => {
+				if (!small.current)
+					ref?.querySelector<HTMLElement>('a[href], button:not(:disabled)')?.focus();
+			});
+		}
+	});
+</script>
+
+{#if mobile === 'drawer' && small.current}
+	<Modal
+		bind:open
+		title={label}
+		onCloseAutoFocus={(event) => {
+			if (!small.current) event.preventDefault();
+		}}
+		data-slot="icon-rail-drawer"
+		class="top-0 bottom-0 left-0 flex h-dvh max-h-none w-[min(19rem,calc(100%-2rem))] max-w-none translate-x-0 translate-y-0 flex-col rounded-none border-y-0 border-l-0 px-3 pt-[max(1rem,env(safe-area-inset-top))] pb-[max(1rem,env(safe-area-inset-bottom))] [&>header]:mb-3 [&>header]:px-2 [&>header_h2]:sr-only"
+	>
+		<nav
+			{...rest}
+			bind:this={ref}
+			aria-label={label}
+			data-slot="icon-rail"
+			class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain', className)}
+		>
+			<div class="grid gap-1">
+				{#each items as item (item.label)}
+					<Button
+						href={item.href}
+						disabled={item.disabled}
+						variant="ghost"
+						aria-current={item.active ? 'page' : undefined}
+						data-part="item"
+						onclick={(event) => {
+							close();
+							item.onclick?.(event);
+						}}
+						class={cn(
+							'min-h-11 w-full justify-start gap-3 px-3 py-3 text-sm aria-[current=page]:bg-recess aria-[current=page]:text-action',
+							item.primary && 'mt-3 text-action'
+						)}
+					>
+						<Icon img={item.icon} size={22} />
+						<span class="min-w-0 flex-1 text-left">{item.label}</span>
+						{#if item.badge}
+							<span class="text-xs text-action">
+								{#if typeof item.badge === 'number'}{item.badge}<span class="sr-only"> unread</span>
+								{:else}<span class="sr-only">Unread</span><span aria-hidden="true">•</span>{/if}
+							</span>
+						{/if}
+					</Button>
+				{/each}
+			</div>
+			{#if footer}<div class="mt-auto pt-6">{@render footer({ expanded: true, close })}</div>{/if}
+		</nav>
+	</Modal>
+{:else}
+	<Tooltip.Provider delayDuration={350} ignoreNonKeyboardFocus>
+		<nav
+			{...rest}
+			bind:this={ref}
+			aria-label={label}
+			data-slot="icon-rail"
+			data-backed={backed}
+			class={cn(
+				'fixed top-[var(--atmo-nav-top,0px)] bottom-0 left-0 z-40 flex w-18 flex-col items-center bg-transparent pt-6 pb-5 max-sm:top-auto max-sm:right-0 max-sm:h-[calc(62px+env(safe-area-inset-bottom))] max-sm:w-full max-sm:flex-row max-sm:justify-around max-sm:bg-page max-sm:px-2 max-sm:pt-1.5 max-sm:pb-[calc(6px+env(safe-area-inset-bottom))]',
+				mobile === 'drawer' && 'max-sm:hidden',
+				className
+			)}
+		>
+			<div
+				class="flex flex-col items-center gap-3 max-sm:min-w-0 max-sm:flex-1 max-sm:flex-row max-sm:justify-around max-sm:gap-0"
+			>
+				{#each items as item (item.label)}
+					<Tooltip.Root disabled={item.disabled ?? false}
+						><Tooltip.Trigger onclick={item.onclick}
+							>{#snippet child({ props })}
+								<Button
+									{...props}
+									href={item.href}
+									disabled={item.disabled}
+									variant="ghost"
+									size="icon"
+									aria-label={`${item.label}${item.badge ? (typeof item.badge === 'number' ? `, ${item.badge} unread` : ', unread') : ''}`}
+									aria-current={item.active ? 'page' : undefined}
+									data-part="item"
+									class={cn(
+										'relative size-11 rounded-(--atmo-radius-button) text-muted hover:bg-recess/55 aria-[current=page]:text-action max-sm:size-10',
+										item.primary && 'mt-2 text-action hover:text-action max-sm:mt-0',
+										backed && 'bg-recess/45 hover:bg-recess/75'
+									)}
+								>
+									<Icon img={item.icon} size={22} />{#if item.badge}<span
+											class="absolute top-2 right-1.5 size-1.5 rounded-full bg-action"
+											aria-hidden="true"
+										></span>{/if}
+								</Button>
+							{/snippet}</Tooltip.Trigger
+						><Tooltip.Content
+							role="tooltip"
+							side="right"
+							sideOffset={10}
+							collisionPadding={12}
+							class="z-60 max-w-[calc(100vw-2rem)] rounded-lg border border-line bg-field px-2.5 py-1.5 font-sans text-xs text-ink"
+							>{item.label}</Tooltip.Content
+						></Tooltip.Root
+					>
+				{/each}
+			</div>
+			{#if footer}<div class="mt-auto max-sm:mt-0 max-sm:ml-1">
+					{@render footer({ expanded: false, close })}
+				</div>{/if}
+		</nav>
+	</Tooltip.Provider>
+{/if}
+
+<style>
+	@keyframes drawer-enter {
+		from {
+			transform: translateX(-100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+	:global([data-slot='icon-rail-drawer'][data-state='open']) {
+		animation: drawer-enter 130ms cubic-bezier(0.2, 0.8, 0.2, 1);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:global([data-slot='icon-rail-drawer']) {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { IconNode } from '@sketchyicons/svelte';
+import type { ButtonProps } from './Button.svelte';
+export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled'> & {
+    label: string;
+    icon: IconNode;
+    active?: boolean;
+    primary?: boolean;
+    badge?: boolean | number;
+};
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    label: string;
+    items: readonly IconRailItem[];
+    backed?: boolean;
+    mobile?: 'bar' | 'drawer';
+    open?: boolean;
+    footer?: Snippet<[{
+        expanded: boolean;
+        close: () => void;
+    }]>;
+    ref?: HTMLElement | null;
+};
+declare const IconRail: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
+type IconRail = ReturnType<typeof IconRail>;
+export default IconRail;