@socprime/react-ui 0.0.5

package/ui/Dialog/Dialog.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { motion } from "motion/react";
+import { cn } from "../../lib/cn.js";
+const Dialog = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+};
+const DialogTrigger = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+};
+const DialogPortal = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+};
+const DialogClose = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+};
+const DialogOverlay = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", asChild: true, ...props, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn("fixed inset-0 z-50 bg-black/50", className),
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2 }
+    }
+  ) });
+};
+const DialogContent = ({
+  className,
+  children,
+  hideCloseButton = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(DialogPrimitive.Content, { "data-slot": "dialog-content", asChild: true, ...props, children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: cn(
+          "bg-background fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg sm:max-w-lg",
+          className
+        ),
+        initial: { opacity: 0, scale: 0.95, y: -20 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: -20 },
+        transition: {
+          duration: 0.2,
+          ease: [0.16, 1, 0.3, 1]
+        },
+        children: [
+          children,
+          !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground btn btn--icon dark:text-subdued light:text-dark hover:bg-hover dark:hover:text-success absolute top-6 right-4 h-6 w-6 rounded-xs border-transparent px-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+const DialogHeader = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn(
+        "border-border mb-6 flex flex-col gap-2 border-b p-6 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+};
+const DialogFooter = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "border-border mt-6 flex flex-col-reverse gap-2 border-t p-6 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+};
+const DialogTitle = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+};
+const DialogDescription = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+};
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};

package/ui/Dialog/index.js

@@ -0,0 +1,32 @@
+import {
+  ConfirmDialog,
+  ConfirmDeleteDialog
+} from "./ConfirmDialog.js";
+import { DefaultDialog } from "./DefaultDialog.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+} from "./Dialog.js";
+export {
+  ConfirmDeleteDialog,
+  ConfirmDialog,
+  DefaultDialog,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};

package/ui/Dropdown/Dropdown.js

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "hover:bg-hover relative flex items-center gap-2 rounded px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 [&.is-disabled]:pointer-events-none [&.is-disabled]:opacity-50 [&:not(.is-disabled)]:cursor-pointer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground hover:bg-hover relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({ ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};

package/ui/Dropdown/DropdownsCheckbox.js

@@ -0,0 +1,102 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { ChevronDownIcon, Loader2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "../Button/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./Dropdown.js";
+const DropdownsCheckbox = ({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Select...",
+  className,
+  disabled = false,
+  loading = false,
+  label,
+  showSelectAll = true,
+  selectAllLabel = "Select All"
+}) => {
+  const [open, setOpen] = useState(false);
+  const selectedCount = value.length;
+  const allSelected = showSelectAll && value.length === 0;
+  const handleToggle = (optionValue) => {
+    if (value.includes(optionValue)) {
+      const newValue = value.filter((v) => v !== optionValue);
+      onChange(newValue);
+    } else {
+      onChange([...value, optionValue]);
+    }
+  };
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      onChange([]);
+    }
+  };
+  const buttonText = useMemo(() => {
+    if (allSelected) {
+      return selectAllLabel;
+    }
+    if (selectedCount === 0) {
+      return placeholder;
+    }
+    if (selectedCount === 1) {
+      const selectedOption = options.find((opt) => value.includes(opt.value));
+      return selectedOption?.label || `${selectedCount} selected`;
+    }
+    return `${selectedCount} selected`;
+  }, [selectedCount, options, value, placeholder, selectAllLabel, allSelected]);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "secondary",
+        className: cn("text-xs", className),
+        disabled: disabled || loading,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 text-left", selectedCount === 0 && "text-gray-chateau"), children: buttonText }),
+          loading ? /* @__PURE__ */ jsx(Loader2, { className: "text-gray-chateau size-4 animate-spin" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "border-border bg-secondary min-w-[12rem]", align: "start", children: [
+      label && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+        showSelectAll && /* @__PURE__ */ jsx(
+          DropdownMenuCheckboxItem,
+          {
+            checked: allSelected,
+            onCheckedChange: handleSelectAll,
+            className: "font-regular text-xs",
+            children: selectAllLabel
+          }
+        ),
+        showSelectAll && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        options.map((option) => /* @__PURE__ */ jsx(
+          DropdownMenuCheckboxItem,
+          {
+            className: "font-regular text-xs",
+            checked: value.includes(option.value),
+            onCheckedChange: () => handleToggle(option.value),
+            disabled: option.disabled,
+            children: option.label
+          },
+          option.value
+        ))
+      ] })
+    ] })
+  ] });
+};
+export {
+  DropdownsCheckbox
+};

package/ui/Dropdown/DropdownsSelect.js

@@ -0,0 +1,97 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { ChevronDownIcon, Loader2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "../Button/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./Dropdown.js";
+const DropdownsSelect = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  className,
+  disabled = false,
+  loading = false,
+  label,
+  triggerIcon,
+  triggerClassName
+}) => {
+  const [open, setOpen] = useState(false);
+  const handleSelect = (optionValue) => {
+    onChange(optionValue);
+    setOpen(false);
+  };
+  const buttonText = useMemo(() => {
+    if (!value) {
+      return placeholder;
+    }
+    const selectedOption = options.find((opt) => opt.value === value);
+    return selectedOption?.label || placeholder;
+  }, [value, options, placeholder]);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, disabled: disabled || loading, children: triggerIcon ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondaryOutline",
+        size: "l",
+        className: triggerClassName,
+        disabled: disabled || loading,
+        children: loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : triggerIcon
+      }
+    ) : /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "secondary",
+        size: "l",
+        className: cn("text-xs", className),
+        disabled: disabled || loading,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 text-left", !value && "text-gray-chateau"), children: buttonText }),
+          loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "border-border bg-secondary min-w-[12rem]",
+        align: triggerIcon ? "end" : "start",
+        children: [
+          label && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { className: "flex flex-col gap-[1px]", children: options.map((option) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              className: cn(
+                "font-regular text-xs",
+                value === option.value && "bg-hover",
+                option.disabled && "is-disabled",
+                option.className
+              ),
+              onClick: () => handleSelect(option.value),
+              disabled: option.disabled,
+              children: [
+                option.icon,
+                option.label
+              ]
+            },
+            option.value
+          )) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  DropdownsSelect
+};

package/ui/Dropdown/index.js

@@ -0,0 +1,38 @@
+import {
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuCheckboxItem as DropdownMenuCheckboxItem2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuGroup as DropdownMenuGroup2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuLabel as DropdownMenuLabel2,
+  DropdownMenuPortal as DropdownMenuPortal2,
+  DropdownMenuRadioGroup as DropdownMenuRadioGroup2,
+  DropdownMenuRadioItem as DropdownMenuRadioItem2,
+  DropdownMenuSeparator as DropdownMenuSeparator2,
+  DropdownMenuShortcut as DropdownMenuShortcut2,
+  DropdownMenuSub as DropdownMenuSub2,
+  DropdownMenuSubContent as DropdownMenuSubContent2,
+  DropdownMenuSubTrigger as DropdownMenuSubTrigger2,
+  DropdownMenuTrigger as DropdownMenuTrigger2
+} from "./Dropdown.js";
+import { DropdownsCheckbox } from "./DropdownsCheckbox.js";
+import { DropdownsSelect } from "./DropdownsSelect.js";
+export {
+  DropdownMenu2 as DropdownMenu,
+  DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem,
+  DropdownMenuContent2 as DropdownMenuContent,
+  DropdownMenuGroup2 as DropdownMenuGroup,
+  DropdownMenuItem2 as DropdownMenuItem,
+  DropdownMenuLabel2 as DropdownMenuLabel,
+  DropdownMenuPortal2 as DropdownMenuPortal,
+  DropdownMenuRadioGroup2 as DropdownMenuRadioGroup,
+  DropdownMenuRadioItem2 as DropdownMenuRadioItem,
+  DropdownMenuSeparator2 as DropdownMenuSeparator,
+  DropdownMenuShortcut2 as DropdownMenuShortcut,
+  DropdownMenuSub2 as DropdownMenuSub,
+  DropdownMenuSubContent2 as DropdownMenuSubContent,
+  DropdownMenuSubTrigger2 as DropdownMenuSubTrigger,
+  DropdownMenuTrigger2 as DropdownMenuTrigger,
+  DropdownsCheckbox,
+  DropdownsSelect
+};

package/ui/Editor/Editor.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDocumentTheme } from "../../lib/theme.js";
+import { cn } from "../../lib/cn.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import MonacoEditor, { loader } from "@monaco-editor/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import "./monacoSetup.js";
+import { defineCustomThemes, editorOptionsFn, setTheme } from "./theme.js";
+const Editor = ({
+  value,
+  header,
+  language = "yaml",
+  theme: themeProp,
+  className,
+  options,
+  readOnly = false,
+  id,
+  name,
+  autoHeight = false,
+  onChange,
+  ...props
+}) => {
+  const editorRef = useRef(null);
+  const themeFromDocument = useDocumentTheme();
+  const theme = themeProp ?? themeFromDocument;
+  const themeRef = useRef(theme);
+  themeRef.current = theme;
+  const [monacoInstance, setMonacoInstance] = useState(null);
+  useEffect(() => {
+    loader.init().then((monaco) => {
+      defineCustomThemes(monaco);
+      setMonacoInstance(monaco);
+      setTheme(monaco, themeRef.current);
+    });
+  }, []);
+  useEffect(() => {
+    if (monacoInstance) {
+      setTheme(monacoInstance, theme);
+    }
+  }, [theme, monacoInstance]);
+  const editorOptions = useMemo(() => editorOptionsFn(readOnly, options), [readOnly, options]);
+  const updateEditorHeight = () => {
+    const editorInstance = editorRef.current;
+    if (!editorInstance) return;
+    const contentHeight = editorInstance.getContentHeight();
+    const container = editorInstance.getDomNode();
+    if (container) {
+      container.style.height = `${contentHeight}px`;
+      editorInstance.layout();
+    }
+  };
+  const handleEditorDidMount = (editorInstance) => {
+    editorRef.current = editorInstance;
+    if (autoHeight) {
+      updateEditorHeight();
+      editorInstance.onDidContentSizeChange(() => {
+        updateEditorHeight();
+      });
+    }
+  };
+  const handleFocus = () => {
+    editorRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      "data-name": name,
+      className: cn(
+        "border-border bg-secondary min-h-[300px] overflow-hidden rounded-md border transition-shadow h-full",
+        className
+      ),
+      onFocus: handleFocus,
+      onClick: handleFocus,
+      children: [
+        header,
+        /* @__PURE__ */ jsx(
+          MonacoEditor,
+          {
+            onMount: handleEditorDidMount,
+            height: "100%",
+            language,
+            value,
+            theme,
+            onChange: (val) => onChange?.(val || ""),
+            options: editorOptions,
+            loading: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-md" }) }),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Editor
+};

package/ui/Editor/index.js

@@ -0,0 +1,4 @@
+import { Editor } from "./Editor.js";
+export {
+  Editor
+};