xiod-ui 1.0.0

package/dist/components/input-sensitive.js

@@ -0,0 +1,169 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Check } from "xiod-icons/icons/Check";
+import { Input } from "@base-ui/react/input";
+import { Copy } from "xiod-icons/icons/Copy";
+import { Eye } from "xiod-icons/icons/Eye";
+import { EyeOff } from "xiod-icons/icons/EyeOff";
+//#region src/components/input-sensitive.tsx
+function InputSensitive({ className, size = "default", onCopy, onChange, onBlur, onKeyDown, disabled, readOnly, ...props }) {
+	const isControlled = props.value !== void 0;
+	const [internalValue, setInternalValue] = React$1.useState(props.defaultValue || "");
+	const value = isControlled ? props.value : internalValue;
+	const hasValue = value.length > 0;
+	const [mode, setMode] = React$1.useState(() => hasValue ? "masked" : "empty");
+	const [copied, setCopied] = React$1.useState(false);
+	const containerRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (copied) {
+			const timeoutId = setTimeout(() => setCopied(false), 2e3);
+			return () => clearTimeout(timeoutId);
+		}
+	}, [copied]);
+	const copyToClipboard = React$1.useCallback(async (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		try {
+			if (typeof navigator !== "undefined" && navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+				await navigator.clipboard.writeText(value);
+				setCopied(true);
+				onCopy?.();
+				return;
+			}
+		} catch {}
+	}, [value, onCopy]);
+	const prevHasValueRef = React$1.useRef(hasValue);
+	if (prevHasValueRef.current !== hasValue) {
+		prevHasValueRef.current = hasValue;
+		if (!hasValue && mode === "masked") setMode("empty");
+	}
+	const handleContainerClick = React$1.useCallback((_e) => {
+		if (disabled) return;
+		if (mode === "masked" && hasValue) {
+			setMode("revealed");
+			if (!readOnly) setTimeout(() => {
+				containerRef.current?.querySelector("input")?.focus();
+			}, 0);
+		}
+	}, [
+		mode,
+		hasValue,
+		disabled,
+		readOnly
+	]);
+	const handleToggleVisibility = React$1.useCallback((e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		if (mode === "revealed") setMode("masked");
+		else if (mode === "empty" && hasValue) setMode("revealed");
+	}, [mode, hasValue]);
+	const handleChange = React$1.useCallback((e) => {
+		const newValue = e.target.value;
+		if (!isControlled) setInternalValue(newValue);
+		if (mode === "empty" && newValue.length > 0) setMode("revealed");
+		onChange?.(e);
+	}, [
+		isControlled,
+		onChange,
+		mode
+	]);
+	const handleBlur = React$1.useCallback((e) => {
+		if (containerRef.current && e.relatedTarget instanceof Node && containerRef.current.contains(e.relatedTarget)) return;
+		if (hasValue) setMode("masked");
+		onBlur?.(e);
+	}, [hasValue, onBlur]);
+	const handleContainerKeyDown = React$1.useCallback((e) => {
+		if (disabled) return;
+		if (mode === "masked" && hasValue) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				setMode("revealed");
+				if (!readOnly) setTimeout(() => {
+					containerRef.current?.querySelector("input")?.focus();
+				}, 0);
+			}
+		}
+	}, [
+		mode,
+		hasValue,
+		disabled,
+		readOnly
+	]);
+	const handleInputKeyDown = React$1.useCallback((e) => {
+		if (mode === "revealed" && e.key === "Escape") {
+			setMode("masked");
+			setTimeout(() => containerRef.current?.querySelector("[data-slot=\"input-sensitive-mask\"]")?.focus(), 0);
+		}
+		onKeyDown?.(e);
+	}, [mode, onKeyDown]);
+	const isMaskedWithValue = mode === "masked" && hasValue;
+	const showEyeButton = !disabled && (mode === "revealed" || mode === "empty" && hasValue);
+	const inputClassName = cn("h-8.5 w-full min-w-0 rounded-[inherit] leading-8.5 outline-none placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 [transition:background-color_5000000s_ease-in-out_0s]", "bg-transparent border-0 ring-0", size === "sm" && "h-7.5 leading-7.5 sm:h-6.5 sm:leading-6.5", size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5", "px-[calc(--spacing(3)-1px)] pr-[--sensitive-pr]", size === "sm" && "px-[calc(--spacing(2.5)-1px)] pr-[--sensitive-pr]", disabled && "cursor-not-allowed", isMaskedWithValue && "pointer-events-none opacity-0");
+	return /* @__PURE__ */ jsxs("span", {
+		ref: containerRef,
+		className: cn("group/container relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", isMaskedWithValue && !disabled && "cursor-pointer", className) || void 0,
+		style: { "--sensitive-pr": "calc(--spacing(18))" },
+		"data-size": size,
+		"data-slot": "input-control",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				"data-slot": "input",
+				size: typeof size === "number" ? size : void 0,
+				...props,
+				className: inputClassName,
+				type: mode === "revealed" ? "text" : "password",
+				value,
+				onChange: handleChange,
+				onBlur: handleBlur,
+				onKeyDown: handleInputKeyDown,
+				readOnly: readOnly || isMaskedWithValue,
+				disabled,
+				tabIndex: isMaskedWithValue ? -1 : 0,
+				"aria-hidden": isMaskedWithValue
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none", "px-[calc(--spacing(3)-1px)]", size === "sm" && "px-[calc(--spacing(2.5)-1px)]", "right-[--sensitive-pr]", !isMaskedWithValue && "invisible", isMaskedWithValue && "pointer-events-auto text-foreground group/mask"),
+				role: isMaskedWithValue ? "button" : void 0,
+				"aria-label": isMaskedWithValue ? props["aria-label"] ?? "Reveal sensitive value" : void 0,
+				"aria-hidden": isMaskedWithValue ? void 0 : true,
+				tabIndex: isMaskedWithValue && !disabled ? 0 : void 0,
+				onClick: isMaskedWithValue ? handleContainerClick : void 0,
+				onKeyDown: isMaskedWithValue ? handleContainerKeyDown : void 0,
+				"data-slot": "input-sensitive-mask",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "relative flex items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("tracking-widest", isMaskedWithValue && !disabled && "group-focus/container:invisible group-hover/container:invisible"),
+						children: "••••••••"
+					}), isMaskedWithValue && !disabled && /* @__PURE__ */ jsx("span", {
+						className: "invisible absolute left-0 whitespace-nowrap text-muted-foreground group-focus/container:visible group-hover/container:visible",
+						children: "Click to reveal"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-y-0 right-0 flex items-center gap-0.5 pr-[calc(--spacing(1)-1px)]",
+				children: [hasValue && !disabled && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: copyToClipboard,
+					onKeyDown: (e) => e.stopPropagation(),
+					"aria-label": copied ? "Copied" : "Copy to clipboard",
+					className: cn("relative flex size-7 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:size-6 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", "group-focus-within/container:opacity-100 group-hover/container:opacity-100"),
+					children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success sm:size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4 sm:size-3.5" })
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleToggleVisibility,
+					onKeyDown: (e) => e.stopPropagation(),
+					"aria-label": mode === "revealed" ? "Hide value" : "Reveal value",
+					tabIndex: showEyeButton ? 0 : -1,
+					className: cn("relative flex size-7 items-center justify-center rounded-md text-muted-foreground transition-[color,background-color,opacity,box-shadow] hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:size-6 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", !showEyeButton && !disabled && "pointer-events-none opacity-0 group-hover/container:pointer-events-auto group-hover/container:opacity-100 group-focus-within/container:pointer-events-auto group-focus-within/container:opacity-100", !showEyeButton && disabled && "pointer-events-none opacity-0"),
+					children: mode === "revealed" ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4 sm:size-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4 sm:size-3.5" })
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { InputSensitive };

package/dist/components/input.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/input.d.ts
+type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>, "size" | "className" | "style"> & {
+  size?: "sm" | "default" | "lg" | number;
+  unstyled?: boolean;
+  nativeInput?: boolean;
+  className?: string;
+  style?: React$1.CSSProperties;
+};
+declare function Input({ className, size, unstyled, nativeInput, ...props }: InputProps): React$1.JSX.Element;
+//#endregion
+export { Input, type InputProps };

package/dist/components/input.js

@@ -0,0 +1,26 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/input.tsx
+function Input({ className, size = "default", unstyled = false, nativeInput = false, ...props }) {
+	const inputClassName = cn("h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5 [transition:background-color_5000000s_ease-in-out_0s]", size === "sm" && "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5", size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5", props.type === "search" && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", props.type === "file" && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm");
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(!unstyled && "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+		"data-size": size,
+		"data-slot": "input-control",
+		children: nativeInput ? /* @__PURE__ */ jsx("input", {
+			className: inputClassName,
+			"data-slot": "input",
+			size: typeof size === "number" ? size : void 0,
+			...props
+		}) : /* @__PURE__ */ jsx(Input$1, {
+			className: inputClassName,
+			"data-slot": "input",
+			size: typeof size === "number" ? size : void 0,
+			...props
+		})
+	});
+}
+//#endregion
+export { Input };

package/dist/components/kbd.d.ts

@@ -0,0 +1,6 @@
+import * as React$1 from "react";
+//#region src/components/kbd.d.ts
+declare function Kbd({ className, ...props }: React$1.ComponentProps<"kbd">): React$1.JSX.Element;
+declare function KbdGroup({ className, ...props }: React$1.ComponentProps<"kbd">): React$1.JSX.Element;
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/kbd.js

@@ -0,0 +1,19 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/kbd.tsx
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("pointer-events-none relative inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-sm border border-input border-b-2 bg-popover px-1.5 font-medium font-sans text-muted-foreground text-[10px] shadow-xs/5 before:absolute before:inset-0 before:pointer-events-none before:rounded-[inherit] before:shadow-[0_1px_var(--border)] [&_svg:not([class*='size-'])]:size-3", className),
+		"data-slot": "kbd",
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("inline-flex items-center gap-1", className),
+		"data-slot": "kbd-group",
+		...props
+	});
+}
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/kinetic-click.d.ts

@@ -0,0 +1,48 @@
+import * as React$1 from "react";
+import { ReactNode } from "react";
+//#region src/components/kinetic-click.d.ts
+export type KineticClickVariant = "spark" | "ripple" | "embers" | "quantum" | "tesseract" | "blackhole" | "firework" | "shatter" | "warp" | "matrix" | "smoke" | "supernova" | "holosphere" | "flowfield" | "synapse" | "diffusion" | "rain" | "binary" | "fission" | "bullettime";
+export type KineticClickTrigger = "click" | "mousedown";
+export interface KineticClickProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The animation variant to trigger on click.
+   * @default "spark"
+   */
+  variant?: KineticClickVariant;
+  /**
+   * The particle/effect color. Accepts standard hex, rgb, or "currentColor"
+   * to automatically inherit computed style colors of the clicked target.
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * The style property to inherit color from when color is "currentColor".
+   * - "text": Inherits from computed text color.
+   * - "background": Inherits from computed background color.
+   * - "border": Inherits from computed border color.
+   * - "auto": Intelligently fallback from text -> background -> border (useful if text is neutral like white/black).
+   * @default "auto"
+   */
+  colorFrom?: "text" | "background" | "border" | "auto";
+  /**
+   * Number of particles/ripples/structures to spawn.
+   */
+  count?: number;
+  /**
+   * Custom scale/size metric for particles/ripples.
+   */
+  size?: number;
+  /**
+   * Overall animation duration in milliseconds.
+   */
+  duration?: number;
+  /**
+   * Trigger event type.
+   * @default "mousedown"
+   */
+  trigger?: KineticClickTrigger;
+  children?: ReactNode;
+}
+declare const KineticClick: React$1.MemoExoticComponent<({ variant, color, colorFrom, count, size, duration, trigger, className, style, children, ...props }: KineticClickProps) => React$1.JSX.Element>;
+//#endregion
+export { KineticClick };