@postxl/ui-components 1.6.3 → 1.7.0

package/dist/index.js

@@ -1380,9 +1380,9 @@ function ComboboxDemo() {
 
 //#endregion
 //#region src/spinner/spinner.tsx
-function Spinner({ classNames }) {
+function Spinner({ className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex justify-center items-center w-full h-full", classNames),
+		className: cn("flex justify-center items-center w-full h-full", className),
 		children: /* @__PURE__ */ jsxs("svg", {
 			className: "w-auto text-[inherit] h-full animate-spin",
 			xmlns: "http://www.w3.org/2000/svg",
@@ -1409,7 +1409,7 @@ function Loader({ label, disabled }) {
 		className: "flex absolute z-1 left-0 top-0 bottom-0 right-0 bg-secondary/50",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-center flex-1 flex-col",
-			children: [/* @__PURE__ */ jsx(Spinner, { classNames: "w-[24px] h-[25px]" }), label && /* @__PURE__ */ jsx("h3", {
+			children: [/* @__PURE__ */ jsx(Spinner, { className: "w-[24px] h-[25px]" }), label && /* @__PURE__ */ jsx("h3", {
 				className: "pb-0 pt-3 font-medium text-xl mb-2 text-muted-foreground",
 				children: label
 			})]
@@ -1466,7 +1466,7 @@ const CommandInput = React.forwardRef(({ className, wrapperClassName, loading, r
 			variant,
 			inputSize
 		}), wrapperClassName),
-		children: [loading ? /* @__PURE__ */ jsx(Spinner, { classNames: "size-4" }) : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
+		children: [loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
 			ref,
 			"data-slot": "command-input",
 			className: cn("placeholder:text-muted-foreground flex w-full rounded bg-transparent text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
@@ -4660,6 +4660,60 @@ function isValidJson(str) {
 		return false;
 	}
 }
+function JsonEditorWithLineNumbers({ value, onChange, onSave }) {
+	const textareaRef = React$31.useRef(null);
+	const gutterRef = React$31.useRef(null);
+	const lineCount = React$31.useMemo(() => {
+		if (!value) return 1;
+		return value.split("\n").length;
+	}, [value]);
+	const gutterMinWidth = React$31.useMemo(() => {
+		const digits = String(lineCount).length;
+		return `calc(${digits}ch + 16px)`;
+	}, [lineCount]);
+	const onScroll = React$31.useCallback(() => {
+		if (textareaRef.current && gutterRef.current) gutterRef.current.scrollTop = textareaRef.current.scrollTop;
+	}, []);
+	const onKeyDown = React$31.useCallback((e) => {
+		if (e.key === "Tab") {
+			e.preventDefault();
+			const textarea = e.currentTarget;
+			const start = textarea.selectionStart;
+			const end = textarea.selectionEnd;
+			const newValue = value.substring(0, start) + "  " + value.substring(end);
+			onChange(newValue);
+			requestAnimationFrame(() => {
+				textarea.selectionStart = textarea.selectionEnd = start + 2;
+			});
+		}
+		if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			onSave?.();
+		}
+	}, [
+		value,
+		onChange,
+		onSave
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex min-h-[200px] max-h-[50vh] rounded-md border border-input overflow-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: gutterRef,
+			"aria-hidden": "true",
+			style: { minWidth: gutterMinWidth },
+			className: "shrink-0 overflow-hidden bg-muted px-2 py-2 text-right font-mono text-sm leading-[1.43] text-muted-foreground select-none border-r border-input",
+			children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("div", { children: i + 1 }, i))
+		}), /* @__PURE__ */ jsx("textarea", {
+			ref: textareaRef,
+			value,
+			onChange: (e) => onChange(e.target.value),
+			onKeyDown,
+			onScroll,
+			className: "flex-1 resize-none bg-transparent p-2 font-mono text-sm leading-[1.43] outline-none",
+			spellCheck: false
+		})]
+	});
+}
 function JsonCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 	const rawValue = cell.getValue();
 	const [dialogOpen, setDialogOpen] = React$31.useState(false);
@@ -4778,11 +4832,10 @@ function JsonCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 			className: "max-w-2xl max-h-[80vh]",
 			children: [
 				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { children: [headerLabel, " (JSON)"] }) }),
-				/* @__PURE__ */ jsx(Textarea, {
+				/* @__PURE__ */ jsx(JsonEditorWithLineNumbers, {
 					value: editValue,
-					onChange: (e) => setEditValue(e.target.value),
-					className: "min-h-[200px] max-h-[50vh] font-mono text-sm resize-y",
-					spellCheck: false
+					onChange: setEditValue,
+					onSave
 				}),
 				jsonParseError && /* @__PURE__ */ jsx("p", {
 					className: "text-sm text-destructive",
@@ -9111,10 +9164,11 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 //#endregion
 //#region src/progress/progress.tsx
-const Progress = ({ value, size = "100%" }) => {
+const Progress = ({ value, size = "100%", className }) => {
 	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "progress-bar",
 		style: { "--parent-width": size },
-		className: "w-(--parent-width) flex justify-center relative rounded-md overflow-hidden h-2 mt-8",
+		className: cn("w-(--parent-width) flex justify-center relative rounded-md overflow-hidden h-2 mt-8", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "w-full absolute top-0 left-0 h-2.5 bg-(--discreet-border)",
 			"data-testid": "progress-bg"
@@ -11374,11 +11428,12 @@ function Tabs({ className,...props }) {
 		...props
 	});
 }
-const tabsListVariants = cva("w-fit text-muted-foreground inline-flex items-center justify-center rounded-lg", {
+const tabsListVariants = cva("w-fit text-muted-foreground inline-flex items-center justify-center", {
 	variants: {
 		variant: {
-			default: "bg-muted p-[3px]",
-			protocol: "bg-transparent"
+			default: "rounded-lg bg-muted p-[3px]",
+			protocol: "rounded-lg bg-transparent",
+			underline: "border-b border-border bg-transparent p-0 rounded-none"
 		},
 		size: {
 			default: "h-9",
@@ -11405,7 +11460,8 @@ function TabsList({ className, variant, size, asChild = false,...props }) {
 }
 const tabsTriggerVariants = cva("h-[100%] text-lg inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 text-foreground", { variants: { variant: {
 	default: "h-[calc(100%-1px)] flex-1 rounded-md border border-transparent px-2 py-1 transition-[color,box-shadow] dark:text-muted-foreground data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:shadow-sm",
-	protocol: "bg-transparent border-b-2 border-b-transparent hover:text-primary hover:border-b-primary data-[state=active]:border-b-primary data-[state=active]:text-primary"
+	protocol: "bg-transparent border-b-2 border-b-transparent hover:text-primary hover:border-b-primary data-[state=active]:border-b-primary data-[state=active]:text-primary",
+	underline: "rounded-none border-b-2 border-transparent px-4 py-2 hover:border-primary/50 hover:text-foreground data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
 } } });
 function TabsTrigger({ className, variant, asChild = false,...props }) {
 	const Comp = asChild ? Slot : TabsPrimitive.Trigger;