xiod-ui 1.0.0

package/dist/components/copy-to-clipboard.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/copy-to-clipboard.d.ts
+export declare const copyToClipboardVariants: (props?: ({
+  size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CopyToClipboardProps extends useRender.ComponentProps<"div">, VariantProps<typeof copyToClipboardVariants> {
+  /** The text to display in the field */
+  text: string;
+  /**
+   * If provided, this text will be copied to clipboard instead of the `text` prop.
+   */
+  textToCopy?: string;
+  /**
+   * Text shown in the tooltip on hover.
+   * @default "Copy"
+   */
+  tooltipText?: string;
+  /**
+   * Text shown in the toast after copying.
+   * @default "Copied!"
+   */
+  copiedText?: string;
+  /**
+   * Disable the tooltip entirely.
+   * @default false
+   */
+  disableTooltip?: boolean;
+}
+export declare function CopyToClipboard({ className, size, text, textToCopy, tooltipText, copiedText, disableTooltip, render, ...props }: CopyToClipboardProps): React$1.ReactElement;
+//#endregion

package/dist/components/copy-to-clipboard.js

@@ -0,0 +1,83 @@
+"use client";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
+import { anchoredToastManager } from "./toast.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { Check } from "xiod-icons/icons/Check";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Copy } from "xiod-icons/icons/Copy";
+//#region src/components/copy-to-clipboard.tsx
+const copyToClipboardVariants = cva("relative inline-flex w-fit max-w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/24 sm:text-sm dark:bg-input/32 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", {
+	variants: { size: {
+		default: "h-8.5 sm:h-7.5",
+		sm: "h-7.5 sm:h-6.5",
+		lg: "h-9.5 sm:h-8.5"
+	} },
+	defaultVariants: { size: "default" }
+});
+function CopyToClipboard({ className, size = "default", text, textToCopy, tooltipText = "Copy", copiedText = "Copied!", disableTooltip = false, render, ...props }) {
+	const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 2e3 });
+	const buttonRef = React$1.useRef(null);
+	const valueToCopy = textToCopy ?? text;
+	const handleCopy = React$1.useCallback(() => {
+		copyToClipboard(valueToCopy);
+		if (buttonRef.current) anchoredToastManager.add({
+			description: copiedText,
+			positionerProps: {
+				anchor: buttonRef.current,
+				side: "top",
+				sideOffset: 8
+			},
+			data: { tooltipStyle: true },
+			timeout: 2e3
+		});
+	}, [
+		copyToClipboard,
+		valueToCopy,
+		copiedText
+	]);
+	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: cn("absolute inset-0 flex items-center justify-center transition-[transform,opacity] duration-200", isCopied ? "translate-y-0 opacity-100" : "translate-y-full opacity-0 pointer-events-none"),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" })
+	}), /* @__PURE__ */ jsx("span", {
+		className: cn("absolute inset-0 flex items-center justify-center transition-[transform,opacity] duration-200", isCopied ? "-translate-y-full opacity-0 pointer-events-none" : "translate-y-0 opacity-100"),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(Copy, { className: "size-4 text-muted-foreground transition-colors group-hover/btn:text-foreground" })
+	})] });
+	const buttonElement = /* @__PURE__ */ jsx("button", {
+		ref: buttonRef,
+		type: "button",
+		onClick: handleCopy,
+		"aria-label": tooltipText,
+		className: cn("group/btn relative isolate flex aspect-square h-full items-center justify-center overflow-hidden rounded-r-[calc(var(--radius-lg)-1px)] border-l border-border text-muted-foreground transition-[color,background-color,box-shadow] hover:bg-accent hover:text-accent-foreground focus-visible:-outline-offset-1 focus-visible:outline-ring pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"),
+		children: buttonContent
+	});
+	const wrappedButton = disableTooltip ? buttonElement : /* @__PURE__ */ jsx(TooltipProvider, {
+		delay: 200,
+		children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: buttonElement }), /* @__PURE__ */ jsx(TooltipPopup, {
+			side: "top",
+			sideOffset: 8,
+			children: tooltipText
+		})] })
+	});
+	const defaultProps = {
+		className: cn(copyToClipboardVariants({ size }), className),
+		"data-slot": "copy-to-clipboard"
+	};
+	const wrapperProps = mergeProps(defaultProps, props, { children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "flex-1 truncate ps-[calc(--spacing(3)-1px)] pe-3 font-mono text-[0.875em] text-foreground sm:ps-[calc(--spacing(2.5)-1px)]",
+		children: text
+	}), wrappedButton] }) });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: wrapperProps
+	});
+}
+//#endregion
+export { CopyToClipboard, copyToClipboardVariants };

package/dist/components/corner-badge.d.ts

@@ -0,0 +1,22 @@
+import { badgeVariants } from "./badge.js";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/corner-badge.d.ts
+declare const cornerBadgeVariants: (props?: ({
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
+  overlap?: "rectangle" | "circular" | null | undefined;
+  dot?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CornerBadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"];
+  size?: VariantProps<typeof badgeVariants>["size"];
+  position?: VariantProps<typeof cornerBadgeVariants>["position"];
+  overlap?: VariantProps<typeof cornerBadgeVariants>["overlap"];
+  dot?: boolean;
+  invisible?: boolean;
+}
+declare function CornerBadge({ className, variant, size, position, overlap, dot, invisible, render, ...props }: CornerBadgeProps): React$1.ReactElement;
+declare function CornerBadgeAnchor({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+//#endregion
+export { CornerBadge, CornerBadgeAnchor, cornerBadgeVariants };

package/dist/components/corner-badge.js

@@ -0,0 +1,84 @@
+"use client";
+import { badgeVariants } from "./badge.js";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/corner-badge.tsx
+const cornerBadgeVariants = cva("absolute z-10 flex origin-center items-center justify-center whitespace-nowrap transition-[transform,opacity,scale] duration-200 ring-2 ring-background data-invisible:scale-0 data-invisible:opacity-0", {
+	variants: {
+		position: {
+			"top-right": "top-0 right-0 -translate-y-1/2 translate-x-1/2",
+			"top-left": "top-0 left-0 -translate-y-1/2 -translate-x-1/2",
+			"bottom-right": "bottom-0 right-0 translate-y-1/2 translate-x-1/2",
+			"bottom-left": "bottom-0 left-0 translate-y-1/2 -translate-x-1/2"
+		},
+		overlap: {
+			rectangle: "",
+			circular: ""
+		},
+		dot: {
+			true: "size-3 min-w-3 p-0 sm:size-2.5 sm:min-w-2.5 rounded-full [&_svg]:hidden",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			position: "top-right",
+			overlap: "circular",
+			className: "top-[14.6%] right-[14.6%] -translate-y-1/2 translate-x-1/2"
+		},
+		{
+			position: "top-left",
+			overlap: "circular",
+			className: "top-[14.6%] left-[14.6%] -translate-y-1/2 -translate-x-1/2"
+		},
+		{
+			position: "bottom-right",
+			overlap: "circular",
+			className: "bottom-[14.6%] right-[14.6%] translate-y-1/2 translate-x-1/2"
+		},
+		{
+			position: "bottom-left",
+			overlap: "circular",
+			className: "bottom-[14.6%] left-[14.6%] translate-y-1/2 -translate-x-1/2"
+		}
+	],
+	defaultVariants: {
+		position: "top-right",
+		overlap: "rectangle",
+		dot: false
+	}
+});
+function CornerBadge({ className, variant, size, position, overlap, dot, invisible, render, ...props }) {
+	const defaultProps = {
+		className: cn(badgeVariants({
+			variant,
+			size
+		}), cornerBadgeVariants({
+			position,
+			overlap,
+			dot
+		}), className),
+		"data-invisible": invisible,
+		"data-slot": "corner-badge"
+	};
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CornerBadgeAnchor({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("relative inline-flex shrink-0 align-middle", className),
+		"data-slot": "corner-badge-anchor"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { CornerBadge, CornerBadgeAnchor, cornerBadgeVariants };

package/dist/components/dashboard-grid.d.ts

@@ -0,0 +1,83 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/dashboard-grid.d.ts
+export interface DashboardTileData {
+  i: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  minW?: number;
+  maxW?: number;
+  minH?: number;
+  maxH?: number;
+  static?: boolean;
+  isDraggable?: boolean;
+  isResizable?: boolean;
+}
+export type CompactType = "vertical" | "horizontal" | null;
+export interface Breakpoints {
+  lg?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+  xxs?: number;
+}
+export interface BreakpointCols {
+  lg?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+  xxs?: number;
+}
+export declare const defaultBreakpoints: Required<Breakpoints>;
+export declare const defaultCols: Required<BreakpointCols>;
+export declare const dashboardGridVariants: (props?: ({
+  variant?: "default" | "ghost" | "canvas" | "bordered" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const dashboardTileVariants: (props?: ({
+  variant?: "default" | "expressive" | "flat" | null | undefined;
+  isDragging?: boolean | null | undefined;
+  isResizing?: boolean | null | undefined;
+  isStatic?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function compactLayout(layout: DashboardTileData[], compactType: CompactType, cols: number): DashboardTileData[];
+export interface DashboardGridProps extends useRender.ComponentProps<"div">, VariantProps<typeof dashboardGridVariants> {
+  layout: DashboardTileData[];
+  cols?: number | BreakpointCols;
+  breakpoints?: Breakpoints;
+  rowHeight?: number;
+  margin?: [number, number];
+  containerPadding?: [number, number];
+  compactType?: CompactType;
+  preventCollision?: boolean;
+  isDraggable?: boolean;
+  isResizable?: boolean;
+  showGridLines?: boolean;
+  onLayoutChange?: (layout: DashboardTileData[]) => void;
+  onTileRemove?: (id: string) => void;
+}
+declare function DashboardGrid({ className, variant, layout: externalLayout, cols: colsProp, breakpoints, rowHeight, margin, containerPadding, compactType, preventCollision, isDraggable, isResizable, showGridLines, onLayoutChange, onTileRemove, render, children, ...props }: DashboardGridProps): React$1.ReactElement;
+export interface DashboardTileProps extends useRender.ComponentProps<"div">, VariantProps<typeof dashboardTileVariants> {
+  id: string;
+}
+declare function DashboardTile({ className, variant, id, render, children, ...props }: DashboardTileProps): React$1.ReactElement | null;
+export interface DashboardTileHeaderProps extends useRender.ComponentProps<"div"> {
+  id?: string;
+}
+declare function DashboardTileHeader({ className, id, render, children, ...props }: DashboardTileHeaderProps): React$1.ReactElement;
+export interface DashboardTileTitleProps extends useRender.ComponentProps<"span"> {}
+declare function DashboardTileTitle({ className, render, children, ...props }: DashboardTileTitleProps): React$1.ReactElement;
+export interface DashboardTileControlsProps extends useRender.ComponentProps<"div"> {
+  id?: string;
+}
+declare function DashboardTileControls({ className, id, render, children, ...props }: DashboardTileControlsProps): React$1.ReactElement;
+export interface DashboardTileHandleProps extends useRender.ComponentProps<"div"> {
+  id?: string;
+}
+declare function DashboardTileHandle({ className, id, render, ...props }: DashboardTileHandleProps): React$1.ReactElement;
+export interface DashboardTileResizeHandleProps extends useRender.ComponentProps<"div"> {}
+declare function DashboardTileResizeHandle({ className, render, ...props }: DashboardTileResizeHandleProps): React$1.ReactElement;
+//#endregion
+export { DashboardGrid, DashboardTile, DashboardTileControls, DashboardTileHandle, DashboardTileHeader, DashboardTileResizeHandle, DashboardTileTitle };