@heyramzi/ui 2.23.0 → 2.24.0

package/src/charts/dashboard/dashboard-empty.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import { cn } from "../../lib/utils.js";
-	import type { PhosphorIcon } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// Not list-page's `EmptyState`: that one takes exactly one action, and a
-		// dashboard can be empty for reasons (nothing connected, nothing synced)
-		// that need two buttons.
-
-		// The dashed edge marks truly empty, not loading.
-		icon?: PhosphorIcon;
-		title: string;
-		description?: string;
-		/** One or two buttons. Omit where there is nothing the reader can do. */
-		actions?: Snippet;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let { icon: Icon, title, description, actions, class: className }: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<div
-	class={cn(
-		"rounded-xl border-2 border-dashed border-border bg-transparent p-10 text-center",
-		className,
-	)}
->
-	<div class="mx-auto flex max-w-md flex-col items-center gap-4">
-		{#if Icon}
-			<Icon class="size-10 text-muted-foreground" aria-hidden="true" />
-		{/if}
-		<div class="space-y-1.5">
-			<h2 class="font-heading text-lg font-semibold">{title}</h2>
-			{#if description}
-				<p class="text-sm text-muted-foreground">{description}</p>
-			{/if}
-		</div>
-		{#if actions}
-			<div class="flex flex-wrap justify-center gap-2">{@render actions()}</div>
-		{/if}
-	</div>
-</div>

package/src/charts/dashboard/data-panel.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import { cn } from "../../lib/utils.js";
-	import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
-	import { SectionLabel } from "../../components/section-header/index.js";
-	import type { PhosphorIcon } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		/** What this section of the dashboard is. Drawn as the app's one panel label. */
-		label: string;
-		labelIcon?: PhosphorIcon;
-		/**
-		 * A row count, total or freshness stamp. It's a prop, not an action,
-		 * because hand-placed hints ended up at three type sizes on one screen.
-		 */
-		hint?: string;
-		/** Controls that act on this panel. Pinned right, after the hint. */
-		actions?: Snippet;
-		/** A line under the label, for the scope a number was measured over. */
-		sublabel?: string;
-		/** Off for a body that supplies its own padding: a table, a full-bleed list. */
-		pad?: boolean;
-		/**
-		 * The body scrolls sideways rather than squeezing. For a wide table, which is
-		 * every table on a dashboard once the window is narrower than its columns.
-		 */
-		scroll?: boolean;
-		children: Snippet;
-		class?: string;
-		bodyClass?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		label,
-		labelIcon,
-		hint,
-		actions,
-		sublabel,
-		pad = true,
-		scroll = false,
-		children,
-		class: className,
-		bodyClass,
-	}: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<section class={cn(panelShellClass, className)}>
-	<div class={panelHeaderClass}>
-		<div class="flex min-w-0 flex-col gap-0.5">
-			<SectionLabel icon={labelIcon}>{label}</SectionLabel>
-			{#if sublabel}
-				<span class="truncate text-xs text-muted-foreground">{sublabel}</span>
-			{/if}
-		</div>
-		{#if hint || actions}
-			<div class="flex min-w-0 shrink-0 items-center gap-3">
-				{#if hint}
-					<span class="text-xs tabular-nums text-muted-foreground">{hint}</span>
-				{/if}
-				{#if actions}
-					{@render actions()}
-				{/if}
-			</div>
-		{/if}
-	</div>
-	<div class={cn(pad && "p-4", scroll && "overflow-x-auto", bodyClass)}>
-		{@render children()}
-	</div>
-</section>

package/src/charts/dashboard/data-sort-head.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-	/*
-	 * A column head that sorts the table under it. Sort buttons above a table
-	 * never say which column they rank, and read as filter tabs.
-	 */
-
-	// Every sortable head shows its caret, at 40%, solid on the active column.
-	// Hover-only makes people hunt, and it shifts the label under the pointer.
-
-	// No padding of its own: it comes from the skin classes, so heads and cells
-	// stay in line when a dense table tightens both.
-
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import { CaretDown, CaretUp } from "phosphor-svelte";
-	import { cn } from "../../lib/utils.js";
-	import { dataThClass, dataThNumClass } from "./data-table.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		/** True when the table is currently ranked by this column. */
-		active: boolean;
-		/** Which way the active column runs. Ignored while inactive. */
-		descending: boolean;
-		/** Called on click and on Enter/Space. Toggling direction is the caller's. */
-		onSort: () => void;
-		/** Numbers right-align to their digits, so their caret leads the label. */
-		numeric?: boolean;
-		/** The long form of an abbreviated head, as the browser tooltip. */
-		title?: string;
-		class?: string;
-		children: Snippet;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		active,
-		descending,
-		onSort,
-		numeric = false,
-		title,
-		class: className,
-		children,
-	}: Props = $props();
-
-	// =========================
-	// DERIVED
-	// =========================
-	const ariaSort = $derived(active ? (descending ? "descending" : "ascending") : "none");
-
-	// =========================
-	// FUNCTIONS
-	// =========================
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			onSort();
-		}
-	}
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<th
-	scope="col"
-	{title}
-	tabindex="0"
-	aria-sort={ariaSort}
-	onclick={onSort}
-	onkeydown={handleKeydown}
-	class={cn(
-		numeric ? dataThNumClass : dataThClass,
-		"cursor-pointer select-none transition-colors hover:text-foreground",
-		active && "text-foreground",
-		className,
-	)}
->
-	<span class="inline-flex items-center gap-0.5 whitespace-nowrap">
-		{#if numeric}
-			{@render caret()}{@render children()}
-		{:else}
-			{@render children()}{@render caret()}
-		{/if}
-	</span>
-</th>
-
-{#snippet caret()}
-	{#if active && !descending}
-		<CaretUp class="size-3 shrink-0" weight="bold" />
-	{:else if active}
-		<CaretDown class="size-3 shrink-0" weight="bold" />
-	{:else}
-		<CaretDown class="size-3 shrink-0 text-muted-foreground/40" />
-	{/if}
-{/snippet}

package/src/components/icon/icon.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		icon: PhosphorIcon;
-		size?: number;
-		class?: string;
-		weight?: IconWeight;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let { icon: IconComp, size = 24, class: className = "", weight }: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<IconComp {size} class={className} {weight} />

package/src/components/icon/index.ts

@@ -1 +0,0 @@
-export { default as Icon } from "./icon.svelte";

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

@@ -1,45 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import EmptyState from "./empty-state.svelte";
-	import { cn } from "../../lib/utils.js";
-	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// Shown when nothing is picked or the board is empty. It sits on the white
-		// panel with no frame of its own: a dashed edge drew a box round nothing.
-		icon?: PhosphorIcon;
-		iconWeight?: IconWeight;
-		title: string;
-		description?: string;
-		actionLabel?: string;
-		actionHref?: string;
-		onAction?: () => void;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		icon,
-		iconWeight,
-		title,
-		description,
-		actionLabel,
-		actionHref,
-		onAction,
-		class: className,
-	}: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<div class={cn("flex h-full items-center justify-center rounded-xl bg-card", className)}>
-	<EmptyState {icon} {iconWeight} {title} {description} {actionLabel} {actionHref} {onAction} />
-</div>

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

@@ -1,82 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import type { Snippet } from "svelte";
-	import SectionLabel from "../section-header/section-label.svelte";
-	import { cn } from "../../lib/utils.js";
-	import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
-	import type { PhosphorIcon } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// One panel per idea in a detail pane. Hand-rolled copies drifted between
-		// 8px and 12px corners, so rounded-xl lives here once.
-		label?: string;
-		labelIcon?: PhosphorIcon;
-		// A mark the icon set does not carry (a platform logo), drawn ahead of the
-		// label at the same optical size.
-		labelLead?: Snippet;
-		// The right side of the header bar: a count, a hint, a button cluster.
-		actions?: Snippet;
-		// WHY: a panel whose body is a media grid or a full-bleed list supplies its
-		// own padding, so the shell must be able to step out of the way.
-		pad?: boolean;
-		// Takes the height the panels above it did not use, inside a `fill` stack.
-		// One panel per stack, and it is the one the reader works in.
-		grow?: boolean;
-		children: Snippet;
-		class?: string;
-		bodyClass?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		label,
-		labelIcon,
-		labelLead,
-		actions,
-		pad = true,
-		grow = false,
-		children,
-		class: className,
-		bodyClass,
-	}: Props = $props();
-
-	// =========================
-	// DERIVED
-	// =========================
-	let hasHeader = $derived(Boolean(label || labelLead || actions));
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<section class={cn(panelShellClass, grow && "flex min-h-0 flex-1 flex-col", className)}>
-	{#if hasHeader}
-		<div class={panelHeaderClass}>
-			{#if label || labelLead}
-				<SectionLabel icon={labelIcon}>
-					{#if labelLead}
-						{@render labelLead()}
-					{/if}
-					{label}
-				</SectionLabel>
-			{:else}
-				<span></span>
-			{/if}
-			{#if actions}
-				<div class="flex min-w-0 flex-wrap items-center justify-end gap-2">
-					{@render actions()}
-				</div>
-			{/if}
-		</div>
-	{/if}
-	<div class={cn(pad && "p-4", grow && "flex min-h-0 flex-1 flex-col", bodyClass)}>
-		{@render children()}
-	</div>
-</section>

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import { cn } from "../../lib/utils.js";
-	import * as Empty from "../../shadcn/empty/index.js";
-	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	interface Props {
-		// Not `EmptyState`, which has a 48px icon and an action. This says a filter
-		// came back empty, in one sentence that fits a 280px rail.
-		icon?: PhosphorIcon;
-		iconWeight?: IconWeight;
-		iconClass?: string;
-		title: string;
-		hint?: string;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let { icon: Icon, iconWeight, iconClass, title, hint, class: className }: Props = $props();
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<Empty.Root class={cn("h-full gap-2 px-6 py-12", className)}>
-	{#if Icon}
-		<Icon
-			weight={iconWeight}
-			class={cn("size-6", iconClass ?? "text-muted-foreground")}
-			aria-hidden="true"
-		/>
-	{/if}
-	<Empty.Title>{title}</Empty.Title>
-	{#if hint}
-		<Empty.Description class="max-w-56 text-xs leading-relaxed">{hint}</Empty.Description>
-	{/if}
-</Empty.Root>

package/src/components/locale-switch/index.ts

@@ -1 +0,0 @@
-export { default as LocaleSwitch } from "./locale-switch.svelte";

package/src/components/locale-switch/locale-switch.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import { SegmentedFilter, type TabDef } from "../segmented/index.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	type LocaleOption = {
-		value: string;
-		label: string;
-		flag: string;
-	};
-
-	interface Props {
-		// Wraps `SegmentedFilter` so it shares one track with every other strip. It
-		// only adds each language's flag.
-		value: string;
-		onchange: (value: string) => void;
-		options?: LocaleOption[];
-		/** Names the control for a screen reader. Without it the group is two bare letters. */
-		ariaLabel?: string;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		value,
-		onchange,
-		options = [
-			{ value: "en", label: "EN", flag: "/flags/US.svg" },
-			{ value: "fr", label: "FR", flag: "/flags/FR.svg" },
-		],
-		ariaLabel = "Language",
-		class: className,
-	}: Props = $props();
-
-	// =========================
-	// DERIVED
-	// =========================
-	let segments = $derived<TabDef<string>[]>(
-		options.map((option) => ({ value: option.value, label: option.label, image: option.flag })),
-	);
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<SegmentedFilter
-	{value}
-	onValueChange={onchange}
-	options={segments}
-	block={false}
-	{ariaLabel}
-	class={className}
-/>

package/src/components/work-parts/count-chip.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn } from "../../lib/utils.js";
-
-	interface Props {
-		count: number;
-		class?: string;
-	}
-
-	let { count, class: className }: Props = $props();
-</script>
-
-<!-- A count beside a heading: a quiet square, never a pill, so it reads as a number and not a status. -->
-<span
-	class={cn(
-		"grid h-5 min-w-5 shrink-0 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums",
-		className,
-	)}
->
-	{count.toLocaleString()}
-</span>

package/src/icons/TradeIcon.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { tradeIconMap, type TradeSlug } from "./trades.js";
-
-	let {
-		trade,
-		size = 14,
-		stroke = 2,
-		class: className = "",
-	}: { trade: TradeSlug; size?: number; stroke?: number; class?: string } = $props();
-
-	let Icon = $derived(tradeIconMap[trade]);
-</script>
-
-{#if Icon}
-	<Icon {size} {stroke} class={className} aria-hidden="true" focusable="false" />
-{/if}

package/src/icons/trades.ts

@@ -1,89 +0,0 @@
-/**
- * Trade icon map. Tabler covers the domain Lucide and Phosphor miss.
- */
-
-/*
- * Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip. Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
- */
-
-/*
- * `building`, `car`, but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller`, and also no `trowel`.
- */
-
-/*
- * Tabler 3.46 (6184 icons, MIT) has all 14 at a consistent 2px stroke on 24×24: droplet/pipe, bolt, home (roof), tools, key, window,
- */
-
-/*
- * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
- */
-
-import {
-  IconBolt,
-  IconCar,
-  IconCarGarage,
-  IconCrane,
-  IconDroplet,
-  IconGridDots,
-  IconHammer,
-  IconHelmet,
-  IconHome,
-  IconKey,
-  IconLeaf,
-  IconTools,
-  IconTrowel,
-  IconWindow,
-} from "@tabler/icons-svelte-runes";
-import type { Component } from "svelte";
-
-export type TradeSlug =
-  | "plumbers"
-  | "electricians"
-  | "roofers"
-  | "handymen"
-  | "locksmiths"
-  | "window-cleaners"
-  | "garages"
-  | "carpenters"
-  | "builders"
-  | "plasterers"
-  | "tilers"
-  | "gardeners"
-  | "mobile-mechanics"
-  | "construction-companies";
-
-export const tradeIconMap: Record<TradeSlug, Component> = {
-  plumbers: IconDroplet,
-  electricians: IconBolt,
-  roofers: IconHome,
-  handymen: IconTools,
-  locksmiths: IconKey,
-  "window-cleaners": IconWindow,
-  garages: IconCarGarage,
-  carpenters: IconHammer,
-  builders: IconHelmet,
-  plasterers: IconTrowel,
-  tilers: IconGridDots,
-  gardeners: IconLeaf,
-  "mobile-mechanics": IconCar,
-  "construction-companies": IconCrane,
-};
-
-export const tradeLabels: Record<TradeSlug, string> = {
-  plumbers: "PLUMBERS",
-  electricians: "ELECTRICIANS",
-  roofers: "ROOFERS",
-  handymen: "HANDYMEN",
-  locksmiths: "LOCKSMITHS",
-  "window-cleaners": "WINDOW CLEANERS",
-  garages: "GARAGES",
-  carpenters: "CARPENTERS",
-  builders: "BUILDERS",
-  plasterers: "PLASTERERS",
-  tilers: "TILERS",
-  gardeners: "GARDENERS",
-  "mobile-mechanics": "MOBILE MECHANICS",
-  "construction-companies": "CONSTRUCTION COMPANIES",
-};
-
-export const tradeSlugs: TradeSlug[] = Object.keys(tradeIconMap) as TradeSlug[];

package/src/status/pill-tint.ts

@@ -1,16 +0,0 @@
-import type { Tone } from "../lib/tone.js";
-
-// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
-// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
-// the canvas and vanishes there (tokens board, "what fights the new scale").
-// It lives in a .ts module, not status-pill.svelte's module script, so a plain tsc consumer
-// can import it: tsc's `*.svelte` shim only knows a default export.
-export const PILL_TINT: Record<Tone, string> = {
-  neutral: "bg-foreground/6 text-muted-foreground",
-  accent:
-    "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
-  info: "bg-info/12 text-info-800 dark:text-info-400",
-  success: "bg-success/12 text-success-800 dark:text-success-400",
-  warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
-  destructive: "bg-destructive/10 text-destructive-ink",
-};

package/src/work/detail/task-property.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import type { Component, Snippet } from "svelte";
-	import PropertyRow from "../../components/work-parts/property-row.svelte";
-
-	interface Props {
-		label: string;
-		/** A Phosphor icon before the label, shown when the rail is wide. */
-		icon?: Component<{ class?: string; "aria-hidden"?: boolean | "true" | "false" }>;
-		children: Snippet;
-	}
-
-	let { label, icon, children }: Props = $props();
-</script>
-
-<!-- A labelled row in the rail: icon, label, value. In the narrow chip row the label hides and
-     names the group for assistive tech. -->
-<PropertyRow {label} {icon} layout="responsive">{@render children()}</PropertyRow>