@heyramzi/ui 0.0.0-stage → 6.0.1

package/src/icons/trades.ts

@@ -0,0 +1,89 @@
+/**
+ * Trade icon map — Tabler covers the domain Lucide + 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` — 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,49 @@
+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 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 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 { 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/hooks/is-mobile.svelte.ts

@@ -0,0 +1,11 @@
+import { MediaQuery } from "svelte/reactivity";
+
+// WHY 1024, not 768: this picks rail or drawer, and the question is width left
+// for content. A 256px rail on an 834px iPad leaves 578px, which is too narrow.
+const DEFAULT_MOBILE_BREAKPOINT = 1024;
+
+export class IsMobile extends MediaQuery {
+  constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
+    super(`max-width: ${breakpoint - 1}px`);
+  }
+}

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,15 @@
+/** 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`, per DESIGN.md.
+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";

package/src/lib/theme-transition.ts

@@ -0,0 +1,51 @@
+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;
+}
+
+const DEFAULT_DURATION = 400;
+
+/**
+ * Run `apply` inside a circular wipe that grows from the centre of the clicked
+ * element. Falls back to a plain `apply()` when the browser has no view
+ * transitions, the user prefers reduced motion, or `skip` is set.
+ *
+ * The page also needs `::view-transition-old(root)` and `::view-transition-new(root)`
+ * set to `animation: none`. `ThemeToggle` ships that CSS; a bare caller adds its own.
+ */
+export function revealTheme(
+  event: MouseEvent,
+  apply: () => void,
+  options: RevealThemeOptions = {},
+): void {
+  const { skip = false, duration = DEFAULT_DURATION } = options;
+  const origin = event.currentTarget;
+
+  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  if (skip || prefersReduced || !document.startViewTransition || !(origin instanceof Element)) {
+    apply();
+    return;
+  }
+
+  const rect = origin.getBoundingClientRect();
+  const x = rect.left + rect.width / 2;
+  const y = rect.top + rect.height / 2;
+  const endRadius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y),
+  );
+
+  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: "ease-in-out", pseudoElement: "::view-transition-new(root)" },
+    );
+  });
+}

package/src/lib/utils.ts

@@ -0,0 +1,45 @@
+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/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,35 @@
+<script lang="ts">
+	import { CaretDown } from "phosphor-svelte";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $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?.()}
+		<!-- 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"
+		/>
+	</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,44 @@
+<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",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	role="alert"
+>
+	{@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}
+/>

package/src/shadcn/alert-dialog/alert-dialog-cancel.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.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={cn(
+			"t-modal bg-background fixed inset-0 z-50 m-auto grid h-fit w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg",
+			className,
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/alert-dialog/alert-dialog-header.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-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>