@nikala-ui/core 0.11.0 → 0.12.1

package/src/registry/components/ui/dialog.tsx

@@ -1,30 +1,29 @@
 import { splitProps, type Component, type JSX, type ValidComponent, Show } from "solid-js";
 import * as DialogPrimitive from "@kobalte/core/dialog";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { ScrollArea } from "./scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/cn";
 
 export type DialogRootProps = DialogPrimitive.DialogRootProps;
 
 /**
- * Root Dialog container managing state and context.
+ * Root Dialog component managing modal open state.
  */
 export const Dialog: Component<DialogRootProps> = (props) => {
   return <DialogPrimitive.Root {...props} />;
 };
 
 export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogClose = DialogPrimitive.CloseButton;
 
 export type DialogOverlayProps<T extends ValidComponent = "div"> =
   DialogPrimitive.DialogOverlayProps<T> & {
-    /** Whether to apply background backdrop blur (default: true) */
+    /** Whether to apply background blur effect (default: true) */
     blur?: boolean;
     class?: string;
   };
 
 /**
- * Darkened background overlay behind open dialog.
+ * Backdrop overlay wrapper with optional backdrop blur styling.
  */
 export const DialogOverlay = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DialogOverlayProps<T>>
@@ -34,8 +33,8 @@ export const DialogOverlay = <T extends ValidComponent = "div">(
   return (
     <DialogPrimitive.Overlay
       class={cn(
-        "fixed inset-0 z-50 transition-all duration-200 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
-        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-black/80",
+        "fixed inset-0 z-50 bg-black/80 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+        local.blur !== false && "backdrop-blur-sm",
         local.class
       )}
       {...(rest as any)}
@@ -124,6 +123,9 @@ export interface DialogHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
 }
 
+/**
+ * Dialog top header container.
+ */
 export const DialogHeader: Component<DialogHeaderProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"]);
 
@@ -139,52 +141,60 @@ export interface DialogFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
 }
 
+/**
+ * Dialog bottom action buttons area.
+ */
 export const DialogFooter: Component<DialogFooterProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"]);
 
   return (
     <div
-      class={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4",
-        local.class
-      )}
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
       {...rest}
     />
   );
 };
 
-export interface DialogTitleProps {
-  class?: string;
-  children?: JSX.Element;
-}
+export type DialogTitleProps<T extends ValidComponent = "h2"> =
+  DialogPrimitive.DialogTitleProps<T> & {
+    class?: string;
+  };
 
-export const DialogTitle: Component<DialogTitleProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+/**
+ * Dialog title heading.
+ */
+export const DialogTitle = <T extends ValidComponent = "h2">(
+  props: PolymorphicProps<T, DialogTitleProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogTitleProps, ["class"]);
 
   return (
     <DialogPrimitive.Title
       class={cn("text-lg font-semibold leading-none tracking-tight text-foreground", local.class)}
-      {...rest}
-    >
-      {local.children}
-    </DialogPrimitive.Title>
+      {...(rest as any)}
+    />
   );
 };
 
-export interface DialogDescriptionProps {
-  class?: string;
-  children?: JSX.Element;
-}
+export type DialogDescriptionProps<T extends ValidComponent = "p"> =
+  DialogPrimitive.DialogDescriptionProps<T> & {
+    class?: string;
+  };
 
-export const DialogDescription: Component<DialogDescriptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+/**
+ * Dialog subtitle or description text.
+ */
+export const DialogDescription = <T extends ValidComponent = "p">(
+  props: PolymorphicProps<T, DialogDescriptionProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogDescriptionProps, ["class"]);
 
   return (
     <DialogPrimitive.Description
       class={cn("text-sm text-muted-foreground", local.class)}
-      {...rest}
-    >
-      {local.children}
-    </DialogPrimitive.Description>
+      {...(rest as any)}
+    />
   );
-};
+};
+
+export const DialogClose = DialogPrimitive.CloseButton;

package/src/registry/components/ui/dropdown-menu.tsx

@@ -1,10 +1,12 @@
-import { splitProps, type Component, type JSX, type ValidComponent } from "solid-js";
+import { splitProps, type Component, type JSX, type ValidComponent, createContext, useContext } from "solid-js";
 import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { createClickOutside } from "@nikala-ui/hooks";
-import { ScrollArea } from "./scroll-area";
+import { createClickOutside } from "@/hooks/create-click-outside";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/cn";
 
+const DropdownGroupContext = createContext<boolean>(false);
+
 export type DropdownMenuRootProps = Omit<
   DropdownMenuPrimitive.DropdownMenuRootProps,
   "placement"
@@ -29,7 +31,15 @@ export const DropdownMenu: Component<DropdownMenuRootProps> = (props) => {
 };
 
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+export const DropdownMenuGroup: Component<DropdownMenuPrimitive.DropdownMenuGroupProps> = (props) => {
+  return (
+    <DropdownGroupContext.Provider value={true}>
+      <DropdownMenuPrimitive.Group {...props} />
+    </DropdownGroupContext.Provider>
+  );
+};
+
 export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
@@ -120,7 +130,7 @@ export const DropdownMenuContent = <T extends ValidComponent = "div">(
           local.class
         )}
       >
-        <ScrollArea class="max-h-72 w-full rounded-[inherit]">
+        <ScrollArea class="max-h-72 w-full">
           <div class="p-1">
             {local.children}
           </div>
@@ -134,18 +144,25 @@ export type DropdownMenuItemProps<T extends ValidComponent = "div"> =
   DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
     class?: string;
     inset?: boolean;
+    variant?: "default" | "destructive";
   };
 
 export const DropdownMenuItem = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DropdownMenuItemProps<T>>
 ) => {
-  const [local, rest] = splitProps(props as DropdownMenuItemProps, ["class", "inset"]);
+  const [local, rest] = splitProps(props as DropdownMenuItemProps, [
+    "class",
+    "inset",
+    "variant",
+  ]);
 
   return (
     <DropdownMenuPrimitive.Item
       class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
         local.inset && "pl-8",
+        local.variant === "destructive" &&
+        "text-destructive focus:bg-destructive/15 focus:text-destructive",
         local.class
       )}
       {...(rest as any)}
@@ -157,26 +174,24 @@ export type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
   DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
     class?: string;
     children?: JSX.Element;
-    checked?: boolean;
   };
 
 export const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
 ) => {
-  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children", "checked"]);
+  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]);
 
   return (
     <DropdownMenuPrimitive.CheckboxItem
-      checked={local.checked}
       class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
         local.class
       )}
       {...(rest as any)}
     >
       <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
           </svg>
         </DropdownMenuPrimitive.ItemIndicator>
@@ -200,16 +215,14 @@ export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
   return (
     <DropdownMenuPrimitive.RadioItem
       class={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
         local.class
       )}
       {...(rest as any)}
     >
       <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <svg class="h-2 w-2 fill-current" viewBox="0 0 8 8">
-            <circle cx="4" cy="4" r="3" />
-          </svg>
+          <span class="h-2 w-2 rounded-lg bg-current" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {local.children}
@@ -217,7 +230,9 @@ export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
   );
 };
 
-export interface DropdownMenuLabelProps {
+export const DropdownMenuGroupLabel = DropdownMenuPrimitive.GroupLabel;
+
+export interface DropdownMenuLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
   inset?: boolean;
   children?: JSX.Element;
@@ -225,36 +240,59 @@ export interface DropdownMenuLabelProps {
 
 export const DropdownMenuLabel: Component<DropdownMenuLabelProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "inset", "children"]);
+  const isInsideGroup = useContext(DropdownGroupContext);
+
+  const classes = () =>
+    cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      local.inset && "pl-8",
+      local.class
+    );
 
   return (
-    <DropdownMenuPrimitive.GroupLabel
-      class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", local.inset && "pl-8", local.class)}
-      {...rest}
-    >
-      {local.children}
-    </DropdownMenuPrimitive.GroupLabel>
+    <>
+      {isInsideGroup ? (
+        <DropdownMenuPrimitive.GroupLabel class={classes()} {...(rest as any)}>
+          {local.children}
+        </DropdownMenuPrimitive.GroupLabel>
+      ) : (
+        <div class={classes()} {...rest}>
+          {local.children}
+        </div>
+      )}
+    </>
   );
 };
 
-export const DropdownMenuSeparator: Component<{ class?: string }> = (props) => {
+export type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
+  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
+    class?: string;
+  };
+
+export const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
+  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]);
+
   return (
     <DropdownMenuPrimitive.Separator
-      class={cn("-mx-1 my-1 h-px bg-border", props.class)}
+      class={cn("-mx-1 my-1 h-px bg-border", local.class)}
+      {...(rest as any)}
     />
   );
 };
 
-export interface DropdownMenuShortcutProps {
+export interface DropdownMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   class?: string;
-  children?: JSX.Element;
 }
 
 export const DropdownMenuShortcut: Component<DropdownMenuShortcutProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+  const [local, rest] = splitProps(props, ["class"]);
 
   return (
-    <span class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)} {...rest}>
-      {local.children}
-    </span>
+    <span
+      class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)}
+      {...rest}
+    />
   );
 };

package/src/registry/components/ui/field.tsx

@@ -1,6 +1,6 @@
 import { splitProps, type Component, type JSX } from "solid-js";
 import { cn } from "@/lib/cn";
-import { Label, type LabelProps } from "./label";
+import { Label, type LabelProps } from "@/components/ui/label";
 
 export interface FieldProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
@@ -17,8 +17,9 @@ export const Field: Component<FieldProps> = (props) => {
   );
 };
 
-export interface FieldLabelProps extends LabelProps {
+export interface FieldLabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement>, LabelProps {
   class?: string;
+  for?: string;
   children?: JSX.Element;
 }
 
@@ -41,7 +42,10 @@ export const FieldDescription: Component<FieldDescriptionProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
-    <p class={cn("text-sm text-muted-foreground", local.class)} {...rest}>
+    <p
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...rest}
+    >
       {local.children}
     </p>
   );

package/src/registry/components/ui/file-tree.tsx

@@ -0,0 +1,181 @@
+import {
+  createSignal,
+  splitProps,
+  Show,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import {
+  Folder,
+  FolderOpen,
+  File,
+  FileCode,
+  FileJson,
+  FileText,
+  ChevronRight,
+} from "lucide-solid";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/cn";
+
+export interface FileTreeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Root FileTree container for displaying project directory hierarchies.
+ */
+export const FileTree: ParentComponent<FileTreeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div
+      class={cn(
+        "my-4 w-full rounded-lg border border-border bg-card/60 p-3 font-mono text-sm shadow-2xs select-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="space-y-0.5">{local.children}</div>
+    </div>
+  );
+};
+
+export interface FileTreeFolderProps {
+  /** Folder name */
+  name: string;
+  /** Initial open state of the folder (default: true) */
+  defaultOpen?: boolean;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback fired when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Custom folder icon override */
+  icon?: JSX.Element;
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Collapsible folder node in the FileTree.
+ */
+export const FileTreeFolder: ParentComponent<FileTreeFolderProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "name",
+    "defaultOpen",
+    "open",
+    "onOpenChange",
+    "icon",
+    "class",
+    "children",
+  ]);
+
+  const [isOpen, setIsOpen] = createSignal(local.defaultOpen ?? true);
+
+  const openState = () => (local.open !== undefined ? local.open : isOpen());
+
+  const handleToggle = (next: boolean) => {
+    if (local.open === undefined) {
+      setIsOpen(next);
+    }
+    local.onOpenChange?.(next);
+  };
+
+  return (
+    <Collapsible
+      open={openState()}
+      onOpenChange={handleToggle}
+      class={cn("w-full", local.class)}
+      {...rest}
+    >
+      <CollapsibleTrigger class="group flex w-full items-center justify-start gap-1.5 rounded-md px-1.5 py-1 text-xs text-foreground transition-colors hover:bg-muted/70 cursor-pointer">
+        <ChevronRight
+          class={cn(
+            "size-3.5 shrink-0 text-muted-foreground transition-transform duration-200",
+            openState() && "rotate-90 text-foreground"
+          )}
+        />
+        <Show
+          when={local.icon}
+          fallback={
+            <Show
+              when={openState()}
+              fallback={<Folder class="size-3.5 shrink-0 text-amber-500/90 dark:text-amber-400" />}
+            >
+              <FolderOpen class="size-3.5 shrink-0 text-amber-500 dark:text-amber-400" />
+            </Show>
+          }
+        >
+          {local.icon}
+        </Show>
+        <span class="font-medium text-foreground tracking-tight">{local.name}</span>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent class="border-l border-border/60 ml-3.5 pl-3 pt-0.5 space-y-0.5">
+        {local.children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export interface FileTreeFileProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** File name */
+  name: string;
+  /** Custom file icon override */
+  icon?: JSX.Element;
+  class?: string;
+}
+
+/**
+ * Returns a smart default Lucide icon based on file extension.
+ */
+function getFileIcon(filename: string): JSX.Element {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "tsx":
+    case "jsx":
+    case "ts":
+    case "js":
+    case "mjs":
+    case "rs":
+    case "py":
+    case "go":
+      return <FileCode class="size-3.5 shrink-0 text-sky-500 dark:text-sky-400" />;
+    case "json":
+      return <FileJson class="size-3.5 shrink-0 text-amber-500 dark:text-amber-400" />;
+    case "md":
+    case "mdx":
+    case "txt":
+      return <FileText class="size-3.5 shrink-0 text-emerald-500 dark:text-emerald-400" />;
+    default:
+      return <File class="size-3.5 shrink-0 text-muted-foreground" />;
+  }
+}
+
+/**
+ * Leaf file item inside a FileTree.
+ */
+export const FileTreeFile: ParentComponent<FileTreeFileProps> = (props) => {
+  const [local, rest] = splitProps(props, ["name", "icon", "class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "flex w-full items-center justify-start gap-1.5 rounded-md px-1.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground cursor-default",
+        local.class
+      )}
+      {...rest}
+    >
+      <span class="size-3.5 shrink-0" />
+      <Show when={local.icon} fallback={getFileIcon(local.name)}>
+        {local.icon}
+      </Show>
+      <span class="tracking-tight">{local.name}</span>
+      <Show when={local.children}>
+        <div class="ml-auto">{local.children}</div>
+      </Show>
+    </div>
+  );
+};

package/src/registry/components/ui/footer.tsx

@@ -1,4 +1,4 @@
-import { splitProps, type JSX, type ParentComponent } from "solid-js";
+import { splitProps, type JSX, type ParentComponent, type Component } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/cn";
 

package/src/registry/components/ui/form-message.tsx

@@ -1,6 +1,6 @@
 import { Show, splitProps, type JSX } from "solid-js";
-import type { CreateFormReturn } from "@nikala-ui/hooks";
-import { FieldError, type FieldErrorProps } from "./field";
+import type { CreateFormReturn } from "@/hooks/create-form";
+import { FieldError, type FieldErrorProps } from "@/components/ui/field";
 
 type FormState<T extends Record<string, any>> = Pick<
   CreateFormReturn<T>,

package/src/registry/components/ui/icon-button.tsx

@@ -1,5 +1,5 @@
 import { splitProps, type Component, type JSX } from "solid-js";
-import { Button, type ButtonProps } from "./button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { cn } from "@/lib/cn";
 
 export interface IconButtonProps

package/src/registry/components/ui/navbar.tsx

@@ -8,7 +8,9 @@ import {
   type ParentComponent,
   type Component,
   type Accessor,
+  type ValidComponent,
 } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Menu, X } from "lucide-solid";
 import { cn } from "@/lib/cn";
@@ -145,15 +147,18 @@ export const NavbarContainer: ParentComponent<NavbarContainerProps> = (props) =>
 };
 
 /* --- Navbar Brand / Logo Container --- */
-export interface NavbarBrandProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface NavbarBrandProps<T extends ValidComponent = "a"> extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
   class?: string;
+  as?: T;
+  href?: string;
 }
 
-export const NavbarBrand: ParentComponent<NavbarBrandProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+export const NavbarBrand = <T extends ValidComponent = "a">(props: NavbarBrandProps<T>) => {
+  const [local, rest] = splitProps(props as NavbarBrandProps, ["class", "as", "children"]);
 
   return (
-    <a
+    <Dynamic
+      component={local.as || "a"}
       class={cn(
         "flex items-center gap-2 font-bold text-foreground transition-opacity hover:opacity-90 cursor-pointer shrink-0",
         local.class
@@ -161,7 +166,7 @@ export const NavbarBrand: ParentComponent<NavbarBrandProps> = (props) => {
       {...rest}
     >
       {local.children}
-    </a>
+    </Dynamic>
   );
 };
 
@@ -193,7 +198,6 @@ export const NavbarContent: ParentComponent<NavbarContentProps> = (props) => {
     <div
       class={cn(
         navbarContentVariants({ justify: local.justify }),
-        local.hideOnMobile !== false && "hidden md:flex",
         local.class
       )}
       {...rest}
@@ -248,18 +252,21 @@ export const navbarLinkVariants = cva(
   }
 );
 
-export interface NavbarLinkProps
+export interface NavbarLinkProps<T extends ValidComponent = "a">
   extends JSX.AnchorHTMLAttributes<HTMLAnchorElement>,
     VariantProps<typeof navbarLinkVariants> {
   class?: string;
   isActive?: boolean;
+  as?: T;
+  href?: string;
 }
 
-export const NavbarLink: ParentComponent<NavbarLinkProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "variant", "isActive", "children"]);
+export const NavbarLink = <T extends ValidComponent = "a">(props: NavbarLinkProps<T>) => {
+  const [local, rest] = splitProps(props as NavbarLinkProps, ["class", "variant", "isActive", "as", "children"]);
 
   return (
-    <a
+    <Dynamic
+      component={local.as || "a"}
       class={cn(
         navbarLinkVariants({
           variant: local.isActive ? "active" : local.variant,
@@ -269,7 +276,7 @@ export const NavbarLink: ParentComponent<NavbarLinkProps> = (props) => {
       {...rest}
     >
       {local.children}
-    </a>
+    </Dynamic>
   );
 };