devnonla-ui 0.1.0

package/src/dropdown/ContextMenu.tsx

@@ -0,0 +1,97 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import type { MenuItemType, MenuProps } from "./Dropdown";
+import { menuContentClass, menuIconClass, menuItemClass } from "./menuClasses";
+
+export type ContextMenuProps = {
+  menu?: MenuProps;
+  children: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  overlayClassName?: string;
+  disabled?: boolean;
+};
+
+function ChevronRight() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden className="ml-auto opacity-50">
+      <path d="M4.5 3L7.5 6L4.5 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function itemKey(item: MenuItemType, i: number) {
+  return item.key ?? (item.type === "divider" ? `divider-${i}` : `item-${i}`);
+}
+
+function MenuItems({
+  items,
+  onClick,
+  contentClassName,
+}: {
+  items: (MenuItemType | null | undefined)[];
+  onClick?: MenuProps["onClick"];
+  contentClassName: string;
+}) {
+  return (
+    <>
+      {items.map((item, i) => {
+        if (!item) return null;
+        const key = itemKey(item, i);
+        if (item.type === "divider") {
+          return <ContextMenuPrimitive.Separator key={key} className="my-1 h-px bg-border" />;
+        }
+        if (item.children?.length) {
+          return (
+            <ContextMenuPrimitive.Sub key={key}>
+              <ContextMenuPrimitive.SubTrigger disabled={item.disabled} className={cn(menuItemClass, "data-[state=open]:bg-foreground/8", item.danger && "text-destructive", item.className)} style={item.style}>
+                {item.icon ? <span className={menuIconClass}>{item.icon}</span> : null}
+                <span className="min-w-0 flex-1">{item.label}</span>
+                <ChevronRight />
+              </ContextMenuPrimitive.SubTrigger>
+              <ContextMenuPrimitive.Portal>
+                <ContextMenuPrimitive.SubContent sideOffset={4} className={contentClassName}>
+                  <MenuItems items={item.children} onClick={onClick} contentClassName={contentClassName} />
+                </ContextMenuPrimitive.SubContent>
+              </ContextMenuPrimitive.Portal>
+            </ContextMenuPrimitive.Sub>
+          );
+        }
+        return (
+          <ContextMenuPrimitive.Item
+            key={key}
+            disabled={item.disabled}
+            className={cn(menuItemClass, item.danger && "text-destructive", item.className)}
+            style={item.style}
+            onSelect={() => {
+              item.onClick?.({ key });
+              onClick?.({ key });
+            }}
+          >
+            {item.icon ? <span className={menuIconClass}>{item.icon}</span> : null}
+            {item.label}
+          </ContextMenuPrimitive.Item>
+        );
+      })}
+    </>
+  );
+}
+
+export function ContextMenu({ menu, children, open, onOpenChange, className, overlayClassName, disabled }: ContextMenuProps) {
+  if (disabled) return children;
+
+  const contentClassName = cn(menuContentClass, className, overlayClassName, menu?.className);
+
+  return (
+    <ContextMenuPrimitive.Root modal open={open} onOpenChange={onOpenChange}>
+      <ContextMenuPrimitive.Trigger asChild>{children}</ContextMenuPrimitive.Trigger>
+      <ContextMenuPrimitive.Portal>
+        <ContextMenuPrimitive.Content collisionPadding={8} className={contentClassName} style={menu?.style}>
+          <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} contentClassName={contentClassName} />
+        </ContextMenuPrimitive.Content>
+      </ContextMenuPrimitive.Portal>
+    </ContextMenuPrimitive.Root>
+  );
+}

package/src/dropdown/Dropdown.tsx

@@ -0,0 +1,139 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { type CSSProperties, type MouseEvent, type ReactNode, useState } from "react";
+import { cn } from "../lib/cn";
+import { type PopperPlacement, placementToRadix } from "../lib/placement";
+import { menuContentClass, menuIconClass, menuItemClass } from "./menuClasses";
+
+export type MenuItemType = {
+  key?: string;
+  label?: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  danger?: boolean;
+  type?: "item" | "divider";
+  children?: (MenuItemType | null | undefined)[];
+  onClick?: (info?: { key: string }) => void;
+  style?: CSSProperties;
+  className?: string;
+};
+
+export type MenuProps = {
+  items?: (MenuItemType | null | undefined)[];
+  onClick?: (info: { key: string }) => void;
+  style?: CSSProperties;
+  className?: string;
+};
+
+export type DropdownProps = {
+  menu?: MenuProps;
+  children: ReactNode;
+  trigger?: ("click" | "hover" | "contextMenu")[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: PopperPlacement;
+  className?: string;
+  overlayClassName?: string;
+  disabled?: boolean;
+  /** antd 5.25+ alias — accepted, no-op (Radix unmounts when closed). */
+  destroyOnHidden?: boolean;
+  classNames?: { root?: string; overlay?: string };
+};
+
+function ChevronRight() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden className="ml-auto opacity-50">
+      <path d="M4.5 3L7.5 6L4.5 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function itemKey(item: MenuItemType, i: number) {
+  return item.key ?? (item.type === "divider" ? `divider-${i}` : `item-${i}`);
+}
+
+function MenuItems({ items, onClick }: { items: (MenuItemType | null | undefined)[]; onClick?: MenuProps["onClick"] }) {
+  return (
+    <>
+      {items.map((item, i) => {
+        if (!item) return null;
+        const key = itemKey(item, i);
+        if (item.type === "divider") {
+          return <DropdownMenu.Separator key={key} className="my-1 h-px bg-border" />;
+        }
+        if (item.children?.length) {
+          return (
+            <DropdownMenu.Sub key={key}>
+              <DropdownMenu.SubTrigger disabled={item.disabled} className={cn(menuItemClass, "data-[state=open]:bg-foreground/8", item.danger && "text-destructive", item.className)} style={item.style}>
+                {item.icon ? <span className={menuIconClass}>{item.icon}</span> : null}
+                <span className="min-w-0 flex-1">{item.label}</span>
+                <ChevronRight />
+              </DropdownMenu.SubTrigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.SubContent sideOffset={4} className={cn(menuContentClass, "nonla-popper")}>
+                  <MenuItems items={item.children} onClick={onClick} />
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Sub>
+          );
+        }
+        return (
+          <DropdownMenu.Item
+            key={key}
+            disabled={item.disabled}
+            className={cn(menuItemClass, item.danger && "text-destructive", item.className)}
+            style={item.style}
+            onSelect={() => {
+              item.onClick?.({ key });
+              onClick?.({ key });
+            }}
+          >
+            {item.icon ? <span className={menuIconClass}>{item.icon}</span> : null}
+            {item.label}
+          </DropdownMenu.Item>
+        );
+      })}
+    </>
+  );
+}
+
+export function Dropdown({ menu, children, trigger = ["click"], open, onOpenChange, placement = "bottomLeft", className, overlayClassName, disabled }: DropdownProps) {
+  const { side, align } = placementToRadix(placement);
+  const hover = trigger.includes("hover");
+  const contextMenu = trigger.includes("contextMenu");
+  const click = trigger.includes("click") || (!hover && !contextMenu);
+  const [innerOpen, setInnerOpen] = useState(false);
+  const isOpen = open ?? innerOpen;
+  const setIsOpen = (v: boolean) => {
+    if (open === undefined) setInnerOpen(v);
+    onOpenChange?.(v);
+  };
+
+  const handleContext = (e: MouseEvent) => {
+    if (!contextMenu || disabled) return;
+    e.preventDefault();
+    setIsOpen(true);
+  };
+
+  return (
+    <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen} modal={!hover}>
+      <DropdownMenu.Trigger asChild disabled={disabled} onClick={click || contextMenu ? undefined : (e) => e.preventDefault()} onMouseEnter={hover && !disabled ? () => setIsOpen(true) : undefined} onMouseLeave={hover ? () => setIsOpen(false) : undefined} onContextMenu={handleContext}>
+        {children}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          side={side}
+          align={align === "center" ? "start" : align}
+          sideOffset={4}
+          className={cn(menuContentClass, "nonla-popper", className, overlayClassName, menu?.className)}
+          style={menu?.style}
+          onMouseEnter={hover ? () => setIsOpen(true) : undefined}
+          onMouseLeave={hover ? () => setIsOpen(false) : undefined}
+        >
+          <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}
+
+export type { MenuProps as DropdownMenuProps };

package/src/dropdown/menuClasses.ts

@@ -0,0 +1,9 @@
+import { cn } from "../lib/cn";
+import { glassOverlayClass } from "../lib/surface";
+
+export const menuItemClass =
+  "nonla-menu-item relative flex cursor-default select-none items-center gap-2 rounded-md border border-solid border-transparent px-2.5 py-1.5 text-sm outline-none data-[disabled]:opacity-40";
+
+export const menuContentClass = cn(glassOverlayClass, "min-w-40 overflow-hidden p-1");
+
+export const menuIconClass = "inline-flex size-4 shrink-0 items-center justify-center [&_img]:size-4 [&_svg]:size-4";

package/src/empty/Empty.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+const LOGO_CONE = "M768 68 C752 68 640 145 439 300 C338 377 250 449 194 500 C172 519 150 540 134 560 C122 576 109 591 103 600 C99 613 100 628 101 640 A666 108 0 0 1 1433 640 C1434 628 1435 613 1431 600 C1425 591 1412 576 1400 560 C1384 540 1362 519 1340 500 C1284 449 1196 377 1095 300 C894 145 782 68 768 68Z";
+
+function LogoMark() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="100 40 1336 960" width={48} height={35} fill="none" aria-hidden className="text-muted-foreground opacity-40">
+      <ellipse fill="color-mix(in srgb, currentColor 48%, black)" cx="767" cy="640" rx="666" ry="190" />
+      <circle fill="currentColor" cx="768" cy="602" r="371.6" />
+      <path fill="none" stroke="color-mix(in srgb, currentColor 78%, black)" strokeWidth="6" d="M112 640 A655 108 0 0 1 1422 640" />
+      <path fill="none" stroke="color-mix(in srgb, currentColor 48%, black)" strokeWidth="20" d="M112 640 A655 106 0 0 1 1422 640" />
+      <path fill="color-mix(in srgb, currentColor 78%, black)" d={LOGO_CONE} />
+      <g fill="none" stroke="color-mix(in srgb, currentColor 48%, black)" strokeWidth="6" strokeLinecap="round" opacity="0.55">
+        <path d="M750 96 C625 260 455 421 282 563" />
+        <path d="M758 96 C700 241 644 377 588 507" />
+        <path d="M778 96 C836 241 892 377 948 507" />
+        <path d="M786 96 C911 260 1081 421 1254 563" />
+      </g>
+      <g fill="var(--nonla-bg)">
+        <ellipse cx="607.5" cy="705" rx="44.5" ry="68" />
+        <ellipse cx="921.5" cy="705" rx="44.5" ry="68" />
+      </g>
+      <g fill="var(--nonla-solid-fg)">
+        <ellipse cx="618" cy="678" rx="13" ry="19" />
+        <ellipse cx="932" cy="678" rx="13" ry="19" />
+      </g>
+      <path fill="none" stroke="var(--nonla-bg)" strokeWidth="24" strokeLinecap="round" d="M696 802 C733 846 801 846 837 802" />
+    </svg>
+  );
+}
+
+export type EmptyProps = {
+  description?: ReactNode | null;
+  children?: ReactNode;
+  className?: string;
+};
+
+export function Empty({ description = "No data", children, className }: EmptyProps) {
+  return (
+    <div role="status" className={cn("flex min-w-0 flex-col items-center justify-center gap-3 px-6 py-10 text-center", className)}>
+      <LogoMark />
+      {description != null ? <p className="m-0 max-w-sm text-sm text-muted-foreground">{description}</p> : null}
+      {children ? <div className="mt-2 flex flex-col items-center gap-2">{children}</div> : null}
+    </div>
+  );
+}

package/src/form/Form.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { FormProvider, type FieldValues, type UseFormReturn, useWatch } from "react-hook-form";
+import { cn } from "../lib/cn";
+import { FormExtraContext, type FormFetcher } from "./common/context";
+import { fieldNameOf } from "./common/rules";
+import type { TFormItemProps } from "./common/types";
+import { FormItem } from "./FormItem";
+
+export type FormProps<T extends FieldValues = FieldValues> = {
+  form: UseFormReturn<T>;
+  items: TFormItemProps[];
+  onValuesChange?: (allValues: T) => void;
+  /** Injected for `select_remote` — UI package never imports app API. */
+  fetcher?: FormFetcher;
+  className?: string;
+  /** Debounce ms for onValuesChange (default 300). */
+  valuesChangeDebounce?: number;
+};
+
+function evalCondition(fieldValue: unknown, operator: string, compareValue: unknown): boolean {
+  switch (operator) {
+    case "==":
+      // eslint-disable-next-line eqeqeq
+      return fieldValue == compareValue;
+    case "!=":
+      // eslint-disable-next-line eqeqeq
+      return fieldValue != compareValue;
+    case ">=":
+      return (fieldValue as number) >= (compareValue as number);
+    case "<=":
+      return (fieldValue as number) <= (compareValue as number);
+    case ">":
+      return (fieldValue as number) > (compareValue as number);
+    case "<":
+      return (fieldValue as number) < (compareValue as number);
+    default:
+      return false;
+  }
+}
+
+function matchConditions(form: UseFormReturn<FieldValues>, conditions?: TFormItemProps["conditions"]): boolean {
+  if (!conditions?.length) return true;
+  for (const group of conditions) {
+    let andOk = true;
+    for (const [fieldName, operator, compareValue] of group) {
+      const fieldValue = form.getValues(fieldName);
+      andOk = andOk && evalCondition(fieldValue, operator, compareValue);
+    }
+    if (andOk) return true;
+  }
+  return false;
+}
+
+export function Form<T extends FieldValues = FieldValues>({
+  form,
+  items,
+  onValuesChange,
+  fetcher,
+  className,
+  valuesChangeDebounce = 300,
+}: FormProps<T>) {
+  const watchValues = useWatch({ control: form.control });
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onValuesChangeRef = useRef(onValuesChange);
+  onValuesChangeRef.current = onValuesChange;
+
+  useEffect(() => {
+    if (!onValuesChangeRef.current) return;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      onValuesChangeRef.current?.(form.getValues());
+    }, valuesChangeDebounce);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [watchValues, form, valuesChangeDebounce]);
+
+  const extra = useMemo(() => ({ fetcher }), [fetcher]);
+
+  const renderItem = useCallback(
+    (item: TFormItemProps, index: number) => {
+      if (!matchConditions(form as UseFormReturn<FieldValues>, item.conditions)) return null;
+      return <FormItem key={`${fieldNameOf(item.name)}-${index}`} {...item} control={form.control as never} />;
+    },
+    [form],
+  );
+
+  return (
+    <FormExtraContext.Provider value={extra}>
+      <FormProvider {...form}>
+        <div className={cn("grid grid-cols-12 gap-x-4", className)}>{items.map((item, index) => renderItem(item, index))}</div>
+      </FormProvider>
+    </FormExtraContext.Provider>
+  );
+}

package/src/form/FormItem.tsx

@@ -0,0 +1,145 @@
+import { useState, type ComponentType } from "react";
+import { Controller, type Control, type FieldValues } from "react-hook-form";
+import { cn } from "../lib/cn";
+import { EFormItemType } from "./common/enum";
+import { fieldNameOf, hydrateRules, isRuleRequired } from "./common/rules";
+import type { TFormItemCustom, TFormItemProps } from "./common/types";
+import { FormItemHelps } from "./partials/FormItemHelps";
+import { FieldCheckbox } from "./variants/FieldCheckbox";
+import { FieldColor } from "./variants/FieldColor";
+import { FieldDateTime } from "./variants/FieldDateTime";
+import { FieldHidden } from "./variants/FieldHidden";
+import { FieldInput } from "./variants/FieldInput";
+import { FieldNumber } from "./variants/FieldNumber";
+import { FieldObject } from "./variants/FieldObject";
+import { FieldRadio } from "./variants/FieldRadio";
+import { FieldRepeater } from "./variants/FieldRepeater";
+import { FieldSelect } from "./variants/FieldSelect";
+import { FieldSelectMultiple } from "./variants/FieldSelectMultiple";
+import { FieldSelectRemote } from "./variants/FieldSelectRemote";
+import { FieldSwitch } from "./variants/FieldSwitch";
+import { FieldTextarea } from "./variants/FieldTextarea";
+import { FieldTime } from "./variants/FieldTime";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const fieldComponents: Partial<Record<EFormItemType, ComponentType<any>>> = {
+  [EFormItemType.Input]: FieldInput,
+  [EFormItemType.Number]: FieldNumber,
+  [EFormItemType.Select]: FieldSelect,
+  [EFormItemType.SelectMultiple]: FieldSelectMultiple,
+  [EFormItemType.Hidden]: FieldHidden,
+  [EFormItemType.Repeater]: FieldRepeater,
+  [EFormItemType.SelectRemote]: FieldSelectRemote,
+  [EFormItemType.Radio]: FieldRadio,
+  [EFormItemType.Object]: FieldObject,
+  [EFormItemType.Textarea]: FieldTextarea,
+  [EFormItemType.Color]: FieldColor,
+  [EFormItemType.DateTime]: FieldDateTime,
+  [EFormItemType.Time]: FieldTime,
+  [EFormItemType.Switch]: FieldSwitch,
+  [EFormItemType.Checkbox]: FieldCheckbox,
+  [EFormItemType.JSON]: FieldTextarea,
+  [EFormItemType.Editor]: FieldTextarea,
+};
+
+export type FormItemProps = TFormItemProps & {
+  control: Control<FieldValues>;
+};
+
+function isCustomItem(props: TFormItemProps): props is TFormItemCustom {
+  return props.type === EFormItemType.Custom;
+}
+
+export function FormItem(props: FormItemProps) {
+  const {
+    label,
+    helps,
+    rules,
+    type,
+    collapsable = false,
+    className,
+    labelClassName,
+    innerClassName,
+    colSpan = 12,
+    control,
+    name,
+  } = props;
+
+  const [collapsed, setCollapsed] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const FieldComponent: ComponentType<any> | undefined = type ? fieldComponents[type] : FieldInput;
+  const fieldName = fieldNameOf(name);
+  const required = isRuleRequired(rules);
+  const rhfRules = hydrateRules(rules);
+
+  if (type === EFormItemType.Hidden) {
+    return FieldComponent ? (
+      <Controller
+        control={control}
+        name={fieldName}
+        rules={rhfRules}
+        render={({ field }) => <FieldComponent {...props} field={field} />}
+      />
+    ) : null;
+  }
+
+  return (
+    <Controller
+      control={control}
+      name={fieldName}
+      rules={rhfRules}
+      render={({ field, fieldState }) => (
+        <div className={cn("flex flex-col gap-1.5", className)} style={{ gridColumn: `span ${colSpan} / span ${colSpan}` }}>
+          {label != null && label !== "" ? (
+            <div className={cn("flex flex-row items-center gap-2", labelClassName)}>
+              {collapsable ? (
+                <button
+                  type="button"
+                  aria-label={collapsed ? "Expand" : "Collapse"}
+                  className="inline-flex size-4 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-muted p-0 text-muted-foreground"
+                  onClick={() => setCollapsed((v) => !v)}
+                >
+                  <svg
+                    width="10"
+                    height="10"
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    aria-hidden
+                    className={cn("transition-transform", collapsed && "-rotate-90")}
+                  >
+                    <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                </button>
+              ) : null}
+              <label className="text-sm text-foreground">
+                {label}
+                {required ? <span className="ml-1 text-destructive">*</span> : null}
+              </label>
+            </div>
+          ) : null}
+
+          <div
+            className={cn(
+              "flex flex-col transition-[max-height]",
+              collapsable && label ? "pl-6" : "",
+              collapsed ? "max-h-0 overflow-hidden" : "",
+              innerClassName,
+            )}
+          >
+            {isCustomItem(props) ? (
+              props.render({ field, fieldState, status: fieldState.error ? "error" : undefined })
+            ) : FieldComponent ? (
+              <FieldComponent {...props} field={field} control={control} status={fieldState.error ? "error" : undefined} />
+            ) : null}
+
+            <FormItemHelps items={helps} />
+
+            <div className="min-h-6 pt-1 text-xs leading-snug" role={fieldState.error?.message ? "alert" : undefined}>
+              {fieldState.error?.message ? <div className="pl-2.75 text-destructive">{fieldState.error.message}</div> : null}
+            </div>
+          </div>
+        </div>
+      )}
+    />
+  );
+}

package/src/form/common/context.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+export type FormFetcher = (endpoint: string) => Promise<unknown>;
+
+export type FormExtraContextValue = {
+  fetcher?: FormFetcher;
+};
+
+export const FormExtraContext = createContext<FormExtraContextValue>({});
+
+export function useFormExtra() {
+  return useContext(FormExtraContext);
+}

package/src/form/common/enum.ts

@@ -0,0 +1,20 @@
+export enum EFormItemType {
+  Textarea = "textarea",
+  Input = "input",
+  Number = "number",
+  Select = "select",
+  SelectMultiple = "select_multiple",
+  DateTime = "date_time",
+  Time = "time",
+  Repeater = "repeater",
+  Hidden = "hidden",
+  SelectRemote = "select_remote",
+  Radio = "radio",
+  JSON = "json",
+  Color = "color",
+  Object = "object",
+  Editor = "editor",
+  Switch = "switch",
+  Checkbox = "checkbox",
+  Custom = "custom",
+}

package/src/form/common/rules.ts

@@ -0,0 +1,68 @@
+import type { RegisterOptions } from "react-hook-form";
+import type { TFormRule, TRuleValueMessage } from "./types";
+
+function asValueMessage(raw: number | TRuleValueMessage | undefined): TRuleValueMessage | undefined {
+  if (raw == null) return undefined;
+  if (typeof raw === "number") return { value: raw };
+  return raw;
+}
+
+function compilePattern(value: string | RegExp, message?: string): { value: RegExp; message?: string } | undefined {
+  if (value instanceof RegExp) {
+    return { value, message };
+  }
+  try {
+    return { value: new RegExp(value), message };
+  } catch (err) {
+    console.error("[nonla-ui Form] Invalid pattern regex:", value, err);
+    return undefined;
+  }
+}
+
+/**
+ * Hydrate JSON-serializable `TFormRule` into RHF `RegisterOptions`.
+ * Converts string `pattern.value` → `RegExp`.
+ */
+export function hydrateRules(rules?: TFormRule): RegisterOptions | undefined {
+  if (!rules) return undefined;
+
+  const out: RegisterOptions = {};
+
+  if (rules.required != null) {
+    out.required = rules.required;
+  }
+
+  const min = asValueMessage(rules.min);
+  if (min) out.min = min.message != null ? { value: min.value, message: min.message } : min.value;
+
+  const max = asValueMessage(rules.max);
+  if (max) out.max = max.message != null ? { value: max.value, message: max.message } : max.value;
+
+  const minLength = asValueMessage(rules.minLength);
+  if (minLength) out.minLength = minLength.message != null ? { value: minLength.value, message: minLength.message } : minLength.value;
+
+  const maxLength = asValueMessage(rules.maxLength);
+  if (maxLength) out.maxLength = maxLength.message != null ? { value: maxLength.value, message: maxLength.message } : maxLength.value;
+
+  if (rules.pattern) {
+    const compiled = compilePattern(rules.pattern.value, rules.pattern.message);
+    if (compiled) {
+      out.pattern = compiled.message != null ? { value: compiled.value, message: compiled.message } : compiled.value;
+    }
+  }
+
+  if (rules.validate) {
+    out.validate = rules.validate as RegisterOptions["validate"];
+  }
+
+  return out;
+}
+
+export function fieldNameOf(name: string | string[] | number[]): string {
+  return Array.isArray(name) ? name.join(".") : String(name);
+}
+
+export function isRuleRequired(rules?: TFormRule): boolean {
+  if (rules?.required == null || rules.required === false) return false;
+  return true;
+}