@codefast/ui 0.0.38 → 0.0.40

package/src/react/input.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { type VariantProps } from "cva";
+import { cva } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Input
+ * -------------------------------------------------------------------------- */
+
+const inputVariants = cva({
+  base: "border-input placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    inputSize: {
+      default: "h-10",
+      xs: "h-8",
+      sm: "h-9",
+      lg: "h-11",
+    },
+  },
+  defaultVariants: {
+    inputSize: "default",
+  },
+});
+
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Component: Input
+ * -------------------------------------------------------------------------- */
+
+type InputElement = HTMLInputElement;
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & InputVariantsProps;
+
+const Input = React.forwardRef<InputElement, InputProps>(({ className, inputSize, ...props }, ref) => {
+  return <input type="text" className={inputVariants({ className, inputSize })} ref={ref} {...props} />;
+});
+
+Input.displayName = "Input";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Input, type InputProps };

package/src/react/kbd.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Kbd
+ * -------------------------------------------------------------------------- */
+
+type KbdElement = HTMLElement;
+
+interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+
+const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, ref) => {
+  const Component = asChild ? Slot : "kbd";
+
+  return (
+    <Component
+      ref={ref}
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+Kbd.displayName = "Kbd";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Kbd, type KbdProps };

package/src/react/label.tsx

@@ -0,0 +1,30 @@
+"use client";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Label
+ * -------------------------------------------------------------------------- */
+
+type LabelElement = React.ElementRef<typeof LabelPrimitive.Root>;
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+
+const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+
+Label.displayName = LabelPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Label, type LabelProps };

package/src/react/menubar.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarMenu
+ * -------------------------------------------------------------------------- */
+
+type MenubarMenuProps = React.ComponentProps<typeof MenubarPrimitive.Menu>;
+const MenubarMenu = MenubarPrimitive.Menu;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarGroup
+ * -------------------------------------------------------------------------- */
+
+type MenubarGroupProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Group>;
+const MenubarGroup = MenubarPrimitive.Group;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarSub
+ * -------------------------------------------------------------------------- */
+
+type MenubarSubProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Sub>;
+const MenubarSub = MenubarPrimitive.Sub;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarRadioGroup
+ * -------------------------------------------------------------------------- */
+
+type MenubarRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioGroup>;
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+/* -----------------------------------------------------------------------------
+ * Component: Menubar
+ * -------------------------------------------------------------------------- */
+
+type MenubarElement = React.ElementRef<typeof MenubarPrimitive.Root>;
+type MenubarProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>;
+
+const Menubar = React.forwardRef<MenubarElement, MenubarProps>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn("bg-background flex h-10 items-center space-x-1 rounded-md border p-1 shadow-sm", className)}
+    {...props}
+  />
+));
+
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarTrigger
+ * -------------------------------------------------------------------------- */
+
+type MenubarTriggerElement = React.ElementRef<typeof MenubarPrimitive.Trigger>;
+type MenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>;
+
+const MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerProps>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium focus:outline-none",
+      className,
+    )}
+    {...props}
+  />
+));
+
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarSubTrigger
+ * -------------------------------------------------------------------------- */
+
+type MenubarSubTriggerElement = React.ElementRef<typeof MenubarPrimitive.SubTrigger>;
+
+interface MenubarSubTriggerProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> {
+  inset?: boolean;
+}
+
+const MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(
+  ({ children, className, inset, ...props }, ref) => (
+    <MenubarPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  ),
+);
+
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarSubContent
+ * -------------------------------------------------------------------------- */
+
+type MenubarSubContentElement = React.ElementRef<typeof MenubarPrimitive.SubContent>;
+type MenubarSubContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>;
+
+const MenubarSubContent = React.forwardRef<MenubarSubContentElement, MenubarSubContentProps>(
+  ({ className, ...props }, ref) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.SubContent
+        ref={ref}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  ),
+);
+
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarContent
+ * -------------------------------------------------------------------------- */
+
+type MenubarContentElement = React.ElementRef<typeof MenubarPrimitive.Content>;
+type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>;
+
+const MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentProps>(
+  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  ),
+);
+
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarItem
+ * -------------------------------------------------------------------------- */
+
+type MenubarItemElement = React.ElementRef<typeof MenubarPrimitive.Item>;
+
+interface MenubarItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> {
+  inset?: boolean;
+}
+
+const MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarCheckboxItem
+ * -------------------------------------------------------------------------- */
+
+type MenubarCheckboxItemElement = React.ElementRef<typeof MenubarPrimitive.CheckboxItem>;
+type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>;
+
+const MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(
+  ({ children, className, checked, ...props }, ref) => (
+    <MenubarPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  ),
+);
+
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarRadioItem
+ * -------------------------------------------------------------------------- */
+
+type MenubarRadioItemElement = React.ElementRef<typeof MenubarPrimitive.RadioItem>;
+type MenubarRadioItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>;
+
+const MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(
+  ({ children, className, ...props }, ref) => (
+    <MenubarPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <DotFilledIcon className="size-4 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  ),
+);
+
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarLabel
+ * -------------------------------------------------------------------------- */
+
+type MenubarLabelElement = React.ElementRef<typeof MenubarPrimitive.Label>;
+
+interface MenubarLabelProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> {
+  inset?: boolean;
+}
+
+const MenubarLabel = React.forwardRef<MenubarLabelElement, MenubarLabelProps>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarSeparator
+ * -------------------------------------------------------------------------- */
+
+type MenubarSeparatorElement = React.ElementRef<typeof MenubarPrimitive.Separator>;
+type MenubarSeparatorProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>;
+
+const MenubarSeparator = React.forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <MenubarPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />
+  ),
+);
+
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: MenubarShortcut
+ * -------------------------------------------------------------------------- */
+
+type MenubarShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
+
+function MenubarShortcut({ className, ...props }: MenubarShortcutProps): React.JSX.Element {
+  return <span className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+  type MenubarProps,
+  type MenubarMenuProps,
+  type MenubarTriggerProps,
+  type MenubarContentProps,
+  type MenubarItemProps,
+  type MenubarSeparatorProps,
+  type MenubarLabelProps,
+  type MenubarCheckboxItemProps,
+  type MenubarRadioGroupProps,
+  type MenubarRadioItemProps,
+  type MenubarSubContentProps,
+  type MenubarSubTriggerProps,
+  type MenubarGroupProps,
+  type MenubarSubProps,
+  type MenubarShortcutProps,
+};

package/src/react/navigation-menu.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cn, cva } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: NavigationMenu
+ * -------------------------------------------------------------------------- */
+
+const navigationMenuTriggerVariants = cva({
+  base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 group inline-flex h-10 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
+});
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenu
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuElement = React.ElementRef<typeof NavigationMenuPrimitive.Root>;
+type NavigationMenuProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>;
+
+const NavigationMenu = React.forwardRef<NavigationMenuElement, NavigationMenuProps>(
+  ({ children, className, ...props }, ref) => (
+    <NavigationMenuPrimitive.Root
+      ref={ref}
+      className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+      {...props}
+    >
+      {children}
+      <NavigationMenuViewport />
+    </NavigationMenuPrimitive.Root>
+  ),
+);
+
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuList
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuListElement = React.ElementRef<typeof NavigationMenuPrimitive.List>;
+type NavigationMenuListProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>;
+
+const NavigationMenuList = React.forwardRef<NavigationMenuListElement, NavigationMenuListProps>(
+  ({ children, className, ...props }, ref) => (
+    <NavigationMenuPrimitive.List
+      ref={ref}
+      className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+      {...props}
+    >
+      {children}
+      <NavigationMenuIndicator />
+    </NavigationMenuPrimitive.List>
+  ),
+);
+
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuItem
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuItemProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuContent
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuTriggerElement = React.ElementRef<typeof NavigationMenuPrimitive.Trigger>;
+type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>;
+
+const NavigationMenuTrigger = React.forwardRef<NavigationMenuTriggerElement, NavigationMenuTriggerProps>(
+  ({ children, className, ...props }, ref) => (
+    <NavigationMenuPrimitive.Trigger
+      ref={ref}
+      className={navigationMenuTriggerVariants({
+        className: ["group", className],
+      })}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        className="relative top-px ml-1 size-3 transition group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  ),
+);
+
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuContent
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuContentElement = React.ElementRef<typeof NavigationMenuPrimitive.Content>;
+type NavigationMenuContentProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>;
+
+const NavigationMenuContent = React.forwardRef<NavigationMenuContentElement, NavigationMenuContentProps>(
+  ({ className, ...props }, ref) => (
+    <NavigationMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuLink
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuLinkProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuViewport
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuViewportElement = React.ElementRef<typeof NavigationMenuPrimitive.Viewport>;
+type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>;
+
+const NavigationMenuViewport = React.forwardRef<NavigationMenuViewportElement, NavigationMenuViewportProps>(
+  ({ className, ...props }, ref) => (
+    <div className="perspective-[125rem] absolute left-0 top-full flex justify-center">
+      <NavigationMenuPrimitive.Viewport
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border transition-[width,height] sm:w-[var(--radix-navigation-menu-viewport-width)]",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    </div>
+  ),
+);
+
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuIndicator
+ * -------------------------------------------------------------------------- */
+
+type NavigationMenuIndicatorElement = React.ElementRef<typeof NavigationMenuPrimitive.Indicator>;
+type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>;
+
+const NavigationMenuIndicator = React.forwardRef<NavigationMenuIndicatorElement, NavigationMenuIndicatorProps>(
+  ({ className, ...props }, ref) => (
+    <NavigationMenuPrimitive.Indicator
+      ref={ref}
+      className={cn(
+        "data-[state=visible]:animate-fade-in data-[state=hidden]:animate-fade-out top-full z-10 flex h-1.5 items-center justify-center overflow-hidden transition",
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm" />
+    </NavigationMenuPrimitive.Indicator>
+  ),
+);
+
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  navigationMenuTriggerVariants,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  type NavigationMenuProps,
+  type NavigationMenuListProps,
+  type NavigationMenuItemProps,
+  type NavigationMenuContentProps,
+  type NavigationMenuTriggerProps,
+  type NavigationMenuLinkProps,
+};