@timmbr/ui 1.0.0-beta → 1.1.0

package/README.md

@@ -67,12 +67,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 | Category | Components | Description |
 | :--- | :--- | :--- |
-| **Actions** | `Button` | Accessible button with adornment icons, loading spinner, CVA variants, and `asChild` composition. |
+| **Actions** | `Button`, `LinkButton` | Accessible buttons and anchor links with `next/link` default SPA routing, adornment icons, loading spinners, and cross-zone delegation. |
 | **Typography** | `Text`, `Heading` | Typography primitives restricted to semantic elements (`<p>`, `<span>`, `<h1>`–`<h6>`) with design token scaling. |
 | **Surfaces** | `Card`, `Avatar`, `Badge`, `Chip`, `Divider` | Display primitives including user avatars, status pills, elevated cards, interactive chips, and separators. |
 | **Layout** | `Container`, `Stack`, `Inline`, `Grid`, `Center` | Responsive breakpoint containers, flex distribution, responsive CSS grid, and centered wrappers. |
 | **Form Controls** | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `RangeSlider`, `FormField`, `Label` | Comprehensive form primitives with labels, helper text, validation error states, and dual-thumb sliders. |
-| **Navigation** | `Tabs`, `Pagination` | Radix-driven accessible tabs with spring-physics glider indicator and multi-page pagination. |
+| **Navigation** | `Tabs`, `Pagination`, `SideBarNavigation` | Accessible tabs, multi-page pagination, and responsive collapsable sidebar navigation. |
 | **Feedback** | `Alert`, `Progress`, `Skeleton`, `Spinner`, `Toast` | Status banners, determinate/indeterminate progress, shimmer loaders, and card-deck multi-toasts with hover-spread. |
 | **Overlays** | `Dialog`, `Drawer`, `Dropdown`, `Popover`, `Tooltip` | Centered dialogs, off-canvas sliding drawers, contextual dropdowns, interactive popovers, and accessible tooltips. |
 | **Data Display** | `Table`, `DataList`, `Stat`, `EmptyState` | Structured data tables with pagination, key-value data lists, KPI metrics, and empty state placeholders. |
@@ -82,24 +82,28 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 ## Component Usage
 
 
-### Button
+### Button & LinkButton
 
 ```tsx
-import { Button } from '@timmbr/ui';
-import Link from 'next/link';
+import { Button, LinkButton } from '@timmbr/ui';
 
-export function Example() {
+export function NavigationExample() {
   return (
-    <div className="flex gap-4">
-      {/* Standard variants */}
-      <Button variant="default">Primary</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="ghost">Ghost</Button>
-
-      {/* Composition with Next.js Link via asChild */}
-      <Button asChild>
-        <Link href="/dashboard">Go to Dashboard</Link>
-      </Button>
+    <div className="flex gap-4 items-center">
+      {/* 1. Internal same-zone navigation: uses next/link by default, styled as a link */}
+      <LinkButton href="/dashboard">
+        Go to Dashboard
+      </LinkButton>
+
+      {/* 2. Button visual appearance if desired */}
+      <LinkButton href="/signup" variant="primary">
+        Sign Up
+      </LinkButton>
+
+      {/* 3. Cross-zone boundary: NEVER use next/link across zones. Always use crossZone */}
+      <LinkButton href="/docs" crossZone>
+        Documentation (Cross-Zone)
+      </LinkButton>
     </div>
   );
 }

package/dist/components/Avatar/Avatar.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const avatarRootVariants: (props?: ({
     size?: "sm" | "lg" | "md" | "xl" | "2xl" | "xs" | null | undefined;
-    variant?: "outline" | "grey" | "subtle" | "primary" | "secondary" | null | undefined;
+    variant?: "grey" | "outline" | "subtle" | "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarStatusVariants: (props?: ({
     status?: "online" | "offline" | "busy" | "away" | null | undefined;

package/dist/components/Badge/Badge.styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "outline" | "subtle" | "primary" | "secondary" | "destructive" | "success" | "brand" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "outline" | "subtle" | "primary" | "secondary" | "brand" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/components/Button/Button.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "ghost" | "primary" | "secondary" | "destructive" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "md" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "primary" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=Button.styles.d.ts.map

package/dist/components/Chip/Chip.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const chipVariants: (props?: ({
     variant?: "filled" | "subtle" | "outlined" | null | undefined;
-    color?: "default" | "primary" | "destructive" | "success" | "warning" | null | undefined;
+    color?: "default" | "destructive" | "success" | "warning" | "primary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     clickable?: boolean | null | undefined;
     selected?: boolean | null | undefined;

package/dist/components/CrossZoneLink/CrossZoneLink.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { CrossZoneLinkProps } from './CrossZoneLink.types';
+/**
+ * CrossZoneLink forces hard browser-level navigation across Next.js multi-zone / microfrontend boundaries.
+ *
+ * ARCHITECTURAL RULE:
+ * NEVER use `next/link` for navigation across zone boundaries. Always use `CrossZoneLink` from `@timmbr/ui`.
+ */
+export declare const CrossZoneLink: React.ForwardRefExoticComponent<CrossZoneLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=CrossZoneLink.d.ts.map

package/dist/components/CrossZoneLink/CrossZoneLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossZoneLink.d.ts","sourceRoot":"","sources":["../../../src/components/CrossZoneLink/CrossZoneLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;;;GAKG;AACH,eAAO,MAAM,aAAa,8FA4GzB,CAAC"}

package/dist/components/CrossZoneLink/CrossZoneLink.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { crossZoneLinkVariants } from './CrossZoneLink.styles.js';
+import { useTimmbrConfig, resolveZoneHref } from '../../providers/TimmbrConfigProvider.js';
+
+const CrossZoneLink = React.forwardRef(
+  ({
+    className,
+    style,
+    variant,
+    size,
+    asChild = false,
+    href,
+    zone,
+    disabled = false,
+    leftIcon,
+    rightIcon,
+    target,
+    rel,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const config = useTimmbrConfig();
+    const resolvedHref = resolveZoneHref(href, zone, config.zones?.zones);
+    const isExternal = resolvedHref.startsWith("http://") || resolvedHref.startsWith("https://") || target === "_blank";
+    const resolvedRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+    };
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          "data-slot": "cross-zone-link",
+          "data-cross-zone": "true",
+          "aria-disabled": disabled ? "true" : void 0,
+          tabIndex: disabled ? -1 : props.tabIndex,
+          className: cn(
+            crossZoneLinkVariants({
+              variant,
+              size,
+              disabled,
+              className
+            })
+          ),
+          style,
+          onClick: handleClick,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ref,
+        href: disabled ? void 0 : resolvedHref,
+        target,
+        rel: resolvedRel,
+        "data-slot": "cross-zone-link",
+        "data-cross-zone": "true",
+        "data-testid": "timmbr-cross-zone-link",
+        "aria-disabled": disabled ? "true" : void 0,
+        tabIndex: disabled ? -1 : props.tabIndex,
+        style,
+        onClick: handleClick,
+        className: cn(
+          crossZoneLinkVariants({
+            variant,
+            size,
+            disabled,
+            className
+          })
+        ),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-flex shrink-0 items-center justify-center pointer-events-none",
+              "data-slot": "cross-zone-link-left-icon",
+              children: leftIcon
+            }
+          ),
+          children && /* @__PURE__ */ jsx("span", { children }),
+          rightIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-flex shrink-0 items-center justify-center pointer-events-none",
+              "data-slot": "cross-zone-link-right-icon",
+              children: rightIcon
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CrossZoneLink.displayName = "CrossZoneLink";
+
+export { CrossZoneLink };

package/dist/components/CrossZoneLink/CrossZoneLink.styles.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const crossZoneLinkVariants: (props?: ({
+    variant?: "default" | "inline" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CrossZoneLinkVariants = VariantProps<typeof crossZoneLinkVariants>;
+//# sourceMappingURL=CrossZoneLink.styles.d.ts.map

package/dist/components/CrossZoneLink/CrossZoneLink.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossZoneLink.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CrossZoneLink/CrossZoneLink.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,qBAAqB;;;;8EA4BjC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/CrossZoneLink/CrossZoneLink.styles.js

@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority';
+
+const crossZoneLinkVariants = cva(
+  "inline-flex items-center no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-[2px] transition-all duration-150 select-none",
+  {
+    variants: {
+      variant: {
+        default: "text-primary hover:underline underline-offset-4 font-medium",
+        primary: "text-primary font-semibold hover:brightness-110 active:brightness-95",
+        secondary: "text-secondary-foreground hover:text-foreground font-medium",
+        muted: "text-grey-600 dark:text-grey-400 hover:text-foreground font-normal",
+        subtle: "text-foreground/80 hover:text-foreground font-normal",
+        inline: "text-primary underline underline-offset-4 hover:opacity-80 inline font-medium"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        default: "text-sm gap-1.5",
+        lg: "text-base gap-2"
+      },
+      disabled: {
+        true: "pointer-events-none opacity-50 cursor-not-allowed",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      disabled: false
+    }
+  }
+);
+
+export { crossZoneLinkVariants };

package/dist/components/CrossZoneLink/CrossZoneLink.types.d.ts

@@ -0,0 +1,31 @@
+import type * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import type { crossZoneLinkVariants } from './CrossZoneLink.styles';
+export interface CrossZoneLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof crossZoneLinkVariants> {
+    /**
+     * The destination URL or relative path.
+     */
+    href: string;
+    /**
+     * Optional zone key corresponding to configured zones in TimmbrConfigProvider.
+     * If provided and configured, resolves against the zone's base URL.
+     */
+    zone?: string;
+    /**
+     * Merges props onto an immediate child element using Radix UI Slot.
+     */
+    asChild?: boolean;
+    /**
+     * Leading icon element rendered before link text.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Trailing icon element rendered after link text.
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Disables user interaction and navigation.
+     */
+    disabled?: boolean;
+}
+//# sourceMappingURL=CrossZoneLink.types.d.ts.map

package/dist/components/CrossZoneLink/CrossZoneLink.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossZoneLink.types.d.ts","sourceRoot":"","sources":["../../../src/components/CrossZoneLink/CrossZoneLink.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAC5C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/CrossZoneLink/index.d.ts

@@ -0,0 +1,4 @@
+export { CrossZoneLink } from './CrossZoneLink';
+export { crossZoneLinkVariants, type CrossZoneLinkVariants } from './CrossZoneLink.styles';
+export type { CrossZoneLinkProps } from './CrossZoneLink.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CrossZoneLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CrossZoneLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/Divider/Divider.styles.d.ts

@@ -3,7 +3,7 @@ export declare const dividerVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     variant?: "dashed" | "dotted" | "solid" | null | undefined;
     thickness?: "default" | "thick" | "thin" | null | undefined;
-    color?: "default" | "primary" | "brand" | "muted" | null | undefined;
+    color?: "default" | "primary" | "muted" | "brand" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type DividerVariants = VariantProps<typeof dividerVariants>;
 //# sourceMappingURL=Divider.styles.d.ts.map

package/dist/components/FormField/FormField.js

@@ -39,12 +39,12 @@ const FormField = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-0.5 flex items-center gap-1.5",
+                "text-xs mt-0.5 flex items-start gap-1.5",
                 isError ? "text-destructive font-medium" : "text-muted"
               ),
               children: [
-                isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+                isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0 mt-0.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0 mt-0.5", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "leading-tight", children: errorMessage || helperText })
               ]
             }
           )

package/dist/components/Heading/Heading.styles.d.ts

@@ -2,8 +2,8 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const headingVariants: (props?: ({
     level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
     font?: "title" | "display" | null | undefined;
-    foreground?: "default" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "destructive" | "muted" | null | undefined;
-    weight?: "bold" | "light" | "normal" | "medium" | "semibold" | null | undefined;
+    foreground?: "default" | "destructive" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "light" | "semibold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type HeadingVariants = VariantProps<typeof headingVariants>;
 //# sourceMappingURL=Heading.styles.d.ts.map

package/dist/components/Icon/Icon.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const iconVariants: (props?: ({
     size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
-    foreground?: "default" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "destructive" | "muted" | null | undefined;
+    foreground?: "default" | "destructive" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
     clickable?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconVariants = VariantProps<typeof iconVariants>;

package/dist/components/Inline/Inline.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const inlineVariants: (props?: ({
-    align?: "center" | "end" | "start" | "baseline" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InlineVariants = VariantProps<typeof inlineVariants>;

package/dist/components/Input/Input.js

@@ -175,12 +175,12 @@ const Input = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-0.5 flex items-center gap-1.5 text-left",
+                "text-xs mt-0.5 flex items-start gap-1.5 text-left",
                 isError ? "text-destructive font-medium" : "text-muted-foreground"
               ),
               children: [
-                isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0 text-destructive", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+                isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0 mt-0.5 text-destructive", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0 mt-0.5 text-muted-foreground", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "leading-tight", children: errorMessage || helperText })
               ]
             }
           )

package/dist/components/Input/Input.styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const inputWrapperVariants: (props?: ({
-    variant?: "outline" | "filled" | "subtle" | null | undefined;
+    variant?: "filled" | "outline" | "subtle" | null | undefined;
     size?: "default" | "sm" | "lg" | "md" | null | undefined;
     isError?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;

package/dist/components/Input/Input.styles.js

@@ -33,7 +33,7 @@ const inputWrapperVariants = cva(
   }
 );
 const inputFieldVariants = cva(
-  "w-full h-full bg-transparent font-sans border-0 p-0 text-foreground placeholder:text-muted focus:outline-none focus:ring-0 focus-visible:outline-none disabled:cursor-not-allowed"
+  "w-full h-full bg-transparent font-sans border-0 p-0 text-foreground placeholder:text-muted focus:outline-none focus:ring-0 focus-visible:outline-none disabled:cursor-not-allowed [box-shadow:none] [&:-webkit-autofill]:[-webkit-background-clip:text] [&:-webkit-autofill]:[background-clip:text] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[caret-color:currentColor] [&:-webkit-autofill]:[transition:background-color_5000000s_ease-in-out_0s] [&:-webkit-autofill]:[box-shadow:none] [&:autofill]:[-webkit-background-clip:text] [&:autofill]:[background-clip:text] [&:autofill]:[-webkit-text-fill-color:currentColor] [&:autofill]:[caret-color:currentColor] [&:autofill]:[transition:background-color_5000000s_ease-in-out_0s] [&:autofill]:[box-shadow:none]"
 );
 
 export { inputFieldVariants, inputWrapperVariants };

package/dist/components/Input/Input.types.d.ts

@@ -41,7 +41,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     /**
      * HTML input type (text, password, email, number, search, tel, url, date, etc.).
      */
-    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'date' | 'time' | (string & {});
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'date' | 'time' | (string & Record<never, never>);
     /**
      * Whether to display an interactive show/hide password toggle button when type="password".
      * Defaults to true.

package/dist/components/Input/Input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/components/LinkButton/LinkButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { LinkButtonProps } from './LinkButton.types';
+/**
+ * LinkButton is a unified navigation component for internal, cross-zone, and external links.
+ *
+ * NAVIGATION RULES:
+ * 1. Internal same-zone navigation: Uses Next.js `next/link` by default for client-side SPA routing and prefetching.
+ * 2. Cross-zone boundary navigation: Uses native HTML `<a>` navigation when `crossZone={true}` or when `zone` points
+ *    to an external zone. NEVER use `next/link` across zone boundaries.
+ * 3. Default variant: Styled as a link by default, with button visual styling available via variant props.
+ */
+export declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=LinkButton.d.ts.map

package/dist/components/LinkButton/LinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,2FAyMtB,CAAC"}

package/dist/components/LinkButton/LinkButton.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import NextLink from 'next/link';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { SpinnerIcon } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { linkButtonVariants } from './LinkButton.styles.js';
+import { useTimmbrConfig, resolveZoneHref } from '../../providers/TimmbrConfigProvider.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const LinkButton = React.forwardRef(
+  ({
+    className,
+    style,
+    variant,
+    size,
+    asChild = false,
+    motion,
+    leftIcon,
+    rightIcon,
+    loading = false,
+    loadingText,
+    disabled = false,
+    href,
+    zone,
+    crossZone = false,
+    prefetch,
+    replace,
+    scroll,
+    target,
+    rel,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const config = useTimmbrConfig();
+    const globalMotion = useGlobalAnimation();
+    const resolvedVariant = variant ?? config.components?.button?.defaultVariant ?? "default";
+    const resolvedSize = size ?? config.components?.button?.defaultSize ?? "default";
+    const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+    const isDisabled = disabled || loading;
+    const resolvedHref = href ? resolveZoneHref(href, zone, config.zones?.zones) : void 0;
+    const handleClick = (e) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+    };
+    const buttonClassName = cn(
+      linkButtonVariants({
+        variant: resolvedVariant,
+        size: resolvedSize,
+        disabled: isDisabled,
+        className
+      }),
+      !shouldAnimate && "transition-none active:scale-100",
+      motionClass
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: buttonClassName,
+          style,
+          "data-slot": "link-button",
+          "aria-disabled": isDisabled ? "true" : void 0,
+          tabIndex: isDisabled ? -1 : props.tabIndex,
+          onClick: handleClick,
+          ...props,
+          children
+        }
+      );
+    }
+    const content = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SpinnerIcon, { size: resolvedSize === "sm" ? 14 : 18 }),
+      loadingText ? /* @__PURE__ */ jsx("span", { children: loadingText }) : children
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-flex shrink-0 items-center justify-center pointer-events-none",
+          "data-slot": "link-button-left-icon",
+          children: leftIcon
+        }
+      ),
+      children && /* @__PURE__ */ jsx("span", { children }),
+      rightIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-flex shrink-0 items-center justify-center pointer-events-none",
+          "data-slot": "link-button-right-icon",
+          children: rightIcon
+        }
+      )
+    ] });
+    if (isDisabled) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          "data-slot": "link-button",
+          "data-testid": "timmbr-link-button",
+          "aria-disabled": "true",
+          tabIndex: -1,
+          style,
+          onClick: handleClick,
+          className: buttonClassName,
+          ...props,
+          children: content
+        }
+      );
+    }
+    const isExternal = Boolean(resolvedHref) && (resolvedHref.startsWith("http://") || resolvedHref.startsWith("https://") || resolvedHref.startsWith("mailto:") || resolvedHref.startsWith("tel:") || target === "_blank");
+    const isDifferentZone = Boolean(zone) && Boolean(config.zones?.currentZone) && zone !== config.zones?.currentZone;
+    const requiresCrossZone = crossZone || isDifferentZone || Boolean(zone && !config.zones?.currentZone);
+    const resolvedRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
+    if (requiresCrossZone || isExternal) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href: resolvedHref ?? "#",
+          target,
+          rel: resolvedRel,
+          "data-slot": "link-button",
+          "data-cross-zone": requiresCrossZone ? "true" : void 0,
+          "data-testid": "timmbr-link-button",
+          style,
+          onClick: handleClick,
+          className: buttonClassName,
+          ...props,
+          children: content
+        }
+      );
+    }
+    if (resolvedHref) {
+      return /* @__PURE__ */ jsx(
+        NextLink,
+        {
+          ref,
+          href: resolvedHref,
+          prefetch,
+          replace,
+          scroll,
+          target,
+          rel: resolvedRel,
+          "data-slot": "link-button",
+          "data-testid": "timmbr-link-button",
+          style,
+          onClick: handleClick,
+          className: buttonClassName,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        "data-slot": "link-button",
+        "data-testid": "timmbr-link-button",
+        style,
+        onClick: handleClick,
+        className: buttonClassName,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+LinkButton.displayName = "LinkButton";
+
+export { LinkButton };