devnonla-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 devlangla
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,140 @@
+# devnonla-ui (NonlaUI)
+
+Ant Design–like React controls for Nonla Agents.
+
+```bash
+bun add devnonla-ui
+```
+
+Peer deps: `react` / `react-dom` >= 19, `react-hook-form`. Consumer should use Tailwind CSS v4.
+
+```tsx
+import "devnonla-ui/styles.css";
+import { App, Button, EFormItemType, Form, Modal, message, type TFormItemProps } from "devnonla-ui";
+import { useForm } from "react-hook-form";
+
+message.success("Saved");
+Modal.confirm({ title: "Delete?", onOk: async () => {} });
+
+const items: TFormItemProps[] = [
+  {
+    type: EFormItemType.Input,
+    name: "name",
+    label: "Name",
+    rules: { required: "Name is required" },
+    options: { placeholder: "Your name" },
+  },
+];
+
+function Example() {
+  const form = useForm({ defaultValues: { name: "" } });
+  return (
+    <App>
+      <form onSubmit={form.handleSubmit(console.log)}>
+        <Form form={form} items={items} />
+        <Button type="primary" htmlType="submit">
+          Save
+        </Button>
+      </form>
+    </App>
+  );
+}
+```
+
+`Form` is JSON-schema driven (ZoForm-style) on `react-hook-form`. The BE can return `TFormItemProps[]`; FE hydrates `rules.pattern` strings to `RegExp`. Pass `fetcher` for `select_remote` fields.
+
+# Sizes
+
+Only **3 canonical sizes**: `small` | `default` | `large`.
+
+Edit [`src/lib/sizes.ts`](src/lib/sizes.ts) — `CONTROL_SIZES`.
+
+Aliases: `xs` → small, `middle` / `medium` → default.
+
+# Theme (colors)
+
+All color lives in **`--nonla-*` knobs** (`src/styles.css`). Components never hardcode palette hex.
+
+**Other apps** — import the CSS, then override knobs. Do not fork Button/Tag/….
+
+```css
+@import "tailwindcss";
+@import "devnonla-ui/styles.css";
+
+:root {
+  --nonla-brand: #3b82f6;
+  --nonla-bg: #0b0f19;
+}
+```
+
+`--brand-50` … `--brand-800` follow `--nonla-brand` (500 = the knob). Text on cream uses `brand-700`.
+
+Or at runtime:
+
+```tsx
+<App
+  theme={{
+    colors: { brand: "#3b82f6", bg: "#0b0f19", border: "#666666", borderInput: "#8a8a8a" },
+  }}
+>
+  …
+</App>
+```
+
+Flat knobs still work (`brand`, `colorBorder`, `colorBorderInput`, …). `applyNonlaTheme({ brand: "#3b82f6" })` does the same on `:root`.
+
+Core knobs: `--nonla-bg`, `--nonla-fg`, `--nonla-brand`, `--nonla-danger`, `--nonla-success`, `--nonla-warn`, `--nonla-link`, `--nonla-radius` (small = −2px, large = +2px), `--nonla-height` / `--nonla-height-sm` / `--nonla-height-lg`, plus surfaces (`--nonla-surface`, `--nonla-chip`, …) and preset accents (`--nonla-blue`, `--nonla-purple`, …).
+
+Those map into shadcn-standard tokens (`--background`, `--destructive`, …) plus Nonla aliases (`--brand`, `--success`, …).
+
+- You: only touch `--nonla-*` (CSS or `theme` / `applyNonlaTheme`).
+- Shadcn consumers: can still override `--background` / `--primary` / etc.
+- Nonla CTA = `--brand` (from `--nonla-brand`). `--primary` = ink (emphasis), not the amber button.
+
+# Desktop
+
+Meadow wallpaper, window chrome, header bar, and desktop icons live in this package so other Nonla apps share the same shell.
+
+```tsx
+import { DesktopStage, DesktopHeader, MeadowDesktop, DesktopWindow, MeadowShell, Menu, FluentIcon } from "devnonla-ui";
+
+<DesktopStage>
+  <MeadowDesktop>{icons}</MeadowDesktop>
+  <DesktopHeader logo={logo} leading={nav} trailing={apps} profile={avatar} />
+  <DesktopWindow title="Tools" expanded={false} onClose={close} onToggleExpand={toggle}>
+    {children}
+  </DesktopWindow>
+</DesktopStage>
+```
+
+`MeadowShell` is the login/setup backdrop. `Menu` is the glass picker (trigger + items + hover action) used by AgentsMenu. Wallpaper defaults to the bundled meadow; pass `src` on `MeadowWallpaper` to swap.
+
+# Chat
+
+`AgentPanel` is the full chat surface: welcome, messages, thinking, tool calls, markdown, composer. Attach an SSE endpoint and send.
+
+```tsx
+import { AgentPanel } from "devnonla-ui";
+
+<AgentPanel
+  endpoint="/api/agents/abc/assistant/stream"
+  title="Nova"
+  extraBody={{ providerId, modelId: model }}
+/>
+```
+
+`endpoint` can also be a function that returns a `Response` (tests, mocks).
+
+POST body: `{ messages, ...extraBody }`. Stream events:
+
+`text-delta` | `thinking-delta` | `tool-call` | `tool-result` | `done` | `error`
+
+Primitives (`ChatWelcome`, `ChatUserMessage`, `ChatAgentMessage`, `ChatThinking`, `ChatToolCall`, `ChatInput`, `ChatError`, `ChatMarkdown`) stay exported for custom layouts.
+
+# Icons
+
+`FluentIcon` renders vendored Fluent Color (`@iconify-json/fluent-color`). No Solar / Lucide.
+
+```tsx
+<FluentIcon name="settings-24" size={16} />
+```

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "devnonla-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "NonlaUI — antd-like React controls for Nonla Agents",
+  "author": "devlangla <devlangla0x01@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devnonla/devnonla-ui.git"
+  },
+  "homepage": "https://github.com/devnonla/devnonla-ui",
+  "bugs": {
+    "url": "https://github.com/devnonla/devnonla-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-hook-form": "^7.0.0"
+  },
+  "dependencies": {
+    "@iconify-json/fluent-color": "^1.2.21",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "highlight.js": "^11.12.0",
+    "mermaid": "^11.14.0",
+    "react-day-picker": "^10.0.1",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-hook-form": "^7.87.0",
+    "typescript": "~5.8.3"
+  }
+}

package/src/alert/Alert.tsx

@@ -0,0 +1,109 @@
+import { type ReactNode, useState } from "react";
+import { cn } from "../lib/cn";
+
+export type AlertType = "success" | "info" | "warning" | "error";
+
+export type AlertProps = {
+  type?: AlertType;
+  /** Primary text — antd `message` / `title`. */
+  message?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  showIcon?: boolean;
+  closable?: boolean | { onClose?: () => void };
+  onClose?: () => void;
+  className?: string;
+  children?: ReactNode;
+};
+
+const TYPE_STYLES: Record<AlertType, string> = {
+  success: "border-success/30 bg-success/10 text-foreground",
+  info: "border-link/30 bg-link/10 text-foreground",
+  warning: "border-warn/30 bg-warn/10 text-foreground",
+  error: "border-destructive/30 bg-destructive/10 text-foreground",
+};
+
+const ICON_COLOR: Record<AlertType, string> = {
+  success: "text-success",
+  info: "text-link",
+  warning: "text-warn",
+  error: "text-destructive",
+};
+
+function AlertIcon({ type }: { type: AlertType }) {
+  const cls = cn("size-4 shrink-0 mt-0.5", ICON_COLOR[type]);
+  if (type === "success") {
+    return (
+      <svg className={cls} viewBox="0 0 16 16" fill="none" aria-hidden>
+        <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M4.8 8.2L6.9 10.2L11.2 5.8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  }
+  if (type === "error") {
+    return (
+      <svg className={cls} viewBox="0 0 16 16" fill="none" aria-hidden>
+        <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  if (type === "warning") {
+    return (
+      <svg className={cls} viewBox="0 0 16 16" fill="none" aria-hidden>
+        <path d="M8 2.2L14.2 13.2H1.8L8 2.2Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+        <path d="M8 6.2V9.2M8 11V11.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  return (
+    <svg className={cls} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M8 7.2V11.2M8 4.8V5.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function Alert({
+  type = "info",
+  message,
+  title,
+  description,
+  showIcon,
+  closable,
+  onClose,
+  className,
+  children,
+}: AlertProps) {
+  const [open, setOpen] = useState(true);
+  if (!open) return null;
+
+  const heading = title ?? message;
+  const canClose = Boolean(closable);
+  const handleClose = () => {
+    setOpen(false);
+    if (typeof closable === "object") closable.onClose?.();
+    onClose?.();
+  };
+
+  return (
+    <div role="alert" className={cn("flex gap-2.5 rounded-lg border border-solid px-3 py-2.5 text-sm", TYPE_STYLES[type], className)}>
+      {showIcon ? <AlertIcon type={type} /> : null}
+      <div className="min-w-0 flex-1 flex flex-col gap-0.5">
+        {heading != null && heading !== "" ? <div className="font-medium leading-5">{heading}</div> : null}
+        {description != null && description !== "" ? <div className="leading-5 text-foreground/90">{description}</div> : null}
+        {children}
+      </div>
+      {canClose ? (
+        <button
+          type="button"
+          aria-label="Close"
+          className="shrink-0 -mr-1 -mt-0.5 inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-muted-foreground hover:text-foreground"
+          onClick={handleClose}
+        >
+          ×
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/app/App.tsx

@@ -0,0 +1,36 @@
+import { type ReactNode, createContext, useContext, useLayoutEffect, useMemo } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { applyNonlaTheme, type NonlaThemeConfig } from "../theme";
+
+export type NonlaAppConfig = {
+  getPopupContainer?: () => HTMLElement;
+};
+
+const AppContext = createContext<NonlaAppConfig>({});
+
+export function useAppConfig() {
+  return useContext(AppContext);
+}
+
+export type AppProps = {
+  children: ReactNode;
+  getPopupContainer?: () => HTMLElement;
+  /** Override `--nonla-*` knobs on `:root`. Prefer CSS in the host app when possible. */
+  theme?: NonlaThemeConfig;
+  message?: unknown;
+  modal?: unknown;
+};
+
+/** Root host for NonlaUI (tooltip provider + theme). Mount once near app root. */
+export function App({ children, getPopupContainer, theme }: AppProps) {
+  const value = useMemo<NonlaAppConfig>(() => ({ getPopupContainer }), [getPopupContainer]);
+  useLayoutEffect(() => {
+    if (!theme) return;
+    return applyNonlaTheme(theme);
+  }, [theme]);
+  return (
+    <AppContext.Provider value={value}>
+      <TooltipPrimitive.Provider delayDuration={100}>{children}</TooltipPrimitive.Provider>
+    </AppContext.Provider>
+  );
+}

package/src/button/Button.tsx

@@ -0,0 +1,278 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type CSSProperties, type ForwardRefExoticComponent, type MouseEvent, type ReactNode, type RefAttributes, createContext, forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/sizes";
+import { controlHeightVar, controlRadiusVar, getSizeTokens, normalizeSize } from "../lib/sizes";
+
+export type ButtonType = "default" | "primary" | "dashed" | "link" | "text";
+export type ButtonVariant = "outlined" | "dashed" | "solid" | "filled" | "text" | "link";
+export type ButtonShape = "default" | "circle" | "round" | "square";
+export type ButtonHtmlType = "submit" | "button" | "reset";
+export type ButtonSize = ControlSize;
+export type ButtonColor = "default" | "primary" | "danger" | "blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "lime" | "gold" | "link";
+
+type SemanticSlot = "root" | "icon" | "content";
+
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLElement> & AnchorHTMLAttributes<HTMLElement>, "type" | "color"> & {
+  type?: ButtonType;
+  color?: ButtonColor;
+  variant?: ButtonVariant;
+  icon?: ReactNode;
+  iconPosition?: "start" | "end";
+  iconPlacement?: "start" | "end";
+  shape?: ButtonShape;
+  size?: ButtonSize;
+  loading?: boolean | { delay?: number; icon?: ReactNode };
+  prefixCls?: string;
+  rootClassName?: string;
+  ghost?: boolean;
+  danger?: boolean;
+  block?: boolean;
+  href?: string;
+  htmlType?: ButtonHtmlType;
+  autoInsertSpace?: boolean;
+  classNames?: Partial<Record<SemanticSlot, string>>;
+  styles?: Partial<Record<SemanticSlot, CSSProperties>>;
+};
+
+export type ButtonGroupProps = {
+  size?: ButtonSize;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+
+const TYPE_MAP: Record<ButtonType, [ButtonColor, ButtonVariant]> = {
+  default: ["default", "outlined"],
+  primary: ["primary", "solid"],
+  dashed: ["default", "dashed"],
+  link: ["link", "link"],
+  text: ["default", "text"],
+};
+
+const HTML_BUTTON_TYPES = new Set(["button", "submit", "reset"]);
+
+function isButtonType(value: unknown): value is ButtonType {
+  return typeof value === "string" && value in TYPE_MAP;
+}
+
+function resolveTone(type: ButtonType | undefined, color: ButtonColor | undefined, variant: ButtonVariant | undefined, danger: boolean): [ButtonColor, ButtonVariant] {
+  if (color && variant) return [danger ? "danger" : color, variant];
+  if (type || danger) {
+    const pair = TYPE_MAP[isButtonType(type) ? type : "default"];
+    return [danger ? "danger" : pair[0], pair[1]];
+  }
+  if (variant === "solid") return ["primary", "solid"];
+  return ["default", variant ?? "outlined"];
+}
+
+const PRESET_COLORS = new Set<ButtonColor>(["blue", "purple", "cyan", "green", "magenta", "pink", "red", "orange", "yellow", "volcano", "geekblue", "lime", "gold"]);
+
+const TWO_CN = /^[\u4e00-\u9fa5]{2}$/;
+const GroupSizeContext = createContext<ButtonSize | undefined>(undefined);
+
+function tokenAppearance(color: "default" | "primary" | "danger" | "link", variant: ButtonVariant, ghost: boolean): string {
+  const g = ghost && variant !== "text" && variant !== "link";
+  if (color === "primary") {
+    if (variant === "solid" && !g) return "border-transparent bg-brand text-[var(--nonla-solid-fg)] hover:bg-[color-mix(in_oklab,var(--brand),white_14%)] active:bg-[color-mix(in_oklab,var(--brand),black_10%)]";
+    if (variant === "filled") return "bg-brand/15 text-brand-700 border-transparent hover:bg-brand/25";
+    if (variant === "text") return "bg-transparent text-brand border-transparent hover:bg-brand/10";
+    if (variant === "link") return "text-brand border-transparent hover:text-brand-700";
+    return "bg-transparent text-brand border-brand hover:bg-brand/10";
+  }
+  if (color === "danger") {
+    if (variant === "solid" && !g) return "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90";
+    if (variant === "filled") return "bg-destructive/15 text-destructive border-transparent hover:bg-destructive/25";
+    if (variant === "text") return "bg-transparent text-destructive border-transparent hover:bg-destructive/10";
+    if (variant === "link") return "text-destructive border-transparent hover:text-destructive/80";
+    return "bg-transparent text-destructive border-destructive hover:bg-destructive/10";
+  }
+  if (color === "link" || variant === "link") return "text-link border-transparent hover:text-link/80";
+  if (variant === "filled") return "bg-muted text-foreground border-transparent hover:bg-muted/80";
+  if (variant === "text") return "bg-transparent text-foreground border-transparent hover:bg-foreground/6 hover:text-foreground";
+  if (variant === "dashed") return "bg-transparent text-foreground border-dashed border-glass-border hover:bg-glass-bar backdrop-blur-xl";
+  return "nonla-btn-glass text-foreground";
+}
+
+function presetAppearance(variant: ButtonVariant, ghost: boolean): string {
+  const g = ghost && variant !== "text" && variant !== "link";
+  if (variant === "solid" && !g) return "bg-(--nonla-btn) text-[var(--nonla-solid-fg)] border-transparent hover:brightness-110";
+  if (variant === "filled") return "bg-(--nonla-btn)/15 text-(--nonla-btn) border-transparent hover:bg-(--nonla-btn)/25";
+  if (variant === "link") return "text-(--nonla-btn) border-transparent hover:opacity-80";
+  if (variant === "dashed") return "bg-transparent text-(--nonla-btn) border-dashed border-(--nonla-btn) hover:bg-(--nonla-btn)/10";
+  if (variant === "text") return "bg-transparent text-(--nonla-btn) border-transparent hover:bg-(--nonla-btn)/10";
+  return "bg-transparent text-(--nonla-btn) border-(--nonla-btn) hover:bg-(--nonla-btn)/10";
+}
+
+function LoadingDot({ size }: { size: number }) {
+  return <span className="shrink-0 rounded-full border-2 border-current/25 border-t-current animate-spin" style={{ width: size, height: size }} aria-hidden />;
+}
+
+function ButtonGroup({ size, className, style, children }: ButtonGroupProps) {
+  return (
+    <GroupSizeContext.Provider value={size}>
+      <div role="group" className={cn("inline-flex items-stretch", className)} style={style}>
+        {children}
+      </div>
+    </GroupSizeContext.Provider>
+  );
+}
+
+const ButtonInner = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(function Button(
+  {
+    type: typeProp,
+    color,
+    variant,
+    icon,
+    iconPosition,
+    iconPlacement,
+    shape = "default",
+    size: sizeProp,
+    disabled,
+    loading = false,
+    prefixCls,
+    className,
+    rootClassName,
+    ghost = false,
+    danger = false,
+    block = false,
+    children,
+    classNames,
+    styles,
+    href,
+    htmlType = "button",
+    autoInsertSpace = true,
+    autoFocus,
+    onClick,
+    style,
+    ...rest
+  },
+  ref,
+) {
+  // Radix Trigger asChild merges native type="button"|"submit"|"reset" onto our `type` prop.
+  const typeIsHtml = typeof typeProp === "string" && HTML_BUTTON_TYPES.has(typeProp);
+  const type = typeIsHtml ? undefined : (typeProp as ButtonType | undefined);
+  const resolvedHtmlType = (typeIsHtml ? typeProp : htmlType) as ButtonHtmlType;
+
+  const groupSize = useContext(GroupSizeContext);
+  const size = normalizeSize(sizeProp ?? groupSize);
+  const tok = getSizeTokens(size);
+  const [mergedColor, mergedVariant] = resolveTone(type, color, variant, danger);
+  const preset = PRESET_COLORS.has(mergedColor);
+  const placement = iconPlacement ?? iconPosition ?? "start";
+  const iconOnly = children == null || children === false || children === "";
+
+  const loadingOn = typeof loading === "object" ? true : !!loading;
+  const loadingDelay = typeof loading === "object" ? (loading.delay ?? 0) : 0;
+  const [innerLoading, setInnerLoading] = useState(loadingOn && loadingDelay <= 0);
+
+  useLayoutEffect(() => {
+    if (!loadingOn) {
+      setInnerLoading(false);
+      return;
+    }
+    if (loadingDelay <= 0) {
+      setInnerLoading(true);
+      return;
+    }
+    const t = window.setTimeout(() => setInnerLoading(true), loadingDelay);
+    return () => window.clearTimeout(t);
+  }, [loadingOn, loadingDelay]);
+
+  const nodeRef = useRef<HTMLButtonElement | HTMLAnchorElement | null>(null);
+  useEffect(() => {
+    if (autoFocus) nodeRef.current?.focus();
+  }, [autoFocus]);
+
+  const setRef = (node: HTMLButtonElement | HTMLAnchorElement | null) => {
+    nodeRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) (ref as { current: HTMLButtonElement | HTMLAnchorElement | null }).current = node;
+  };
+
+  const content = useMemo(() => {
+    if (typeof children === "string" && autoInsertSpace && TWO_CN.test(children)) return `${children[0]} ${children[1]}`;
+    return children;
+  }, [children, autoInsertSpace]);
+
+  const iconNode = innerLoading ? typeof loading === "object" && loading.icon ? loading.icon : <LoadingDot size={tok.icon} /> : icon;
+  const showIcon = Boolean(iconNode);
+  const radius = shape === "circle" || shape === "round" ? 9999 : shape === "square" ? 4 : controlRadiusVar(size);
+  const appearance = preset ? presetAppearance(mergedVariant, ghost) : tokenAppearance(mergedColor as "default" | "primary" | "danger" | "link", mergedVariant, ghost);
+  const bordered = mergedVariant !== "text" && mergedVariant !== "link";
+
+  const padText = tok.paddingInline;
+  const paddingLeft = iconOnly ? 0 : showIcon && placement === "start" ? tok.paddingInlineIconStart : padText;
+  const paddingRight = iconOnly ? 0 : showIcon && placement === "end" ? tok.paddingInlineIconEnd : padText;
+
+  const rootClass = cn(
+    "inline-flex items-center justify-center gap-2 font-normal whitespace-nowrap select-none cursor-pointer border border-solid transition-colors duration-150",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-45",
+    bordered ? "border" : "border-transparent",
+    appearance,
+    block && "flex w-full",
+    innerLoading && "pointer-events-none opacity-80",
+    placement === "end" && "flex-row-reverse",
+    prefixCls,
+    className,
+    rootClassName,
+    classNames?.root,
+  );
+
+  const boxH = controlHeightVar(size);
+  const mergedStyle: CSSProperties = {
+    height: boxH,
+    width: iconOnly ? boxH : undefined,
+    fontSize: tok.fontSize,
+    lineHeight: `${tok.lineHeight}px`,
+    paddingLeft,
+    paddingRight,
+    borderRadius: radius,
+    ...(preset ? ({ "--nonla-btn": `var(--nonla-${mergedColor})` } as CSSProperties) : null),
+    ...styles?.root,
+    ...style,
+  };
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    if (innerLoading || disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.(e);
+  };
+
+  const inner = (
+    <>
+      {showIcon ? (
+        <span className={cn("relative z-10 inline-flex shrink-0 items-center justify-center [&_svg]:size-full", classNames?.icon)} style={{ width: tok.icon, height: tok.icon, ...styles?.icon }}>
+          {iconNode}
+        </span>
+      ) : null}
+      {content != null && content !== false && content !== "" ? (
+        <span className={cn("relative z-10 inline-flex min-w-0 items-center", classNames?.content)} style={styles?.content}>
+          {content}
+        </span>
+      ) : null}
+    </>
+  );
+
+  if (href !== undefined) {
+    return (
+      <a {...rest} ref={setRef} href={disabled ? undefined : href} className={rootClass} style={mergedStyle} onClick={handleClick} tabIndex={disabled ? -1 : rest.tabIndex} aria-disabled={disabled || undefined} aria-busy={innerLoading || undefined}>
+        {inner}
+      </a>
+    );
+  }
+
+  return (
+    <button {...rest} ref={setRef} type={resolvedHtmlType} className={rootClass} style={mergedStyle} onClick={handleClick} disabled={disabled} aria-busy={innerLoading || undefined}>
+      {inner}
+    </button>
+  );
+});
+
+type ButtonComponent = ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
+  Group: typeof ButtonGroup;
+};
+
+export const Button = Object.assign(ButtonInner, { Group: ButtonGroup }) as ButtonComponent;