@heyramzi/ui 6.1.0 → 8.0.0

package/src/showcase/ChartsSection.svelte

@@ -1,458 +0,0 @@
-<!-- ========================== -->
-<!-- IMPORTS                    -->
-<!-- ========================== -->
-<script lang="ts">
-	import {
-		AreaChart,
-		BarChart,
-		DonutChart,
-		GaugeChart,
-		Legend,
-		LineChart,
-		NumberChart,
-		RingChart,
-		Sparkline,
-		StatCard,
-	} from "../charts/index.js";
-	import ShowcaseStage from "./ShowcaseStage.svelte";
-	import ShowcaseVariant from "./ShowcaseVariant.svelte";
-
-	// =========================
-	// STATE
-	// =========================
-	const monthly = [
-		{ month: "Jan", revenue: 4200, costs: 2800 },
-		{ month: "Feb", revenue: 5100, costs: 3100 },
-		{ month: "Mar", revenue: 4800, costs: 2950 },
-		{ month: "Apr", revenue: 6200, costs: 3400 },
-		{ month: "May", revenue: 7100, costs: 3600 },
-		{ month: "Jun", revenue: 6800, costs: 3500 },
-	];
-
-	const distribution = [
-		{ label: "Search", users: 420, color: "var(--chart-1)" },
-		{ label: "Direct", users: 310, color: "var(--chart-2)" },
-		{ label: "Social", users: 180, color: "var(--chart-3)" },
-		{ label: "Email", users: 90, color: "var(--chart-4)" },
-	];
-
-	const channels = [
-		{ label: "Organic", value: 4250, maxValue: 5000, color: "var(--chart-1)" },
-		{ label: "Paid", value: 3120, maxValue: 5000, color: "var(--chart-2)" },
-		{ label: "Email", value: 2100, maxValue: 5000, color: "var(--chart-3)" },
-		{ label: "Social", value: 1580, maxValue: 5000, color: "var(--chart-4)" },
-	];
-	let ringHover = $state<number | null>(null);
-
-	const sparkSeries = Array.from({ length: 24 }, (_, i) => ({
-		i,
-		v: 50 + Math.sin(i / 2) * 20 + Math.random() * 10,
-	}));
-
-	// Rising 12-month series for the stat-card hero (bklit-style).
-	const revenueTrend = [
-		{ month: "Jan", revenue: 4700 },
-		{ month: "Feb", revenue: 5200 },
-		{ month: "Mar", revenue: 4950 },
-		{ month: "Apr", revenue: 4780 },
-		{ month: "May", revenue: 5600 },
-		{ month: "Jun", revenue: 6100 },
-		{ month: "Jul", revenue: 5900 },
-		{ month: "Aug", revenue: 6400 },
-		{ month: "Sep", revenue: 7200 },
-		{ month: "Oct", revenue: 6950 },
-		{ month: "Nov", revenue: 7600 },
-		{ month: "Dec", revenue: 8200 },
-	];
-
-	// Smooth, gently rising session series for the line stat card (no noise so
-	// curveBasis reads as flowing waves rather than spikes).
-	const sessions = Array.from({ length: 16 }, (_, i) => ({
-		i,
-		v: 1080 + Math.sin(i / 2.1) * 110 + i * 16,
-	}));
-</script>
-
-<!-- ========================== -->
-<!-- MARKUP                     -->
-<!-- ========================== -->
-<header class="group-head">
-	<h2 class="group-title">Charts</h2>
-	<p class="group-note">Visualisation primitives. Drop into any layout.</p>
-</header>
-<div class="grid">
-	<ShowcaseStage
-		title="BarChart"
-		note="single series, vertical"
-		importPath={"import { BarChart } from '@heyramzi/ui/charts';"}
-	>
-		<div class="full">
-			<BarChart data={monthly} xKey="month" yKey="revenue" color="var(--chart-1)" />
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="AreaChart"
-		note="multi-series stacked, distinct colors"
-		importPath={"import { AreaChart } from '@heyramzi/ui/charts';"}
-	>
-		<div class="full">
-			<AreaChart
-				data={monthly}
-				xKey="month"
-				series={[
-					{ key: "revenue", label: "Revenue", color: "var(--chart-1)" },
-					{ key: "costs", label: "Costs", color: "var(--chart-2)" },
-				]}
-				stacked
-			/>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="LineChart"
-		note="gradient fill, point markers, dashed in-progress tail"
-		importPath={"import { LineChart } from '@heyramzi/ui/charts';"}
-	>
-		<div class="full">
-			<LineChart
-				data={monthly}
-				xKey="month"
-				yKey="revenue"
-				color="var(--chart-1)"
-				showMarkers
-				dashFromIndex={4}
-			/>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="DonutChart"
-		note="explicit colors per slice"
-		importPath={"import { DonutChart } from '@heyramzi/ui/charts';"}
-	>
-		<div class="full">
-			<DonutChart data={distribution} valueKey="users" labelKey="label" colorKey="color" />
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="GaugeChart"
-		note="notched radial meter, count-up center value, format options"
-		importPath={"import { GaugeChart } from '@heyramzi/ui/charts';"}
-	>
-		<div class="gauge">
-			<GaugeChart
-				value={66}
-				centerValue={428000}
-				defaultLabel="ARR run rate"
-				formatOptions={{ style: "currency", currency: "USD", notation: "compact" }}
-			/>
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="RingChart + Legend"
-		note="concentric progress rings, hover-synced legend with progress bars"
-		importPath={"import { RingChart, Legend } from '@heyramzi/ui/charts';"}
-	>
-		<div class="ring-row">
-			<div class="ring-slot">
-				<RingChart data={channels} bind:hoveredIndex={ringHover} defaultLabel="Sessions" />
-			</div>
-			<Legend items={channels} bind:hoveredIndex={ringHover} showProgress showPercentage />
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Legend"
-		note="standalone: progress bars, percentages, hover-dim, keyboard focus"
-		importPath={"import { Legend } from '@heyramzi/ui/charts';"}
-	>
-		<div class="full">
-			<Legend title="Traffic by channel" items={channels} showProgress showPercentage />
-		</div>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="Sparkline"
-		note="a trendline the width of whatever holds it"
-		importPath={"import { Sparkline } from '@heyramzi/ui/charts';"}
-	>
-		<ShowcaseVariant label="showLast: end-cap dot and inline value">
-			<div class="full">
-				<Sparkline data={sparkSeries} xKey="i" yKey="v" color="var(--chart-1)" showLast />
-			</div>
-		</ShowcaseVariant>
-		<ShowcaseVariant label="bare: no chrome, for the foot of a card that links">
-			<div class="full">
-				<Sparkline data={sparkSeries} xKey="i" yKey="v" color="var(--chart-1)" height={48} bare />
-			</div>
-		</ShowcaseVariant>
-	</ShowcaseStage>
-
-	<ShowcaseStage title="Chart tokens" note="Theme charts globally with five CSS custom properties">
-		<!-- WHY the name sits beside the colour and not on it: five arbitrary palette entries cannot all carry legible text, and a fixed near-black label read -->
-		<!-- 2.9:1 on --chart-1. A chip plus a label on the ground is AA whatever the token is set to, which is the point of a token showcase. -->
-		<div class="swatches">
-			{#each [1, 2, 3, 4, 5] as n (n)}
-				<div class="swatch">
-					<span class="swatch-chip" style="background: var(--chart-{n})"></span>
-					<span class="swatch-name">--chart-{n}</span>
-				</div>
-			{/each}
-		</div>
-	</ShowcaseStage>
-</div>
-
-<header class="group-head">
-	<h2 class="group-title">Cards</h2>
-	<p class="group-note">
-		Composed KPI blocks: one figure on its own, or a Figure (label, value, trend) over a chart, on a
-		card.
-	</p>
-</header>
-<div class="grid">
-	<ShowcaseStage
-		title="NumberChart"
-		note="a figure on its own, with or without a scale under it"
-		importPath={"import { NumberChart } from '@heyramzi/ui/charts';"}
-	>
-		<ShowcaseVariant label="size=lg: count-up, direction-aware delta">
-			<div class="full">
-				<NumberChart
-					label="Total cash"
-					value={128400}
-					delta={6.1}
-					direction="up-good"
-					size="lg"
-					caption="across 4 accounts"
-					formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
-				/>
-			</div>
-		</ShowcaseVariant>
-		<ShowcaseVariant label="share: the scale a lone number cannot carry">
-			<div class="full">
-				<NumberChart
-					label="Expenses"
-					value={41250}
-					delta={-3.4}
-					direction="down-good"
-					share={0.38}
-					shareLabel="of revenue"
-					color="var(--chart-4)"
-					formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
-				/>
-			</div>
-		</ShowcaseVariant>
-		<ShowcaseVariant label="bare: no chrome, for a figure inside a band or a panel">
-			<div class="full">
-				<NumberChart
-					bare
-					label="Net income"
-					value={67150}
-					delta={0.2}
-					direction="up-good"
-					share={0.62}
-					shareLabel="of revenue"
-					color="var(--chart-2)"
-					formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
-				/>
-			</div>
-		</ShowcaseVariant>
-	</ShowcaseStage>
-
-	<ShowcaseStage
-		title="StatCard"
-		note="a Figure over a chart, on a card: three chart kinds"
-		importPath={"import { StatCard } from '@heyramzi/ui/charts';"}
-	>
-		<ShowcaseVariant label="variant=area: edge-to-edge chart, trend pill, count-up value">
-			<div class="full">
-				<StatCard
-					label="Total Revenue"
-					value={8200}
-					delta={12.4}
-					caption="Avg"
-					data={revenueTrend}
-					xKey="month"
-					yKey="revenue"
-					variant="area"
-					formatValue={(v) =>
-						v.toLocaleString("en-US", {
-							style: "currency",
-							currency: "USD",
-							maximumFractionDigits: 0,
-						})}
-				/>
-			</div>
-		</ShowcaseVariant>
-		<ShowcaseVariant label="variant=line: denser series">
-			<div class="full">
-				<StatCard
-					label="Active sessions"
-					value={1344}
-					delta={8.2}
-					caption="Avg"
-					data={sessions}
-					xKey="i"
-					yKey="v"
-					variant="line"
-					color="var(--chart-3)"
-				/>
-			</div>
-		</ShowcaseVariant>
-		<ShowcaseVariant label="variant=bar: negative trend, down state">
-			<div class="full">
-				<StatCard
-					label="Refunds"
-					value={3500}
-					delta={-2.8}
-					caption="vs last month"
-					data={monthly}
-					xKey="month"
-					yKey="costs"
-					variant="bar"
-					color="var(--chart-4)"
-					formatValue={(v) =>
-						v.toLocaleString("en-US", {
-							style: "currency",
-							currency: "USD",
-							maximumFractionDigits: 0,
-						})}
-				/>
-			</div>
-		</ShowcaseVariant>
-	</ShowcaseStage>
-
-	<!-- The other two forms drop half the card, so they read together and not as
-	     the tail of a row of three charts. -->
-	<ShowcaseStage
-		title="StatCard"
-		note="the two forms that drop half the card"
-		importPath={"import { StatCard } from '@heyramzi/ui/charts';"}
-	>
-		<ShowcaseVariant label="variant=gauge: figure left, radial gauge right">
-			<div class="full">
-				<StatCard
-					variant="gauge"
-					label="Deliverables"
-					caption="2 of 6 complete"
-					gaugeValue={33}
-					delta={5}
-					color="var(--chart-1)"
-				/>
-			</div>
-		</ShowcaseVariant>
-		<ShowcaseVariant label="figureOnly: the bare edge-to-edge chart, no labels">
-			<div class="full">
-				<StatCard
-					figureOnly
-					data={revenueTrend}
-					xKey="month"
-					yKey="revenue"
-					variant="area"
-					height={170}
-				/>
-			</div>
-		</ShowcaseVariant>
-	</ShowcaseStage>
-</div>
-
-<!-- ========================== -->
-<!-- STYLE                      -->
-<!-- ========================== -->
-<style>
-	.group-head {
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-	}
-	/* WHY: the second group ("Cards") needs breathing room from the grid above it. */
-	.group-head:not(:first-child) {
-		margin-top: 2.5rem;
-	}
-	.group-title {
-		font-size: 1.125rem;
-		font-weight: 600;
-		letter-spacing: -0.01em;
-		margin: 0 0 0.125rem;
-	}
-	.group-note {
-		margin: 0 0 1rem;
-		font-size: 0.8125rem;
-		color: var(--muted-foreground);
-	}
-	/* One demo per row, the rule ShowcaseSection states for `.sc-stack`. A
-	   quarter-width column is also what squeezed the gauge card's title into
-	   its trend pill. */
-	.grid {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		column-gap: 1rem;
-		row-gap: 0;
-	}
-
-	/*
-	 * Every card in a band starts and ends on the same line. The stage's header and its ground are two tracks of this grid, so a two-line title no longer
-	 */
-
-	/*
-	 * pushes its own card down past its neighbour's. Row gap is zero because the stage's own padding-block already separates the bands, and a subgrid
-	 */
-
-	/*
-	 * inherits the parent's gutters into the tracks it spans.
-	 */
-	.grid > :global(.sc-stage) {
-		display: grid;
-		grid-template-rows: subgrid;
-		grid-row: span 2;
-	}
-
-	.full {
-		width: 100%;
-	}
-	.gauge {
-		display: flex;
-		justify-content: center;
-		width: 100%;
-	}
-	.gauge :global(.hr-gauge) {
-		max-width: 240px;
-	}
-	.ring-row {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 1.25rem 1.5rem;
-	}
-	.ring-slot {
-		flex: 0 0 auto;
-		width: 180px;
-	}
-	.ring-row :global(.hr-legend) {
-		flex: 1 1 160px;
-	}
-	.swatches {
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-		width: 100%;
-	}
-	.swatch {
-		display: flex;
-		align-items: center;
-		gap: 0.625rem;
-		font-size: 0.75rem;
-		font-family: ui-monospace, SFMono-Regular, monospace;
-		color: var(--foreground);
-	}
-	.swatch-chip {
-		width: 2.5rem;
-		height: 1.25rem;
-		flex: none;
-		border-radius: 0.375rem;
-		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 65%, transparent);
-	}
-</style>

package/src/showcase/EffectsSection.svelte

@@ -1,152 +0,0 @@
-<!-- ========================== -->
-<!-- IMPORTS                    -->
-<!-- ========================== -->
-<script lang="ts">
-	import type { Component } from "svelte";
-	import ShowcaseStage from "./ShowcaseStage.svelte";
-	import ShowcaseVariant from "./ShowcaseVariant.svelte";
-	import Default from "./demos/effects/border-beam-default.svelte";
-	import Sunset from "./demos/effects/border-beam-sunset.svelte";
-	import Line from "./demos/effects/border-beam-line.svelte";
-	import Mono from "./demos/effects/border-beam-mono.svelte";
-	import Beam from "./demos/effects/animated-beam.svelte";
-	import Hub from "./demos/effects/integrations-hub.svelte";
-	import SpotlightDemo from "./demos/effects/spotlight.svelte";
-	import MarqueeDemo from "./demos/effects/marquee.svelte";
-	import RevealDemo from "./demos/effects/image-reveal.svelte";
-	import TextEffectDemo from "./demos/effects/text-effect.svelte";
-	import AnimatedGroupDemo from "./demos/effects/animated-group.svelte";
-	import InViewDemo from "./demos/effects/in-view.svelte";
-	import ProgressiveBlurDemo from "./demos/effects/progressive-blur.svelte";
-	import ImageComparisonDemo from "./demos/effects/image-comparison.svelte";
-	import MagneticDemo from "./demos/effects/magnetic.svelte";
-
-	// =========================
-	// TYPES
-	// =========================
-	// A family shows its presets stacked in one stage. One component, one number,
-	// one copy control, however many variants it ships.
-	type Demo = {
-		title: string;
-		note: string;
-		path: string;
-		Comp?: Component;
-		variants?: { label: string; Comp: Component }[];
-	};
-
-	// =========================
-	// STATE
-	// =========================
-	const demos: Demo[] = [
-		{
-			title: "BorderBeam",
-			note: "Animated gradient border, four presets",
-			path: "import { BorderBeam } from '@heyramzi/ui';",
-			variants: [
-				{ label: "default", Comp: Default },
-				{ label: "staticColors, duration=6, colorVariant=sunset", Comp: Sunset },
-				{ label: "size=line, colorVariant=ocean", Comp: Line },
-				{ label: "size=sm, colorVariant=mono", Comp: Mono },
-			],
-		},
-		{
-			title: "AnimatedBeam",
-			note: "Gradient comet along a path between two anchors",
-			path: "import { AnimatedBeam } from '@heyramzi/ui';",
-			variants: [
-				{ label: "two nodes", Comp: Beam },
-				{ label: "many beams fanning into one node", Comp: Hub },
-			],
-		},
-		{
-			title: "Spotlight",
-			note: "Soft sweeping beam over a dark surface",
-			Comp: SpotlightDemo,
-			path: "import { Spotlight } from '@heyramzi/ui';",
-		},
-		{
-			title: "Marquee",
-			note: "pauseOnHover, masked edges",
-			Comp: MarqueeDemo,
-			path: "import { Marquee } from '@heyramzi/ui';",
-		},
-		{
-			title: "ImageReveal",
-			note: "Pixel-mosaic loader dissolving into a generated image",
-			Comp: RevealDemo,
-			path: "import { ImageReveal } from '@heyramzi/ui';",
-		},
-		{
-			title: "TextEffect",
-			note: "per=char, preset=blur-slide, staggered",
-			Comp: TextEffectDemo,
-			path: "import { TextEffect } from '@heyramzi/ui';",
-		},
-		{
-			title: "AnimatedGroup",
-			note: "Staggered entrance for any children",
-			Comp: AnimatedGroupDemo,
-			path: "import { AnimatedGroup } from '@heyramzi/ui';",
-		},
-		{
-			title: "InView",
-			note: "Replays as the block scrolls back in",
-			Comp: InViewDemo,
-			path: "import { InView } from '@heyramzi/ui';",
-		},
-		{
-			title: "ProgressiveBlur",
-			note: "Masked backdrop-filter ramp, no runtime",
-			Comp: ProgressiveBlurDemo,
-			path: "import { ProgressiveBlur } from '@heyramzi/ui';",
-		},
-		{
-			title: "ImageComparison",
-			note: "Before / after wipe, drag or arrow keys",
-			Comp: ImageComparisonDemo,
-			path: "import { ImageComparison } from '@heyramzi/ui';",
-		},
-		{
-			title: "Magnetic",
-			note: "use:magnetic pulls the button toward the pointer",
-			Comp: MagneticDemo,
-			path: "import { magnetic } from '@heyramzi/ui';",
-		},
-	];
-</script>
-
-<!-- ========================== -->
-<!-- MARKUP                     -->
-<!-- ========================== -->
-<div class="grid">
-	{#each demos as d (d.title)}
-		<ShowcaseStage title={d.title} note={d.note} importPath={d.path}>
-			{#if d.variants}
-				{#each d.variants as v (v.label)}
-					<ShowcaseVariant label={v.label}>
-						<div class="card"><v.Comp /></div>
-					</ShowcaseVariant>
-				{/each}
-			{:else if d.Comp}
-				<div class="card"><d.Comp /></div>
-			{/if}
-		</ShowcaseStage>
-	{/each}
-</div>
-
-<!-- ========================== -->
-<!-- STYLE                      -->
-<!-- ========================== -->
-<style>
-	/* One demo per row, the rule ShowcaseSection states for `.sc-stack`. An
-	   effect is read by watching it run, and a quarter-width stage clips it. */
-	.grid {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: 1rem;
-	}
-	.card {
-		width: 100%;
-		min-height: 5rem;
-	}
-</style>

package/src/showcase/ShadcnSection.svelte

@@ -1,27 +0,0 @@
-<!-- ========================== -->
-<!-- IMPORTS                    -->
-<!-- ========================== -->
-<script lang="ts">
-	// Every shadcn primitive this package ships, demoed by upstream's own example
-	// and listed by the sync. Nothing here is typed by hand: see
-	// ../../docs/decisions.md and `pnpm sync:shadcn`.
-	import { TooltipProvider } from "../shadcn/tooltip/index.js";
-	import ShowcaseStage from "./ShowcaseStage.svelte";
-	import { SHADCN_DEMOS } from "./demos/shadcn/index.js";
-	import "./stacked-section.css";
-</script>
-
-<!-- ========================== -->
-<!-- MARKUP                     -->
-<!-- ========================== -->
-<!-- The provider an app mounts once at its root: upstream's demos assume one is
-     there, and `input-group` throws without it. -->
-<TooltipProvider>
-	<div class="sc-stacked">
-		{#each SHADCN_DEMOS as demo (demo.name)}
-			<ShowcaseStage title={demo.title} note={demo.note} importPath={demo.path} tag="shadcn" wide>
-				<demo.Comp />
-			</ShowcaseStage>
-		{/each}
-	</div>
-</TooltipProvider>