@kala-ui/react-app 0.1.0-beta.1 → 0.1.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @kala-ui/react-app
 
+## 0.1.0-beta.3
+
+### Minor Changes
+
+- NavLink: optional anchor mode. Passing `href` renders a real `<a>` (default button behavior unchanged otherwise) so top-level navigation targets keep native middle-click/clone-tab semantics. In anchor mode: `active` sets `aria-current="page"`; button-only props (`type`, `disabled`) are never spread onto the anchor (`disabled` degrades to `aria-disabled` + pointer-events styling); a plain left-click is preventDefaulted for client-side routing while modifier/middle clicks stay native. Nested-collapse (chevron toggle) remains button-mode-only.
+
+## 0.1.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @kala-ui/react@0.1.0-beta.2
+
 ## 0.1.0-beta.1
 
 ### Minor Changes

package/dist/components/nav-link/nav-link.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-export interface NavLinkProps extends Omit<React.ComponentProps<"button">, "onChange"> {
+export interface NavLinkProps extends Omit<React.ComponentProps<"button">, "onChange" | "ref"> {
     /** Link label */
     label: React.ReactNode;
     /** Link description */
@@ -10,6 +10,15 @@ export interface NavLinkProps extends Omit<React.ComponentProps<"button">, "onCh
     rightSection?: React.ReactNode;
     /** Active state */
     active?: boolean;
+    /**
+     * Renders the NavLink as a real anchor (<a href>) instead of a button.
+     * Use for top-level navigation targets: the href keeps middle-click,
+     * clone-tab and keyboard semantics native. A plain left-click is
+     * preventDefaulted so SPA routers can route client-side; modifier clicks
+     * are left to the browser. Nested-collapse behavior (children chevron
+     * toggle) only applies in button mode.
+     */
+    href?: string;
     /** Collapsed/Expanded state for nested items */
     defaultOpen?: boolean;
     /** Controlled opened state */
@@ -23,4 +32,4 @@ export interface NavLinkProps extends Omit<React.ComponentProps<"button">, "onCh
     /** Indentation for nested items */
     indent?: boolean;
 }
-export declare function NavLink({ ref, className, label, description, icon, rightSection, active, defaultOpen, open: openProp, onOpenChange, children, disableRightSectionRotation, indent, onClick, ...props }: NavLinkProps): React.JSX.Element;
+export declare function NavLink({ className, label, description, icon, rightSection, active, href, defaultOpen, open: openProp, onOpenChange, children, disableRightSectionRotation, indent, onClick, type, disabled, ...props }: NavLinkProps): React.JSX.Element;

package/dist/components/nav-link/nav-link.js

@@ -3,12 +3,45 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cn } from "@kala-ui/react/lib/utils";
 import { useUncontrolled } from "@kala-ui/react-hooks";
 import { ChevronRight } from "lucide-react";
-export function NavLink({ ref, className, label, description, icon, rightSection, active, defaultOpen = false, open: openProp, onOpenChange, children, disableRightSectionRotation = false, indent = false, onClick, ...props }) {
+/** Props shared by both arms with element-specific handlers widened to a
+ *  common HTMLElement base, so the same rest-object spreads onto <button>
+ *  and <a> without fighting their event-target variance. */
+// biome-ignore lint: manual widening of every *EventHandler — Record spread is
+// the pragmatic bridge until the props are re-modeled per-element.
+const widenHandlers = (props) => {
+    const out = {};
+    for (const [key, value] of Object.entries(props)) {
+        out[key] =
+            typeof value === "function" && (key.startsWith("on") || key === "ref")
+                ? value
+                : value;
+    }
+    return out;
+};
+export function NavLink({ className, label, description, icon, rightSection, active, href, defaultOpen = false, open: openProp, onOpenChange, children, disableRightSectionRotation = false, indent = false, onClick, type, disabled, ...props }) {
     const [isOpened, handleOpenChange] = useUncontrolled({
         value: openProp,
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
+    const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "flex items-center justify-center", children: icon })), _jsxs("div", { className: "flex flex-1 flex-col items-start overflow-hidden", children: [_jsx("span", { className: "truncate", children: label }), description && (_jsx("span", { className: "truncate text-xs text-muted-foreground font-normal", children: description }))] }), (rightSection || children) && (_jsx("span", { className: cn("flex items-center justify-center text-muted-foreground transition-transform duration-200", children &&
+                    !disableRightSectionRotation &&
+                    isOpened &&
+                    "rotate-90"), children: rightSection || (children && _jsx(ChevronRight, { className: "h-4 w-4" })) }))] }));
+    const baseClassName = cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", active ? "bg-accent text-accent-foreground" : "text-muted-foreground", className);
+    if (href) {
+        // Anchor mode: button-only props (type/disabled) are invalid on <a> —
+        // disabled degrades to aria-disabled + pointer-events styling. Plain
+        // left-clicks are the SPA router's to handle; every other click
+        // (modifiers, middle) stays native so open-in-new-tab keeps working.
+        const handleAnchorClick = (e) => {
+            const isPlainLeftClick = e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+            if (isPlainLeftClick)
+                e.preventDefault();
+            onClick?.(e);
+        };
+        return (_jsx("a", { "data-kala-component": "nav-link", href: href, "aria-current": active ? "page" : undefined, "aria-disabled": disabled || undefined, className: cn(baseClassName, disabled && "pointer-events-none opacity-50"), onClick: handleAnchorClick, ...widenHandlers(props), children: content }));
+    }
     const handleToggle = (e) => {
         if (children) {
             e.preventDefault();
@@ -16,8 +49,5 @@ export function NavLink({ ref, className, label, description, icon, rightSection
         }
         onClick?.(e);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { "data-kala-component": "nav-link", ref: ref, className: cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", active ? "bg-accent text-accent-foreground" : "text-muted-foreground", className), onClick: handleToggle, ...props, children: [icon && (_jsx("span", { className: "flex items-center justify-center", children: icon })), _jsxs("div", { className: "flex flex-1 flex-col items-start overflow-hidden", children: [_jsx("span", { className: "truncate", children: label }), description && (_jsx("span", { className: "truncate text-xs text-muted-foreground font-normal", children: description }))] }), (rightSection || children) && (_jsx("span", { className: cn("flex items-center justify-center text-muted-foreground transition-transform duration-200", children &&
-                            !disableRightSectionRotation &&
-                            isOpened &&
-                            "rotate-90"), children: rightSection || (children && _jsx(ChevronRight, { className: "h-4 w-4" })) }))] }), children && isOpened && (_jsx("div", { className: cn("flex flex-col gap-1", indent && "pl-4"), children: children }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { "data-kala-component": "nav-link", type: type ?? "button", disabled: disabled, className: baseClassName, onClick: handleToggle, ...widenHandlers(props), children: content }), children && isOpened && (_jsx("div", { className: cn("flex flex-col gap-1", indent && "pl-4"), children: children }))] }));
 }

package/dist/styles/app.css

@@ -118,6 +118,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .collapse {
     visibility: collapse;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kala-ui/react-app",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.3",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -126,8 +126,8 @@
     "lucide-react": "~1.34.0",
     "react-apexcharts": "~2.1.1",
     "simple-icons": "~16.28.0",
-    "@kala-ui/react-hooks": "0.1.0-beta.0",
-    "@kala-ui/react": "0.1.0-beta.1"
+    "@kala-ui/react": "0.1.0-beta.2",
+    "@kala-ui/react-hooks": "0.1.0-beta.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "~4.3.3",