@heyramzi/ui 7.0.0 → 8.1.0

package/src/animations/texts-reveal.css

@@ -1,70 +0,0 @@
-/* Transitions.dev — Texts reveal */
-/* Source: https://github.com/Jakubantalik/transitions.dev */
-
-/*
-  Usage:
-      <div class="t-stagger">
-        <strong class="t-stagger-line t-stagger-line--1">…</strong>
-        <span class="t-stagger-line t-stagger-line--2">…</span>
-      </div>
-
-  State:
-    Add .is-shown to play the staggered entrance. Add .is-hiding
-    (and remove .is-shown) to fade out in place over 200ms,
-    independent of the entrance timing.
-
-  Add more lines with .t-stagger-line--N and
-  transition-delay: calc(var(--stagger-stagger) * (N - 1)).
-*/
-
-:root {
-  --stagger-dur: var(--duration-very-slow, 500ms);
-  --stagger-distance: var(--distance-medium, 12px);
-  --stagger-stagger: var(--duration-stagger, 40ms);
-  --stagger-blur: var(--blur-medium, 3px);
-  --stagger-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-/* Lines start translated down + blurred + invisible; .is-shown
-   on the parent flips them to their resting state. The second
-   line's transition-delay holds it back by --stagger-stagger so
-   the eye lands on the headline first. */
-.t-stagger-line {
-  display: block;
-  opacity: 0;
-  transform: translateY(var(--stagger-distance));
-  filter: blur(var(--stagger-blur));
-  transition:
-    opacity var(--stagger-dur) var(--stagger-ease),
-    transform var(--stagger-dur) var(--stagger-ease),
-    filter var(--stagger-dur) var(--stagger-ease);
-  will-change: transform, opacity, filter;
-}
-.t-stagger-line--2 {
-  transition-delay: var(--stagger-stagger);
-}
-
-.t-stagger.is-shown .t-stagger-line {
-  opacity: 1;
-  transform: translateY(0);
-  filter: blur(0);
-}
-/* Exit decouples from the stagger: same fade for every line,
-   no Y return, no blur — so the disappearance reads as a single
-   quiet fade instead of a reverse reveal. */
-.t-stagger.is-hiding .t-stagger-line {
-  opacity: 0;
-  transform: translateY(0);
-  filter: blur(0);
-  transition:
-    opacity 200ms ease,
-    transform 0s linear,
-    filter 0s linear;
-  transition-delay: 0s;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-stagger-line {
-    transition: none !important;
-  }
-}

package/src/animations/tooltip.css

@@ -1,72 +0,0 @@
-/* Transitions.dev — Tooltip open / close */
-/* Source: https://github.com/Jakubantalik/transitions.dev */
-
-/*
-  Usage:
-      <span class="t-tt-wrap">
-        <button class="t-tt-trigger" aria-describedby="tt-1">…</button>
-        <span class="t-tt" id="tt-1" role="tooltip">Tooltip text</span>
-      </span>
-
-  Pure CSS — no JS. The wrap (not the trigger) is the hover
-  target so the pointer can drift onto the tooltip without
-  flicker. transition-delay only applies in the hover/focus
-  rule, so leaving snaps it to 0 and the disappear plays
-  immediately.
-*/
-
-:root {
-  --tt-in-dur: var(--duration-quick, 150ms);
-  --tt-out-dur: 50ms;
-  --tt-scale: var(--scale-small, 0.98);
-  --tt-delay: 80ms;
-  --tt-in-ease: var(--ease-out, ease-out);
-  --tt-out-ease: var(--ease-out, ease-out);
-  --tt-bg: #ffffff;
-  --tt-fg: #2f2f2f;
-}
-
-.t-tt-wrap {
-  position: relative;
-  display: inline-block;
-}
-.t-tt {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
-  transform: translate(-50%, 0) scale(var(--tt-scale));
-  transform-origin: 50% 100%;
-  padding: 8px 12px;
-  border-radius: 8px;
-  background: var(--tt-bg);
-  color: var(--tt-fg);
-  white-space: nowrap;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.06),
-    0 2px 6px 0 rgba(0, 0, 0, 0.05),
-    0 4px 42px 0 rgba(0, 0, 0, 0.06);
-  opacity: 0;
-  pointer-events: none;
-  /* Default rule controls the LEAVE state. transition-delay
-	   stays unset so leaving plays without delay. */
-  transition:
-    opacity var(--tt-out-dur) var(--tt-out-ease),
-    transform var(--tt-out-dur) var(--tt-out-ease);
-}
-/* The delay belongs ONLY to the hover rule so leaving the
-   trigger snaps the delay back to 0 and the disappear plays
-   immediately. */
-.t-tt-wrap:hover .t-tt,
-.t-tt-trigger:focus-visible + .t-tt {
-  opacity: 1;
-  transform: translate(-50%, 0) scale(1);
-  transition-duration: var(--tt-in-dur);
-  transition-timing-function: var(--tt-in-ease);
-  transition-delay: var(--tt-delay);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-tt {
-    transition: none !important;
-  }
-}

package/src/animations/view-transition-reveal.ts

@@ -1,74 +0,0 @@
-export type ViewTransitionRevealOrigin = MouseEvent | { x: number; y: number } | HTMLElement;
-
-export type ViewTransitionRevealOptions = {
-  duration?: number;
-  easing?: string;
-};
-
-const STYLE_ID = "heyramzi-view-transition-reveal";
-
-export function viewTransitionReveal(
-  origin: ViewTransitionRevealOrigin,
-  apply: () => void,
-  options?: ViewTransitionRevealOptions,
-): void {
-  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-  // WHY: feature-detect both API presence and reduced-motion to keep callers
-  // from having to branch.
-  if (typeof document === "undefined" || !document.startViewTransition || prefersReduced) {
-    apply();
-    return;
-  }
-
-  const { x, y } = resolveOrigin(origin);
-  const duration = options?.duration ?? 400;
-  const easing = options?.easing ?? "ease-in-out";
-  const endRadius = Math.hypot(
-    Math.max(x, window.innerWidth - x),
-    Math.max(y, window.innerHeight - y),
-  );
-
-  ensureStyles();
-
-  const transition = document.startViewTransition(() => {
-    apply();
-  });
-
-  transition.ready.then(() => {
-    document.documentElement.animate(
-      {
-        clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`],
-      },
-      {
-        duration,
-        easing,
-        pseudoElement: "::view-transition-new(root)",
-      },
-    );
-  });
-}
-
-function resolveOrigin(origin: ViewTransitionRevealOrigin): { x: number; y: number } {
-  if (origin instanceof HTMLElement) {
-    const rect = origin.getBoundingClientRect();
-    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
-  }
-  if (typeof MouseEvent !== "undefined" && origin instanceof MouseEvent) {
-    const target = origin.currentTarget instanceof HTMLElement ? origin.currentTarget : null;
-    if (target) {
-      const rect = target.getBoundingClientRect();
-      return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
-    }
-    return { x: origin.clientX, y: origin.clientY };
-  }
-  return { x: origin.x, y: origin.y };
-}
-
-function ensureStyles(): void {
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = `::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}`;
-  document.head.appendChild(style);
-}

package/src/lib/utils.ts

@@ -1,45 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/** Merge conditional class names and de-duplicate conflicting Tailwind utilities. */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
-  ref?: U | null;
-};
-
-export type WithoutChildren<T> = T extends { children?: unknown } ? Omit<T, "children"> : T;
-
-export type WithoutChild<T> = T extends { child?: unknown } ? Omit<T, "child"> : T;
-
-export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
-
-export type Result<T, E = Error> = { ok: true; value: T } | { ok: false; error: E };
-
-export function Ok<T>(value: T): Result<T, never> {
-  return { ok: true, value };
-}
-
-export function Err<E>(error: E): Result<never, E> {
-  return { ok: false, error };
-}
-
-/** Run a function and return a result instead of throwing. */
-export function tryCatch<T>(fn: () => T): Result<T> {
-  try {
-    return { ok: true, value: fn() } as Result<T>;
-  } catch (error) {
-    return { ok: false, error: error as Error };
-  }
-}
-
-/** Await a function and return a result instead of rejecting. */
-export async function tryCatchAsync<T>(fn: () => Promise<T>): Promise<Result<T>> {
-  try {
-    return { ok: true, value: await fn() } as Result<T>;
-  } catch (error) {
-    return { ok: false, error: error as Error };
-  }
-}

package/src/showcase/AiSection.svelte

@@ -1,150 +0,0 @@
-<!-- ========================== -->
-<!-- IMPORTS                    -->
-<!-- ========================== -->
-<script lang="ts">
-	import ShowcaseStage from "./ShowcaseStage.svelte";
-	import Prompt from "./demos/ai/prompt-input.svelte";
-	import LoadingStateDemo from "./demos/ai/loading-state.svelte";
-	import ThinkingDotsDemo from "./demos/ai/thinking-dots.svelte";
-	import Reasoning from "./demos/ai/reasoning.svelte";
-	import Confirm from "./demos/ai/confirmation.svelte";
-	import VoiceWaveformDemo from "./demos/ai/voice-waveform.svelte";
-	import type { Component } from "svelte";
-
-	// =========================
-	// TYPES
-	// =========================
-	type Demo = { title: string; note: string; Comp: Component; path: string };
-
-	// =========================
-	// STATE
-	// =========================
-	// The order is the order a turn happens in: the surface it is said on, the waiting, the thinking, the decision, and last the voice.
-	const demos: Demo[] = [
-		{
-			title: "PromptInput",
-			note: "Suggestions, textarea, status-aware submit.",
-			Comp: Prompt,
-			path: "import { PromptInput, PromptInputBody, PromptInputTextarea, PromptInputToolbar, PromptInputSubmit, Suggestions, Suggestion } from '@heyramzi/ui/ai';",
-		},
-		{
-			title: "PixelLoader",
-			note: "Pixel-grid loader with shimmer and elapsed time.",
-			Comp: LoadingStateDemo,
-			path: "import { PixelLoader } from '@heyramzi/ui/ai';",
-		},
-		{
-			title: "ThinkingDots",
-			note: "The quiet wait, with a label.",
-			Comp: ThinkingDotsDemo,
-			path: "import { ThinkingDots } from '@heyramzi/ui/ai';",
-		},
-		{
-			title: "Reasoning",
-			note: "Auto-opens while streaming, shows think time.",
-			Comp: Reasoning,
-			path: "import { Reasoning, ReasoningTrigger, ReasoningContent } from '@heyramzi/ui/ai';",
-		},
-		{
-			title: "Confirmation",
-			note: "Tool-call approval with resolved states.",
-			Comp: Confirm,
-			path: "import { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from '@heyramzi/ui/ai';",
-		},
-		{
-			title: "VoiceWaveform",
-			note: "Tap to toggle the active state.",
-			Comp: VoiceWaveformDemo,
-			path: "import { VoiceWaveform } from '@heyramzi/ui/ai';",
-		},
-	];
-</script>
-
-<!-- ========================== -->
-<!-- MARKUP                     -->
-<!-- ========================== -->
-<div class="ai-stack">
-	{#each demos as d (d.title)}
-		<ShowcaseStage title={d.title} note={d.note} importPath={d.path} wide>
-			<div class="ai-demo"><d.Comp /></div>
-		</ShowcaseStage>
-	{/each}
-</div>
-
-<!-- ========================== -->
-<!-- STYLE                      -->
-<!-- ========================== -->
-<style>
-	/*
-	 * One item per row, which is how beautifului.dev lays its AI set out and what this section is judged against. The two-column grid it replaces made every
-	 */
-
-	/*
-	 * band as tall as its taller half, so a one-line chip row sat in 21rem of
-	 */
-
-	/*
-	 * nothing next to a conversation, and the eye had two places to be on every scroll step. A single column also lets each demo keep the width it was
-	 */
-
-	/*
-	 * designed for instead of a track that changes with the viewport.
-	 */
-	.ai-stack {
-		display: flex;
-		flex-direction: column;
-	}
-
-	/* The dashed rule is the separator, not a card edge: these are entries in one
-	   list, and a solid border would read as a stack of boxes. */
-	.ai-stack > :global(.sc-stage) {
-		padding-block: 2rem;
-		border-bottom: 1px dashed
-			color-mix(in oklab, var(--color-border, var(--border)) 80%, transparent);
-	}
-
-	.ai-stack > :global(.sc-stage:last-child) {
-		border-bottom: 0;
-	}
-
-	/*
-	 * Title and note on one baseline, the way a numbered list entry reads. The stage stacks them by default because a 310px grid column cannot hold both;
-	 */
-
-	/*
-	 * at full width it can, and the stacked form leaves the note orphaned under a hanging indent.
-	 */
-	@media (min-width: 40rem) {
-		.ai-stack > :global(.sc-stage) :global(.sc-stage-name) {
-			flex-direction: row;
-			align-items: baseline;
-			gap: 0.625rem;
-		}
-
-		.ai-stack > :global(.sc-stage) :global(.sc-stage-name p) {
-			padding-inline-start: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-	}
-
-	/*
-	 * 17rem is beautifului.dev's 272px demo surface. Every ground on the page is the same height, so the list scrolls at one rhythm however tall the demo
-	 */
-
-	/*
-	 * inside it happens to be.
-	 */
-	.ai-stack > :global(.sc-stage) > :global(.sc-ground) {
-		min-height: 17rem;
-	}
-
-	/* The demo is centred inside the full-width ground rather than stretched
-	   across it: a prompt bar at 1400px is not a prompt bar, it is a banner. */
-	.ai-demo {
-		width: 100%;
-		max-width: 30rem;
-		margin-inline: auto;
-	}
-</style>