@heyramzi/ui 2.24.0 → 3.1.0

package/src/ai/index.ts

@@ -1,101 +0,0 @@
-// =========================
-// TYPING DOTS
-// =========================
-
-export { TypingDots, type TypingDotsProps } from "./typing-dots/index.js";
-
-// =========================
-// RESPONSE (markdown)
-// =========================
-
-export { Response, type ResponseProps } from "./response/index.js";
-
-// =========================
-// SUGGESTION
-// =========================
-
-export {
-  Suggestion,
-  Suggestions,
-  type SuggestionProps,
-  type SuggestionsProps,
-} from "./suggestion/index.js";
-
-// =========================
-// PROMPT INPUT
-// =========================
-
-export {
-  PromptInput,
-  PromptInputBody,
-  PromptInputToolbar,
-  PromptInputTextarea,
-  PromptInputSubmit,
-  type PromptInputProps,
-  type PromptInputBodyProps,
-  type PromptInputToolbarProps,
-  type PromptInputTextareaProps,
-  type PromptInputSubmitProps,
-  type PromptInputStatus,
-} from "./prompt-input/index.js";
-
-// =========================
-// CONFIRMATION
-// =========================
-
-export {
-  Confirmation,
-  ConfirmationTitle,
-  ConfirmationState,
-  ConfirmationActions,
-  ConfirmationAction,
-  type ConfirmationProps,
-  type ConfirmationTitleProps,
-  type ConfirmationStateProps,
-  type ConfirmationActionsProps,
-  type ConfirmationActionProps,
-  type ConfirmationContextValue,
-  type ConfirmationKind,
-} from "./confirmation/index.js";
-
-// =========================
-// VOICE WAVEFORM
-// =========================
-
-export { VoiceWaveform, type VoiceWaveformProps } from "./voice-waveform/index.js";
-
-// =========================
-// REASONING
-// =========================
-
-export {
-  Reasoning,
-  ReasoningTrigger,
-  ReasoningContent,
-  type ReasoningProps,
-  type ReasoningTriggerProps,
-  type ReasoningContentProps,
-  type ReasoningContextValue,
-} from "./reasoning/index.js";
-
-// =========================
-// LOADING STATE
-// =========================
-
-export { PixelLoader, type PixelLoaderProps } from "./loading-state/index.js";
-
-// =========================
-// AI BUTTON
-// =========================
-
-export { AiButton, type AiButtonProps, type AiStatus } from "./ai-button/index.js";
-
-// =========================
-// GENERATION PROGRESS
-// =========================
-
-export {
-  GenerationProgress,
-  type GenerationProgressProps,
-  type GenerationSteps,
-} from "./generation-progress/index.js";

package/src/design/index.css

@@ -1,215 +0,0 @@
-/* The craft layer, imported once after Tailwind: elevation, radius and motion
- * stay the same in every app, and an app tints it with `--elev-tint` alone.
- */
-
-@import "./polish.css";
-
-/* ── Radius, by role not by size ─────────────────────────────
-   Nested boxes need radii that step, so the Tailwind names map to roles and
-   `rounded-lg` is already the control radius. */
-@theme {
-  --radius-xs: 4px; /* tag, dot, inline code */
-  --radius-sm: 6px; /* chip, badge, small pill */
-  --radius-md: 7px; /* between a chip and a control */
-  --radius-lg: 8px; /* control: button, input, select, menu item */
-  --radius-xl: 10px; /* card, panel, stage */
-  --radius-2xl: 14px; /* overlay: dialog, sheet, command palette */
-  --radius-3xl: 20px; /* hero surface, full-bleed panel */
-}
-
-/* ── Elevation ───────────────────────────────────────────────
-   The steps are shadow-only and the hairline is its own token, or a box that
-   already draws a border gets two edges a pixel apart. */
-:root {
-  --elev-tint: oklch(0 0 0);
-
-  /* Resting on the page. A button, a chip, a row. */
-  --elev-btn:
-    0 1px 1px -0.5px color-mix(in oklab, var(--elev-tint) 7%, transparent),
-    0 2px 5px -2px color-mix(in oklab, var(--elev-tint) 6%, transparent);
-
-  /* Sitting on the page. A card, a stage, a panel. */
-  --elev-card:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 7%, transparent),
-    0 4px 9px -3px color-mix(in oklab, var(--elev-tint) 6%, transparent),
-    0 14px 28px -10px color-mix(in oklab, var(--elev-tint) 7%, transparent);
-
-  /* Lifted off the page. A hovered card, a popover, a menu. */
-  --elev-raised:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 6px 13px -4px color-mix(in oklab, var(--elev-tint) 9%, transparent),
-    0 20px 40px -12px color-mix(in oklab, var(--elev-tint) 12%, transparent);
-
-  /* Floating over a dimmed page. A dialog, a sheet, a command palette. */
-  --elev-overlay:
-    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
-    0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
-
-  /* A hairline separates a surface from what's behind it; a rim lights its top
-     edge so a filled control reads as a key, not a coloured box. */
-  --elev-hairline: 0 0 0 1px var(--color-border, var(--border));
-  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 16%, transparent);
-
-  /* A field is the one box that goes in rather than up. */
-  --elev-field: inset 0 1px 2px color-mix(in oklab, var(--elev-tint) 7%, transparent);
-}
-
-/* A dark surface can't cast a shadow darker than its page, so on dark a
-   low-alpha white hairline does the separating. */
-.dark {
-  --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
-  --elev-card:
-    0 1px 2px color-mix(in oklab, black 24%, transparent),
-    0 4px 12px -4px color-mix(in oklab, black 30%, transparent);
-  --elev-raised:
-    0 2px 6px color-mix(in oklab, black 30%, transparent),
-    0 10px 24px -6px color-mix(in oklab, black 38%, transparent);
-  --elev-overlay:
-    0 4px 10px color-mix(in oklab, black 34%, transparent),
-    0 24px 56px -12px color-mix(in oklab, black 50%, transparent);
-
-  --elev-hairline: 0 0 0 1px color-mix(in oklab, white 10%, transparent);
-  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
-  --elev-field: inset 0 1px 2px color-mix(in oklab, black 40%, transparent);
-}
-
-/* ── Focus ───────────────────────────────────────────────────
-   One ring in one variable, a solid accent edge plus a soft halo, so every
-   control focuses the same way. */
-:root {
-  --ring-color: var(--color-ring, var(--ring));
-  --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
-  /* At a higher alpha the halo reads as a second border, not a glow, which is
-     why it's 16% over 4px and not 30% over 2px. */
-  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
-}
-
-/* ── Motion ──────────────────────────────────────────────────
-   The transitions-dev scale, verbatim so pasted snippets share its names; every
-   close is shorter than its open, and no close bounces. */
-:root {
-  --duration-stagger: 40ms;
-  --duration-micro: 80ms;
-  --duration-quick: 150ms; /* every close, text swap, tooltip in */
-  --duration-fast: 250ms; /* every open, tabs, icon swap, page slide */
-  --duration-medium: 280ms; /* panel close, toast close */
-  --duration-slow: 300ms; /* panel open, skeleton reveal, emphasis: badge, text reveal, success check. The UI ceiling. */
-  --duration-overlay: 500ms; /* modal, drawer, marketing explainer: the only place past 300ms */
-  --duration-loop: 500ms; /* one cycle of a spinner or flowing dash, not a transition */
-
-  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); /* all surface motion */
-  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* swaps, cross-fades, on-screen movement */
-  --ease-out: ease-out; /* tooltips */
-  --ease-linear: linear; /* shimmer, pulse, spinner */
-
-  --distance-micro: 4px;
-  --distance-small: 6px;
-  --distance-base: 8px;
-  --distance-medium: 12px;
-  --distance-large: 30px;
-
-  --scale-large: 0.96; /* modal */
-  --scale-medium: 0.97; /* dropdown, popover open */
-  --scale-small: 0.98; /* tooltip */
-  --scale-tiny: 0.99; /* dropdown close */
-
-  --blur-small: 2px;
-  --blur-medium: 3px;
-  --blur-large: 8px;
-}
-
-/* Tailwind utility aliases, so `shadow-card`, `duration-fast` and
-   `ease-smooth-out` exist as classes and a component can stay in utilities
-   instead of dropping into a style block for one shadow. */
-@theme inline {
-  --shadow-hairline: var(--elev-hairline);
-  --shadow-btn: var(--elev-btn);
-  --shadow-card: var(--elev-card);
-  --shadow-raised: var(--elev-raised);
-  --shadow-overlay: var(--elev-overlay);
-  --shadow-field: var(--elev-field);
-  --shadow-rim: var(--elev-rim);
-  /* A filled control: the lit top edge and the resting lift, in one class,
-     because the two never appear apart and utilities cannot be stacked. */
-  --shadow-key: var(--elev-rim), var(--elev-btn);
-  /* The composed pair, for a surface that draws no border of its own. */
-  --shadow-edge-card: var(--elev-hairline), var(--elev-card);
-  --shadow-edge-raised: var(--elev-hairline), var(--elev-raised);
-  --shadow-edge-overlay: var(--elev-hairline), var(--elev-overlay);
-
-  --ease-smooth-out: var(--ease-smooth-out);
-
-  /* Tailwind's `duration-*` reads `--transition-duration-*`, not `--duration-*`,
-     so without these `duration-fast` silently compiles to nothing and nothing
-     animates (found 31 Aug 2026). */
-  --transition-duration-micro: var(--duration-micro);
-  --transition-duration-quick: var(--duration-quick);
-  --transition-duration-fast: var(--duration-fast);
-  --transition-duration-medium: var(--duration-medium);
-  --transition-duration-slow: var(--duration-slow);
-  --transition-duration-overlay: var(--duration-overlay);
-  --transition-duration-loop: var(--duration-loop);
-}
-
-/* Each bits-ui variant matches v2's `data-open` and v1's `data-state`, and ships
- * here because an app that defined only the palette got a switch that never moved. */
-@custom-variant data-open {
-  &:where([data-state="open"]),
-  &:where([data-open]:not([data-open="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-closed {
-  &:where([data-state="closed"]),
-  &:where([data-closed]:not([data-closed="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-checked {
-  &:where([data-state="checked"]),
-  &:where([data-checked]:not([data-checked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-unchecked {
-  &:where([data-state="unchecked"]),
-  &:where([data-unchecked]:not([data-unchecked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-selected {
-  &:where([data-selected]) {
-    @slot;
-  }
-}
-
-@custom-variant data-disabled {
-  &:where([data-disabled="true"]),
-  &:where([data-disabled]:not([data-disabled="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-active {
-  &:where([data-state="active"]),
-  &:where([data-active]:not([data-active="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-horizontal {
-  &:where([data-orientation="horizontal"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-vertical {
-  &:where([data-orientation="vertical"]) {
-    @slot;
-  }
-}

package/src/design/polish.css

@@ -1,150 +0,0 @@
-/* Keep every rule here inside a layer: unlayered CSS beats all layered rules, so a bare
- * `:where()` would silently outrank `focus-visible:ring-3` on every control. */
-
-@layer base {
-  /* One ring for the whole kit. `:where` keeps it at specificity zero on top of
-     the layer, so a control that needs a different ring writes one and wins. */
-  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
-    outline: none;
-    box-shadow: var(--ring-focus);
-  }
-
-  /* The accent at a low alpha, not the browser blue, because a selected word is
-     the one moment the palette shows up inside running text. */
-  ::selection {
-    background: color-mix(in oklab, var(--ring-color) 24%, transparent);
-  }
-
-  /* The default macOS scrollbar paints a black bar on a dark panel, so the track stays
-     transparent and the border insets the thumb. */
-  :where(html) {
-    scrollbar-color: var(--color-border, var(--border)) transparent;
-  }
-
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border: 3px solid transparent;
-    background-clip: padding-box;
-    border-radius: 999px;
-    background-color: var(--color-border, var(--border));
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: var(--color-muted-foreground, var(--muted-foreground));
-    }
-  }
-}
-
-@layer components {
-  /* Classes, not tokens, so the reduced motion guard lives here once instead of in
-     every component. */
-
-  /* A key that travels down a pixel when pressed, because a colour change alone
-     reads as hover, not as a press. */
-  .t-press {
-    transition:
-      background-color var(--duration-quick) var(--ease-smooth-out),
-      border-color var(--duration-quick) var(--ease-smooth-out),
-      color var(--duration-quick) var(--ease-smooth-out),
-      box-shadow var(--duration-quick) var(--ease-smooth-out),
-      transform var(--duration-micro) var(--ease-smooth-out);
-  }
-
-  .t-press:active:not(:disabled, [aria-disabled="true"]) {
-    transform: translateY(1px);
-  }
-
-  /* The card rises a pixel and gains an elevation step, so hover reads as the card
-     coming forward, not its border changing colour. */
-  .t-lift {
-    transition:
-      box-shadow var(--duration-fast) var(--ease-smooth-out),
-      transform var(--duration-fast) var(--ease-smooth-out);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .t-lift:hover {
-      transform: translateY(-1px);
-      box-shadow: var(--elev-raised);
-    }
-  }
-
-  /* A surface arriving. The open carries the distance, the scale and the blur;
-     the close drops all three and takes less time, per the open/close
-     asymmetry rule in transitions-dev. */
-  .t-enter {
-    animation: t-enter var(--duration-fast) var(--ease-smooth-out) both;
-  }
-
-  .t-exit {
-    animation: t-exit var(--duration-quick) var(--ease-smooth-out) both;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .t-press,
-    .t-lift {
-      transition: none;
-    }
-
-    .t-press:active {
-      transform: none;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      .t-lift:hover {
-        transform: none;
-      }
-    }
-
-    .t-enter,
-    .t-exit {
-      animation-duration: 1ms;
-    }
-  }
-}
-
-@keyframes t-enter {
-  from {
-    opacity: 0;
-    transform: translateY(var(--distance-micro)) scale(var(--scale-medium));
-    filter: blur(var(--blur-small));
-  }
-  to {
-    opacity: 1;
-    transform: none;
-    filter: none;
-  }
-}
-
-/* A mark confirming a state that has already changed: it arrives after the box
-   it sits in, so it overshoots slightly instead of fading. */
-@keyframes t-check {
-  from {
-    opacity: 0;
-    transform: scale(0.4);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes t-exit {
-  from {
-    opacity: 1;
-    transform: none;
-  }
-  to {
-    opacity: 0;
-    transform: scale(var(--scale-tiny));
-  }
-}

package/src/index.ts

@@ -1,53 +0,0 @@
-export { default as BorderBeam } from "./effects/border-beam/BorderBeam.svelte";
-export type { BorderBeamProps } from "./effects/border-beam/types.js";
-export type {
-  BorderBeamColorVariant,
-  BorderBeamSize,
-  BorderBeamTheme,
-  SizeConfig,
-  ThemeColors,
-} from "./effects/border-beam/presets.js";
-export { sizePresets, sizeThemePresets, themeColors } from "./effects/border-beam/presets.js";
-
-export { default as ThemeToggle } from "./effects/theme-toggle/ThemeToggle.svelte";
-
-export { default as AnimatedBeam } from "./effects/animated-beam/AnimatedBeam.svelte";
-export type { AnimatedBeamProps, AnchorPosition } from "./effects/animated-beam/types.js";
-
-export { default as Spotlight } from "./effects/spotlight/Spotlight.svelte";
-
-export { default as MagicCard } from "./effects/magic-card/MagicCard.svelte";
-
-export { default as Marquee } from "./effects/marquee/Marquee.svelte";
-
-export { default as ImageReveal } from "./effects/image-reveal/ImageReveal.svelte";
-export type { ImageRevealProps, ImageRevealHandle } from "./effects/image-reveal/types.js";
-
-export { default as ShaderGradient } from "./effects/shader-gradient/ShaderGradient.svelte";
-export type {
-  ShaderGradientProps,
-  ShaderGradientUniforms,
-} from "./effects/shader-gradient/types.js";
-
-export { default as InView } from "./effects/reveal/InView.svelte";
-export { default as AnimatedGroup } from "./effects/reveal/AnimatedGroup.svelte";
-export { default as TextEffect } from "./effects/reveal/TextEffect.svelte";
-export { observeInView } from "./effects/reveal/observe.js";
-export type {
-  RevealPreset,
-  RevealPer,
-  RevealTiming,
-  RevealViewOptions,
-} from "./effects/reveal/types.js";
-
-export { default as ProgressiveBlur } from "./effects/progressive-blur/ProgressiveBlur.svelte";
-
-export { default as InteractiveHoverButton } from "./effects/interactive-hover-button/InteractiveHoverButton.svelte";
-
-export { default as ImageComparison } from "./effects/image-comparison/ImageComparison.svelte";
-
-export { magnetic } from "./effects/magnetic/magnetic.js";
-export type { MagneticOptions } from "./effects/magnetic/magnetic.js";
-
-export { revealTheme } from "./lib/theme-transition.js";
-export type { RevealOrigin, RevealThemeOptions } from "./lib/theme-transition.js";

package/src/onboarding/demo.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-	import { Button } from "../shadcn/button/index.js";
-	import { Badge } from "../shadcn/badge/index.js";
-	import { Plus } from "phosphor-svelte";
-	import OnboardingProvider from "./onboarding-provider.svelte";
-	import { defineTours } from "./define-tours.js";
-	import { memoryStore } from "./stores.js";
-	import type { Strings } from "./types.js";
-
-	const tours = defineTours([
-		{
-			id: "demo:intro",
-			route: "/demo/intro",
-			kind: "intro",
-			title: "The week in one place",
-			body: "Open work sits on the left. Anything late floats to the top.",
-		},
-		{
-			id: "demo:board",
-			route: "/demo/board",
-			kind: "steps",
-			steps: [
-				{
-					target: '[data-tour="demo-new"]',
-					title: "Start here",
-					body: "A new project takes a name and a client. That's all.",
-					placement: "bottom-end",
-				},
-				{
-					target: '[data-tour="demo-filter"]',
-					title: "Narrow it down",
-					body: "Late shows what slipped. Mine shows what's yours.",
-					placement: "bottom-start",
-				},
-				{
-					target: '[data-tour="demo-list"]',
-					title: "Open a row",
-					body: "Click a project to see its tasks, files and notes.",
-					placement: "top",
-				},
-			],
-		},
-	]);
-
-	const strings: Strings = {
-		next: "Next",
-		back: "Back",
-		done: "Got it",
-		skip: "Skip the tour",
-		progress: (n, total) => `Step ${n} of ${total}`,
-	};
-
-	const rows = [
-		{ name: "Brand refresh", client: "Northwind", tone: "success" as const, label: "On track" },
-		{ name: "Pricing page", client: "Acme", tone: "warning" as const, label: "Late" },
-		{ name: "Launch email", client: "Globex", tone: "neutral" as const, label: "Draft" },
-	];
-
-	let routeId = $state<string | null>(null);
-	let run = $state(0);
-	let store = $state(memoryStore());
-
-	// A fresh store each time, so the button always has an unseen tour to show.
-	function start(route: string) {
-		store = memoryStore();
-		routeId = route;
-		run += 1;
-	}
-</script>
-
-<div class="flex flex-col gap-4">
-	<div class="flex flex-wrap gap-2">
-		<Button variant="outline" size="sm" onclick={() => start("/demo/board")}
-			>Show the page tour</Button
-		>
-		<Button variant="outline" size="sm" onclick={() => start("/demo/intro")}
-			>Show the intro card</Button
-		>
-	</div>
-
-	<div class="bg-card ring-foreground/10 flex flex-col gap-4 rounded-xl p-4 ring-1">
-		<div class="flex items-center justify-between gap-3">
-			<h2 class="text-sm font-semibold">Projects</h2>
-			<Button size="sm" data-tour="demo-new"><Plus weight="bold" />New project</Button>
-		</div>
-		<div class="flex gap-1.5" data-tour="demo-filter">
-			<Badge variant="outline">All</Badge>
-			<Badge variant="outline">Late</Badge>
-			<Badge variant="outline">Mine</Badge>
-		</div>
-		<ul class="divide-border border-border divide-y rounded-lg border" data-tour="demo-list">
-			{#each rows as row (row.name)}
-				<li class="flex items-center justify-between gap-3 px-3 py-2.5 text-sm">
-					<span class="min-w-0 truncate font-medium">{row.name}</span>
-					<span class="text-muted-foreground hidden sm:block">{row.client}</span>
-					<Badge variant="outline">{row.label}</Badge>
-				</li>
-			{/each}
-		</ul>
-	</div>
-</div>
-
-{#key run}
-	<OnboardingProvider {tours} {store} {strings} {routeId} replayKey={false} />
-{/key}