@nqmcreative/ui 0.2.0 → 0.2.2

package/dist/styles/sprout/ThemeToggle.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Tone } from '../../core/tones.js';
+import { type Theme } from '../../core/theme.svelte.js';
+interface Props {
+    /** Bindable. `'system'` follows the OS until the visitor chooses. */
+    theme?: Theme;
+    /** `'button'` cycles light → dark → system; `'segmented'` shows all three. */
+    variant?: 'button' | 'segmented';
+    tone?: Tone;
+    /** Remember the choice in `localStorage`. Default true. */
+    persist?: boolean;
+    onchange?: (theme: Theme) => void;
+    class?: string;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "theme">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/styles/sprout/Toaster.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import { portal } from '../../core/actions/dismissable.js';
+	import { toast } from '../../core/toast.svelte.js';
+	import { toneText } from '../../core/tones.js';
+	import Spinner from './Spinner.svelte';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { soft } from './lift.js';
+
+	export type ToasterPosition =
+		'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+	interface Props {
+		position?: ToasterPosition;
+		class?: string;
+	}
+
+	let { position = 'bottom-right', class: className = '' }: Props = $props();
+
+	const t = useLocale();
+
+	const positions: Record<ToasterPosition, string> = {
+		'top-left': 'top-4 left-4 items-start',
+		'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
+		'top-right': 'top-4 right-4 items-end',
+		'bottom-left': 'bottom-4 left-4 items-start',
+		'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
+		'bottom-right': 'bottom-4 right-4 items-end'
+	};
+
+	const fromTop = $derived(position.startsWith('top'));
+	const fromLeft = $derived(position.endsWith('left'));
+	const fromCenter = $derived(position.endsWith('center'));
+
+	const enter = $derived(
+		fromCenter ? { y: fromTop ? -16 : 16, x: 0 } : { x: fromLeft ? -16 : 16, y: 0 }
+	);
+</script>
+
+<div
+	use:portal
+	aria-live="polite"
+	aria-label={t.current.notifications}
+	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
+		position
+	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
+>
+	{#each toast.items as item (item.id)}
+		<!--
+			sprout puts every toast on the same cream card and lets the glyph
+			carry the tone. matte tints the whole surface; here a tinted block
+			would fight the warm page underneath.
+		-->
+		<div
+			animate:flip={{ duration: 200 }}
+			in:fly={{ ...enter, duration: 220 }}
+			out:fly={{ ...enter, duration: 160 }}
+			role={item.tone === 'danger' ? 'alert' : 'status'}
+			class="pointer-events-auto flex w-full items-start gap-3 rounded-2xl border border-hairline bg-bg p-3.5 font-sans {soft}"
+		>
+			<span class="mt-0.5 shrink-0 {toneText[item.tone]}">
+				{#if item.loading}
+					<Spinner size="sm" label="" />
+				{:else if item.tone === 'success'}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path
+							d="m5 8.2 2.2 2.2L11 6"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				{:else if item.tone === 'danger'}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path
+							d="m5.75 5.75 4.5 4.5M10.25 5.75l-4.5 4.5"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+						/>
+					</svg>
+				{:else}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path d="M8 4.75v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+						<circle cx="8" cy="11.25" r="0.85" fill="currentColor" />
+					</svg>
+				{/if}
+			</span>
+
+			<div class="flex min-w-0 flex-1 flex-col gap-1">
+				<p class="text-sm leading-snug font-semibold text-text">{item.title}</p>
+				{#if item.description}
+					<p class="text-[13px] leading-relaxed text-text-secondary">{item.description}</p>
+				{/if}
+				{#if item.action}
+					<button
+						type="button"
+						onclick={() => {
+							item.action?.onclick();
+							toast.dismiss(item.id);
+						}}
+						class="mt-1 self-start rounded font-sans text-[13px] font-semibold underline underline-offset-2 {toneText[
+							item.tone
+						]}"
+					>
+						{item.action.label}
+					</button>
+				{/if}
+			</div>
+
+			<button
+				type="button"
+				onclick={() => toast.dismiss(item.id)}
+				aria-label={t.current.dismiss}
+				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+			>
+				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+					<path
+						d="m2 2 10 10M12 2 2 12"
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		</div>
+	{/each}
+</div>

package/dist/styles/sprout/Toaster.svelte.d.ts

@@ -0,0 +1,8 @@
+export type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface Props {
+    position?: ToasterPosition;
+    class?: string;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/styles/sprout/Tooltip.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { soft } from './lift.js';
+
+	export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		/** Tooltip text. CSS-only: shows on hover and on keyboard focus. */
+		content: string;
+		placement?: TooltipPlacement;
+		children: Snippet;
+	}
+
+	let { content, placement = 'top', class: className = '', children, ...rest }: Props = $props();
+
+	const placements: Record<TooltipPlacement, string> = {
+		top: 'bottom-full left-1/2 mb-1.5 -translate-x-1/2',
+		bottom: 'top-full left-1/2 mt-1.5 -translate-x-1/2',
+		left: 'right-full top-1/2 mr-1.5 -translate-y-1/2',
+		right: 'left-full top-1/2 ml-1.5 -translate-y-1/2'
+	};
+</script>
+
+<span class="group/tt relative inline-flex" {...rest}>
+	{@render children()}
+	<span
+		role="tooltip"
+		class="pointer-events-none invisible absolute z-50 rounded-xl bg-text px-2 py-1 font-sans text-xs font-medium whitespace-nowrap text-text-inverse opacity-0 {soft} transition-opacity duration-150 ease-brand-out group-focus-within/tt:visible group-focus-within/tt:opacity-100 group-hover/tt:visible group-hover/tt:opacity-100
+			{placements[placement]} {className}"
+	>
+		{content}
+	</span>
+</span>

package/dist/styles/sprout/Tooltip.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Tooltip text. CSS-only: shows on hover and on keyboard focus. */
+    content: string;
+    placement?: TooltipPlacement;
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/styles/sprout/fonts.css

@@ -0,0 +1,78 @@
+/*
+ * Optional: the two faces sprout is designed around — Fredoka (headings) and
+ * Plus Jakarta Sans (body). Import this only if your project doesn't already
+ * self-host or load them another way — without it the tokens fall back to the
+ * system stack, which works but loses the round, hand-drawn warmth the style is
+ * built on.
+ *
+ * These are plain `@font-face` rules rather than an `@import` of the Google
+ * stylesheet on purpose: `@import` is only valid before every other rule, so a
+ * bundler silently drops it when this file is imported after `tailwindcss` —
+ * the fonts then fall back with no error anywhere. `@font-face` works wherever
+ * you put it, and it skips the CSS-to-CSS round trip before the font files
+ * start downloading.
+ *
+ * Four rules for two families: both are variable fonts, so one file per subset
+ * covers every weight the style uses — 400 to 600 for Fredoka, 400 to 700 for
+ * Plus Jakarta Sans. Latin and Latin Extended only, around 90 kB in total. Add
+ * `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` to
+ * your document head to open the connection earlier.
+ */
+
+/* --- Fredoka --- */
+/* latin */
+@font-face {
+	font-family: 'Fredoka';
+	font-style: normal;
+	font-weight: 400 600;
+	font-stretch: 100%;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/fredoka/v17/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWu89U.woff2)
+		format('woff2');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+	font-family: 'Fredoka';
+	font-style: normal;
+	font-weight: 400 600;
+	font-stretch: 100%;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/fredoka/v17/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWg89XyHw.woff2)
+		format('woff2');
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}
+
+/* --- Plus Jakarta Sans --- */
+/* latin */
+@font-face {
+	font-family: 'Plus Jakarta Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2)
+		format('woff2');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+	font-family: 'Plus Jakarta Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2)
+		format('woff2');
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}

package/dist/styles/sprout/index.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Sprout — Warm and fully rounded — leaf green on cream, pill buttons, and a round display face. For school, community and family sites.
+ *
+ * Generated by `bun run index`. Behaviour comes from
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
+ * the whole style.
+ */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
+export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { default as Button } from './Button.svelte';
+export type { ButtonVariant, ButtonSize } from './Button.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Input } from './Input.svelte';
+export type { InputSize } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export type { SelectOption } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Switch } from './Switch.svelte';
+export type { SwitchSize } from './Switch.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Label } from './Label.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export type { RadioOption } from './RadioGroup.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export type { CheckboxOption } from './CheckboxGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export type { ComboboxOption } from './Combobox.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export type { MultiSelectOption } from './MultiSelect.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Dropzone } from './Dropzone.svelte';
+export { default as Badge } from './Badge.svelte';
+export type { BadgeVariant, BadgeSize } from './Badge.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarSize } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Card } from './Card.svelte';
+export type { CardVariant } from './Card.svelte';
+export { default as Stat } from './Stat.svelte';
+export type { StatTrend } from './Stat.svelte';
+export { default as Table } from './Table.svelte';
+export type { TableColumn } from './Table.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Alert } from './Alert.svelte';
+export type { AlertVariant } from './Alert.svelte';
+export { default as Progress } from './Progress.svelte';
+export type { ProgressSize } from './Progress.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export type { SpinnerSize } from './Spinner.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export type { SkeletonVariant } from './Skeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export type { ToasterPosition } from './Toaster.svelte';
+export { default as Divider } from './Divider.svelte';
+export type { DividerOrientation } from './Divider.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export type { TabItem, TabsVariant } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem } from './Breadcrumb.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Steps } from './Steps.svelte';
+export type { StepItem } from './Steps.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export type { NavItem } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
+export { default as Footer } from './Footer.svelte';
+export type { FooterLink, FooterColumn } from './Footer.svelte';
+export { default as HeroSection } from './HeroSection.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export type { FeatureColumns } from './FeatureGrid.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export type { TestimonialVariant } from './Testimonial.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export type { Logo } from './LogoCloud.svelte';
+export { default as CTASection } from './CTASection.svelte';
+export type { CTAVariant } from './CTASection.svelte';
+export { default as StatsBand } from './StatsBand.svelte';
+export type { BandStat } from './StatsBand.svelte';
+export { default as Modal } from './Modal.svelte';
+export type { ModalSize } from './Modal.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerSide, DrawerSize } from './Drawer.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export type { CommandItem } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipPlacement } from './Tooltip.svelte';

package/dist/styles/sprout/index.js

@@ -0,0 +1,83 @@
+/**
+ * Sprout — Warm and fully rounded — leaf green on cream, pill buttons, and a round display face. For school, community and family sites.
+ *
+ * Generated by `bun run index`. Behaviour comes from
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
+ * the whole style.
+ */
+/* --- shared behaviour --- */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+/* --- locale --- */
+export { default as LocaleProvider } from './LocaleProvider.svelte';
+/* --- actions --- */
+export { default as Button } from './Button.svelte';
+export { default as Link } from './Link.svelte';
+/* --- forms --- */
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Label } from './Label.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Dropzone } from './Dropzone.svelte';
+/* --- data display --- */
+export { default as Badge } from './Badge.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Kbd } from './Kbd.svelte';
+/* --- feedback --- */
+export { default as Alert } from './Alert.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+/* --- layout & navigation --- */
+export { default as Divider } from './Divider.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Steps } from './Steps.svelte';
+/* --- app shell --- */
+export { default as Navbar } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Footer } from './Footer.svelte';
+/* --- marketing --- */
+export { default as HeroSection } from './HeroSection.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export { default as CTASection } from './CTASection.svelte';
+export { default as StatsBand } from './StatsBand.svelte';
+/* --- overlay --- */
+export { default as Modal } from './Modal.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/styles/sprout/lift.d.ts

@@ -0,0 +1,40 @@
+/**
+ * sprout's shadows — a hard lip rather than a blur.
+ *
+ * The style's one structural idea: every raised thing sits on a solid edge in
+ * its own colour, the way a printed sticker or a moulded key does. A blurred
+ * drop shadow alone reads as glass; a flat offset reads as a physical object a
+ * child could press, which is the whole point of the style.
+ *
+ * Kept here rather than in `theme.css` because the token *names* are a contract
+ * shared by every style — a `--shadow-lip` that only sprout defined would fail
+ * `bun run scoped`. These are plain class strings instead, style-local by
+ * construction, and Tailwind sees them because it scans this file like any
+ * other source.
+ *
+ * No `dark:` anywhere, deliberately. Dark mode arrives two ways — an explicit
+ * `.dark` class *and* a bare OS preference — and the `dark:` variant only knows
+ * about the first, so a component that leant on it would be right half the
+ * time. Everything below is instead written to hold in both modes: the surface
+ * shadows are near-black at low alpha, and a tone's lip is mixed from the tone
+ * itself, so it darkens whatever the fill happens to be.
+ */
+import type { Tone } from '../../core/tones.js';
+/** Barely raised: chips, inputs, table headers, anything sitting on a page. */
+export declare const edge = "shadow-[0_2px_0_0_rgba(20,83,45,0.07)]";
+/** The workhorse: cards, menus, popovers. A 4px lip plus a wide, soft drop. */
+export declare const soft = "shadow-[0_4px_0_0_rgba(20,83,45,0.08),0_14px_30px_-10px_rgba(20,83,45,0.18)]";
+/** `soft`, one step deeper, for a card that rises under the pointer. */
+export declare const softOnHover = "hover:shadow-[0_6px_0_0_rgba(20,83,45,0.10),0_18px_36px_-12px_rgba(20,83,45,0.22)]";
+/** Off the page entirely: modals, drawers, the command palette. */
+export declare const float = "shadow-[0_6px_0_0_rgba(20,83,45,0.09),0_28px_60px_-20px_rgba(20,83,45,0.35)]";
+/**
+ * A solid fill's own lip: the tone mixed most of the way to black, so it is
+ * always the same colour a shadow of that fill would be. Pair with
+ * `active:translate-y-[3px]` — the button travels down exactly as far as the
+ * lip shortens, so the top face lands where the shadow was and the whole thing
+ * reads as one pressed object.
+ */
+export declare const lift: Record<Tone, string>;
+/** The same lip at 3px, for things too small to travel: icon tiles, dots. */
+export declare const liftSm: Record<Tone, string>;

package/dist/styles/sprout/lift.js

@@ -0,0 +1,36 @@
+/** Barely raised: chips, inputs, table headers, anything sitting on a page. */
+export const edge = 'shadow-[0_2px_0_0_rgba(20,83,45,0.07)]';
+/** The workhorse: cards, menus, popovers. A 4px lip plus a wide, soft drop. */
+export const soft = 'shadow-[0_4px_0_0_rgba(20,83,45,0.08),0_14px_30px_-10px_rgba(20,83,45,0.18)]';
+/** `soft`, one step deeper, for a card that rises under the pointer. */
+export const softOnHover = 'hover:shadow-[0_6px_0_0_rgba(20,83,45,0.10),0_18px_36px_-12px_rgba(20,83,45,0.22)]';
+/** Off the page entirely: modals, drawers, the command palette. */
+export const float = 'shadow-[0_6px_0_0_rgba(20,83,45,0.09),0_28px_60px_-20px_rgba(20,83,45,0.35)]';
+/**
+ * A solid fill's own lip: the tone mixed most of the way to black, so it is
+ * always the same colour a shadow of that fill would be. Pair with
+ * `active:translate-y-[3px]` — the button travels down exactly as far as the
+ * lip shortens, so the top face lands where the shadow was and the whole thing
+ * reads as one pressed object.
+ */
+export const lift = {
+    brand: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-brand)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-brand)_72%,black)]',
+    accent: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-accent)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-accent)_72%,black)]',
+    violet: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-violet)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-violet)_72%,black)]',
+    info: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-info)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-info)_72%,black)]',
+    success: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-success)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-success)_72%,black)]',
+    warning: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-warning)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-warning)_72%,black)]',
+    danger: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-danger)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-danger)_72%,black)]',
+    neutral: 'shadow-[0_5px_0_0_color-mix(in_oklab,var(--color-neutral)_72%,black)] active:shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-neutral)_72%,black)]'
+};
+/** The same lip at 3px, for things too small to travel: icon tiles, dots. */
+export const liftSm = {
+    brand: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-brand)_72%,black)]',
+    accent: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-accent)_72%,black)]',
+    violet: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-violet)_72%,black)]',
+    info: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-info)_72%,black)]',
+    success: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-success)_72%,black)]',
+    warning: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-warning)_72%,black)]',
+    danger: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-danger)_72%,black)]',
+    neutral: 'shadow-[0_3px_0_0_color-mix(in_oklab,var(--color-neutral)_72%,black)]'
+};