@heyramzi/ui 3.0.0 → 3.2.0

package/src/shadcn/native-select/native-select.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import { CaretDown } from "phosphor-svelte";
+
+	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes, HTMLSelectElement>, "size"> & {
+		size?: "sm" | "default";
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		children,
+		...restProps
+	}: NativeSelectProps = $props();
+</script>
+
+<div
+	class={cn(
+		"group/native-select relative w-fit has-[select:disabled]:opacity-50",
+		className,
+	)}
+	data-slot="native-select-wrapper"
+	data-size={size}
+>
+	<!-- The kit's Select trigger sizes: 32px, 28px small, so the two read as one control. -->
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		data-size={size}
+		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] select-none aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:text-[0.8rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<CaretDown
+		size={16}
+		aria-hidden="true"
+		data-slot="native-select-icon"
+		class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+	/>
+</div>

package/src/shadcn/native-select/native-select.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLSelectAttributes } from "svelte/elements";
+type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes, HTMLSelectElement>, "size"> & {
+    size?: "sm" | "default";
+};
+declare const $$Component: import("svelte").Component<NativeSelectProps, {}, "value" | "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/index.ts

@@ -0,0 +1,31 @@
+import Content from "./pagination-content.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Next from "./pagination-next.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import Previous from "./pagination-previous.svelte";
+import Root from "./pagination.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton, // old
+	NextButton, // old
+	Ellipsis,
+	Previous,
+	Next,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton, // old
+	NextButton as PaginationNextButton, // old
+	Ellipsis as PaginationEllipsis,
+	Previous as PaginationPrevious,
+	Next as PaginationNext,
+};

package/src/shadcn/pagination/pagination-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn("gap-1 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>

package/src/shadcn/pagination/pagination-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLUListElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DotsThree } from "phosphor-svelte";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	aria-hidden="true"
+	data-slot="pagination-ellipsis"
+	class={cn("size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
+	{...restProps}
+>
+	<DotsThree aria-hidden="true" />
+	<span class="sr-only">More pages</span>
+</span>

package/src/shadcn/pagination/pagination-ellipsis.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { WithElementRef } from "../../lib/utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+	{@render children?.()}
+</li>

package/src/shadcn/pagination/pagination-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../lib/utils.js";
+import type { HTMLLiAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLLiAttributes>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-link.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { buttonVariants, type ButtonSize } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		isActive,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps & {
+		size?: ButtonSize;
+		isActive: boolean;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	{page}
+	aria-current={isActive ? "page" : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
+	data-size={size}
+	class={cn(
+		buttonVariants({ size, icon: true, variant: isActive ? "outline" : "ghost" }),
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.Page>

package/src/shadcn/pagination/pagination-link.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+import { type ButtonSize } from "../button/index.js";
+type $$ComponentProps = PaginationPrimitive.PageProps & {
+    size?: ButtonSize;
+    isActive: boolean;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-next-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretRight } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<span>Next</span>
+	<CaretRight
+		aria-hidden="true"
+		class={cn("cn-rtl-flip size-4", className)}
+	/>
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pr-2!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.NextButton>

package/src/shadcn/pagination/pagination-next-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.NextButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-next.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretRight } from "phosphor-svelte";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: "ghost", size: "default" }), "pr-2!", className)}
+	{...restProps}
+>
+	<span class="hidden sm:block">Next</span>
+	<CaretRight
+		aria-hidden="true"
+		data-icon="inline-end"
+		class="cn-rtl-flip"
+	/>
+</PaginationPrimitive.NextButton>

package/src/shadcn/pagination/pagination-next.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.NextButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-prev-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretLeft } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<CaretLeft
+		aria-hidden="true"
+		class={cn("cn-rtl-flip size-4", className)}
+	/>
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pl-2!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-prev-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-previous.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretLeft } from "phosphor-svelte";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(
+		buttonVariants({ variant: "ghost", size: "default" }),
+		"pl-2!",
+		className
+	)}
+	{...restProps}
+>
+	<CaretLeft
+		aria-hidden="true"
+		data-icon="inline-start"
+		class="cn-rtl-flip"
+	/>
+	<span class="hidden sm:block">Previous</span>
+</PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-previous.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
+</script>
+
+<PaginationPrimitive.Root
+	bind:ref
+	bind:page
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	{count}
+	{perPage}
+	{siblingCount}
+	class={cn("mx-auto flex w-full justify-center", className)}
+	{...restProps}
+/>

package/src/shadcn/pagination/pagination.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.RootProps, {}, "ref" | "page">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/Controls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Toolbar } from "bits-ui";
 	import type { DeckController } from "./deck-controller.svelte.js";
 
 	interface Props {
@@ -26,44 +27,46 @@
 	disabled = false,
 	pressed?: boolean,
 )}
-	<button
-		type="button"
-		class="deck__button"
-		{onclick}
-		{disabled}
-		aria-label={label}
-		aria-pressed={pressed}
-	>
-		<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
-			<path
-				d={icons[icon]}
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.75"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-		</svg>
-	</button>
+	<Toolbar.Button {onclick} {disabled} aria-label={label} aria-pressed={pressed}>
+		{#snippet child({ props })}
+			<button {...props} class="deck__button">
+				<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+					<path
+						d={icons[icon]}
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.75"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		{/snippet}
+	</Toolbar.Button>
 {/snippet}
 
-<div class="deck__controls deck__chrome">
-	{@render button("prev", deck.labels.previous, () => deck.prev(), deck.atStart)}
-	<span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
-	{@render button("next", deck.labels.next, () => deck.next(), deck.atEnd)}
-	<span class="deck__divider" aria-hidden="true"></span>
-	{@render button(
-		"overview",
-		deck.labels.overview,
-		() => deck.toggleOverview(),
-		false,
-		deck.overview,
-	)}
-	{#if onPresenter}
-		{@render button("presenter", deck.labels.presenter, onPresenter)}
-	{/if}
-	{@render button("fullscreen", deck.labels.fullscreen, onFullscreen)}
-</div>
+<!-- The arrows are the toolbar's while a control has focus, so they move along it, not the deck. -->
+<Toolbar.Root>
+	{#snippet child({ props })}
+		<div {...props} class="deck__controls deck__chrome">
+			{@render button("prev", deck.labels.previous, () => deck.prev(), deck.atStart)}
+			<span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
+			{@render button("next", deck.labels.next, () => deck.next(), deck.atEnd)}
+			<span class="deck__divider" aria-hidden="true"></span>
+			{@render button(
+				"overview",
+				deck.labels.overview,
+				() => deck.toggleOverview(),
+				false,
+				deck.overview,
+			)}
+			{#if onPresenter}
+				{@render button("presenter", deck.labels.presenter, onPresenter)}
+			{/if}
+			{@render button("fullscreen", deck.labels.fullscreen, onFullscreen)}
+		</div>
+	{/snippet}
+</Toolbar.Root>
 
 <style>
 	@layer theme, base, components, utilities;

package/src/slides/Deck.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import "./theme.css";
+	import { Progress } from "bits-ui";
 	import { flushSync, onMount, setContext, untrack } from "svelte";
 	import { attachBridge, attachChannel, attachUrlSync } from "./bridges.js";
 	import Controls from "./Controls.svelte";
@@ -72,6 +73,7 @@
 			return labels;
 		},
 		transition: viewTransition,
+		zoomMs,
 	});
 	controller = deck;
 	setContext(DECK_KEY, deck);
@@ -88,6 +90,14 @@
 		run.finished.finally(() => delete document.documentElement.dataset.deckVt);
 	}
 
+	/* The overview zoom's length, read from the CSS so it follows the token. 0 under reduced motion. */
+	function zoomMs() {
+		if (!root || matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
+		const value = getComputedStyle(root).getPropertyValue("--deck-t-zoom").trim();
+		const ms = Number.parseFloat(value) * (value.endsWith("ms") ? 1 : 1000);
+		return Number.isFinite(ms) ? ms : 0;
+	}
+
 	onMount(() => deck.mount());
 
 	$effect(() => deck.listen((position) => onIndexChange?.(position.index, position.step)));
@@ -175,7 +185,7 @@
 	data-deck={id}
 	data-view={deck.view}
 	data-transition={transition}
-	data-morphing={deck.morphing || undefined}
+	data-zoom={deck.zoom ? (deck.zoom.running ? "run" : "hold") : undefined}
 	{onpointerdown}
 	{onpointerup}
 >
@@ -185,7 +195,8 @@
 		{:else}
 			{@render children?.()}
 		{/if}
-		{#if deck.overview}
+		<!-- The tiles mount once the camera starts pulling back, and fade in as it lands. -->
+		{#if deck.overview && !deck.zoom?.framed}
 			<Overview {deck} returnFocus={root} />
 		{/if}
 	</div>
@@ -195,17 +206,19 @@
 	</div>
 
 	{#if progress}
-		<div
-			class="deck__progress deck__chrome"
-			role="progressbar"
+		<Progress.Root
+			min={1}
+			max={deck.ordinal.of}
+			value={deck.ordinal.n}
 			aria-label={deck.labels.progress}
-			aria-valuemin="1"
-			aria-valuemax={deck.ordinal.of}
-			aria-valuenow={deck.ordinal.n}
 			aria-valuetext={deck.labels.slide(deck.ordinal.n, deck.ordinal.of)}
 		>
-			<div class="deck__progress-fill" style:transform="scaleX({deck.progress})"></div>
-		</div>
+			{#snippet child({ props })}
+				<div {...props} class="deck__progress deck__chrome">
+					<div class="deck__progress-fill" style:transform="scaleX({deck.progress})"></div>
+				</div>
+			{/snippet}
+		</Progress.Root>
 	{/if}
 
 	{#if controls}

package/src/slides/Overview.svelte

@@ -60,7 +60,7 @@
 			padding: 0;
 			list-style: none;
 			/* The ring and number appear once the thumbnails have landed. */
-			animation: tiles-in var(--deck-t-quick) linear var(--deck-t-morph) backwards;
+			animation: tiles-in var(--deck-t-quick) linear var(--deck-t-zoom) backwards;
 		}
 		@media (prefers-reduced-motion: reduce) {
 			.deck__tiles {
@@ -94,14 +94,20 @@
 		.deck__tile:focus-visible {
 			outline-color: var(--deck-fg);
 		}
+		/*
+		 * The number sits in the gap under its thumbnail, never on it: straddling the edge put
+		 * half of it under the slide. 7px clears the 5px ring, and 7 + 18 fits the grid's 26px gap.
+		 */
 		.deck__tile-n {
 			position: absolute;
-			bottom: -12px;
+			top: calc(100% + 7px);
 			left: 50%;
-			min-width: 22px;
+			z-index: 1;
+			box-sizing: border-box;
+			min-width: 24px;
 			transform: translateX(-50%);
 			padding: 3px 6px;
-			font: 600 11px/1 var(--deck-font);
+			font: 600 12px/1 var(--deck-font);
 			font-variant-numeric: tabular-nums;
 			text-align: center;
 			color: var(--deck-fg);

package/src/slides/README.md

@@ -43,7 +43,7 @@ Keys: arrows, Space (Shift+Space back), PageUp/PageDown, Home/End, `O` overview,
 
 ## Theming
 
-Set variables on `.deck`: `--deck-bg`, `--deck-fg`, `--deck-accent`, `--deck-on-accent`, `--deck-font`, `--deck-font-display`, `--deck-pad`, `--deck-text-*` (design px) and the timing tokens `--deck-t-slide`, `--deck-t-morph`, `--deck-stagger`, `--deck-ease`. They default to the `@heyramzi/ui` motion tokens when present. Motion is transform and opacity only and stops under `prefers-reduced-motion`.
+Set variables on `.deck`: `--deck-bg`, `--deck-fg`, `--deck-accent`, `--deck-on-accent`, `--deck-font`, `--deck-font-display`, `--deck-pad`, `--deck-text-*` (design px) and the timing tokens `--deck-t-slide`, `--deck-t-morph`, `--deck-t-zoom` (the overview zoom), `--deck-stagger`, `--deck-ease`. They default to the `@heyramzi/ui` motion tokens when present. `--deck-accent` and `--deck-on-accent` follow the app's `--primary` and `--primary-foreground`, and fall back to the deck's ink. Motion is transform and opacity only and stops under `prefers-reduced-motion`.
 
 ## Data-driven decks