@mbao01/common 0.0.20 → 0.0.21

package/src/components/Menu/NavigationMenu/NavigationMenu.tsx

@@ -0,0 +1,117 @@
+import { forwardRef } from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import type {
+  NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+  NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
+} from "./types";
+import { cn } from "../../../utilities";
+import {
+  getNavigationMenuClasses,
+  getNavigationMenuContentClasses,
+  getNavigationMenuIndicatorClasses,
+  getNavigationMenuListClasses,
+  getNavigationMenuTriggerClasses,
+  getNavigationMenuViewportClasses,
+} from "./constants";
+
+const NavigationMenu = ({
+  className,
+  children,
+  ...props
+}: NavigationMenuProps) => (
+  <NavigationMenuPrimitive.Root
+    className={cn(getNavigationMenuClasses(), className)}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+);
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  NavigationMenuListProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(getNavigationMenuListClasses(), className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuTrigger = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  NavigationMenuTriggerProps
+>(({ className, children, variant, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(getNavigationMenuTriggerClasses({ variant }), className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  NavigationMenuContentProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(getNavigationMenuContentClasses(), className)}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuViewport = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  NavigationMenuViewportProps
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(getNavigationMenuViewportClasses(), className)}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  NavigationMenuIndicatorProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(getNavigationMenuIndicatorClasses(), className)}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+NavigationMenu.List = NavigationMenuList;
+NavigationMenu.Item = NavigationMenuPrimitive.Item;
+NavigationMenu.Content = NavigationMenuContent;
+NavigationMenu.Trigger = NavigationMenuTrigger;
+NavigationMenu.Link = NavigationMenuPrimitive.Link;
+NavigationMenu.Indicator = NavigationMenuIndicator;
+NavigationMenu.Viewport = NavigationMenuViewport;
+
+export { NavigationMenu };

package/src/components/Menu/NavigationMenu/constants.ts

@@ -0,0 +1,47 @@
+import { cva } from "../../../libs";
+
+export const getNavigationMenuClasses = cva(
+  "relative z-10 flex max-w-max flex-1 items-center justify-center"
+);
+
+export const getNavigationMenuListClasses = cva(
+  "group flex flex-1 list-none items-center justify-center space-x-1"
+);
+
+export const getNavigationMenuTriggerClasses = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "hover:bg-primary hover:text-primary-content focus:bg-primary focus:text-primary-content data-[active]:bg-primary/50 data-[state=open]:bg-primary/50",
+        secondary:
+          "hover:bg-secondary hover:text-secondary-content focus:bg-secondary focus:text-secondary-content data-[active]:bg-secondary/50 data-[state=open]:bg-secondary/50",
+        accent:
+          "hover:bg-accent hover:text-accent-content focus:bg-accent focus:text-accent-content data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+        neutral:
+          "hover:bg-neutral hover:text-neutral-content focus:bg-neutral focus:text-neutral-content data-[active]:bg-neutral/50 data-[state=open]:bg-neutral/50",
+        base: "hover:bg-base-300 hover:text-base-content focus:bg-base-300 focus:text-base-content data-[active]:bg-base-300/50 data-[state=open]:bg-base-300/50",
+        info: "hover:bg-info hover:text-info-content focus:bg-info focus:text-info-content data-[active]:bg-info/50 data-[state=open]:bg-info/50",
+        success:
+          "hover:bg-success hover:text-success-content focus:bg-success focus:text-success-content data-[active]:bg-success/50 data-[state=open]:bg-success/50",
+        warning:
+          "hover:bg-warning hover:text-warning-content focus:bg-warning focus:text-warning-content data-[active]:bg-warning/50 data-[state=open]:bg-warning/50",
+        error:
+          "hover:bg-error hover:text-error-content focus:bg-error focus:text-error-content data-[active]:bg-error/50 data-[state=open]:bg-error/50",
+      },
+    },
+  }
+);
+
+export const getNavigationMenuContentClasses = cva(
+  "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto"
+);
+
+export const getNavigationMenuViewportClasses = cva(
+  "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-base-100 shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
+);
+
+export const getNavigationMenuIndicatorClasses = cva(
+  "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in"
+);

package/src/components/Menu/NavigationMenu/index.ts

@@ -0,0 +1 @@
+export { NavigationMenu } from "./NavigationMenu";

package/src/components/Menu/NavigationMenu/types.ts

@@ -0,0 +1,40 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { type VariantProps } from "../../../libs";
+import {
+  getNavigationMenuClasses,
+  getNavigationMenuContentClasses,
+  getNavigationMenuIndicatorClasses,
+  getNavigationMenuListClasses,
+  getNavigationMenuTriggerClasses,
+  getNavigationMenuViewportClasses,
+} from "./constants";
+
+export type NavigationMenuProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Root
+> &
+  VariantProps<typeof getNavigationMenuClasses>;
+
+export type NavigationMenuListProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.List
+> &
+  VariantProps<typeof getNavigationMenuListClasses>;
+
+export type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Trigger
+> &
+  VariantProps<typeof getNavigationMenuTriggerClasses>;
+
+export type NavigationMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Content
+> &
+  VariantProps<typeof getNavigationMenuContentClasses>;
+
+export type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Viewport
+> &
+  VariantProps<typeof getNavigationMenuViewportClasses>;
+
+export type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Indicator
+> &
+  VariantProps<typeof getNavigationMenuIndicatorClasses>;

package/src/components/Menu/index.ts

@@ -0,0 +1,4 @@
+export { ContextMenu } from "./ContextMenu";
+export { DropdownMenu } from "./DropdownMenu";
+export { Menubar } from "./Menubar";
+export { NavigationMenu } from "./NavigationMenu";

package/src/index.ts

@@ -1,6 +1,7 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Menu";
 export * from "./components/Pagination";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";