@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/shadcn/field/simple-field.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import Field from "./field.svelte";
+	import FieldLabel from "./field-label.svelte";
+	import FieldDescription from "./field-description.svelte";
+	import FieldError from "./field-error.svelte";
+
+	interface Props {
+		label?: string;
+		description?: string;
+		error?: string;
+		/** Id of the control the label binds to. Also picks the control that gets the message link. */
+		for?: string;
+		/** "default" is text-sm foreground; "muted" is a text-xs micro-label. */
+		labelVariant?: "default" | "muted";
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		label,
+		description,
+		error,
+		for: htmlFor,
+		labelVariant = "default",
+		class: className,
+		children,
+	}: Props = $props();
+
+	const uid = $props.id();
+	const messageId = `${uid}-message`;
+	let message = $derived(error ?? description);
+
+	// WHY an attachment: the control is the caller's snippet, so the wrapper can't
+	// set its props. Wiring the DOM here means no call site can forget the link.
+	const CONTROL = "input, textarea, select, [role=combobox], [role=switch], [role=checkbox]";
+	const link: Attachment<HTMLElement> = (node) => {
+		if (!message) return;
+		const control =
+			(htmlFor ? node.querySelector<HTMLElement>(`[id="${CSS.escape(htmlFor)}"]`) : null) ??
+			node.querySelector<HTMLElement>(CONTROL);
+		if (!control) return;
+		const before = control.getAttribute("aria-describedby");
+		control.setAttribute("aria-describedby", [before, messageId].filter(Boolean).join(" "));
+		if (error) control.setAttribute("aria-invalid", "true");
+		return () => {
+			if (before === null) control.removeAttribute("aria-describedby");
+			else control.setAttribute("aria-describedby", before);
+			if (error) control.removeAttribute("aria-invalid");
+		};
+	};
+</script>
+
+<Field class={cn("gap-2", className)} data-invalid={error ? "true" : undefined} {@attach link}>
+	{#if label}
+		<FieldLabel
+			for={htmlFor}
+			class={labelVariant === "muted" ? "text-muted-foreground text-xs" : undefined}
+		>
+			{label}
+		</FieldLabel>
+	{/if}
+	{@render children()}
+	{#if error}
+		<FieldError id={messageId} class="text-xs">{error}</FieldError>
+	{:else if description}
+		<FieldDescription id={messageId} class="text-xs">{description}</FieldDescription>
+	{/if}
+</Field>

package/src/shadcn/field/simple-field.test.ts

@@ -0,0 +1,47 @@
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import SimpleField from "./simple-field.svelte";
+
+const input = createRawSnippet(() => ({ render: () => `<input id="email" />` }));
+
+function render(props: { error?: string; description?: string }) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(SimpleField, { target, props: { label: "Email", for: "email", children: input, ...props } });
+  flushSync();
+  return {
+    target,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+describe("SimpleField", () => {
+  it("links the error to its input and marks it invalid", () => {
+    const { target, done } = render({ error: "Enter a valid email" });
+    const control = target.querySelector("input")!;
+    const message = target.querySelector("[data-slot=field-error]")!;
+    expect(message.textContent).toContain("Enter a valid email");
+    expect(message.getAttribute("role")).toBe("alert");
+    expect(control.getAttribute("aria-describedby")).toBe(message.id);
+    expect(control.getAttribute("aria-invalid")).toBe("true");
+    done();
+  });
+
+  it("links the description when there is no error", () => {
+    const { target, done } = render({ description: "We never share it" });
+    const control = target.querySelector("input")!;
+    const message = target.querySelector("[data-slot=field-description]")!;
+    expect(control.getAttribute("aria-describedby")).toBe(message.id);
+    expect(control.hasAttribute("aria-invalid")).toBe(false);
+    done();
+  });
+
+  it("leaves the input alone when there is nothing to say", () => {
+    const { target, done } = render({});
+    expect(target.querySelector("input")!.hasAttribute("aria-describedby")).toBe(false);
+    done();
+  });
+});

package/src/shadcn/hooks/highlighter.ts

@@ -0,0 +1,132 @@
+import {
+  createHighlighterCore,
+  type GrammarState,
+  type HighlighterCore,
+  type ThemedToken,
+} from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+
+// Add the languages you need. Each one loads the first time it is used.
+const languages = {
+  bash: () => import("shiki/langs/shellscript.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  diff: () => import("shiki/langs/diff.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  svelte: () => import("shiki/langs/svelte.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+};
+
+const aliases: Record<string, keyof typeof languages> = {
+  js: "javascript",
+  md: "markdown",
+  py: "python",
+  sh: "bash",
+  shell: "bash",
+  shellscript: "bash",
+  ts: "typescript",
+  yml: "yaml",
+  zsh: "bash",
+};
+
+let highlighter: Promise<HighlighterCore> | undefined;
+
+function getHighlighter() {
+  highlighter ??= createHighlighterCore({
+    themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+    langs: [],
+    engine: createJavaScriptRegexEngine({ forgiving: true }),
+  });
+
+  return highlighter;
+}
+
+function getLanguage(language: string) {
+  const name = language.toLowerCase();
+
+  if (name === "ansi") {
+    return name;
+  }
+
+  if (name in languages) {
+    return name as keyof typeof languages;
+  }
+
+  return aliases[name] ?? null;
+}
+
+// One highlighted token. Render it as a `<span>` with this style and class.
+export type HighlightedToken = {
+  content: string;
+  style?: string;
+  class?: string;
+};
+
+// A line of plain text, or the highlighted tokens of a line.
+export type HighlightedLine = string | HighlightedToken[];
+
+function toHighlightedLine(tokens: ThemedToken[]): HighlightedToken[] {
+  return tokens.map((token) => ({
+    content: token.content,
+    style: Object.entries(token.htmlStyle ?? {})
+      .map(([property, value]) => `${property}:${value}`)
+      .join(";"),
+    class: "text-(--shiki-light) dark:text-(--shiki-dark)",
+  }));
+}
+
+export type Highlighter = NonNullable<Awaited<ReturnType<typeof loadHighlighter>>>;
+
+// Loads a language and returns a highlighter for it, or null for a language
+// that is not listed.
+export async function loadHighlighter(language: string) {
+  const lang = getLanguage(language);
+
+  if (!lang) {
+    return null;
+  }
+
+  const shiki = await getHighlighter();
+
+  if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) {
+    await shiki.loadLanguage(languages[lang]);
+  }
+
+  return {
+    // Returns the tokens of each line, and the grammar state after the last
+    // line. Pass that state back to continue where the code left off.
+    highlight(code: string, state?: GrammarState) {
+      const tokenize = (text: string) =>
+        shiki.codeToTokens(text, {
+          lang,
+          themes: { light: "github-light", dark: "github-dark" },
+          defaultColor: false,
+          grammarState: state,
+        }).tokens;
+
+      // ANSI has no grammar state, so each line is tokenized on its own and
+      // gets the same colors whether it arrives in one piece or streams.
+      const tokens =
+        lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+
+      return {
+        lines: tokens.map((line) => toHighlightedLine(line)),
+        state: shiki.getLastGrammarState(tokens),
+      };
+    },
+  };
+}
+
+// Returns the tokens of each line, or null for a language that is not listed.
+export async function highlightCode(code: string, language: string) {
+  const highlighter = await loadHighlighter(language);
+
+  return highlighter ? highlighter.highlight(code).lines : null;
+}

package/src/shadcn/hooks/is-mobile.svelte.ts

@@ -0,0 +1,9 @@
+import { MediaQuery } from "svelte/reactivity";
+
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+  constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
+    super(`max-width: ${breakpoint - 1}px`);
+  }
+}

package/src/shadcn/hooks/use-highlighted-code.svelte.ts

@@ -0,0 +1,98 @@
+import {
+  loadHighlighter,
+  type Highlighter,
+  type HighlightedLine,
+} from "./highlighter.js";
+import type { GrammarState } from "shiki/core";
+
+/**
+ * Highlights `code` in `language`. `current` holds one entry per line: a plain
+ * string until the highlighter loads, then the line's tokens. Pass each one to
+ * the `code` prop of a `CodeBlock.Line`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * 	const lines = useHighlightedCode(() => code, () => "json");
+ * </script>
+ *
+ * {#each lines.current as line, index (index)}
+ * 	<CodeBlock.Line code={line} />
+ * {/each}
+ * ```
+ */
+export function useHighlightedCode(value: () => string, language: () => string) {
+  let loaded = $state.raw<{
+    language: string;
+    highlighter: Highlighter | null;
+  } | null>(null);
+
+  $effect(() => {
+    const lang = language();
+    let cancelled = false;
+
+    loadHighlighter(lang)
+      .then((next) => {
+        if (!cancelled) {
+          loaded = { language: lang, highlighter: next };
+        }
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  // The complete lines, highlighted. While the code streams, only the new
+  // lines are tokenized, starting from the grammar state of the last one.
+  let done: {
+    highlighter: Highlighter | null;
+    text: string;
+    lines: HighlightedLine[];
+    state?: GrammarState;
+  } = { highlighter: null, text: "", lines: [] };
+
+  const lines = $derived.by((): HighlightedLine[] => {
+    const raw = value();
+    // A trailing newline would render as an extra empty line.
+    const code = raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+    const lang = language();
+    const highlighter = loaded?.language === lang ? loaded.highlighter : null;
+
+    if (!highlighter) {
+      return code.split("\n");
+    }
+
+    let next = done;
+
+    if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+      next = { highlighter, text: "", lines: [] };
+    }
+
+    const end = code.lastIndexOf("\n") + 1;
+
+    if (end > next.text.length) {
+      const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+
+      next = {
+        highlighter,
+        text: code.slice(0, end),
+        lines: [...next.lines, ...result.lines],
+        state: result.state,
+      };
+    }
+
+    done = next;
+
+    // The last line is still being written, so it is tokenized every time.
+    const tail = code.slice(end);
+
+    return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+  });
+
+  return {
+    get current() {
+      return lines;
+    },
+  };
+}

package/src/shadcn/hover-card/hover-card-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import HoverCardPortal from "./hover-card-portal.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof HoverCardPortal>>;
+	} = $props();
+</script>
+
+<HoverCardPortal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		data-slot="hover-card-content"
+		{align}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden outline-none",
+			className,
+		)}
+		{...restProps}
+	/>
+</HoverCardPortal>

package/src/shadcn/hover-card/hover-card-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { ...restProps }: HoverCardPrimitive.PortalProps = $props();
+</script>
+
+<HoverCardPrimitive.Portal {...restProps} />

package/src/shadcn/hover-card/hover-card-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...restProps} />

package/src/shadcn/hover-card/hover-card.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: HoverCardPrimitive.RootProps = $props();
+</script>
+
+<HoverCardPrimitive.Root bind:open {...restProps} />

package/src/shadcn/hover-card/index.ts

@@ -0,0 +1,15 @@
+import Root from "./hover-card.svelte";
+import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
+import Portal from "./hover-card-portal.svelte";
+
+export {
+  Root,
+  Content,
+  Trigger,
+  Portal,
+  Root as HoverCard,
+  Content as HoverCardContent,
+  Trigger as HoverCardTrigger,
+  Portal as HoverCardPortal,
+};

package/src/shadcn/input/index.ts

@@ -0,0 +1,9 @@
+import Root from "./input.svelte";
+import SecretInput from "./secret-input.svelte";
+
+export {
+  Root,
+  //
+  Root as Input,
+  SecretInput,
+};

package/src/shadcn/input/input.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className,
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className,
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}

package/src/shadcn/input/secret-input.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { LockKey, LockKeyOpen } from "phosphor-svelte";
+	import Input from "./input.svelte";
+	import { cn } from "@heyramzi/utils";
+
+	// =========================
+	// TYPES
+	// =========================
+	type Props = Omit<HTMLInputAttributes, "type" | "value" | "class" | "files"> & {
+		variant?: "lock" | "obfuscate";
+		value?: string;
+		class?: string;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let { variant = "lock", value = $bindable(""), class: className, ...rest }: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let revealed = $state(false);
+
+	// =========================
+	// DERIVED
+	// =========================
+	let masked = $derived.by(() => {
+		const v = value || "";
+		if (!v) return "";
+		if (v.length <= 8) return "•".repeat(v.length);
+		return `${v.slice(0, 4)}${"•".repeat(Math.max(4, v.length - 8))}${v.slice(-4)}`;
+	});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if variant === "obfuscate"}
+	<div
+		class={cn(
+			"border-input bg-muted/30 text-muted-foreground flex h-8 w-full items-center gap-2 rounded-lg border px-2.5 py-1 font-mono text-sm",
+			className,
+		)}
+		aria-label="Encrypted value"
+	>
+		<LockKey class="text-muted-foreground/70 size-3.5 shrink-0" />
+		<span class="truncate">{masked || "••••••••"}</span>
+	</div>
+{:else}
+	<div class="relative">
+		<Input
+			type={revealed ? "text" : "password"}
+			bind:value
+			class={cn("pr-9", className)}
+			{...rest}
+		/>
+		<button
+			type="button"
+			aria-label={revealed ? "Hide value" : "Reveal value"}
+			class="text-muted-foreground hover:text-foreground absolute inset-y-0 right-0 flex w-8 items-center justify-center rounded-r-lg transition-colors"
+			onclick={() => (revealed = !revealed)}
+		>
+			{#if revealed}
+				<LockKeyOpen class="size-4" />
+			{:else}
+				<LockKey class="size-4" />
+			{/if}
+		</button>
+	</div>
+{/if}

package/src/shadcn/input-otp/index.ts

@@ -0,0 +1,15 @@
+import Root from "./input-otp.svelte";
+import Group from "./input-otp-group.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Separator from "./input-otp-separator.svelte";
+
+export {
+  Root,
+  Group,
+  Slot,
+  Separator,
+  Root as InputOTP,
+  Group as InputOTPGroup,
+  Slot as InputOTPSlot,
+  Separator as InputOTPSeparator,
+};

package/src/shadcn/input-otp/input-otp-group.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="input-otp-group"
+	class={cn("flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/input-otp/input-otp-separator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="input-otp-separator" role="separator" {...restProps}>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<!-- no-inline-svg-ignore -->
+		<svg
+			class="size-5 text-muted-foreground"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"><line x1="5" y1="12" x2="19" y2="12" /></svg
+		>
+	{/if}
+</div>

package/src/shadcn/input-otp/input-otp-slot.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		cell,
+		class: className,
+		...restProps
+	}: InputOTPPrimitive.CellProps = $props();
+</script>
+
+<InputOTPPrimitive.Cell
+	{cell}
+	bind:ref
+	data-slot="input-otp-slot"
+	class={cn(
+		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-e text-sm transition-[border-color,box-shadow,background-color] outline-none first:rounded-s-md first:border-s last:rounded-e-md",
+		cell.isActive &&
+			"border-ring ring-ring/50 bg-accent/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
+		className,
+	)}
+	{...restProps}
+>
+	{cell.char}
+</InputOTPPrimitive.Cell>

package/src/shadcn/input-otp/input-otp.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: InputOTPPrimitive.RootProps = $props();
+</script>
+
+<InputOTPPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="input-otp"
+	class={cn(
+		"flex items-center gap-2 has-disabled:opacity-50 [&_input]:disabled:cursor-not-allowed",
+		className,
+	)}
+	{...restProps}
+/>