@heyramzi/ui 0.0.0-stage → 1.53.1

package/src/icons/trades.ts

@@ -0,0 +1,89 @@
+/**
+ * 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 legacy ` @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/index.ts

@@ -0,0 +1,53 @@
+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/lib/arrive.ts

@@ -0,0 +1,26 @@
+import type { Action } from "svelte/action";
+
+/**
+ * Replays `.t-enter` whenever the value handed in changes, so a panel that swaps
+ * its record reads as a new one arriving. `<div use:arrive={selectedId}>`
+ */
+
+// Prefer it to `{#key}`, which rebuilds the subtree and loses scroll, focus and
+// open disclosures. `use:` works on elements only, so a component still needs `{#key}`.
+export const arrive: Action<HTMLElement, unknown> = (node, value) => {
+  let previous = value;
+  // The first paint is the mount, which already animates on its own class.
+  node.classList.add("t-enter");
+
+  return {
+    update(next: unknown) {
+      if (next === previous) return;
+      previous = next;
+      // Remove, force a reflow, re-add. A CSS animation runs once per element,
+      // and only a reflow between the two writes makes the browser replay it.
+      node.classList.remove("t-enter");
+      void node.offsetWidth;
+      node.classList.add("t-enter");
+    },
+  };
+};

package/src/lib/icon-types.ts

@@ -0,0 +1,17 @@
+import type { Component } from "svelte";
+import type { SVGAttributes } from "svelte/elements";
+
+export type IconWeight = "bold" | "duotone" | "fill" | "light" | "thin" | "regular";
+
+type IconBaseProps = {
+  color?: string;
+  size?: number | string;
+  weight?: IconWeight;
+  mirrored?: boolean;
+};
+
+// WHY structural: it matches phosphor-svelte v2 `IconProps` and v3
+// `IconComponentProps` without importing either. This package peers v2, the apps run v3.
+export type PhosphorIcon = Component<
+  Omit<SVGAttributes<SVGSVGElement>, keyof IconBaseProps> & IconBaseProps
+>;

package/src/lib/layout.ts

@@ -0,0 +1,8 @@
+/** The app's one horizontal gutter. */
+
+// WHY a token: the tab strip said `px-4 md:px-6` and page bodies `p-4`, so from
+// `md` up the nav sat 8px right of the content. Same fact typed twice.
+
+// The content edge won: sixty page bodies against one strip. Anything lining up
+// with the page body names this instead of retyping a padding.
+export const pageGutterClass = "px-4";

package/src/lib/panel.ts

@@ -0,0 +1,21 @@
+/** The one panel shell: a titled box holding a table, a chart or a stack. */
+
+// WHY tokens, not markup: `DetailPanel` and `DataPanel` draw the same box with
+// different props, and their edges drifted because the classes were typed twice.
+
+// Dashboards used `Card`, so /ads had a ring and a shadow where /social had a
+// hairline. Flat, one hairline, `rounded-xl`.
+export const panelShellClass = "overflow-hidden rounded-xl border border-border bg-card";
+
+/**
+ * The panel's header bar: label left, count or controls right. `min-h-11` so a
+ * label-only header matches one with a button.
+ */
+export const panelHeaderClass =
+  "flex min-h-11 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-border px-4 py-2";
+
+/**
+ * The inset well for a control block inside a panel. A visible step at the
+ * same depth, for filter rows and grouped controls.
+ */
+export const insetWellClass = "rounded-lg border border-border bg-muted/40 p-2";

package/src/lib/sliding-pill.ts

@@ -0,0 +1,68 @@
+import type { Attachment } from "svelte/attachments";
+
+/** The travelling highlight behind the active tab. Attach it to a span inside the list. */
+
+// WHY attach to the pill, not the list: the pill finds its list via
+// `parentElement`, so any strip that renders one span gets the motion.
+
+// WHY measure: the active item's width is its label. The selector covers the
+// three ways a strip marks it: a tab, a nav link, a toggle.
+
+// Per transitions.dev `tabs-sliding`: first paint and resizes write the
+// position with the transition off, so the pill snaps in instead of flying.
+const ACTIVE = '[data-state="active"],[aria-current="page"],[aria-pressed="true"]';
+
+export const slidingPill: Attachment<HTMLElement> = (pill) => {
+  const list = pill.parentElement;
+  if (!list) return;
+
+  let settled = false;
+
+  const move = (animate: boolean) => {
+    const active = list.querySelector<HTMLElement>(ACTIVE);
+    if (!active) {
+      pill.style.opacity = "0";
+      return;
+    }
+    pill.style.opacity = "1";
+    if (animate) {
+      pill.style.transform = `translateX(${active.offsetLeft}px)`;
+      pill.style.width = `${active.offsetWidth}px`;
+      return;
+    }
+    // Suspend, write, reflow, restore. Without the reflow the browser
+    // coalesces the two writes and the snap animates anyway.
+    pill.style.transition = "none";
+    pill.style.transform = `translateX(${active.offsetLeft}px)`;
+    pill.style.width = `${active.offsetWidth}px`;
+    void pill.offsetWidth;
+    pill.style.transition = "";
+  };
+
+  // Position first, THEN hand the highlight over. Swapped, one frame draws both
+  // the trigger's own background and a zero-width pill: a flicker on hydration.
+  move(false);
+  list.dataset.pill = "on";
+  settled = true;
+
+  // The selection lives in an attribute bits-ui owns, and a badge arriving
+  // changes a trigger's width without any attribute changing.
+  const attributes = new MutationObserver(() => move(settled));
+  attributes.observe(list, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-state", "aria-current", "aria-pressed"],
+  });
+
+  // A list that reflows (a rail collapsing, a font landing) re-measures
+  // without motion: nothing was chosen, so nothing should travel.
+  const resize = new ResizeObserver(() => move(false));
+  resize.observe(list);
+
+  return () => {
+    attributes.disconnect();
+    resize.disconnect();
+    delete list.dataset.pill;
+  };
+};

package/src/lib/theme-transition.ts

@@ -0,0 +1,79 @@
+export interface RevealThemeOptions {
+  /** Apply the change without the wipe, for a swap that paints the same theme. */
+  skip?: boolean;
+  /** Wipe length in ms. */
+  duration?: number;
+  /** Wipe easing, any CSS easing value. */
+  easing?: string;
+}
+
+/** Where the wipe grows from: a click, an element, or a point in the viewport. */
+export type RevealOrigin = MouseEvent | Element | { x: number; y: number };
+
+const DEFAULT_DURATION = 400;
+const STYLE_ID = "heyramzi-reveal-theme";
+
+/**
+ * Run `apply` inside a circular wipe that grows from the centre of the clicked
+ * element, the element, or a point. Falls back to a plain `apply()` when the
+ * browser has no view transitions, the user prefers reduced motion, or `skip`
+ * is set. It adds the `::view-transition-*(root)` reset itself.
+ */
+export function revealTheme(
+  origin: RevealOrigin,
+  apply: () => void,
+  options: RevealThemeOptions = {},
+): void {
+  const { skip = false, duration = DEFAULT_DURATION, easing = "ease-in-out" } = options;
+  const point = resolveOrigin(origin);
+
+  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  if (skip || prefersReduced || !document.startViewTransition || !point) {
+    apply();
+    return;
+  }
+
+  const { x, y } = point;
+  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 centreOf(element: Element): { x: number; y: number } {
+  const rect = element.getBoundingClientRect();
+  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+}
+
+// A click on a child still wipes from the control that owns the handler.
+function resolveOrigin(origin: RevealOrigin): { x: number; y: number } | null {
+  if (origin instanceof Element) return centreOf(origin);
+  if (origin instanceof MouseEvent) {
+    return origin.currentTarget instanceof Element
+      ? centreOf(origin.currentTarget)
+      : { x: origin.clientX, y: origin.clientY };
+  }
+  return origin;
+}
+
+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/tone.ts

@@ -0,0 +1,48 @@
+export type Tone = "neutral" | "accent" | "info" | "success" | "warning" | "destructive";
+
+/**
+ * The severity scale, as Tailwind classes for a chip and as CSS colors for the
+ * dot. Tokens are plain CSS variables, so a host app can retheme them. The
+ * accent tone reads `--tone-accent` and falls back to `--color-primary`, for a
+ * host whose primary is a neutral and whose accent is a brand color.
+ */
+
+export const TONE_CLASS: Record<Tone, string> = {
+  neutral: "border-border bg-muted/40 text-muted-foreground",
+  accent:
+    "border-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_30%,transparent)] bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_10%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
+  success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
+  warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
+  destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+};
+
+/** The same scale as text, for a verdict inside a line of muted facts. */
+export const TONE_TEXT: Record<Tone, string> = {
+  neutral: "text-muted-foreground",
+  accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "text-info-800 dark:text-info-400",
+  success: "text-success-800 dark:text-success-400",
+  warning: "text-warning-800 dark:text-warning-400",
+  destructive: "text-destructive",
+};
+
+/** The same scale as icon color. */
+export const TONE_ICON: Record<Tone, string> = {
+  neutral: "text-muted-foreground",
+  accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  destructive: "text-destructive",
+};
+
+/** The scale as CSS colors, for the SVG dot. */
+export const TONE_COLOR: Record<Tone, string> = {
+  neutral: "var(--color-muted-foreground)",
+  accent: "var(--tone-accent,var(--color-primary))",
+  info: "var(--color-info)",
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  destructive: "var(--color-destructive)",
+};

package/src/shadcn/accordion/accordion-content.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+	{...restProps}
+>
+	<div class={cn("pt-0 pb-4 [&_p:not(:last-child)]:mb-4", className)}>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

package/src/shadcn/accordion/accordion-item.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("not-last:border-b", className)}
+	{...restProps}
+/>

package/src/shadcn/accordion/accordion-trigger.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { CaretDown } from "phosphor-svelte";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		indicator,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+		/** Replaces the caret, e.g. a plus that turns into a minus. Style it off
+		 * `group-aria-expanded/accordion-trigger:`. */
+		indicator?: Snippet;
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none disabled:pointer-events-none disabled:opacity-50",
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if indicator}
+			{@render indicator()}
+		{:else}
+			<!-- One caret that turns over, not two that swap. A transform and not a
+			     `d:` path morph, which is Chromium-only. -->
+			<CaretDown
+				data-slot="accordion-trigger-icon"
+				class="cn-accordion-trigger-icon pointer-events-none shrink-0 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-aria-expanded/accordion-trigger:rotate-180 motion-reduce:transition-none"
+			/>
+		{/if}
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/src/shadcn/accordion/accordion.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	class={cn("cn-accordion flex w-full flex-col", className)}
+	{...restProps}
+/>

package/src/shadcn/accordion/index.ts

@@ -0,0 +1,16 @@
+import Root from "./accordion.svelte";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+export {
+  Content,
+  Content as AccordionContent,
+  Item,
+  Item as AccordionItem,
+  Root,
+  //
+  Root as Accordion,
+  Trigger,
+  Trigger as AccordionTrigger,
+};

package/src/shadcn/alert/alert-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/alert/alert-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/alert/alert.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		// A caller whose message isn't urgent passes `status`, so a screen reader doesn't interrupt.
+		role = "alert",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	{role}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/alert/index.ts

@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+  Root,
+  Description,
+  Title,
+  //
+  Root as Alert,
+  Description as AlertDescription,
+  Title as AlertTitle,
+};

package/src/shadcn/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>