@heyramzi/ui 1.54.1 → 2.0.0

package/src/components/hold-to-confirm/hold-to-confirm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// ========================= IMPORTS
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { buttonVariants, type ButtonSize, type ButtonVariant } from "../../shadcn/button/index.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";

package/src/components/language-flag/language-flag.svelte

@@ -2,7 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	// =========================
 	// CONSTANTS

package/src/components/list-page/detail-empty.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import EmptyState from "./empty-state.svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
 // =========================

package/src/components/list-page/detail-header.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/detail-panel.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import SectionLabel from "./section-label.svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 

package/src/components/list-page/detail-row.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/detail-stack.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/empty-state.svelte

@@ -41,7 +41,7 @@ let {
 <Empty.Root class="t-empty py-16">
 	<Empty.Header class="max-w-md">
 		{#if Icon}
-			<Empty.Media class="mb-4 size-16 rounded-2xl bg-brand-indigo/10 text-brand-indigo">
+			<Empty.Media class="mb-4 size-16 rounded-2xl bg-brand/10 text-brand">
 				<Icon weight={iconWeight} class="size-8" />
 			</Empty.Media>
 		{/if}

package/src/components/list-page/filter-item.svelte

@@ -5,7 +5,7 @@
 import type { Snippet } from "svelte";
 import { Checkbox } from "../../shadcn/checkbox/index.js";
 import { Check } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/filter-popover.svelte

@@ -5,7 +5,7 @@
 import type { Snippet } from "svelte";
 import * as Popover from "../../shadcn/popover/index.js";
 import { Funnel as FunnelIcon } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../../shadcn/button/index.js";
 import { toolbarTriggerClass } from "./toolbar-trigger.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
@@ -71,7 +71,7 @@ let isActive = $derived(active ?? hasCount);
 		{/if}
 		{#if hasCount}
 			<span
-				class="ml-0.5 inline-flex size-4 items-center justify-center rounded-full bg-brand-indigo/15 text-[10px] font-semibold text-brand-indigo dark:text-brand-indigo-light"
+				class="ml-0.5 inline-flex size-4 items-center justify-center rounded-full bg-brand/15 text-[10px] font-semibold text-brand dark:text-brand-light"
 			>
 				{count}
 			</span>

package/src/components/list-page/filter-section.ts

@@ -1,4 +1,4 @@
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // The header for each control group in a toolbar popover, in one place so
 // sections can't drift in size or weight.

package/src/components/list-page/grouped-list.svelte

@@ -5,7 +5,7 @@
 	import { untrack, type Snippet } from "svelte";
 	import { SvelteSet } from "svelte/reactivity";
 	import { CaretDown } from "phosphor-svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	// =========================
 	// TYPES

package/src/components/list-page/list-page-shell.svelte

@@ -4,7 +4,7 @@
 	// =========================
 	import type { Snippet } from "svelte";
 	import EmptyState from "./empty-state.svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { pageGutterClass } from "../../lib/layout.js";
 	import { getSectionHost } from "./section-host.js";
 	import SectionRuns from "../segmented/section-runs.svelte";

package/src/components/list-page/list-table.ts

@@ -1,4 +1,4 @@
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 /**
  * The list-page table rhythm, Attio's: one 40px row, a hairline under each, a flat hover.

package/src/components/list-page/master-detail.svelte

@@ -5,7 +5,7 @@
 import type { Snippet } from "svelte";
 import { setContext } from "svelte";
 import { CaretLeft } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../../shadcn/button/index.js";
 import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
 

package/src/components/list-page/notice-bar.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import { Warning, Info, CheckCircle, WarningCircle } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Alert } from "../../shadcn/alert/index.js";
 import { TONE_CLASS, type Tone as SeverityTone } from "../../lib/tone.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";

package/src/components/list-page/prev-next.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import { CaretLeft, CaretRight } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../../shadcn/button/index.js";
 import { stepTo } from "./step.js";
 

package/src/components/list-page/rail-body.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/rail-empty.svelte

@@ -2,7 +2,7 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import * as Empty from "../../shadcn/empty/index.js";
 import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 

package/src/components/list-page/rail-head.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import SectionLabel from "./section-label.svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/rail-row.svelte

@@ -4,7 +4,7 @@
 // =========================
 import type { Snippet } from "svelte";
 import { getContext } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { MASTER_DETAIL_PANE, type MasterDetailPane } from "./queue-rail.js";
 
 // =========================

package/src/components/list-page/section-label.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 // =========================
@@ -33,7 +33,7 @@ let { icon: Icon, children, class: className }: Props = $props();
 	)}
 >
 	{#if Icon}
-		<Icon class="size-4 text-brand-indigo" aria-hidden="true" />
+		<Icon class="size-4 text-brand" aria-hidden="true" />
 	{/if}
 	{@render children()}
 </span>

package/src/components/list-page/toolbar-search.svelte

@@ -4,7 +4,7 @@
 // =========================
 import { Input } from "../../shadcn/input/index.js";
 import { MagnifyingGlass } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/list-page/toolbar-trigger.ts

@@ -1,4 +1,4 @@
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 type ToolbarTriggerOpts = {
   active?: boolean;

package/src/components/mark/mark.svelte

@@ -2,7 +2,7 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 // =========================
 // TYPES

package/src/components/open-in/open-in.svelte

@@ -24,7 +24,7 @@
 // IMPORTS
 // =========================
 import { ArrowSquareOut } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { buttonVariants } from "../../shadcn/button/index.js";
 
 // =========================

package/src/components/picker/mark-picker.svelte

@@ -4,7 +4,7 @@
 // =========================
 import { CaretDown } from "phosphor-svelte";
 import { Mark } from "../mark/index.js";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import Picker from "./picker.svelte";
 import { pickerTriggerClass } from "./trigger.js";
 import type { PickerOption } from "./types.js";

package/src/components/picker/picker.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from "svelte";
 	import * as Command from "../../shadcn/command/index.js";
 	import * as Popover from "../../shadcn/popover/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { PickerGroup, PickerOption } from "./types.js";
 
 	/**

package/src/components/section-card/section-card.svelte

@@ -3,7 +3,7 @@
 	// IMPORTS
 	// =========================
 	import type { Snippet } from "svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import * as Card from "../../shadcn/card/index.js";
 
 	// =========================

package/src/components/segmented/animated-tabs.svelte

@@ -26,7 +26,7 @@
 
 <script lang="ts" generics="T extends string">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import Segment from "./segment.svelte";
 	import SegmentedTrack from "./segmented-track.svelte";
 	import SegmentedOverflow from "./segmented-overflow.svelte";

package/src/components/segmented/section-runs.svelte

@@ -24,7 +24,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import SegmentedNav from "./segmented-nav.svelte";
 
 	// =========================

package/src/components/segmented/segment.svelte

@@ -29,7 +29,7 @@ export type SegmentContent = {
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { Icon } from "../icon/index.js";
 import { Mark } from "../mark/index.js";
 
@@ -88,8 +88,8 @@ let on = $derived(active === true);
 			// 20 by 18, so `rounded-full` drew an ellipse.
 			"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-none font-medium tabular-nums",
 			"bg-muted-foreground/15 text-muted-foreground",
-			on && "bg-brand-indigo/14 text-brand-indigo",
-			auto && "group-data-[state=active]/segment:bg-brand-indigo/14 group-data-[state=active]/segment:text-brand-indigo",
+			on && "bg-brand/14 text-brand",
+			auto && "group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",
 		)}
 	>
 		{count}
@@ -98,8 +98,8 @@ let on = $derived(active === true);
 	<span
 		class={cn(
 			"size-1.5 shrink-0 rounded-full bg-muted-foreground/50",
-			on && "bg-brand-indigo",
-			auto && "group-data-[state=active]/segment:bg-brand-indigo",
+			on && "bg-brand",
+			auto && "group-data-[state=active]/segment:bg-brand",
 		)}
 		aria-hidden="true"
 	></span>

package/src/components/segmented/segmented-filter.svelte

@@ -2,7 +2,7 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import Segment from "./segment.svelte";
 import type { TabDef } from "./animated-tabs.svelte";
 import SegmentedTrack from "./segmented-track.svelte";

package/src/components/segmented/segmented-nav.svelte

@@ -9,7 +9,7 @@ export type SegmentedNavItem = SegmentContent & { href: string };
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import Segment from "./segment.svelte";
 import SegmentedTrack from "./segmented-track.svelte";
 import { segmentedTriggerClass } from "./segmented.js";

package/src/components/segmented/segmented-overflow.svelte

@@ -4,7 +4,7 @@
 // =========================
 import { CaretDown } from "phosphor-svelte";
 import { Picker } from "../picker/index.js";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { segmentedTriggerClass, type SegmentedVariant } from "./segmented.js";
 import type { SegmentContent } from "./segment.svelte";
 

package/src/components/segmented/segmented-track.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 import { segmentedTrackClass, type SegmentedVariant } from "./segmented.js";
 import { slidingPill } from "../../lib/sliding-pill.js";
 

package/src/components/star-rating-input/star-rating-input.svelte

@@ -23,7 +23,7 @@ const POP_WINDOW_MS = 350 + 4 * 40;
 
 <script lang="ts">
 import { Star } from "phosphor-svelte";
-import { cn } from "@heyramzi/utils";
+import { cn } from "../../lib/utils.js";
 
 interface Props {
 	/** Current rating value (0 = unrated). */

package/src/components/table-view/table-view.svelte

@@ -10,7 +10,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import * as Table from "../../shadcn/table/index.js";
 
 	// =========================

package/src/components/theme/theme-provider.svelte

@@ -2,25 +2,27 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { ModeWatcher, userPrefersMode, type UserPrefersMode } from "mode-watcher";
+	import { ModeWatcher, userPrefersMode } from "mode-watcher";
 	import type { ComponentProps } from "svelte";
 
 	// =========================
 	// TYPES
 	// =========================
 	type WatcherProps = ComponentProps<typeof ModeWatcher>;
+	// mode-watcher exports its store class under the name UserPrefersMode, so the value type comes from the store.
+	type ThemeMode = (typeof userPrefersMode)["current"];
 
 	interface Props extends Omit<WatcherProps, "defaultMode"> {
 		/**
 		 * The choice the server already knows, for a browser that has none stored. A stored
 		 * choice wins, so it seeds a first visit and never overrides a click.
 		 */
-		initial?: UserPrefersMode;
+		initial?: ThemeMode;
 		/**
 		 * Fires when the person changes the mode, never on load. An app that saves the choice
 		 * on its server posts it here.
 		 */
-		onChange?: (mode: UserPrefersMode) => void;
+		onChange?: (mode: ThemeMode) => void;
 	}
 
 	// =========================
@@ -32,7 +34,7 @@
 	// EFFECTS
 	// =========================
 	// The first run is the mode read from storage on mount, which nobody chose.
-	let seen: UserPrefersMode | null = null;
+	let seen: ThemeMode | null = null;
 	$effect(() => {
 		const next = userPrefersMode.current;
 		if (seen !== null && next !== seen) onChange?.(next);

package/src/components/toolbar/index.ts

@@ -0,0 +1,5 @@
+/**
+ * One toolbar row for a list page. Wide, it shows search, tabs and a view switch inline. Narrow,
+ * each of those folds into a menu and the row never wraps.
+ */
+export { default as Toolbar } from "./toolbar.svelte";

package/src/components/toolbar/toolbar.svelte

@@ -0,0 +1,168 @@
+<script lang="ts" generics="Tab extends string, View extends string">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { CaretDown, MagnifyingGlass } from "phosphor-svelte";
+	import { SegmentedFilter } from "../segmented/index.js";
+	import type { TabDef } from "../segmented/animated-tabs.svelte";
+	import { toolbarTriggerClass } from "../list-page/toolbar-trigger.js";
+	import ToolbarSearch from "../list-page/toolbar-search.svelte";
+	import { Input } from "../../shadcn/input/index.js";
+	import * as DropdownMenu from "../../shadcn/dropdown-menu/index.js";
+	import * as Popover from "../../shadcn/popover/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** The search text. Leave it out for no search. */
+		search?: string;
+		searchPlaceholder?: string;
+		/** The label of the narrow search button. Translate at the call site. */
+		searchLabel?: string;
+		/** A strip of tabs, such as All, Open and Done. */
+		tabs?: readonly TabDef<Tab>[];
+		tab?: Tab;
+		tabsLabel?: string;
+		/** How the page shows its records: a list, a board, a grid. Each one needs an icon. */
+		views?: readonly (TabDef<View> & { icon: NonNullable<TabDef<View>["icon"]> })[];
+		view?: View;
+		viewLabel?: string;
+		/** Controls that stay on the row at every width, such as filter chips. They scroll sideways before they wrap. */
+		filters?: Snippet;
+		/** The primary action and its neighbours, pinned to the right edge. */
+		actions?: Snippet;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		search = $bindable(),
+		searchPlaceholder = "Search...",
+		searchLabel = "Search",
+		tabs,
+		tab = $bindable(),
+		tabsLabel = "Show",
+		views,
+		view = $bindable(),
+		viewLabel = "View",
+		filters,
+		actions,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let currentTab = $derived(tabs?.find((t) => t.value === tab));
+	let currentView = $derived(views?.find((v) => v.value === view));
+	let searching = $derived(Boolean(search));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<!-- WHY a container query: the toolbar sits in a pane that is narrower than the screen, and a
+     breakpoint reads the screen. WHY nowrap: a second row pushes the content down and moves the
+     page as a search is opened. Search, tabs and view are the three that fold, each into the one
+     menu that holds them; both forms are in the DOM and the query shows one, so there is no
+     measuring and no flash on first paint. -->
+<div class={cn("@container/toolbar min-w-0", className)}>
+	<div class="flex flex-nowrap items-center gap-2">
+		{#if search !== undefined}
+			<div class="w-56 shrink-0 @max-2xl/toolbar:hidden">
+				<ToolbarSearch bind:value={search} placeholder={searchPlaceholder} />
+			</div>
+			<Popover.Root>
+				<Popover.Trigger
+					aria-label={searchLabel}
+					class={cn(toolbarTriggerClass({ active: searching }), "@2xl/toolbar:hidden")}
+				>
+					<MagnifyingGlass class="size-3.5" aria-hidden="true" />
+				</Popover.Trigger>
+				<Popover.Content align="start" class="w-64 p-2">
+					<Input bind:value={search} placeholder={searchPlaceholder} aria-label={searchLabel} class="h-8" />
+				</Popover.Content>
+			</Popover.Root>
+		{/if}
+
+		{#if tabs && tab !== undefined}
+			<SegmentedFilter
+				options={tabs}
+				bind:value={tab}
+				ariaLabel={tabsLabel}
+				block={false}
+				class="@max-2xl/toolbar:hidden"
+			/>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger
+					aria-label={tabsLabel}
+					class={cn(toolbarTriggerClass(), "min-w-0 @2xl/toolbar:hidden")}
+				>
+					<span class="truncate">{currentTab?.label}</span>
+					<CaretDown class="size-3 shrink-0" aria-hidden="true" />
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.RadioGroup bind:value={tab}>
+						{#each tabs as item (item.value)}
+							<DropdownMenu.RadioItem value={item.value}>
+								{item.label}
+								{#if item.count != null}
+									<span class="ms-auto pe-2 text-xs text-muted-foreground tabular-nums">{item.count}</span>
+								{/if}
+							</DropdownMenu.RadioItem>
+						{/each}
+					</DropdownMenu.RadioGroup>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		{/if}
+
+		{#if filters}
+			<div class="no-scrollbar flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
+				{@render filters()}
+			</div>
+		{:else}
+			<div class="flex-1"></div>
+		{/if}
+
+		{#if views && view !== undefined}
+			<SegmentedFilter
+				options={views}
+				bind:value={view}
+				ariaLabel={viewLabel}
+				block={false}
+				class="@max-2xl/toolbar:hidden"
+			/>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger
+					aria-label={viewLabel}
+					class={cn(toolbarTriggerClass(), "@2xl/toolbar:hidden")}
+				>
+					{#if currentView}
+						<currentView.icon class="size-3.5" aria-hidden="true" />
+					{/if}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end">
+					<DropdownMenu.RadioGroup bind:value={view}>
+						{#each views as item (item.value)}
+							<DropdownMenu.RadioItem value={item.value}>
+								<item.icon class="size-4" aria-hidden="true" />
+								{item.label}
+							</DropdownMenu.RadioItem>
+						{/each}
+					</DropdownMenu.RadioGroup>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		{/if}
+
+		{#if actions}
+			<div class="flex shrink-0 items-center gap-2">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</div>