@datum-cloud/datum-ui 0.4.0 → 0.6.0-alpha.b817c77

package/dist/{textarea-CVo38n3S.mjs → textarea-94vq_G_S.mjs}

@@ -1,7 +1,6 @@
-import { t as cn } from "./utils-DJboNGQM.mjs";
+import { t as cn } from "./utils-C8KwMfT_.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region ../shadcn/ui/textarea.tsx
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
@@ -10,6 +9,5 @@ function Textarea({ className, ...props }) {
 		...props
 	});
 }
-
 //#endregion
-export { Textarea as t };
+export { Textarea as t };

package/dist/{textarea-CZF5n57i.mjs → textarea-BwD-MmTV.mjs}

@@ -1,8 +1,7 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { t as Textarea$1 } from "./textarea-CVo38n3S.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Textarea$1 } from "./textarea-94vq_G_S.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/base/textarea/textarea.tsx
 function Textarea({ ref, className, ...props }) {
 	return /* @__PURE__ */ jsx(Textarea$1, {
@@ -12,6 +11,5 @@ function Textarea({ ref, className, ...props }) {
 	});
 }
 Textarea.displayName = "Textarea";
-
 //#endregion
-export { Textarea as t };
+export { Textarea as t };

package/dist/theme/index.mjs

@@ -1,3 +1,2 @@
-import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider } from "../theme.provider-TUHlMsjM.mjs";
-
-export { ClientOnly, ThemeProvider, ThemeScript, useTheme };
+import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider } from "../themes-DG1md8FI.mjs";
+export { ClientOnly, ThemeProvider, ThemeScript, useTheme };

package/dist/{theme.provider-TUHlMsjM.mjs → themes-DG1md8FI.mjs}

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-
 //#region src/components/themes/client-only.tsx
 function ClientOnly({ children, fallback = null }) {
 	const [hasMounted, setHasMounted] = React$1.useState(false);
@@ -10,7 +9,6 @@ function ClientOnly({ children, fallback = null }) {
 	if (!hasMounted) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
-
 //#endregion
 //#region src/components/themes/script.ts
 function script(attribute, storageKey, defaultTheme, forcedTheme, themes, value, enableSystem, enableColorScheme) {
@@ -40,7 +38,6 @@ function script(attribute, storageKey, defaultTheme, forcedTheme, themes, value,
 		updateDOM(enableSystem && themeName === "system" ? getSystemTheme() : themeName);
 	} catch {}
 }
-
 //#endregion
 //#region src/components/themes/theme-script.tsx
 const ThemeScript = React$1.memo(({ forcedTheme, storageKey = "theme", attribute = "data-theme", enableSystem = true, enableColorScheme = true, defaultTheme = "system", value, themes = ["light", "dark"], nonce, scriptProps }) => {
@@ -61,7 +58,6 @@ const ThemeScript = React$1.memo(({ forcedTheme, storageKey = "theme", attribute
 		dangerouslySetInnerHTML: { __html: `(${script.toString()})(${scriptArgs})` }
 	});
 });
-
 //#endregion
 //#region src/components/themes/theme.provider.tsx
 const colorSchemes = ["light", "dark"];
@@ -191,6 +187,5 @@ function getSystemTheme(e) {
 	if (!e) e = window.matchMedia(MEDIA);
 	return e.matches ? "dark" : "light";
 }
-
 //#endregion
-export { ClientOnly as i, useTheme as n, ThemeScript as r, ThemeProvider as t };
+export { ClientOnly as i, useTheme as n, ThemeScript as r, ThemeProvider as t };

package/dist/{to-api-format-naIpF-NI.mjs → to-api-format-Cq4prffn.mjs}

@@ -1,17 +1,16 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { t as Button } from "./button-0N61fmAR.mjs";
-import { t as Separator } from "./separator-BzyALya2.mjs";
-import { t as Icon } from "./icon-wrapper-BBK4z4tj.mjs";
-import { t as Calendar$1 } from "./calendar-BtfraIvX.mjs";
-import { t as Input } from "./input-CYFN0Ap2.mjs";
-import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-ugw5MpuT.mjs";
-import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-BZOKWjlH.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-BllvE9Lm.mjs";
+import { t as Separator } from "./separator-DXVTncCK.mjs";
+import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
+import { t as Calendar$1 } from "./calendar-DEkCw7I1.mjs";
+import { t as Input } from "./input-FKGqZypx.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-FJAcbYoH.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-CiLR_DiQ.mjs";
 import { Calendar, CalendarIcon, Globe, X } from "lucide-react";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { format, isSameDay, isSameYear, parse, subDays, subHours, subMinutes } from "date-fns";
 import { fromZonedTime, toZonedTime } from "date-fns-tz";
-
 //#region src/components/features/time-range-picker/utils/timezone.ts
 /**
 * Get the UTC offset string for a timezone
@@ -121,7 +120,6 @@ function zonedDateToUtcString(zonedDate, timezone) {
 function formatUtcForDisplay(utcString, timezone, formatString = "MMM d, yyyy HH:mm") {
 	return format(utcStringToZonedDate(utcString, timezone), formatString);
 }
-
 //#endregion
 //#region src/components/features/time-range-picker/components/absolute-range-panel.tsx
 /**
@@ -352,7 +350,6 @@ function CustomRangePanel({ fromUtc, toUtc, timezone, onRangeChange, disableFutu
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/features/time-range-picker/components/quick-ranges-panel.tsx
 function QuickRangesPanel({ presets, value, onPresetSelect, className }) {
@@ -379,7 +376,6 @@ function QuickRangesPanel({ presets, value, onPresetSelect, className }) {
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/features/time-range-picker/components/timezone-selector.tsx
 function TimezoneSelector({ value, onChange, options, className }) {
@@ -403,7 +399,6 @@ function TimezoneSelector({ value, onChange, options, className }) {
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/features/time-range-picker/presets.ts
 /**
@@ -543,7 +538,6 @@ function getPresetRange(preset, timezone) {
 		to: range.to.toISOString()
 	};
 }
-
 //#endregion
 //#region src/components/features/time-range-picker/utils/format-display.ts
 /**
@@ -587,7 +581,6 @@ function formatSingleTimeDisplay(utcString, timezone) {
 function formatDateForInput(date) {
 	return format(date, "yyyy-MM-dd'T'HH:mm");
 }
-
 //#endregion
 //#region src/components/features/time-range-picker/time-range-picker.tsx
 function TimeRangePicker({ value, onChange, onClear, timezone: timezoneProp, presets = DEFAULT_PRESETS, disableFuture = false, maxDate, minDate, className, disabled = false, placeholder = "Select time range", align = "start", side = "bottom" }) {
@@ -804,7 +797,6 @@ function TimeRangePicker({ value, onChange, onClear, timezone: timezoneProp, pre
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/features/time-range-picker/utils/to-api-format.ts
 /**
@@ -846,6 +838,5 @@ function toApiTimeRange(value, timezone, presets = DEFAULT_PRESETS) {
 		endTime: range.to
 	};
 }
-
 //#endregion
-export { utcToLocalInputString as C, utcStringToZonedDate as S, getBrowserTimezone as _, formatTimeRangeDisplay as a, getTimezoneOffset as b, getPresetByKey as c, TimezoneSelector as d, QuickRangesPanel as f, formatUtcForDisplay as g, formatTimezoneLabel as h, formatSingleTimeDisplay as i, getPresetByShortcut as l, createTimezoneOption as m, TimeRangePicker as n, DEFAULT_PRESETS as o, CustomRangePanel as p, formatDateForInput as r, getDefaultPreset as s, toApiTimeRange as t, getPresetRange as u, getDefaultTimezoneOptions as v, zonedDateToUtcString as w, localInputStringToUtc as x, getShortTimezoneDisplay as y };
+export { utcToLocalInputString as C, utcStringToZonedDate as S, getBrowserTimezone as _, formatTimeRangeDisplay as a, getTimezoneOffset as b, getPresetByKey as c, TimezoneSelector as d, QuickRangesPanel as f, formatUtcForDisplay as g, formatTimezoneLabel as h, formatSingleTimeDisplay as i, getPresetByShortcut as l, createTimezoneOption as m, TimeRangePicker as n, DEFAULT_PRESETS as o, CustomRangePanel as p, formatDateForInput as r, getDefaultPreset as s, toApiTimeRange as t, getPresetRange as u, getDefaultTimezoneOptions as v, zonedDateToUtcString as w, localInputStringToUtc as x, getShortTimezoneDisplay as y };

package/dist/toast/index.mjs

@@ -1,3 +1,3 @@
-import { n as Toaster, r as toast, t as useToast } from "../use-toast-By9HuFwP.mjs";
-
-export { Toaster, toast, useToast };
+import { t as toast } from "../toast-BWnN5fax.mjs";
+import { n as Toaster, t as useToast } from "../toast-DpxlFNNx.mjs";
+export { Toaster, toast, useToast };

package/dist/{use-toast-By9HuFwP.mjs → toast-BWnN5fax.mjs}

@@ -1,9 +1,8 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { t as CloseIcon } from "./close.icon-D2r5q3bj.mjs";
-import { createElement, useEffect } from "react";
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as CloseIcon } from "./close.icon-HCfS4Y-N.mjs";
+import { createElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Toaster, toast } from "sonner";
-
+import { toast } from "sonner";
 //#region src/components/features/toast/headless-toast.tsx
 const variantAccentClass = {
 	message: "bg-toast-success-background text-toast-success-foreground",
@@ -44,7 +43,6 @@ function HeadlessToast({ variant, title, description, onDismiss }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/features/toast/toast.ts
 const defaultOptions = {
@@ -84,40 +82,5 @@ const toast$1 = {
 		return show("warning", title, options);
 	}
 };
-
 //#endregion
-//#region src/components/features/toast/toaster.tsx
-/**
-* Sonner Toaster configured for "headless" usage.
-*
-* We render our own toast markup via `toast.custom`, so we remove Sonner's default styling.
-*/
-function Toaster$1({ toastOptions, ...props }) {
-	return /* @__PURE__ */ jsx(Toaster, {
-		toastOptions: {
-			unstyled: true,
-			...toastOptions
-		},
-		...props
-	});
-}
-
-//#endregion
-//#region src/components/features/toast/use-toast.ts
-/**
-* Sonner is a toast library for React.
-* Implementation based on github.com/epicweb-dev/epic-stack
-*/
-function useToast(toastData) {
-	useEffect(() => {
-		if (toastData) setTimeout(() => {
-			toast$1[toastData.type](toastData.title ?? toastData.description, {
-				id: toastData.id,
-				description: toastData.title ? toastData.description : void 0
-			});
-		}, 0);
-	}, [toastData]);
-}
-
-//#endregion
-export { Toaster$1 as n, toast$1 as r, useToast as t };
+export { toast$1 as t };

package/dist/toast-DpxlFNNx.mjs

@@ -0,0 +1,37 @@
+import { t as toast$1 } from "./toast-BWnN5fax.mjs";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toaster } from "sonner";
+//#region src/components/features/toast/toaster.tsx
+/**
+* Sonner Toaster configured for "headless" usage.
+*
+* We render our own toast markup via `toast.custom`, so we remove Sonner's default styling.
+*/
+function Toaster$1({ toastOptions, ...props }) {
+	return /* @__PURE__ */ jsx(Toaster, {
+		toastOptions: {
+			unstyled: true,
+			...toastOptions
+		},
+		...props
+	});
+}
+//#endregion
+//#region src/components/features/toast/use-toast.ts
+/**
+* Sonner is a toast library for React.
+* Implementation based on github.com/epicweb-dev/epic-stack
+*/
+function useToast(toastData) {
+	useEffect(() => {
+		if (toastData) setTimeout(() => {
+			toast$1[toastData.type](toastData.title ?? toastData.description, {
+				id: toastData.id,
+				description: toastData.title ? toastData.description : void 0
+			});
+		}, 0);
+	}, [toastData]);
+}
+//#endregion
+export { Toaster$1 as n, useToast as t };

package/dist/tooltip/index.mjs

@@ -1,4 +1,2 @@
-import "../utils-DJboNGQM.mjs";
-import { t as Tooltip } from "../tooltip-CuX2jQA9.mjs";
-
-export { Tooltip };
+import { t as Tooltip } from "../tooltip-Cruvl5F6.mjs";
+export { Tooltip };

package/dist/{tooltip-CuX2jQA9.mjs → tooltip-Cruvl5F6.mjs}

@@ -1,9 +1,8 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { t as cn$1 } from "./utils-DJboNGQM.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as cn$1 } from "./utils-C8KwMfT_.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
 //#region ../shadcn/ui/tooltip.tsx
 const TooltipProvider = ({ delayDuration = 0, ...props }) => {
 	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
@@ -33,7 +32,6 @@ const TooltipContent$1 = ({ className, sideOffset = 0, children, ...props }) =>
 		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
 	}) });
 };
-
 //#endregion
 //#region src/components/base/tooltip/tooltip.tsx
 function TooltipContent({ className, arrowClassName, sideOffset = 0, children, ...props }) {
@@ -69,6 +67,5 @@ function Tooltip({ message, children, delayDuration = 200, side, align, sideOffs
 		})]
 	});
 }
-
 //#endregion
-export { TooltipTrigger as a, TooltipProvider as i, Tooltip$1 as n, TooltipContent$1 as r, Tooltip as t };
+export { TooltipTrigger as a, TooltipProvider as i, Tooltip$1 as n, TooltipContent$1 as r, Tooltip as t };

package/dist/types-BZNk3q65.mjs

@@ -0,0 +1,357 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs/index.mjs";
+import { n as useTheme } from "./themes-DG1md8FI.mjs";
+import { t as toast } from "./toast-BWnN5fax.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import yaml from "js-yaml";
+import { z } from "zod";
+//#region src/components/features/code-editor/code-editor.tsx
+/**
+* CodeEditor - Monaco-based code editor component
+*
+* A Monaco Editor wrapper with single language support, theme integration,
+* and form compatibility. Provides a VS Code-like editing experience with
+* automatic formatting, responsive layout, and error state handling.
+*
+* Features:
+* - Monaco Editor with VS Code experience
+* - Theme-aware (automatic light/dark mode)
+* - Form-compatible (hidden input for React Hook Form)
+* - Responsive layout with automatic resizing
+* - Read-only mode support
+* - Custom error state styling
+*
+* @example
+* ```tsx
+* import { CodeEditor } from '@datum-cloud/datum-ui/code-editor'
+*
+* // Basic usage
+* <CodeEditor
+*   value={code}
+*   onChange={(newValue) => setCode(newValue)}
+*   language="yaml"
+*   minHeight="400px"
+* />
+*
+* // With error state
+* <CodeEditor
+*   value={invalidJson}
+*   onChange={handleChange}
+*   language="json"
+*   error="Invalid JSON format"
+* />
+*
+* // Read-only mode
+* <CodeEditor
+*   value={config}
+*   language="yaml"
+*   readOnly={true}
+* />
+* ```
+*
+* @param props - Component props
+* @param props.value - Editor content
+* @param props.onChange - Content change callback
+* @param props.language - Syntax highlighting language
+* @param props.id - Input element ID for form integration
+* @param props.name - Input element name for form submission (default: 'code-editor')
+* @param props.error - Error message to display below the editor
+* @param props.className - Additional CSS classes
+* @param props.readOnly - Read-only mode (default: false)
+* @param props.minHeight - Minimum editor height (default: '200px')
+* @returns Rendered Monaco editor with form integration
+*/
+function CodeEditor({ value, onChange, language, id, name = "code-editor", error, className, readOnly = false, minHeight = "200px" }) {
+	const { theme } = useTheme();
+	const editorRef = useRef(null);
+	const [mounted, setMounted] = useState(false);
+	const monacoTheme = theme === "dark" ? "vs-dark" : "light";
+	useEffect(() => {
+		if (editorRef.current && !mounted) {
+			setTimeout(() => {
+				editorRef.current?.getAction("editor.action.formatDocument")?.run();
+			}, 300);
+			setMounted(true);
+		}
+	}, [mounted]);
+	const handleEditorChange = (newValue) => {
+		onChange?.(newValue || "");
+	};
+	const handleEditorDidMount = (editor) => {
+		editorRef.current = editor;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [
+			/* @__PURE__ */ jsx(Editor, {
+				height: minHeight,
+				language,
+				value,
+				theme: monacoTheme,
+				onChange: handleEditorChange,
+				onMount: handleEditorDidMount,
+				options: {
+					readOnly,
+					minimap: { enabled: false },
+					fontSize: 14,
+					tabSize: 2,
+					wordWrap: "on",
+					lineNumbers: "on",
+					folding: true,
+					automaticLayout: true
+				},
+				className: cn(error && "border border-destructive rounded-md")
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				id,
+				name,
+				value
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive mt-1",
+				children: error
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/code-editor/lib/editor.ts
+function isValidJson(jsonStr) {
+	try {
+		JSON.parse(jsonStr);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function isValidYaml(yamlStr) {
+	try {
+		yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
+		return true;
+	} catch {
+		return false;
+	}
+}
+function formatJson(jsonStr) {
+	try {
+		const parsed = JSON.parse(jsonStr);
+		return JSON.stringify(parsed, null, 2);
+	} catch (error) {
+		throw new Error(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+function formatYaml(yamlStr) {
+	try {
+		const parsed = yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
+		return yaml.dump(parsed, {
+			indent: 2,
+			lineWidth: -1,
+			noRefs: true
+		});
+	} catch (error) {
+		throw new Error(`Invalid YAML format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+function jsonToYaml(jsonStr) {
+	try {
+		const parsed = JSON.parse(jsonStr);
+		return yaml.dump(parsed, {
+			indent: 2,
+			lineWidth: -1,
+			noRefs: true
+		});
+	} catch (error) {
+		throw new Error(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+function yamlToJson(yamlStr) {
+	try {
+		const parsed = yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
+		return JSON.stringify(parsed, null, 2);
+	} catch (error) {
+		throw new Error(`Invalid YAML format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+//#endregion
+//#region src/components/features/code-editor/code-editor-tabs.tsx
+/**
+* CodeEditorTabs - Dual-format code editor with JSON ↔ YAML conversion
+*
+* A tabbed interface that provides JSON and YAML editing with automatic
+* bidirectional conversion and validation. Prevents tab switching when
+* content has syntax errors and shows error toasts for conversion failures.
+*
+* Features:
+* - Dual-format editing (JSON ↔ YAML)
+* - Automatic bidirectional conversion
+* - Real-time validation before conversion
+* - Error toasts for conversion failures
+* - Maintains sync between both formats
+* - Hidden format field for form submission
+*
+* @example
+* ```tsx
+* import { CodeEditorTabs } from '@datum-cloud/datum-ui/code-editor'
+*
+* // Basic usage
+* <CodeEditorTabs
+*   value={config}
+*   format="yaml"
+*   onChange={(value, format) => {
+*     setConfig(value)
+*     setFormat(format)
+*   }}
+*   name="configuration"
+*   minHeight="500px"
+* />
+*
+* // With React Hook Form
+* const { watch, setValue } = useForm()
+*
+* <CodeEditorTabs
+*   value={watch('config')}
+*   onChange={(value) => setValue('config', value)}
+*   name="config"
+* />
+*
+* // With format change handler
+* <CodeEditorTabs
+*   value={data}
+*   format={currentFormat}
+*   onChange={(value, format) => console.log({ value, format })}
+*   onFormatChange={(format) => setCurrentFormat(format)}
+* />
+* ```
+*
+* @param props - Component props
+* @param props.value - Editor content
+* @param props.onChange - Content and format change callback
+* @param props.format - Active format ('json' or 'yaml', default: 'yaml')
+* @param props.onFormatChange - Format change callback
+* @param props.error - Error message to display below the editor
+* @param props.id - Input element ID for form integration
+* @param props.name - Input element name for form submission (default: 'code-editor')
+* @param props.minHeight - Minimum editor height (default: '300px')
+* @returns Rendered tabbed editor with JSON/YAML conversion
+*/
+function CodeEditorTabs({ value, onChange, format = "yaml", onFormatChange, error, id, name = "code-editor", minHeight = "300px" }) {
+	const [jsonContent, setJsonContent] = useState("");
+	const [yamlContent, setYamlContent] = useState("");
+	const [activeTab, setActiveTab] = useState(format);
+	useEffect(() => {
+		if (format === "json") {
+			setJsonContent(value);
+			try {
+				setYamlContent(jsonToYaml(value));
+			} catch {}
+		} else {
+			setYamlContent(value);
+			try {
+				setJsonContent(yamlToJson(value));
+			} catch {}
+		}
+	}, [value, format]);
+	const handleJsonChange = (newValue) => {
+		setJsonContent(newValue);
+		try {
+			setYamlContent(jsonToYaml(newValue));
+			if (activeTab === "json") onChange?.(newValue, "json");
+		} catch (error) {
+			console.error("Failed to convert JSON to YAML:", error);
+		}
+	};
+	const handleYamlChange = (newValue) => {
+		setYamlContent(newValue);
+		try {
+			setJsonContent(yamlToJson(newValue));
+			if (activeTab === "yaml") onChange?.(newValue, "yaml");
+		} catch (error) {
+			console.error("Failed to convert YAML to JSON:", error);
+		}
+	};
+	const handleTabChange = (newTab) => {
+		const newFormat = newTab;
+		const currentContent = activeTab === "json" ? jsonContent : yamlContent;
+		try {
+			if (activeTab === "json") jsonToYaml(currentContent);
+			else yamlToJson(currentContent);
+			setActiveTab(newFormat);
+			onFormatChange?.(newFormat);
+			onChange?.(newFormat === "json" ? jsonContent : yamlContent, newFormat);
+		} catch {
+			const errorMsg = activeTab === "json" ? "Invalid JSON format. Please fix errors before switching tabs." : "Invalid YAML format. Please fix errors before switching tabs.";
+			toast.error(errorMsg, { id: `${activeTab}-to-${newFormat}-error` });
+		}
+	};
+	return /* @__PURE__ */ jsxs(Tabs, {
+		value: activeTab,
+		onValueChange: handleTabChange,
+		children: [
+			/* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTrigger, {
+				value: "yaml",
+				children: "YAML"
+			}), /* @__PURE__ */ jsx(TabsTrigger, {
+				value: "json",
+				children: "JSON"
+			})] }),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "yaml",
+				children: /* @__PURE__ */ jsx(CodeEditor, {
+					value: yamlContent,
+					onChange: handleYamlChange,
+					language: "yaml",
+					minHeight,
+					error
+				})
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "json",
+				children: /* @__PURE__ */ jsx(CodeEditor, {
+					value: jsonContent,
+					onChange: handleJsonChange,
+					language: "json",
+					minHeight,
+					error
+				})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				id,
+				name,
+				value: activeTab === "json" ? jsonContent : yamlContent
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}-format`,
+				value: activeTab
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/code-editor/types.ts
+const jsonSchema = z.object({ jsonContent: z.string().min(1, "JSON content is required").refine(isValidJson, { message: "Invalid JSON format" }) });
+const yamlSchema = z.object({ yamlContent: z.string().min(1, "YAML content is required").refine(isValidYaml, { message: "Invalid YAML format" }) });
+function createCodeEditorSchema(name = "code-editor") {
+	return z.object({
+		[name]: z.string().min(1, `${name} content is required`),
+		format: z.enum(["json", "yaml"])
+	}).superRefine((data, ctx) => {
+		const content = data[name];
+		if (data.format === "json" && !isValidJson(content)) ctx.addIssue({
+			code: z.ZodIssueCode.custom,
+			message: "Invalid JSON format",
+			path: [name]
+		});
+		else if (data.format === "yaml" && !isValidYaml(content)) ctx.addIssue({
+			code: z.ZodIssueCode.custom,
+			message: "Invalid YAML format",
+			path: [name]
+		});
+	});
+}
+//#endregion
+export { formatJson as a, isValidYaml as c, CodeEditor as d, CodeEditorTabs as i, jsonToYaml as l, jsonSchema as n, formatYaml as o, yamlSchema as r, isValidJson as s, createCodeEditorSchema as t, yamlToJson as u };

package/dist/typography/index.mjs

@@ -1,3 +1,2 @@
-import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-Iap9fU5P.mjs";
-
-export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };
+import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-ClB8k55E.mjs";
+export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };