@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Command/Command.d.ts

@@ -0,0 +1,78 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import type { InputSize, InputVariant } from '../Input/inputStyles.js';
+export declare const Command: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface CommandInputProps extends Omit<ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'size'> {
+    /** Left side decorator (icon or element) */
+    leftDecorator?: ReactNode;
+    /** Right side decorator (icon or element) */
+    rightDecorator?: ReactNode;
+    /** Size variant — uses shared Input styling */
+    size?: InputSize;
+    /** Visual variant — uses shared Input styling */
+    variant?: InputVariant;
+}
+export declare const CommandInput: import("react").ForwardRefExoticComponent<CommandInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const CommandList: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandEmpty: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandGroup: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandSeparator: import("react").ForwardRefExoticComponent<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandItem: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Command/Command.js

@@ -0,0 +1,78 @@
+import { cn } from "../../utils/cn.js";
+import { getInputContainerClasses, getInputElementClasses } from "../Input/inputStyles.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+//#region packages/components/src/components/Command/Command.tsx
+var Command = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+	ref,
+	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover", className),
+	...props
+}));
+Command.displayName = Command$1.displayName;
+var CommandInput = forwardRef(({ className, leftDecorator, rightDecorator, size = "lg", variant = "outlined", ...props }, ref) => {
+	const containerClasses = getInputContainerClasses({
+		size,
+		variant,
+		disabled: props.disabled,
+		className
+	});
+	const inputClasses = getInputElementClasses({
+		size,
+		disabled: props.disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		"cmdk-input-wrapper": "",
+		children: [
+			leftDecorator && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center text-tertiary",
+				children: leftDecorator
+			}),
+			/* @__PURE__ */ jsx(Command$1.Input, {
+				ref,
+				className: inputClasses,
+				...props
+			}),
+			rightDecorator && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center text-tertiary",
+				children: rightDecorator
+			})
+		]
+	});
+});
+CommandInput.displayName = Command$1.Input.displayName;
+var CommandList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+	ref,
+	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+	...props
+}));
+CommandList.displayName = Command$1.List.displayName;
+var CommandEmpty = forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+	ref,
+	className: "py-space-5 text-center",
+	...props
+}));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+var CommandGroup = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+	ref,
+	className: cn("overflow-hidden", "[&_[cmdk-group-heading]]:px-space-2 [&_[cmdk-group-heading]]:py-space-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:text-tertiary", className),
+	...props
+}));
+CommandGroup.displayName = Command$1.Group.displayName;
+var CommandSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+	ref,
+	className: cn("bg-border -mx-space-1 h-px", className),
+	...props
+}));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+var CommandItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+	ref,
+	className: cn("relative flex cursor-pointer select-none items-center rounded-md px-space-2 py-1.5 outline-none hover:bg-secondary aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:bg-secondary", className),
+	...props
+}));
+CommandItem.displayName = Command$1.Item.displayName;
+//#endregion
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator };
+
+//# sourceMappingURL=Command.js.map

package/dist/components/Command/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","names":[],"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { cn } from '../../utils/cn';\nimport {\n  DECORATOR_CLASSES,\n  getInputContainerClasses,\n  getInputElementClasses,\n} from '../Input/inputStyles';\nimport type { InputSize, InputVariant } from '../Input/inputStyles';\n\nexport const Command = forwardRef<\n  ElementRef<typeof CommandPrimitive>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover',\n      className\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nexport interface CommandInputProps extends Omit<\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,\n  'size'\n> {\n  /** Left side decorator (icon or element) */\n  leftDecorator?: ReactNode;\n  /** Right side decorator (icon or element) */\n  rightDecorator?: ReactNode;\n  /** Size variant — uses shared Input styling */\n  size?: InputSize;\n  /** Visual variant — uses shared Input styling */\n  variant?: InputVariant;\n}\n\nexport const CommandInput = forwardRef<\n  ElementRef<typeof CommandPrimitive.Input>,\n  CommandInputProps\n>(\n  (\n    {\n      className,\n      leftDecorator,\n      rightDecorator,\n      size = 'lg',\n      variant = 'outlined',\n      ...props\n    },\n    ref\n  ) => {\n    const containerClasses = getInputContainerClasses({\n      size,\n      variant,\n      disabled: props.disabled,\n      className,\n    });\n\n    const inputClasses = getInputElementClasses({\n      size,\n      disabled: props.disabled,\n    });\n\n    return (\n      <div className={containerClasses} {...{ 'cmdk-input-wrapper': '' }}>\n        {leftDecorator && (\n          <div className={DECORATOR_CLASSES}>{leftDecorator}</div>\n        )}\n        <CommandPrimitive.Input ref={ref} className={inputClasses} {...props} />\n        {rightDecorator && (\n          <div className={DECORATOR_CLASSES}>{rightDecorator}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nexport const CommandList = forwardRef<\n  ElementRef<typeof CommandPrimitive.List>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nexport const CommandEmpty = forwardRef<\n  ElementRef<typeof CommandPrimitive.Empty>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-space-5 text-center\"\n    {...props}\n  />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nexport const CommandGroup = forwardRef<\n  ElementRef<typeof CommandPrimitive.Group>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden',\n      '[&_[cmdk-group-heading]]:px-space-2 [&_[cmdk-group-heading]]:py-space-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:text-tertiary',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nexport const CommandSeparator = forwardRef<\n  ElementRef<typeof CommandPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('bg-border -mx-space-1 h-px', className)}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nexport const CommandItem = forwardRef<\n  ElementRef<typeof CommandPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-pointer select-none items-center rounded-md px-space-2 py-1.5 outline-none hover:bg-secondary aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:bg-secondary',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n"],"mappings":";;;;;;AAaA,IAAa,UAAU,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,WAAD;CACO;CACL,WAAW,GACT,qEACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,QAAQ,cAAc,UAAiB;AAgBvC,IAAa,eAAe,YAKxB,EACE,WACA,eACA,gBACA,OAAO,MACP,UAAU,YACV,GAAG,SAEL,QACG;CACH,MAAM,mBAAmB,yBAAyB;EAChD;EACA;EACA,UAAU,MAAM;EAChB;CACF,CAAC;CAED,MAAM,eAAe,uBAAuB;EAC1C;EACA,UAAU,MAAM;CAClB,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAW;EAAwB,sBAAsB;EAA9D,UAAA;GACG,iBACC,oBAAC,OAAD;IAAK,WAAA;IAA+B,UAAA;GAAmB,CAAA;GAEzD,oBAAC,UAAiB,OAAlB;IAA6B;IAAK,WAAW;IAAc,GAAI;GAAQ,CAAA;GACtE,kBACC,oBAAC,OAAD;IAAK,WAAA;IAA+B,UAAA;GAAoB,CAAA;EAEvD;;AAET,CACF;AAEA,aAAa,cAAc,UAAiB,MAAM;AAElD,IAAa,cAAc,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,UAAiB,MAAlB;CACO;CACL,WAAW,GAAG,mDAAmD,SAAS;CAC1E,GAAI;AACL,CAAA,CACF;AAED,YAAY,cAAc,UAAiB,KAAK;AAEhD,IAAa,eAAe,YAGzB,OAAO,QACR,oBAAC,UAAiB,OAAlB;CACO;CACL,WAAU;CACV,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc,UAAiB,MAAM;AAElD,IAAa,eAAe,YAGzB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,UAAiB,OAAlB;CACO;CACL,WAAW,GACT,mBACA,6NACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc,UAAiB,MAAM;AAElD,IAAa,mBAAmB,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,UAAiB,WAAlB;CACO;CACL,WAAW,GAAG,8BAA8B,SAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,iBAAiB,cAAc,UAAiB,UAAU;AAE1D,IAAa,cAAc,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,UAAiB,MAAlB;CACO;CACL,WAAW,GACT,4MACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,YAAY,cAAc,UAAiB,KAAK"}

package/dist/components/Command/CommandMenu.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { InputSize, InputVariant } from '../Input/inputStyles.js';
+export interface CommandMenuItem {
+    /** Unique value used for selection and filtering */
+    value: string;
+    /** Display label (defaults to value if not provided) */
+    label?: string;
+    /** Secondary description text displayed below the label */
+    description?: string;
+    /** Element displayed on the right side of the item (e.g. badge, shortcut) */
+    rightDecorator?: ReactNode;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Extra search terms for filtering */
+    keywords?: string[];
+}
+export interface CommandMenuGroup {
+    /** Optional heading displayed above the group */
+    heading?: string;
+    /** Items in this group */
+    items: CommandMenuItem[];
+}
+interface CommandMenuBaseProps {
+    /** Callback when an item is selected */
+    onSelect: (value: string) => void;
+    /** The currently selected value. When set, a check icon is shown next to the selected item. */
+    value?: string;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Text shown when no items match the search */
+    emptyText?: string;
+    /** Hide the search input (default: false, search is visible) */
+    hideSearch?: boolean;
+    /** Show the leading selected-indicator slot in the default item layout (default: true). Set false for action menus that track no selection so labels sit flush-left. */
+    showSelectedIndicator?: boolean;
+    /** Disable client-side filtering by cmdk (default: false). Set true for server-side filtering. */
+    disableFilter?: boolean;
+    /** Callback when the search input value changes. Useful for server-side filtering. */
+    onSearchChange?: (query: string) => void;
+    /** Custom render function for each item */
+    renderItem?: (item: CommandMenuItem, isSelected: boolean) => ReactNode;
+    /** Size variant for the search input */
+    inputSize?: InputSize;
+    /** Visual variant for the search input */
+    inputVariant?: InputVariant;
+    /** Additional class name for the Command root */
+    className?: string;
+    /** Whether more items are currently being loaded */
+    loading?: boolean;
+    /** Number of skeleton rows to show while loading (default: 5) */
+    loadingRows?: number;
+    /** Callback when the user scrolls near the end of the list. Use for infinite loading. */
+    onEndReached?: () => void;
+    /** Distance in pixels from the bottom to trigger onEndReached (default: 50) */
+    endReachedThresholdPx?: number;
+}
+export type CommandMenuProps = CommandMenuBaseProps & ({
+    items: CommandMenuItem[];
+    groups?: never;
+} | {
+    /** Grouped items with optional headings */ groups: CommandMenuGroup[];
+    items?: never;
+});
+export declare function CommandMenu({ items, groups, onSelect, value, placeholder, emptyText, hideSearch, showSelectedIndicator, disableFilter, onSearchChange, renderItem, inputSize, inputVariant, className, loading, loadingRows, onEndReached, endReachedThresholdPx, }: CommandMenuProps): import("react").JSX.Element;
+export {};

package/dist/components/Command/CommandMenu.js

@@ -0,0 +1,101 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { CheckIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { Icon } from "../Icon/Icon.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "./Command.js";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
+//#region packages/components/src/components/Command/CommandMenu.tsx
+function TruncatedLabel({ text }) {
+	const textRef = useRef(null);
+	const [isTruncated, setIsTruncated] = useState(false);
+	useEffect(() => {
+		const el = textRef.current;
+		if (el) setIsTruncated(el.scrollWidth > el.clientWidth);
+	}, [text]);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: isTruncated ? text : void 0,
+		children: /* @__PURE__ */ jsx(Text, {
+			ref: textRef,
+			as: "span",
+			className: "truncate",
+			children: text
+		})
+	});
+}
+function CommandMenu({ items, groups, onSelect, value, placeholder = "Search...", emptyText = "No results found.", hideSearch, showSelectedIndicator = true, disableFilter, onSearchChange, renderItem, inputSize = "sm", inputVariant = "plain", className, loading = false, loadingRows = 5, onEndReached, endReachedThresholdPx = 50 }) {
+	const handleScroll = useCallback((e) => {
+		if (!onEndReached) return;
+		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+		if (scrollHeight - scrollTop - clientHeight <= endReachedThresholdPx) onEndReached();
+	}, [onEndReached, endReachedThresholdPx]);
+	const renderItems = (menuItems) => menuItems.map((item) => {
+		const isSelected = item.value === value;
+		const label = item.label ?? item.value;
+		return /* @__PURE__ */ jsx(CommandItem, {
+			value: item.value,
+			keywords: item.label ? [item.label, ...item.keywords ?? []] : item.keywords,
+			disabled: item.disabled,
+			onSelect: () => onSelect(item.value),
+			className: "gap-space-2",
+			children: renderItem ? renderItem(item, isSelected) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				showSelectedIndicator && /* @__PURE__ */ jsx(Icon, {
+					icon: CheckIcon,
+					size: "md",
+					className: cn("shrink-0", isSelected ? "opacity-100" : "opacity-0")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx(TruncatedLabel, { text: label }), item.description && /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "xs",
+						className: "truncate text-tertiary",
+						children: item.description
+					})]
+				}),
+				item.rightDecorator && /* @__PURE__ */ jsx("div", {
+					className: "ml-auto shrink-0",
+					children: item.rightDecorator
+				})
+			] })
+		}, item.value);
+	});
+	return /* @__PURE__ */ jsxs(Command, {
+		className: cn("flex flex-col gap-1.5 p-1.5", className),
+		shouldFilter: disableFilter ? false : void 0,
+		children: [!hideSearch && /* @__PURE__ */ jsx(CommandInput, {
+			placeholder,
+			size: inputSize,
+			variant: inputVariant,
+			leftDecorator: /* @__PURE__ */ jsx(MagnifyingGlassIcon, {
+				"aria-hidden": true,
+				size: 16,
+				weight: "regular"
+			}),
+			onValueChange: onSearchChange
+		}), /* @__PURE__ */ jsxs(CommandList, {
+			onScroll: handleScroll,
+			children: [
+				!loading && /* @__PURE__ */ jsx(CommandEmpty, { children: /* @__PURE__ */ jsx(Text, {
+					variant: "sm",
+					children: emptyText
+				}) }),
+				items && renderItems(items),
+				groups?.map((group, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}), /* @__PURE__ */ jsx(CommandGroup, {
+					heading: group.heading,
+					children: renderItems(group.items)
+				})] }, group.heading ?? i)),
+				loading && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-space-1 px-space-2 py-space-1",
+					children: Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsx("div", { className: "h-7 animate-pulse rounded-md bg-tertiary" }, i))
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { CommandMenu };
+
+//# sourceMappingURL=CommandMenu.js.map

package/dist/components/Command/CommandMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenu.js","names":[],"sources":["../../../src/components/Command/CommandMenu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Fragment, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';\n\nimport { CheckIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { Icon } from '../Icon';\nimport type { InputSize, InputVariant } from '../Input/inputStyles';\nimport { Text } from '../Text';\nimport { Tooltip } from '../Tooltip';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from './Command';\n\nexport interface CommandMenuItem {\n  /** Unique value used for selection and filtering */\n  value: string;\n  /** Display label (defaults to value if not provided) */\n  label?: string;\n  /** Secondary description text displayed below the label */\n  description?: string;\n  /** Element displayed on the right side of the item (e.g. badge, shortcut) */\n  rightDecorator?: ReactNode;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Extra search terms for filtering */\n  keywords?: string[];\n}\n\nexport interface CommandMenuGroup {\n  /** Optional heading displayed above the group */\n  heading?: string;\n  /** Items in this group */\n  items: CommandMenuItem[];\n}\n\ninterface CommandMenuBaseProps {\n  /** Callback when an item is selected */\n  onSelect: (value: string) => void;\n  /** The currently selected value. When set, a check icon is shown next to the selected item. */\n  value?: string;\n  /** Placeholder text for the search input */\n  placeholder?: string;\n  /** Text shown when no items match the search */\n  emptyText?: string;\n  /** Hide the search input (default: false, search is visible) */\n  hideSearch?: boolean;\n  /** Show the leading selected-indicator slot in the default item layout (default: true). Set false for action menus that track no selection so labels sit flush-left. */\n  showSelectedIndicator?: boolean;\n  /** Disable client-side filtering by cmdk (default: false). Set true for server-side filtering. */\n  disableFilter?: boolean;\n  /** Callback when the search input value changes. Useful for server-side filtering. */\n  onSearchChange?: (query: string) => void;\n  /** Custom render function for each item */\n  renderItem?: (item: CommandMenuItem, isSelected: boolean) => ReactNode;\n  /** Size variant for the search input */\n  inputSize?: InputSize;\n  /** Visual variant for the search input */\n  inputVariant?: InputVariant;\n  /** Additional class name for the Command root */\n  className?: string;\n  /** Whether more items are currently being loaded */\n  loading?: boolean;\n  /** Number of skeleton rows to show while loading (default: 5) */\n  loadingRows?: number;\n  /** Callback when the user scrolls near the end of the list. Use for infinite loading. */\n  onEndReached?: () => void;\n  /** Distance in pixels from the bottom to trigger onEndReached (default: 50) */\n  endReachedThresholdPx?: number;\n}\n\nexport type CommandMenuProps = CommandMenuBaseProps &\n  (\n    | { /** Flat list of items */ items: CommandMenuItem[]; groups?: never }\n    | {\n        /** Grouped items with optional headings */ groups: CommandMenuGroup[];\n        items?: never;\n      }\n  );\n\nfunction TruncatedLabel({ text }: { text: string }) {\n  const textRef = useRef<HTMLElement>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  useEffect(() => {\n    const el = textRef.current;\n    if (el) {\n      setIsTruncated(el.scrollWidth > el.clientWidth);\n    }\n  }, [text]);\n\n  return (\n    <Tooltip title={isTruncated ? text : undefined}>\n      <Text ref={textRef} as=\"span\" className=\"truncate\">\n        {text}\n      </Text>\n    </Tooltip>\n  );\n}\n\nexport function CommandMenu({\n  items,\n  groups,\n  onSelect,\n  value,\n  placeholder = 'Search...',\n  emptyText = 'No results found.',\n  hideSearch,\n  showSelectedIndicator = true,\n  disableFilter,\n  onSearchChange,\n  renderItem,\n  inputSize = 'sm',\n  inputVariant = 'plain',\n  className,\n  loading = false,\n  loadingRows = 5,\n  onEndReached,\n  endReachedThresholdPx = 50,\n}: CommandMenuProps) {\n  const handleScroll = useCallback(\n    (e: React.UIEvent<HTMLDivElement>) => {\n      if (!onEndReached) return;\n      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;\n      if (scrollHeight - scrollTop - clientHeight <= endReachedThresholdPx) {\n        onEndReached();\n      }\n    },\n    [onEndReached, endReachedThresholdPx]\n  );\n\n  const renderItems = (menuItems: CommandMenuItem[]) =>\n    menuItems.map((item) => {\n      const isSelected = item.value === value;\n      const label = item.label ?? item.value;\n      return (\n        <CommandItem\n          key={item.value}\n          value={item.value}\n          keywords={\n            item.label ? [item.label, ...(item.keywords ?? [])] : item.keywords\n          }\n          disabled={item.disabled}\n          onSelect={() => onSelect(item.value)}\n          className=\"gap-space-2\"\n        >\n          {renderItem ? (\n            renderItem(item, isSelected)\n          ) : (\n            <>\n              {showSelectedIndicator && (\n                <Icon\n                  icon={CheckIcon}\n                  size=\"md\"\n                  className={cn(\n                    'shrink-0',\n                    isSelected ? 'opacity-100' : 'opacity-0'\n                  )}\n                />\n              )}\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                <TruncatedLabel text={label} />\n                {item.description && (\n                  <Text\n                    as=\"span\"\n                    variant=\"xs\"\n                    className=\"truncate text-tertiary\"\n                  >\n                    {item.description}\n                  </Text>\n                )}\n              </div>\n              {item.rightDecorator && (\n                <div className=\"ml-auto shrink-0\">{item.rightDecorator}</div>\n              )}\n            </>\n          )}\n        </CommandItem>\n      );\n    });\n\n  return (\n    <Command\n      className={cn('flex flex-col gap-1.5 p-1.5', className)}\n      shouldFilter={disableFilter ? false : undefined}\n    >\n      {!hideSearch && (\n        <CommandInput\n          placeholder={placeholder}\n          size={inputSize}\n          variant={inputVariant}\n          leftDecorator={\n            <MagnifyingGlassIcon aria-hidden size={16} weight=\"regular\" />\n          }\n          onValueChange={onSearchChange}\n        />\n      )}\n      <CommandList onScroll={handleScroll}>\n        {!loading && (\n          <CommandEmpty>\n            <Text variant=\"sm\">{emptyText}</Text>\n          </CommandEmpty>\n        )}\n        {items && renderItems(items)}\n        {groups?.map((group, i) => (\n          <Fragment key={group.heading ?? i}>\n            {i > 0 && <CommandSeparator />}\n            <CommandGroup heading={group.heading}>\n              {renderItems(group.items)}\n            </CommandGroup>\n          </Fragment>\n        ))}\n        {loading && (\n          <div className=\"flex flex-col gap-space-1 px-space-2 py-space-1\">\n            {Array.from({ length: loadingRows }, (_, i) => (\n              <div\n                key={i}\n                className=\"h-7 animate-pulse rounded-md bg-tertiary\"\n              />\n            ))}\n          </div>\n        )}\n      </CommandList>\n    </Command>\n  );\n}\n"],"mappings":";;;;;;;;;;AAuFA,SAAS,eAAe,EAAE,QAA0B;CAClD,MAAM,UAAU,OAAoB,IAAI;CACxC,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,gBAAgB;EACd,MAAM,KAAK,QAAQ;EACnB,IAAI,IACF,eAAe,GAAG,cAAc,GAAG,WAAW;CAElD,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAAC,SAAD;EAAS,OAAO,cAAc,OAAO,KAAA;EACnC,UAAA,oBAAC,MAAD;GAAM,KAAK;GAAS,IAAG;GAAO,WAAU;GACrC,UAAA;EACG,CAAA;CACC,CAAA;AAEb;AAEA,SAAgB,YAAY,EAC1B,OACA,QACA,UACA,OACA,cAAc,aACd,YAAY,qBACZ,YACA,wBAAwB,MACxB,eACA,gBACA,YACA,YAAY,MACZ,eAAe,SACf,WACA,UAAU,OACV,cAAc,GACd,cACA,wBAAwB,MACL;CACnB,MAAM,eAAe,aAClB,MAAqC;EACpC,IAAI,CAAC,cAAc;EACnB,MAAM,EAAE,WAAW,cAAc,iBAAiB,EAAE;EACpD,IAAI,eAAe,YAAY,gBAAgB,uBAC7C,aAAa;CAEjB,GACA,CAAC,cAAc,qBAAqB,CACtC;CAEA,MAAM,eAAe,cACnB,UAAU,KAAK,SAAS;EACtB,MAAM,aAAa,KAAK,UAAU;EAClC,MAAM,QAAQ,KAAK,SAAS,KAAK;EACjC,OACE,oBAAC,aAAD;GAEE,OAAO,KAAK;GACZ,UACE,KAAK,QAAQ,CAAC,KAAK,OAAO,GAAI,KAAK,YAAY,CAAC,CAAE,IAAI,KAAK;GAE7D,UAAU,KAAK;GACf,gBAAgB,SAAS,KAAK,KAAK;GACnC,WAAU;GAET,UAAA,aACC,WAAW,MAAM,UAAU,IAE3B,qBAAA,YAAA,EAAA,UAAA;IACG,yBACC,oBAAC,MAAD;KACE,MAAM;KACN,MAAK;KACL,WAAW,GACT,YACA,aAAa,gBAAgB,WAC/B;IACD,CAAA;IAEH,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,gBAAD,EAAgB,MAAM,MAAQ,CAAA,GAC7B,KAAK,eACJ,oBAAC,MAAD;MACE,IAAG;MACH,SAAQ;MACR,WAAU;MAET,UAAA,KAAK;KACF,CAAA,CAEL;;IACJ,KAAK,kBACJ,oBAAC,OAAD;KAAK,WAAU;KAAoB,UAAA,KAAK;IAAoB,CAAA;GAE9D,EAAA,CAAA;EAEO,GAxCN,KAAK,KAwCC;CAEjB,CAAC;CAEH,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,+BAA+B,SAAS;EACtD,cAAc,gBAAgB,QAAQ,KAAA;EAFxC,UAAA,CAIG,CAAC,cACA,oBAAC,cAAD;GACe;GACb,MAAM;GACN,SAAS;GACT,eACE,oBAAC,qBAAD;IAAqB,eAAA;IAAY,MAAM;IAAI,QAAO;GAAW,CAAA;GAE/D,eAAe;EAChB,CAAA,GAEH,qBAAC,aAAD;GAAa,UAAU;GAAvB,UAAA;IACG,CAAC,WACA,oBAAC,cAAD,EAAA,UACE,oBAAC,MAAD;KAAM,SAAQ;KAAM,UAAA;IAAgB,CAAA,EACxB,CAAA;IAEf,SAAS,YAAY,KAAK;IAC1B,QAAQ,KAAK,OAAO,MACnB,qBAAC,UAAD,EAAA,UAAA,CACG,IAAI,KAAK,oBAAC,kBAAD,CAAmB,CAAA,GAC7B,oBAAC,cAAD;KAAc,SAAS,MAAM;KAC1B,UAAA,YAAY,MAAM,KAAK;IACZ,CAAA,CACN,EAAA,GALK,MAAM,WAAW,CAKtB,CACX;IACA,WACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,YAAY,IAAI,GAAG,MACvC,oBAAC,OAAD,EAEE,WAAU,2CACX,GAFM,CAEN,CACF;IACE,CAAA;GAEI;EACN,CAAA,CAAA;;AAEb"}

package/dist/components/Command/index.d.ts

@@ -0,0 +1,4 @@
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from './Command.js';
+export type { CommandInputProps } from './Command.js';
+export { CommandMenu } from './CommandMenu.js';
+export type { CommandMenuGroup, CommandMenuItem, CommandMenuProps, } from './CommandMenu.js';

package/dist/components/Command/index.js

@@ -0,0 +1,3 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "./Command.js";
+import { CommandMenu } from "./CommandMenu.js";
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator };

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+export declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,43 @@
+import { cn } from "../../utils/cn.js";
+import zIndices from "../../utils/zIndices.js";
+import { useZIndex } from "../../utils/useZIndex.js";
+import { ZIndexProvider } from "../../utils/ZIndexContext.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+//#region packages/components/src/components/ContextMenu/ContextMenu.tsx
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuContent = React$1.forwardRef(({ className, children, ...props }, ref) => {
+	const zIndex = useZIndex(zIndices.popover);
+	return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
+		ref,
+		className: cn("min-w-[8rem] overflow-hidden rounded-md border border-default bg-elevated p-space-1 text-primary shadow-md", className),
+		...props,
+		style: {
+			zIndex,
+			...props.style
+		},
+		children: /* @__PURE__ */ jsx(ZIndexProvider, {
+			value: zIndex,
+			children
+		})
+	}) });
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React$1.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
+	ref,
+	className: cn("flex w-full cursor-default select-none items-center rounded-sm px-space-2 py-space-2 text-sm text-primary outline-none transition-colors focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[highlighted]:bg-elevated-hover data-[disabled]:opacity-50", inset ? "pl-space-8" : void 0, className),
+	...props
+}));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
+	ref,
+	className: cn("-mx-space-1 my-space-1 border-b border-subtle", className),
+	...props
+}));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+//#endregion
+export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu';\n\nimport { cn } from '../../utils/cn';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\n\nexport const ContextMenu = ContextMenuPrimitive.Root;\n\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\nexport const ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const zIndex = useZIndex(zIndices.popover);\n\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        ref={ref}\n        className={cn(\n          'min-w-[8rem] overflow-hidden rounded-md border border-default bg-elevated p-space-1 text-primary shadow-md',\n          className\n        )}\n        {...props}\n        style={{ zIndex, ...props.style }}\n      >\n        <ZIndexProvider value={zIndex}>{children}</ZIndexProvider>\n      </ContextMenuPrimitive.Content>\n    </ContextMenuPrimitive.Portal>\n  );\n});\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;\n\nexport const ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      'flex w-full cursor-default select-none items-center rounded-sm px-space-2 py-space-2 text-sm text-primary outline-none transition-colors focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[highlighted]:bg-elevated-hover data-[disabled]:opacity-50',\n      inset ? 'pl-space-8' : undefined,\n      className\n    )}\n    {...props}\n  />\n));\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\n\nexport const ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-space-1 my-space-1 border-b border-subtle', className)}\n    {...props}\n  />\n));\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;\n"],"mappings":";;;;;;;;AASA,IAAa,cAAc,qBAAqB;AAEhD,IAAa,qBAAqB,qBAAqB;AAEvD,IAAa,qBAAqB,QAAM,YAGrC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,MAAM,SAAS,UAAU,SAAS,OAAO;CAEzC,OACE,oBAAC,qBAAqB,QAAtB,EAAA,UACE,oBAAC,qBAAqB,SAAtB;EACO;EACL,WAAW,GACT,8GACA,SACF;EACA,GAAI;EACJ,OAAO;GAAE;GAAQ,GAAG,MAAM;EAAM;EAEhC,UAAA,oBAAC,gBAAD;GAAgB,OAAO;GAAS;EAAyB,CAAA;CAC7B,CAAA,EACH,CAAA;AAEjC,CAAC;AACD,mBAAmB,cAAc,qBAAqB,QAAQ;AAE9D,IAAa,kBAAkB,QAAM,YAKlC,EAAE,WAAW,OAAO,GAAG,SAAS,QACjC,oBAAC,qBAAqB,MAAtB;CACO;CACL,WAAW,GACT,wQACA,QAAQ,eAAe,KAAA,GACvB,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,gBAAgB,cAAc,qBAAqB,KAAK;AAExD,IAAa,uBAAuB,QAAM,YAGvC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,qBAAqB,WAAtB;CACO;CACL,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;AACL,CAAA,CACF;AACD,qBAAqB,cAAc,qBAAqB,UAAU"}

package/dist/components/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, } from './ContextMenu.js';

package/dist/components/ContextMenu/index.js

@@ -0,0 +1,2 @@
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "./ContextMenu.js";
+export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger };

package/dist/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type IconButtonProps } from '../IconButton/index.js';
+export interface CopyButtonProps {
+    copy: string;
+    variant?: 'full' | 'icon';
+    className?: string;
+    copyText?: string;
+    disabled?: boolean;
+    onCopy?: () => void;
+}
+export declare function CopyButton(props: CopyButtonProps): import("react").JSX.Element;
+export interface CopyIconButtonProps {
+    copy: string;
+    className?: string;
+    iconClassName?: string;
+    copyText?: ReactNode;
+    label?: string;
+    disabled?: boolean;
+    color?: IconButtonProps['color'];
+    size?: IconButtonProps['size'];
+    variant?: IconButtonProps['variant'];
+    onCopy?: () => void;
+}
+export declare function CopyIconButton(props: CopyIconButtonProps): import("react").JSX.Element;

package/dist/components/CopyButton/CopyButton.js

@@ -0,0 +1,121 @@
+import { Text } from "../Text/Text.js";
+import { CheckIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Button } from "../Button/Button.js";
+import { useCopy } from "./useCopy.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopySimpleIcon } from "@phosphor-icons/react/dist/ssr/CopySimple";
+//#region packages/components/src/components/CopyButton/CopyButton.tsx
+function CopyButton(props) {
+	const { copied, onCopy } = useCopy({ copy: props.copy });
+	if (props.variant === "icon") return /* @__PURE__ */ jsx(CopyIconButton, {
+		copy: props.copy,
+		copyText: props.copyText,
+		className: props.className,
+		disabled: props.disabled,
+		onCopy: props.onCopy
+	});
+	const CopyStatusIcon = copied ? CheckIcon : CopySimpleIcon;
+	return /* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		color: "secondary",
+		variant: "outlined",
+		"aria-label": copied ? "Copied" : props.copyText ?? "Copy",
+		onClick: (event) => {
+			event.stopPropagation();
+			onCopy();
+			props.onCopy?.();
+		},
+		className: props.className,
+		disabled: props.disabled,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "grid",
+			children: [
+				/* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					variant: "sm",
+					weight: "normal",
+					className: "invisible col-start-1 row-start-1 flex items-center gap-1 whitespace-nowrap",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "inline-flex size-4 shrink-0",
+						children: /* @__PURE__ */ jsx(CopySimpleIcon, {
+							size: "100%",
+							weight: "regular"
+						})
+					}), props.copyText ?? "Copy"]
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					variant: "sm",
+					weight: "normal",
+					className: "invisible col-start-1 row-start-1 flex items-center gap-1 whitespace-nowrap",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "inline-flex size-4 shrink-0",
+						children: /* @__PURE__ */ jsx(CheckIcon, {
+							size: "100%",
+							weight: "regular"
+						})
+					}), "Copied"]
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					variant: "sm",
+					weight: "normal",
+					className: "col-start-1 row-start-1 flex items-center justify-center gap-1 whitespace-nowrap",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "inline-flex size-4 shrink-0",
+						children: /* @__PURE__ */ jsx(CopyStatusIcon, {
+							size: "100%",
+							weight: "regular"
+						})
+					}), copied ? "Copied" : props.copyText ?? "Copy"]
+				})
+			]
+		})
+	});
+}
+function getCopyLabel(copyText, label) {
+	if (label) return label;
+	return typeof copyText === "string" ? copyText : "Copy";
+}
+function CopyIconButton(props) {
+	const { copied, onCopy } = useCopy({ copy: props.copy });
+	const [tooltipOpen, setTooltipOpen] = useState(false);
+	const copyLabel = getCopyLabel(props.copyText, props.label);
+	const tooltipTitle = props.copyText ?? copyLabel;
+	return /* @__PURE__ */ jsx(IconButton, {
+		onClick: (e) => {
+			e.stopPropagation();
+			onCopy();
+			props.onCopy?.();
+		},
+		disabled: props.disabled,
+		icon: copied ? CheckIcon : CopySimpleIcon,
+		label: copied ? "Copied" : copyLabel,
+		tooltipProps: {
+			title: copied ? "Copied" : tooltipTitle,
+			side: "top",
+			open: tooltipOpen,
+			onOpenChange: (open) => {
+				if (open) setTooltipOpen(true);
+			}
+		},
+		variant: props.variant ?? "plain",
+		color: props.color ?? "secondary",
+		size: props.size ?? "sm",
+		className: props.className,
+		iconClassName: props.iconClassName,
+		onMouseLeave: () => setTooltipOpen(false),
+		onBlur: () => setTooltipOpen(false)
+	});
+}
+//#endregion
+export { CopyButton, CopyIconButton };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/components/CopyButton/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport { CopySimpleIcon } from '@phosphor-icons/react/dist/ssr/CopySimple';\n\nimport { CheckIcon } from '../../icons/PaddedPhosphorIcons';\nimport { Button } from '../Button';\nimport { IconButton, type IconButtonProps } from '../IconButton';\nimport { Text } from '../Text';\nimport { useCopy } from './useCopy';\n\nexport interface CopyButtonProps {\n  copy: string;\n  variant?: 'full' | 'icon';\n  className?: string;\n  copyText?: string;\n  disabled?: boolean;\n  onCopy?: () => void;\n}\n\nexport function CopyButton(props: CopyButtonProps) {\n  const { copied, onCopy } = useCopy({ copy: props.copy });\n\n  if (props.variant === 'icon') {\n    return (\n      <CopyIconButton\n        copy={props.copy}\n        copyText={props.copyText}\n        className={props.className}\n        disabled={props.disabled}\n        onCopy={props.onCopy}\n      />\n    );\n  }\n\n  const CopyStatusIcon = copied ? CheckIcon : CopySimpleIcon;\n\n  return (\n    <Button\n      size=\"sm\"\n      color=\"secondary\"\n      variant=\"outlined\"\n      aria-label={copied ? 'Copied' : (props.copyText ?? 'Copy')}\n      onClick={(event) => {\n        event.stopPropagation();\n        onCopy();\n        props.onCopy?.();\n      }}\n      className={props.className}\n      disabled={props.disabled}\n    >\n      <span className=\"grid\">\n        {/* Both states rendered invisibly so the grid cell is always wide enough for either */}\n        <Text\n          as=\"span\"\n          variant=\"sm\"\n          weight=\"normal\"\n          className=\"invisible col-start-1 row-start-1 flex items-center gap-1 whitespace-nowrap\"\n          aria-hidden\n        >\n          <span aria-hidden className=\"inline-flex size-4 shrink-0\">\n            <CopySimpleIcon size=\"100%\" weight=\"regular\" />\n          </span>\n          {props.copyText ?? 'Copy'}\n        </Text>\n        <Text\n          as=\"span\"\n          variant=\"sm\"\n          weight=\"normal\"\n          className=\"invisible col-start-1 row-start-1 flex items-center gap-1 whitespace-nowrap\"\n          aria-hidden\n        >\n          <span aria-hidden className=\"inline-flex size-4 shrink-0\">\n            <CheckIcon size=\"100%\" weight=\"regular\" />\n          </span>\n          Copied\n        </Text>\n        <Text\n          as=\"span\"\n          variant=\"sm\"\n          weight=\"normal\"\n          className=\"col-start-1 row-start-1 flex items-center justify-center gap-1 whitespace-nowrap\"\n        >\n          <span aria-hidden className=\"inline-flex size-4 shrink-0\">\n            <CopyStatusIcon size=\"100%\" weight=\"regular\" />\n          </span>\n          {copied ? 'Copied' : (props.copyText ?? 'Copy')}\n        </Text>\n      </span>\n    </Button>\n  );\n}\n\nexport interface CopyIconButtonProps {\n  copy: string;\n  className?: string;\n  iconClassName?: string;\n  copyText?: ReactNode;\n  label?: string;\n  disabled?: boolean;\n  color?: IconButtonProps['color'];\n  size?: IconButtonProps['size'];\n  variant?: IconButtonProps['variant'];\n  onCopy?: () => void;\n}\n\nfunction getCopyLabel(copyText: ReactNode, label?: string) {\n  if (label) return label;\n  return typeof copyText === 'string' ? copyText : 'Copy';\n}\n\nexport function CopyIconButton(props: CopyIconButtonProps) {\n  const { copied, onCopy } = useCopy({ copy: props.copy });\n  const [tooltipOpen, setTooltipOpen] = useState(false);\n  const copyLabel = getCopyLabel(props.copyText, props.label);\n  const tooltipTitle = props.copyText ?? copyLabel;\n\n  return (\n    <IconButton\n      onClick={(e) => {\n        e.stopPropagation();\n        onCopy();\n        props.onCopy?.();\n      }}\n      disabled={props.disabled}\n      icon={copied ? CheckIcon : CopySimpleIcon}\n      label={copied ? 'Copied' : copyLabel}\n      tooltipProps={{\n        title: copied ? 'Copied' : tooltipTitle,\n        side: 'top',\n        open: tooltipOpen,\n        onOpenChange: (open) => {\n          if (open) setTooltipOpen(true);\n        },\n      }}\n      variant={props.variant ?? 'plain'}\n      color={props.color ?? 'secondary'}\n      size={props.size ?? 'sm'}\n      className={props.className}\n      iconClassName={props.iconClassName}\n      onMouseLeave={() => setTooltipOpen(false)}\n      onBlur={() => setTooltipOpen(false)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,WAAW,OAAwB;CACjD,MAAM,EAAE,QAAQ,WAAW,QAAQ,EAAE,MAAM,MAAM,KAAK,CAAC;CAEvD,IAAI,MAAM,YAAY,QACpB,OACE,oBAAC,gBAAD;EACE,MAAM,MAAM;EACZ,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;EAChB,QAAQ,MAAM;CACf,CAAA;CAIL,MAAM,iBAAiB,SAAS,YAAY;CAE5C,OACE,oBAAC,QAAD;EACE,MAAK;EACL,OAAM;EACN,SAAQ;EACR,cAAY,SAAS,WAAY,MAAM,YAAY;EACnD,UAAU,UAAU;GAClB,MAAM,gBAAgB;GACtB,OAAO;GACP,MAAM,SAAS;EACjB;EACA,WAAW,MAAM;EACjB,UAAU,MAAM;EAEhB,UAAA,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IAEE,qBAAC,MAAD;KACE,IAAG;KACH,SAAQ;KACR,QAAO;KACP,WAAU;KACV,eAAA;KALF,UAAA,CAOE,oBAAC,QAAD;MAAM,eAAA;MAAY,WAAU;MAC1B,UAAA,oBAAC,gBAAD;OAAgB,MAAK;OAAO,QAAO;MAAW,CAAA;KAC1C,CAAA,GACL,MAAM,YAAY,MACf;;IACN,qBAAC,MAAD;KACE,IAAG;KACH,SAAQ;KACR,QAAO;KACP,WAAU;KACV,eAAA;KALF,UAAA,CAOE,oBAAC,QAAD;MAAM,eAAA;MAAY,WAAU;MAC1B,UAAA,oBAAC,WAAD;OAAW,MAAK;OAAO,QAAO;MAAW,CAAA;KACrC,CAAA,GAAC,QAEH;;IACN,qBAAC,MAAD;KACE,IAAG;KACH,SAAQ;KACR,QAAO;KACP,WAAU;KAJZ,UAAA,CAME,oBAAC,QAAD;MAAM,eAAA;MAAY,WAAU;MAC1B,UAAA,oBAAC,gBAAD;OAAgB,MAAK;OAAO,QAAO;MAAW,CAAA;KAC1C,CAAA,GACL,SAAS,WAAY,MAAM,YAAY,MACpC;;GACF;;CACA,CAAA;AAEZ;AAeA,SAAS,aAAa,UAAqB,OAAgB;CACzD,IAAI,OAAO,OAAO;CAClB,OAAO,OAAO,aAAa,WAAW,WAAW;AACnD;AAEA,SAAgB,eAAe,OAA4B;CACzD,MAAM,EAAE,QAAQ,WAAW,QAAQ,EAAE,MAAM,MAAM,KAAK,CAAC;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,YAAY,aAAa,MAAM,UAAU,MAAM,KAAK;CAC1D,MAAM,eAAe,MAAM,YAAY;CAEvC,OACE,oBAAC,YAAD;EACE,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,OAAO;GACP,MAAM,SAAS;EACjB;EACA,UAAU,MAAM;EAChB,MAAM,SAAS,YAAY;EAC3B,OAAO,SAAS,WAAW;EAC3B,cAAc;GACZ,OAAO,SAAS,WAAW;GAC3B,MAAM;GACN,MAAM;GACN,eAAe,SAAS;IACtB,IAAI,MAAM,eAAe,IAAI;GAC/B;EACF;EACA,SAAS,MAAM,WAAW;EAC1B,OAAO,MAAM,SAAS;EACtB,MAAM,MAAM,QAAQ;EACpB,WAAW,MAAM;EACjB,eAAe,MAAM;EACrB,oBAAoB,eAAe,KAAK;EACxC,cAAc,eAAe,KAAK;CACnC,CAAA;AAEL"}

package/dist/components/CopyButton/copyToClipboard.d.ts

@@ -0,0 +1 @@
+export declare function copyToClipboard(textToCopy: string | undefined): Promise<void>;