@mesob/ui 0.3.1 → 0.3.3

package/dist/components.d.ts

@@ -1143,7 +1143,10 @@ declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>
 declare const fieldVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Field({ className, orientation, ...props }: React.ComponentProps<'fieldset'> & VariantProps<typeof fieldVariants>): react_jsx_runtime.JSX.Element;
+type FieldProps = React.ComponentProps<'div'> & VariantProps<typeof fieldVariants> & {
+    'data-invalid'?: boolean;
+};
+declare function Field({ className, orientation, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): react_jsx_runtime.JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
@@ -1152,6 +1155,7 @@ declare function FieldSeparator({ children, className, ...props }: React.Compone
     children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<'div'> & {
+    /** From react-hook-form etc. Renders list when multiple. */
     errors?: Array<{
         message?: string;
     } | undefined>;

package/dist/components.js

@@ -610,14 +610,14 @@ var fieldVariants = cva2(
   {
     variants: {
       orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        vertical: ["flex-col gap-2 [&>*]:w-full [&>.sr-only]:w-auto"],
         horizontal: [
-          "flex-row items-center",
+          "flex-row items-center gap-2",
           "[&>[data-slot=field-label]]:flex-auto",
           "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
         ],
         responsive: [
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "flex-col gap-2 [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:gap-2 @md/field-group:[&>*]:w-auto",
           "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
           "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
         ]
@@ -628,23 +628,19 @@ var fieldVariants = cva2(
     }
   }
 );
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx9(
-    "fieldset",
-    {
-      "data-slot": "field",
-      "data-orientation": orientation,
-      className: cn(
-        fieldVariants({ orientation }),
-        "border-0 p-0 m-0",
-        className
-      ),
-      ...props
-    }
+function Field({ className, orientation = "vertical", ...props }) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: div avoids nested fieldsets when Field is inside FieldSet
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        role: "group",
+        "data-slot": "field",
+        "data-orientation": orientation,
+        className: cn(fieldVariants({ orientation }), className),
+        ...props
+      }
+    )
   );
 }
 function FieldContent({ className, ...props }) {
@@ -742,11 +738,11 @@ function FieldError({
   if (!content && errors?.length) {
     const uniqueErrors = [
       ...new Map(errors.map((error) => [error?.message, error])).values()
-    ];
+    ].filter(Boolean);
     if (uniqueErrors.length === 1) {
       content = uniqueErrors[0]?.message;
-    } else {
-      content = /* @__PURE__ */ jsx9("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+    } else if (uniqueErrors.length > 1) {
+      content = /* @__PURE__ */ jsx9("ul", { className: "ml-4 list-disc flex flex-col gap-1", children: uniqueErrors.map(
         (error) => error?.message && /* @__PURE__ */ jsx9("li", { children: error.message }, error.message)
       ) });
     }
@@ -759,7 +755,7 @@ function FieldError({
     {
       role: "alert",
       "data-slot": "field-error",
-      className: cn("cn-field-error", className),
+      className: cn("cn-field-error text-destructive text-sm", className),
       ...props,
       children: content
     }
@@ -6909,6 +6905,7 @@ import Underline from "@tiptap/extension-underline";
 import Youtube from "@tiptap/extension-youtube";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
+import { useMemo as useMemo8, useRef as useRef6 } from "react";
 
 // src/components/rich-text/controls/hardbreak-control.tsx
 import { IconPageBreak } from "@tabler/icons-react";
@@ -7447,73 +7444,97 @@ function RichTextInput({
   placeholder = "Start typing..."
 }) {
   const { value, onChange } = field;
-  const editor = useEditor({
-    immediatelyRender: false,
-    extensions: [
-      StarterKit.configure({
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        bulletList: { HTMLAttributes: { class: "list-disc pl-4" } },
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        orderedList: { HTMLAttributes: { class: "list-decimal pl-4" } }
-      }),
-      HardBreak.configure({ keepMarks: false }),
-      Underline,
-      Link.configure({
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        HTMLAttributes: { class: "text-primary underline" },
-        openOnClick: false
-      }),
-      Superscript,
-      SubScript,
-      Highlight,
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
-      Placeholder.configure({ placeholder }),
-      Image.configure({
-        inline: true,
-        allowBase64: true,
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        HTMLAttributes: {
-          class: "w-full h-auto my-3 rounded-[var(--radius-md)]"
-        }
-      }),
-      Youtube.configure({
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        HTMLAttributes: { class: "w-full aspect-video my-4" }
-      }),
-      Table2.configure({
-        resizable: true,
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        HTMLAttributes: {
-          class: "border-collapse table-auto w-full my-4"
-        }
-      }),
-      TableRow2.configure({
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        HTMLAttributes: { class: "border border-border" }
-      }),
-      TableCell2.configure({
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        HTMLAttributes: {
-          class: "border border-border p-2 min-w-[100px] min-h-[40px]"
-        }
-      }),
-      TableHeader2.configure({
-        // biome-ignore lint/style/useNamingConvention: tiptap API
-        HTMLAttributes: {
-          class: "border border-border p-2 bg-muted font-semibold"
+  const onChangeRef = useRef6(onChange);
+  onChangeRef.current = onChange;
+  const debounceRef = useRef6(null);
+  const pendingHtmlRef = useRef6(value ?? "");
+  const editorOptions = useMemo8(() => {
+    const syncHtml = (html) => onChangeRef.current?.(html ?? "<p></p>");
+    return {
+      immediatelyRender: false,
+      extensions: [
+        StarterKit.configure({
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          bulletList: { HTMLAttributes: { class: "list-disc pl-4" } },
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          orderedList: { HTMLAttributes: { class: "list-decimal pl-4" } }
+        }),
+        HardBreak.configure({ keepMarks: false }),
+        Underline,
+        Link.configure({
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          HTMLAttributes: { class: "text-primary underline" },
+          openOnClick: false
+        }),
+        Superscript,
+        SubScript,
+        Highlight,
+        TextAlign.configure({ types: ["heading", "paragraph"] }),
+        Placeholder.configure({ placeholder }),
+        Image.configure({
+          inline: true,
+          allowBase64: true,
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          HTMLAttributes: {
+            class: "w-full h-auto my-3 rounded-[var(--radius-md)]"
+          }
+        }),
+        Youtube.configure({
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          HTMLAttributes: { class: "w-full aspect-video my-4" }
+        }),
+        Table2.configure({
+          resizable: true,
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          HTMLAttributes: {
+            class: "border-collapse table-auto w-full my-4"
+          }
+        }),
+        TableRow2.configure({
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          HTMLAttributes: { class: "border border-border" }
+        }),
+        TableCell2.configure({
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          HTMLAttributes: {
+            class: "border border-border p-2 min-w-[100px] min-h-[40px]"
+          }
+        }),
+        TableHeader2.configure({
+          // biome-ignore lint/style/useNamingConvention: tiptap API
+          HTMLAttributes: {
+            class: "border border-border p-2 bg-muted font-semibold"
+          }
+        }),
+        CustomHeading,
+        Iframe
+      ],
+      content: value || "",
+      ...withOnUpdate ? {
+        onUpdate: (props) => {
+          const html = props?.editor?.getHTML() ?? "<p></p>";
+          pendingHtmlRef.current = html;
+          if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+          }
+          debounceRef.current = setTimeout(() => {
+            debounceRef.current = null;
+            syncHtml(pendingHtmlRef.current ?? "<p></p>");
+          }, 300);
+        },
+        onBlur: (props) => {
+          if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = null;
+          }
+          syncHtml(props?.editor?.getHTML() ?? "<p></p>");
         }
-      }),
-      CustomHeading,
-      Iframe
-    ],
-    content: value || "",
-    ...withOnUpdate && {
-      onUpdate: (props) => onChange?.(props?.editor?.getHTML() ?? "<p></p>")
-    },
-    ...!withOnUpdate && {
-      onBlur: (props) => onChange(props?.editor?.getHTML() ?? "<p></p>")
-    }
-  });
+      } : {
+        onBlur: (props) => syncHtml(props?.editor?.getHTML() ?? "<p></p>")
+      }
+    };
+  }, [value, withOnUpdate, placeholder]);
+  const editor = useEditor(editorOptions);
   const enabledControllersLength = enabledControllers.length;
   const isControllerEnabled = (controller) => enabledControllersLength === 0 || enabledControllers.includes(controller);
   return /* @__PURE__ */ jsxs51("div", { className: cn("flex flex-col gap-2", className), children: [
@@ -7837,23 +7858,23 @@ function LocaleInputRichText({
           )
         }
       ),
-      /* @__PURE__ */ jsxs52("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1", children: [
-        otherLanguages.length > 0 && /* @__PURE__ */ jsx80(
+      /* @__PURE__ */ jsxs52("div", { className: "absolute top-3 right-2 z-10 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx80(
           "button",
           {
             type: "button",
-            onClick: () => setExpanded(!expanded),
-            className: "cn-locale-input-toggle",
-            children: /* @__PURE__ */ jsx80(IconTextRecognition, { size: 18 })
+            onClick: () => setFullscreen(true),
+            className: "cn-locale-input-toggle-icon",
+            children: /* @__PURE__ */ jsx80(IconArrowsMaximize, { size: 18 })
           }
         ),
-        /* @__PURE__ */ jsx80(
+        otherLanguages.length > 0 && /* @__PURE__ */ jsx80(
           "button",
           {
             type: "button",
-            onClick: () => setFullscreen(true),
-            className: "cn-locale-input-toggle",
-            children: /* @__PURE__ */ jsx80(IconArrowsMaximize, { size: 18 })
+            onClick: () => setExpanded(!expanded),
+            className: "cn-locale-input-toggle-icon",
+            children: /* @__PURE__ */ jsx80(IconTextRecognition, { size: 18 })
           }
         )
       ] })
@@ -8650,7 +8671,7 @@ function Anchor({
 }
 
 // src/components/ui/angle-slider.tsx
-import { useCallback as useCallback6, useRef as useRef6, useState as useState20 } from "react";
+import { useCallback as useCallback6, useRef as useRef7, useState as useState20 } from "react";
 import { jsx as jsx94, jsxs as jsxs60 } from "react/jsx-runtime";
 var TAU = 2 * Math.PI;
 function AngleSlider({
@@ -8679,8 +8700,8 @@ function AngleSlider({
     },
     [isControlled, onChange]
   );
-  const ref = useRef6(null);
-  const angleRef = useRef6(value);
+  const ref = useRef7(null);
+  const angleRef = useRef7(value);
   const getAngle = useCallback6(
     (clientX, clientY) => {
       const el = ref.current;
@@ -8821,7 +8842,7 @@ function AngleSlider({
 import { useMesob as useMesob8 } from "@mesob/ui/providers";
 import { IconChevronDown as IconChevronDown7 } from "@tabler/icons-react";
 import { motion } from "motion/react";
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo8, useRef as useRef7, useState as useState21 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo9, useRef as useRef8, useState as useState21 } from "react";
 import { jsx as jsx95, jsxs as jsxs61 } from "react/jsx-runtime";
 function AnimatedTabs({
   tabs,
@@ -8840,10 +8861,10 @@ function AnimatedTabs({
   const activeTab = controlledActiveTab ?? internalActiveTab;
   const [visibleTabs, setVisibleTabs] = useState21(tabs);
   const [overflowTabs, setOverflowTabs] = useState21([]);
-  const containerRef = useRef7(null);
-  const tabsListRef = useRef7(null);
-  const dropdownTriggerRef = useRef7(null);
-  const tabRefs = useRef7([]);
+  const containerRef = useRef8(null);
+  const tabsListRef = useRef8(null);
+  const dropdownTriggerRef = useRef8(null);
+  const tabRefs = useRef8([]);
   const [underlineStyle, setUnderlineStyle] = useState21({ left: 0, width: 0 });
   const handleTabChange = (newValue) => {
     if (!controlledActiveTab) {
@@ -8935,7 +8956,7 @@ function AnimatedTabs({
     };
     updateUnderline();
   }, [activeTab, visibleTabs, overflowTabs, tabs]);
-  const activeTabData = useMemo8(
+  const activeTabData = useMemo9(
     () => tabs.find((tab) => tab.value === activeTab),
     [tabs, activeTab]
   );
@@ -10088,7 +10109,7 @@ function Code({
 // src/components/ui/color-input.tsx
 import { IconColorPicker } from "@tabler/icons-react";
 import * as React11 from "react";
-import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef10, useState as useState24 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef11, useState as useState24 } from "react";
 
 // src/lib/color-utils.ts
 function hex2rgb(hex) {
@@ -10290,7 +10311,7 @@ function hasAlpha(format) {
 }
 
 // src/components/ui/color-picker.tsx
-import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef9, useState as useState23 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef10, useState as useState23 } from "react";
 
 // src/components/ui/color-swatch.tsx
 import { jsx as jsx108, jsxs as jsxs65 } from "react/jsx-runtime";
@@ -10381,8 +10402,8 @@ function HueAlphaSlider({
   ariaLabel,
   className
 }) {
-  const ref = useRef9(null);
-  const lastRef = useRef9(value);
+  const ref = useRef10(null);
+  const lastRef = useRef10(value);
   const handleMove = useCallback7(
     (clientX) => {
       const el = ref.current;
@@ -10481,9 +10502,9 @@ function ColorPicker({
     () => parseColor(String(value ?? inputProps.defaultValue ?? "#000000"))
   );
   const isControlled = value !== void 0;
-  const valueRef = useRef9(value);
-  const saturationRef = useRef9(null);
-  const lastHsvaRef = useRef9(hsva);
+  const valueRef = useRef10(value);
+  const saturationRef = useRef10(null);
+  const lastHsvaRef = useRef10(hsva);
   lastHsvaRef.current = hsva;
   useEffect9(() => {
     if (value === valueRef.current) {
@@ -10929,17 +10950,17 @@ var ColorInput = React11.forwardRef(
     );
     const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();
     const _withEyeDropper = withEyeDropperProp && eyeDropperSupported;
-    const inputRef = useRef10(null);
-    const anchorRef = useRef10(null);
-    const popoverContentRef = useRef10(null);
-    const openTimestampRef = useRef10(0);
-    const pointerDownInPopoverRef = useRef10(false);
+    const inputRef = useRef11(null);
+    const anchorRef = useRef11(null);
+    const popoverContentRef = useRef11(null);
+    const openTimestampRef = useRef11(0);
+    const pointerDownInPopoverRef = useRef11(false);
     useEffect10(() => {
       if (isColorValid(value) || value.trim() === "") {
         setLastValidValue(value);
       }
     }, [value]);
-    const prevFormatRef = useRef10(format);
+    const prevFormatRef = useRef11(format);
     useEffect10(() => {
       if (prevFormatRef.current !== format && isColorValid(value)) {
         setValue(formatColor(parseColor(value), format));
@@ -11173,7 +11194,7 @@ ColorInput.displayName = "ColorInput";
 // src/components/ui/combobox.tsx
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 import { IconCheck as IconCheck4, IconChevronDown as IconChevronDown9 } from "@tabler/icons-react";
-import { useMemo as useMemo9, useState as useState25 } from "react";
+import { useMemo as useMemo10, useState as useState25 } from "react";
 import { jsx as jsx112, jsxs as jsxs68 } from "react/jsx-runtime";
 var COMBOBOX_CONTENT_BASE_CN = "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)";
 var COMBOBOX_ITEM_BASE_CN = "relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
@@ -11189,11 +11210,11 @@ function Combobox({
   ...props
 }) {
   const [inputValue, setInputValue] = useState25("");
-  const selectedOption = useMemo9(
+  const selectedOption = useMemo10(
     () => options.find((opt) => opt.value === value) ?? null,
     [options, value]
   );
-  const filteredOptions = useMemo9(() => {
+  const filteredOptions = useMemo10(() => {
     if (!inputValue) {
       return options;
     }
@@ -12037,7 +12058,7 @@ function DrawerDescription({
 }
 
 // src/components/ui/file-button.tsx
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { Fragment as Fragment21, jsx as jsx121, jsxs as jsxs74 } from "react/jsx-runtime";
 function FileButton({
   onChange,
@@ -12049,7 +12070,7 @@ function FileButton({
   className,
   ...props
 }) {
-  const inputRef = useRef11(null);
+  const inputRef = useRef12(null);
   const handleClick = () => {
     inputRef.current?.click();
   };
@@ -12086,7 +12107,7 @@ function FileButton({
 
 // src/components/ui/file-input.tsx
 import { IconFile, IconUpload, IconX as IconX10 } from "@tabler/icons-react";
-import { useId as useId2, useRef as useRef12, useState as useState28 } from "react";
+import { useId as useId2, useRef as useRef13, useState as useState28 } from "react";
 import { jsx as jsx122, jsxs as jsxs75 } from "react/jsx-runtime";
 function FileInput({
   className,
@@ -12097,7 +12118,7 @@ function FileInput({
 }) {
   const [files, setFiles] = useState28([]);
   const [isDragging, setIsDragging] = useState28(false);
-  const inputRef = useRef12(null);
+  const inputRef = useRef13(null);
   const handleChange = (e) => {
     const selectedFiles = Array.from(e.target.files || []);
     setFiles(selectedFiles);
@@ -12388,7 +12409,7 @@ function FloatingIndicator({
 }
 
 // src/components/ui/focus-trap.tsx
-import { cloneElement as cloneElement2, useEffect as useEffect12, useRef as useRef13 } from "react";
+import { cloneElement as cloneElement2, useEffect as useEffect12, useRef as useRef14 } from "react";
 import { jsx as jsx125 } from "react/jsx-runtime";
 var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function getFocusableElements(container) {
@@ -12397,7 +12418,7 @@ function getFocusableElements(container) {
   );
 }
 function useFocusTrap(active) {
-  const ref = useRef13(null);
+  const ref = useRef14(null);
   useEffect12(() => {
     if (!active) {
       return;
@@ -13730,11 +13751,12 @@ var MoneyInput = forwardRef5(
     currencies = defaultCurrencies,
     fractionDigits = 2,
     disabled = false,
-    placeholder = fractionDigits > 0 ? `0.${"0".repeat(fractionDigits)}` : "0",
+    placeholder: placeholderProp,
     className = "",
     size = "md",
     id
   }, ref) => {
+    const placeholder = placeholderProp ?? (fractionDigits > 0 ? `0.${"0".repeat(fractionDigits)}` : "0");
     const [internalValue, setInternalValue] = useState32(value);
     const [internalCurrency, setInternalCurrency] = useState32(currency);
     const [displayValue, setDisplayValue] = useState32(
@@ -15425,7 +15447,7 @@ function Space({ className, h, w, style, ...props }) {
 
 // src/components/ui/spoiler.tsx
 import { IconChevronDown as IconChevronDown14 } from "@tabler/icons-react";
-import { useEffect as useEffect13, useRef as useRef14, useState as useState36 } from "react";
+import { useEffect as useEffect13, useRef as useRef15, useState as useState36 } from "react";
 import { jsx as jsx160, jsxs as jsxs92 } from "react/jsx-runtime";
 function Spoiler({
   maxHeight = 100,
@@ -15438,7 +15460,7 @@ function Spoiler({
 }) {
   const [isExpanded, setIsExpanded] = useState36(initialState);
   const [shouldShowButton, setShouldShowButton] = useState36(false);
-  const contentRef = useRef14(null);
+  const contentRef = useRef15(null);
   useEffect13(() => {
     const el = contentRef.current;
     if (!el) {