@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/command-menu/command-menu.styles.d.ts

@@ -0,0 +1,105 @@
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/command-menu/command-menu.styles.d.ts
+export declare const commandMenuStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      search?: import("tailwind-variants").ClassValue;
+      empty?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      input?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      overlay?: import("tailwind-variants").ClassValue;
+      itemIcon?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      shortcut?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      search?: import("tailwind-variants").ClassValue;
+      empty?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      input?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      overlay?: import("tailwind-variants").ClassValue;
+      itemIcon?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      shortcut?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  overlay: string[];
+  content: string[];
+  root: string;
+  search: string;
+  input: string;
+  list: string;
+  empty: string;
+  group: string[];
+  item: string[];
+  itemIcon: string;
+  itemLabel: string;
+  shortcut: string;
+  separator: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      search?: import("tailwind-variants").ClassValue;
+      empty?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      input?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      overlay?: import("tailwind-variants").ClassValue;
+      itemIcon?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      shortcut?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  overlay: string[];
+  content: string[];
+  root: string;
+  search: string;
+  input: string;
+  list: string;
+  empty: string;
+  group: string[];
+  item: string[];
+  itemIcon: string;
+  itemLabel: string;
+  shortcut: string;
+  separator: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  overlay: string[];
+  content: string[];
+  root: string;
+  search: string;
+  input: string;
+  list: string;
+  empty: string;
+  group: string[];
+  item: string[];
+  itemIcon: string;
+  itemLabel: string;
+  shortcut: string;
+  separator: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    CommandMenu: StylesEntry<typeof commandMenuStyles>;
+  }
+}
+//#endregion

package/dist/components/command-menu/command-menu.styles.js

@@ -0,0 +1,30 @@
+"use client";
+import { overlayMotion, themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/command-menu/command-menu.styles.ts
+const commandMenuStyles = /* @__PURE__ */ tv({ slots: {
+	overlay: ["fixed inset-0 z-50 bg-overlay", overlayMotion],
+	content: [
+		"fixed top-[12vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border-border bg-raised text-foreground shadow-lg outline-none",
+		"origin-top animate-pop-in data-[state=closed]:animate-pop-out",
+		themedBorder
+	],
+	root: "flex w-full flex-col overflow-hidden bg-raised text-foreground",
+	search: "flex items-center gap-2.5 border-b border-border px-4 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+	input: "h-12 w-full min-w-0 bg-transparent text-body text-foreground outline-none placeholder:text-faint-foreground",
+	list: "max-h-[min(24rem,60vh)] overflow-y-auto overscroll-contain p-2",
+	empty: "py-10 text-center text-small text-muted-foreground",
+	group: [
+		"overflow-hidden",
+		"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1",
+		"[&_[cmdk-group-heading]]:font-mono [&_[cmdk-group-heading]]:text-caption [&_[cmdk-group-heading]]:uppercase",
+		"[&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-faint-foreground"
+	],
+	item: ["relative flex h-10 cursor-pointer select-none items-center gap-3 rounded-md px-2.5 text-small text-foreground outline-none", "data-[selected=true]:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"],
+	itemIcon: "flex size-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4",
+	itemLabel: "min-w-0 flex-1 truncate",
+	shortcut: "ml-auto flex shrink-0 items-center gap-1",
+	separator: "-mx-2 my-1.5 h-px bg-border"
+} });
+//#endregion
+export { commandMenuStyles };

package/dist/components/command-menu/index.d.ts

@@ -0,0 +1,3 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandItemProps, CommandList, CommandMenu, CommandMenuProps, CommandSeparator, useCommandMenuShortcut } from "./command-menu.js";
+import { commandMenuStyles } from "./command-menu.styles.js";
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandMenu, type CommandMenuProps, CommandSeparator, commandMenuStyles, useCommandMenuShortcut };

package/dist/components/container/container.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from "../../utils/tv.js";
+import { ComponentProps } from "react";
+//#region src/components/container/container.d.ts
+export declare const containerStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: "max-w-2xl";
+    md: "max-w-3xl";
+    lg: "max-w-5xl";
+    xl: "max-w-7xl";
+    full: "max-w-none";
+  };
+}, undefined, "mx-auto w-full px-4 sm:px-6", {
+  size: {
+    sm: "max-w-2xl";
+    md: "max-w-3xl";
+    lg: "max-w-5xl";
+    xl: "max-w-7xl";
+    full: "max-w-none";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: "max-w-2xl";
+    md: "max-w-3xl";
+    lg: "max-w-5xl";
+    xl: "max-w-7xl";
+    full: "max-w-none";
+  };
+}, undefined>>;
+export interface ContainerProps extends ComponentProps<'div'>, VariantProps<typeof containerStyles> {
+  asChild?: boolean;
+}
+/** Centers content at a readable max width with consistent side gutters. */
+export declare function Container({ size, asChild, className, ...props }: ContainerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/container/container.js

@@ -0,0 +1,30 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/container.tsx
+const containerStyles = /* @__PURE__ */ tv({
+	base: "mx-auto w-full px-4 sm:px-6",
+	variants: { size: {
+		sm: "max-w-2xl",
+		md: "max-w-3xl",
+		lg: "max-w-5xl",
+		xl: "max-w-7xl",
+		full: "max-w-none"
+	} },
+	defaultVariants: { size: "xl" }
+});
+/** Centers content at a readable max width with consistent side gutters. */
+function Container({ size, asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "container",
+		className: containerStyles({
+			size,
+			class: className
+		}),
+		...props
+	});
+}
+//#endregion
+export { Container, containerStyles };

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

@@ -0,0 +1,2 @@
+import { Container, ContainerProps, containerStyles } from "./container.js";
+export { Container, type ContainerProps, containerStyles };

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,34 @@
+import { ContextMenu } from "radix-ui";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/context-menu/context-menu.d.ts
+/** A menu opened by right-click or long-press on an area. Same items as DropdownMenu. */
+declare const ContextMenu$1: import("react").FC<ContextMenu.ContextMenuProps>;
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSub: import("react").FC<ContextMenu.ContextMenuSubProps>;
+export declare function ContextMenuContent(inProps: ComponentProps<typeof ContextMenu.Content>): import("react").JSX.Element;
+export interface ContextMenuItemProps extends ComponentProps<typeof ContextMenu.Item> {
+  icon?: ReactNode;
+  /** Keyboard hint shown at the end, e.g. "⌘C". Display only. */
+  shortcut?: ReactNode;
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger';
+  /** Indent to line up with checkbox and radio items. */
+  inset?: boolean;
+}
+export declare function ContextMenuItem({ icon, shortcut, tone, inset, className, children, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+export declare function ContextMenuCheckboxItem({ className, children, ...props }: ComponentProps<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
+export declare function ContextMenuRadioItem({ className, children, ...props }: ComponentProps<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
+export declare function ContextMenuLabel({ inset, className, ...props }: ComponentProps<typeof ContextMenu.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+export declare function ContextMenuSeparator({ className, ...props }: ComponentProps<typeof ContextMenu.Separator>): import("react").JSX.Element;
+export declare function ContextMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export interface ContextMenuSubTriggerProps extends ComponentProps<typeof ContextMenu.SubTrigger> {
+  icon?: ReactNode;
+}
+export declare function ContextMenuSubTrigger({ icon, className, children, ...props }: ContextMenuSubTriggerProps): import("react").JSX.Element;
+export declare function ContextMenuSubContent({ className, ...props }: ComponentProps<typeof ContextMenu.SubContent>): import("react").JSX.Element;
+//#endregion
+export { ContextMenu$1 as ContextMenu };

package/dist/components/context-menu/context-menu.js

@@ -0,0 +1,157 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { contextMenuStyles } from "./context-menu.styles.js";
+import { ContextMenu } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/context-menu/context-menu.tsx
+function useParts(tone, inset) {
+	const [, slots] = useComponentConfig("ContextMenu", {});
+	return {
+		s: contextMenuStyles({
+			tone,
+			inset
+		}),
+		slots
+	};
+}
+const svg = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const DotIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4",
+		fill: "currentColor"
+	})
+});
+const ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+/** A menu opened by right-click or long-press on an area. Same items as DropdownMenu. */
+const ContextMenu$1 = ContextMenu.Root;
+const ContextMenuTrigger = ContextMenu.Trigger;
+const ContextMenuGroup = ContextMenu.Group;
+const ContextMenuRadioGroup = ContextMenu.RadioGroup;
+const ContextMenuSub = ContextMenu.Sub;
+function ContextMenuContent(inProps) {
+	const [props, slots] = useComponentConfig("ContextMenu", inProps);
+	const { className, ...rest } = props;
+	const s = contextMenuStyles();
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Content, {
+		"data-slot": "context-menu-content",
+		className: s.content({ class: [slots.content, className] }),
+		...rest
+	}) });
+}
+function ContextMenuItem({ icon, shortcut, tone, inset, className, children, ...props }) {
+	const { s, slots } = useParts(tone, inset);
+	return /* @__PURE__ */ jsxs(ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		"data-tone": tone ?? "default",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			children,
+			shortcut && /* @__PURE__ */ jsx(ContextMenuShortcut, { children: shortcut })
+		]
+	});
+}
+function ContextMenuCheckboxItem({ className, children, ...props }) {
+	const { s, slots } = useParts(void 0, true);
+	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+	const { s, slots } = useParts(void 0, true);
+	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuLabel({ inset, className, ...props }) {
+	const { s, slots } = useParts(void 0, inset);
+	return /* @__PURE__ */ jsx(ContextMenu.Label, {
+		"data-slot": "context-menu-label",
+		className: s.label({ class: [slots.label, className] }),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: s.shortcut({ class: [slots.shortcut, className] }),
+		...props
+	});
+}
+function ContextMenuSubTrigger({ icon, className, children, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsxs(ContextMenu.SubTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		className: s.subTrigger({ class: [slots.subTrigger, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			children,
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-auto flex text-faint-foreground",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
+	});
+}
+function ContextMenuSubContent({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.SubContent, {
+		"data-slot": "context-menu-sub-content",
+		className: s.subContent({ class: [slots.subContent, className] }),
+		...props
+	}) });
+}
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/components/context-menu/context-menu.styles.d.ts

@@ -0,0 +1,135 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/context-menu/context-menu.styles.d.ts
+/** Same look as DropdownMenu; only the available-height variable differs. */
+export declare const contextMenuStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+      subContent?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  tone: {
+    default: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+      subContent?: import("tailwind-variants").ClassValue;
+    };
+    danger: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+      subContent?: import("tailwind-variants").ClassValue;
+    };
+  };
+  inset: {
+    true: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+      subContent?: import("tailwind-variants").ClassValue;
+    };
+  };
+}, {
+  content: string;
+  subContent: string;
+}, undefined, {
+  tone: {
+    default: {};
+    danger: {
+      item: string;
+      icon: string;
+    };
+  };
+  inset: {
+    true: {
+      item: string;
+      label: string;
+    };
+  };
+}, {
+  content: string[];
+  item: string[];
+  icon: string;
+  indicator: string;
+  label: string;
+  separator: string;
+  shortcut: string;
+  subTrigger: string[];
+  subContent: string[];
+}, import("tailwind-variants").TVReturnType<{
+  tone: {
+    default: {};
+    danger: {
+      item: string;
+      icon: string;
+    };
+  };
+  inset: {
+    true: {
+      item: string;
+      label: string;
+    };
+  };
+}, {
+  content: string[];
+  item: string[];
+  icon: string;
+  indicator: string;
+  label: string;
+  separator: string;
+  shortcut: string;
+  subTrigger: string[];
+  subContent: string[];
+}, undefined, {
+  tone: {
+    default: {};
+    danger: {
+      item: string;
+      icon: string;
+    };
+  };
+  inset: {
+    true: {
+      item: string;
+      label: string;
+    };
+  };
+}, {
+  content: string[];
+  item: string[];
+  icon: string;
+  indicator: string;
+  label: string;
+  separator: string;
+  shortcut: string;
+  subTrigger: string[];
+  subContent: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    default: {};
+    danger: {
+      item: string;
+      icon: string;
+    };
+  };
+  inset: {
+    true: {
+      item: string;
+      label: string;
+    };
+  };
+}, {
+  content: string[];
+  item: string[];
+  icon: string;
+  indicator: string;
+  label: string;
+  separator: string;
+  shortcut: string;
+  subTrigger: string[];
+  subContent: string[];
+}>>>;
+export type ContextMenuVariants = VariantProps<typeof contextMenuStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    ContextMenu: StylesEntry<typeof contextMenuStyles>;
+  }
+}
+//#endregion

package/dist/components/context-menu/context-menu.styles.js

@@ -0,0 +1,14 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+import { dropdownMenuStyles } from "../dropdown-menu/dropdown-menu.styles.js";
+//#region src/components/context-menu/context-menu.styles.ts
+/** Same look as DropdownMenu; only the available-height variable differs. */
+const contextMenuStyles = /* @__PURE__ */ tv({
+	extend: dropdownMenuStyles,
+	slots: {
+		content: "origin-(--radix-context-menu-content-transform-origin) max-h-(--radix-context-menu-content-available-height)",
+		subContent: "origin-(--radix-context-menu-content-transform-origin)"
+	}
+});
+//#endregion
+export { contextMenuStyles };

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,3 @@
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuSubTriggerProps, ContextMenuTrigger } from "./context-menu.js";
+import { ContextMenuVariants, contextMenuStyles } from "./context-menu.styles.js";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuVariants, contextMenuStyles };

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

@@ -0,0 +1,61 @@
+import { StylesEntry } from "../../utils/registry.js";
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { ReactNode } from "react";
+//#region src/components/copy-button/copy-button.d.ts
+export declare const copyButtonStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      status?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      status?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+  icon: string;
+  status: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      status?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+  icon: string;
+  status: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+  icon: string;
+  status: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    CopyButton: StylesEntry<typeof copyButtonStyles>;
+  }
+}
+export interface CopyButtonProps extends Omit<ButtonProps, 'onClick' | 'onCopy' | 'leftIcon' | 'rightIcon' | 'iconOnly' | 'asChild' | 'value'> {
+  /** Text written to the clipboard. */
+  value: string;
+  /** Visible label. Without it the button is icon-only, labelled "Copy". */
+  children?: ReactNode;
+  /** Announced and shown after copying. Default "Copied". */
+  copiedLabel?: string;
+  /** How long the copied state lasts, in ms. Default 1500. */
+  timeout?: number;
+  onCopy?: (value: string) => void;
+}
+/** Copies a value to the clipboard and confirms it visually and to screen readers. */
+export declare function CopyButton(inProps: CopyButtonProps): import("react").JSX.Element;
+//#endregion