@krak-stack/registry 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# @krak-stack/registry
+
+Tree-shakable runtime components and Effect services from the KrakStack shadcn registry.
+
+```bash
+bun add @krak-stack/registry
+```
+
+Import only the subpaths used by the application:
+
+```tsx
+import { DataTable } from "@krak-stack/registry/data-table";
+import { Pagination } from "@krak-stack/registry/pagination";
+import { NotificationService } from "@krak-stack/registry/service-notification";
+```
+
+Add the package's Tailwind source to the application stylesheet:
+
+```css
+@import "@krak-stack/registry/tailwind.css";
+```
+
+The same canonical sources remain available through shadcn:
+
+```bash
+bunx shadcn@latest add @krak-stack/data-table
+```
+
+Project-specific services, configuration, and agent scaffolding are available through shadcn only.

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { Button } from "./button.js";
+declare function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialogPrimitive.Popup.Props & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/ui/app-brand.d.ts

@@ -0,0 +1,26 @@
+import { type LinkProps } from "@tanstack/react-router";
+import type { ComponentProps } from "react";
+import type { LucideIcon } from "lucide-react";
+type AppBrandBaseProps = {
+    label: string;
+    subtitle: string;
+    className?: string;
+    variant?: "default" | "sidebar";
+} & ((Omit<LinkProps, "className" | "children"> & {
+    to?: LinkProps["to"];
+}) | (ComponentProps<"a"> & {
+    href: string;
+    to?: never;
+}) | (ComponentProps<"div"> & {
+    to: null;
+    href?: never;
+}));
+type AppBrandProps = AppBrandBaseProps & ({
+    icon: LucideIcon;
+    imageSrc?: string;
+} | {
+    imageSrc: string;
+    icon?: LucideIcon;
+});
+export declare function AppBrand({ className, label, subtitle, icon: Icon, imageSrc, href, to, variant, ...props }: AppBrandProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/app-brand.js

@@ -0,0 +1,78 @@
+// ../../src/components/ui/app-brand.tsx
+import { Link } from "@tanstack/react-router";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function AppBrand({
+  className,
+  label,
+  subtitle,
+  icon: Icon,
+  imageSrc,
+  href,
+  to,
+  variant = "default",
+  ...props
+}) {
+  const iconClassName = variant === "sidebar" ? "bg-sidebar-primary" : "bg-primary";
+  const iconColor = variant === "sidebar" ? "var(--sidebar-primary-foreground)" : "var(--primary-foreground)";
+  const contentClassName = variant === "sidebar" ? "group-data-[collapsible=icon]:hidden" : undefined;
+  const content = /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: [
+          "flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md",
+          imageSrc ? "border bg-background" : iconClassName
+        ].join(" "),
+        children: imageSrc ? /* @__PURE__ */ jsxDEV("img", {
+          src: imageSrc,
+          alt: label,
+          className: "size-full object-cover"
+        }, undefined, false, undefined, this) : Icon ? /* @__PURE__ */ jsxDEV(Icon, {
+          className: "size-4",
+          color: iconColor
+        }, undefined, false, undefined, this) : null
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: ["flex min-w-0 flex-col leading-tight", contentClassName].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "truncate font-semibold tracking-tight",
+            children: label
+          }, undefined, false, undefined, this),
+          subtitle ? /* @__PURE__ */ jsxDEV("span", {
+            className: "text-muted-foreground truncate text-xs",
+            children: subtitle
+          }, undefined, false, undefined, this) : null
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+  const brandClassName = [
+    "flex min-w-0 items-center gap-2 text-foreground hover:text-foreground",
+    variant === "sidebar" ? "p-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0" : "",
+    className
+  ].filter(Boolean).join(" ");
+  if (to === null) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className: brandClassName,
+      ...props,
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  if (href) {
+    return /* @__PURE__ */ jsxDEV("a", {
+      className: brandClassName,
+      href,
+      ...props,
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV(Link, {
+    to: to ?? "/",
+    className: brandClassName,
+    ...props,
+    children: content
+  }, undefined, false, undefined, this);
+}
+export {
+  AppBrand
+};

package/dist/components/ui/attachment.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "./button.js";
+declare const attachmentVariants: (props?: ({
+    size?: "default" | "sm" | "xs" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+    variant?: "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,7 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,8 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+declare function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props): import("react").JSX.Element;
+export { Checkbox };

package/dist/components/ui/code-block.d.ts

@@ -0,0 +1,14 @@
+import type { HighlighterCore } from "shiki/core";
+type CodeBlockMessages = {
+    copy?: string;
+    copied?: string;
+    copyFailed?: string;
+};
+type CodeBlockProps = {
+    code: string;
+    highlighter: HighlighterCore;
+    language?: string;
+    messages?: CodeBlockMessages;
+};
+export declare function CodeBlock({ code, highlighter, language, messages, }: CodeBlockProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/code-block.js

@@ -0,0 +1,224 @@
+// ../../src/components/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+
+// ../../src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../../src/components/ui/button.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/80",
+      outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+      ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+      destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+      sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+      lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      icon: "size-9",
+      "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+      "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+      "icon-lg": "size-10"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(ButtonPrimitive, {
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+}
+
+// ../../src/components/ui/copy-button.tsx
+import { Check, Copy, TriangleAlert } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function CopyButton({
+  value,
+  valueDescription,
+  copyVariant = "default",
+  messages,
+  onCopied,
+  onCopyError,
+  resetDelay = 1500,
+  disabled,
+  size,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [copyState, setCopyState] = useState("idle");
+  const copyTimeout = useRef(undefined);
+  const labels = {
+    copy: messages?.copy ?? "Copy",
+    copied: messages?.copied ?? "Copied",
+    copyFailed: messages?.copyFailed ?? "Copy failed"
+  };
+  const accessibleLabel = ariaLabel ?? (valueDescription ? `${labels.copy} ${valueDescription}` : labels.copy);
+  const isLarge = copyVariant === "large";
+  const defaultSize = copyVariant === "sm" ? "icon-xs" : isLarge ? "sm" : "icon-sm";
+  useEffect(() => {
+    return () => {
+      if (copyTimeout.current)
+        clearTimeout(copyTimeout.current);
+    };
+  }, []);
+  const resetCopyState = () => {
+    if (copyTimeout.current)
+      clearTimeout(copyTimeout.current);
+    copyTimeout.current = setTimeout(() => setCopyState("idle"), resetDelay);
+  };
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopyState("copied");
+      onCopied?.();
+    } catch (error) {
+      setCopyState("failed");
+      onCopyError?.(error);
+    }
+    resetCopyState();
+  };
+  const status = copyState === "copied" ? valueDescription ? `${labels.copied}: ${valueDescription}` : labels.copied : copyState === "failed" ? valueDescription ? `${labels.copyFailed}: ${valueDescription}` : labels.copyFailed : "";
+  return /* @__PURE__ */ jsxDEV2(Button, {
+    "aria-label": accessibleLabel,
+    disabled,
+    onClick: copy,
+    size: size ?? defaultSize,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2("span", {
+        "aria-live": "polite",
+        className: "sr-only",
+        role: "status",
+        children: status
+      }, undefined, false, undefined, this),
+      copyState === "copied" ? /* @__PURE__ */ jsxDEV2(Check, {
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this) : null,
+      copyState === "failed" ? /* @__PURE__ */ jsxDEV2(TriangleAlert, {
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this) : null,
+      copyState === "idle" ? /* @__PURE__ */ jsxDEV2(Copy, {
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this) : null,
+      isLarge ? /* @__PURE__ */ jsxDEV2("span", {
+        children: labels.copy
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ../../src/components/ui/code-block.tsx
+import { Fragment, useEffect as useEffect2, useState as useState2 } from "react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var codeBodyClassName = "font-mono text-[0.875rem] leading-[1.625] break-all whitespace-pre-wrap [&_code]:block [&_code]:font-mono [&_code]:text-[inherit] [&_code]:leading-[inherit] [&_code]:whitespace-pre-wrap [&_span]:break-all";
+var getTokenStyle = (token) => {
+  const style = {};
+  if (token.variants.light?.color) {
+    style["--shiki-light"] = token.variants.light.color;
+  }
+  if (token.variants.dark?.color) {
+    style["--shiki-dark"] = token.variants.dark.color;
+  }
+  return style;
+};
+function CodeBlock({
+  code,
+  highlighter,
+  language = "text",
+  messages
+}) {
+  const [tokens, setTokens] = useState2();
+  useEffect2(() => {
+    let active = true;
+    setTokens(undefined);
+    try {
+      const result = highlighter.codeToTokensWithThemes(code, {
+        lang: language.toLowerCase() || "text",
+        themes: {
+          light: "vitesse-light",
+          dark: "vitesse-dark"
+        }
+      });
+      if (active)
+        setTokens(result);
+    } catch {}
+    return () => {
+      active = false;
+    };
+  }, [code, highlighter, language]);
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "overflow-hidden rounded-md border",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "border-border/60 flex items-center justify-between border-b px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsxDEV3("span", {
+            className: "text-muted-foreground font-mono text-xs",
+            children: language.toLowerCase()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(CopyButton, {
+            value: code,
+            valueDescription: `${language.toLowerCase()} code`,
+            variant: "secondary",
+            messages: {
+              ...messages?.copy === undefined ? {} : { copy: messages.copy },
+              ...messages?.copied === undefined ? {} : { copied: messages.copied },
+              ...messages?.copyFailed === undefined ? {} : { copyFailed: messages.copyFailed }
+            }
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "bg-muted max-h-full overflow-auto p-3",
+        children: tokens ? /* @__PURE__ */ jsxDEV3("div", {
+          className: codeBodyClassName,
+          children: /* @__PURE__ */ jsxDEV3("code", {
+            className: `language-${language}`,
+            children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxDEV3(Fragment, {
+              children: [
+                line.map((token) => /* @__PURE__ */ jsxDEV3("span", {
+                  className: "text-[var(--shiki-light)] dark:text-[var(--shiki-dark)]",
+                  style: getTokenStyle(token),
+                  children: token.content
+                }, token.offset, false, undefined, this)),
+                lineIndex < tokens.length - 1 ? `
+` : null
+              ]
+            }, lineIndex, true, undefined, this))
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("div", {
+          className: `max-w-full ${codeBodyClassName}`,
+          children: /* @__PURE__ */ jsxDEV3("code", {
+            className: `language-${language}`,
+            children: code
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  CodeBlock
+};

package/dist/components/ui/command.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "./dialog.js";
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+    title: string;
+    description: string;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/ui/copy-button.d.ts

@@ -0,0 +1,18 @@
+import { Button } from "./button.js";
+import type { ComponentProps } from "react";
+type CopyButtonMessages = {
+    copy?: string;
+    copied?: string;
+    copyFailed?: string;
+};
+type CopyButtonProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
+    value: string;
+    valueDescription?: string;
+    copyVariant?: "default" | "sm" | "large";
+    messages?: CopyButtonMessages;
+    onCopied?: () => void;
+    onCopyError?: (error: unknown) => void;
+    resetDelay?: number;
+};
+export declare function CopyButton({ value, valueDescription, copyVariant, messages, onCopied, onCopyError, resetDelay, disabled, size, "aria-label": ariaLabel, ...props }: CopyButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/copy-button.js

@@ -0,0 +1,133 @@
+// ../../src/components/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+
+// ../../src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../../src/components/ui/button.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/80",
+      outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+      ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+      destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+      sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+      lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      icon: "size-9",
+      "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+      "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+      "icon-lg": "size-10"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(ButtonPrimitive, {
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+}
+
+// ../../src/components/ui/copy-button.tsx
+import { Check, Copy, TriangleAlert } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function CopyButton({
+  value,
+  valueDescription,
+  copyVariant = "default",
+  messages,
+  onCopied,
+  onCopyError,
+  resetDelay = 1500,
+  disabled,
+  size,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [copyState, setCopyState] = useState("idle");
+  const copyTimeout = useRef(undefined);
+  const labels = {
+    copy: messages?.copy ?? "Copy",
+    copied: messages?.copied ?? "Copied",
+    copyFailed: messages?.copyFailed ?? "Copy failed"
+  };
+  const accessibleLabel = ariaLabel ?? (valueDescription ? `${labels.copy} ${valueDescription}` : labels.copy);
+  const isLarge = copyVariant === "large";
+  const defaultSize = copyVariant === "sm" ? "icon-xs" : isLarge ? "sm" : "icon-sm";
+  useEffect(() => {
+    return () => {
+      if (copyTimeout.current)
+        clearTimeout(copyTimeout.current);
+    };
+  }, []);
+  const resetCopyState = () => {
+    if (copyTimeout.current)
+      clearTimeout(copyTimeout.current);
+    copyTimeout.current = setTimeout(() => setCopyState("idle"), resetDelay);
+  };
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopyState("copied");
+      onCopied?.();
+    } catch (error) {
+      setCopyState("failed");
+      onCopyError?.(error);
+    }
+    resetCopyState();
+  };
+  const status = copyState === "copied" ? valueDescription ? `${labels.copied}: ${valueDescription}` : labels.copied : copyState === "failed" ? valueDescription ? `${labels.copyFailed}: ${valueDescription}` : labels.copyFailed : "";
+  return /* @__PURE__ */ jsxDEV2(Button, {
+    "aria-label": accessibleLabel,
+    disabled,
+    onClick: copy,
+    size: size ?? defaultSize,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2("span", {
+        "aria-live": "polite",
+        className: "sr-only",
+        role: "status",
+        children: status
+      }, undefined, false, undefined, this),
+      copyState === "copied" ? /* @__PURE__ */ jsxDEV2(Check, {
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this) : null,
+      copyState === "failed" ? /* @__PURE__ */ jsxDEV2(TriangleAlert, {
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this) : null,
+      copyState === "idle" ? /* @__PURE__ */ jsxDEV2(Copy, {
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this) : null,
+      isLarge ? /* @__PURE__ */ jsxDEV2("span", {
+        children: labels.copy
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  CopyButton
+};