@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/ai/ai-button/AiButton.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import type { ButtonProps } from "../../shadcn/button/index.js";
+
+	export type AiStatus = "idle" | "processing" | "done";
+
+	export interface AiButtonProps {
+		status?: AiStatus;
+		label?: string;
+		processingLabel?: string;
+		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
+		disabled?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		class?: string;
+		iconOnly?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+	import { Sparkle } from "phosphor-svelte";
+	import { Spinner } from "../../shadcn/spinner/index.js";
+	import { Button } from "../../shadcn/button/index.js";
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		status = "idle",
+		label = "Generate",
+		processingLabel = "Processing...",
+		variant = "outline",
+		size = "sm",
+		disabled = false,
+		onclick,
+		class: className,
+		iconOnly = false,
+	}: AiButtonProps = $props();
+</script>
+
+<!-- ===========================
+     MARKUP
+     =========================== -->
+{#if iconOnly}
+	<Button
+		{variant}
+		size="sm"
+		icon
+		disabled={disabled || status === "processing"}
+		onclick={onclick}
+		class={cn(
+			"relative",
+			status === "processing" && "pointer-events-none",
+			className,
+		)}
+	>
+		{#if status === "processing"}
+			<Spinner class="size-4" />
+		{:else}
+			<Sparkle class="size-4" weight="fill" />
+		{/if}
+	</Button>
+{:else}
+	<Button
+		{variant}
+		{size}
+		disabled={disabled || status === "processing"}
+		onclick={onclick}
+		class={cn(
+			"gap-1.5",
+			status === "processing" && "pointer-events-none",
+			className,
+		)}
+	>
+		{#if status === "processing"}
+			<Spinner class="size-3.5" />
+			<span>{processingLabel}</span>
+		{:else}
+			<Sparkle class="size-3.5" weight="fill" />
+			<span>{label}</span>
+		{/if}
+	</Button>
+{/if}

package/src/ai/ai-button/index.ts

@@ -0,0 +1,4 @@
+import AiButton from "./AiButton.svelte";
+import type { AiButtonProps, AiStatus } from "./AiButton.svelte";
+
+export { AiButton, type AiButtonProps, type AiStatus };

package/src/ai/confirmation/Confirmation.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { ConfirmationState } from "./confirmation-context.svelte.js";
+
+	export interface ConfirmationProps extends HTMLAttributes<HTMLElement> {
+		kind: ConfirmationState;
+		executing?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { setConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let {
+		kind,
+		executing = false,
+		class: className,
+		children,
+		...rest
+	}: ConfirmationProps = $props();
+
+	// WHY getters: setContext runs once on mount, so the parts read the props through these and rerun their $derived when a prop changes.
+	setConfirmationContext({
+		get kind() {
+			return kind;
+		},
+		get executing() {
+			return executing;
+		},
+	});
+</script>
+
+{#if kind !== "idle"}
+	{@const isResolved = kind === "accepted" || kind === "rejected" || kind === "failed"}
+	<section
+		class={cn(
+			"flex flex-col gap-2 rounded-lg border p-3",
+			"border-[color:var(--border,rgba(0,0,0,0.1))] bg-[color:var(--card,white)] shadow-sm",
+			className,
+		)}
+		aria-label="Confirmation"
+		aria-busy={executing ? "true" : undefined}
+		role={isResolved ? "status" : undefined}
+		aria-live={isResolved ? "polite" : undefined}
+		data-state={kind}
+		{...rest}
+	>
+		{@render children?.()}
+	</section>
+{/if}

package/src/ai/confirmation/ConfirmationAccepted.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationAcceptedProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationAcceptedProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "accepted"}
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationAction.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import type { ButtonProps } from "../../shadcn/button/index.js";
+
+	export interface ConfirmationActionProps extends ButtonProps {
+		busyLabel?: string;
+		busyWhen?: "always" | "default" | "never";
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { Button } from "../../shadcn/button/index.js";
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let {
+		class: className,
+		variant = "default",
+		size = "sm",
+		disabled,
+		children,
+		busyLabel,
+		busyWhen = "default",
+		...rest
+	}: ConfirmationActionProps = $props();
+
+	const ctx = getConfirmationContext();
+	// WHY: by default the primary action shows the busy spinner during execute,
+	// while the cancel/secondary action stays clickable until disabled. Consumers
+	// can override per-button with busyWhen="always"/"never".
+	const showBusy = $derived(
+		busyWhen === "always"
+			? ctx.executing
+			: busyWhen === "never"
+				? false
+				: ctx.executing && variant === "default",
+	);
+	const isDisabled = $derived(Boolean(disabled) || ctx.executing);
+</script>
+
+<Button
+	{...rest}
+	{variant}
+	{size}
+	type="button"
+	disabled={isDisabled}
+	class={cn("h-8 px-3 text-sm", className)}
+>
+	{#if showBusy && busyLabel}
+		{busyLabel}
+	{:else}
+		{@render children?.()}
+	{/if}
+</Button>

package/src/ai/confirmation/ConfirmationActions.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface ConfirmationActionsProps extends HTMLAttributes<HTMLDivElement> {
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { class: className, children, ...rest }: ConfirmationActionsProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "requested"}
+	<div class={cn("mt-1 flex items-center gap-2", className)} {...rest}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationFailed.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationFailedProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationFailedProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "failed"}
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationRejected.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationRejectedProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationRejectedProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "rejected"}
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationRequest.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationRequestProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationRequestProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "requested"}
+	<!-- WHY: the wrapper mirrors the parent section's stack so the state swap can
+       animate as one block without changing the children's layout. -->
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationTitle.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface ConfirmationTitleProps extends HTMLAttributes<HTMLParagraphElement> {
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let { class: className, children, ...rest }: ConfirmationTitleProps = $props();
+</script>
+
+<p
+	class={cn(
+		"text-[11px] font-medium uppercase tracking-[0.16em] text-[color:var(--muted-foreground,inherit)]",
+		className,
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</p>

package/src/ai/confirmation/confirmation-context.svelte.ts

@@ -0,0 +1,22 @@
+import { getContext, setContext } from "svelte";
+
+const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
+
+export type ConfirmationState = "idle" | "requested" | "accepted" | "rejected" | "failed";
+
+export interface ConfirmationContextValue {
+  readonly kind: ConfirmationState;
+  readonly executing: boolean;
+}
+
+export function setConfirmationContext(value: ConfirmationContextValue) {
+  setContext(CONFIRMATION_CONTEXT_KEY, value);
+}
+
+export function getConfirmationContext(): ConfirmationContextValue {
+  const context = getContext<ConfirmationContextValue>(CONFIRMATION_CONTEXT_KEY);
+  if (!context) {
+    throw new Error("Confirmation parts must be used inside a <Confirmation>.");
+  }
+  return context;
+}

package/src/ai/confirmation/index.ts

@@ -0,0 +1,50 @@
+import Confirmation from "./Confirmation.svelte";
+import ConfirmationTitle from "./ConfirmationTitle.svelte";
+import ConfirmationRequest from "./ConfirmationRequest.svelte";
+import ConfirmationAccepted from "./ConfirmationAccepted.svelte";
+import ConfirmationRejected from "./ConfirmationRejected.svelte";
+import ConfirmationFailed from "./ConfirmationFailed.svelte";
+import ConfirmationActions from "./ConfirmationActions.svelte";
+import ConfirmationAction from "./ConfirmationAction.svelte";
+
+import type { ConfirmationProps } from "./Confirmation.svelte";
+import type { ConfirmationTitleProps } from "./ConfirmationTitle.svelte";
+import type { ConfirmationRequestProps } from "./ConfirmationRequest.svelte";
+import type { ConfirmationAcceptedProps } from "./ConfirmationAccepted.svelte";
+import type { ConfirmationRejectedProps } from "./ConfirmationRejected.svelte";
+import type { ConfirmationFailedProps } from "./ConfirmationFailed.svelte";
+import type { ConfirmationActionsProps } from "./ConfirmationActions.svelte";
+import type { ConfirmationActionProps } from "./ConfirmationAction.svelte";
+
+export type {
+  ConfirmationContextValue,
+  ConfirmationState,
+} from "./confirmation-context.svelte.js";
+
+export {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationFailed,
+  ConfirmationActions,
+  ConfirmationAction,
+  type ConfirmationProps,
+  type ConfirmationTitleProps,
+  type ConfirmationRequestProps,
+  type ConfirmationAcceptedProps,
+  type ConfirmationRejectedProps,
+  type ConfirmationFailedProps,
+  type ConfirmationActionsProps,
+  type ConfirmationActionProps,
+  //
+  Confirmation as Root,
+  ConfirmationTitle as Title,
+  ConfirmationRequest as Request,
+  ConfirmationAccepted as Accepted,
+  ConfirmationRejected as Rejected,
+  ConfirmationFailed as Failed,
+  ConfirmationActions as Actions,
+  ConfirmationAction as Action,
+};