@etus/ui 0.1.0

package/src/components/navigation/Menubar/Menubar.tsx

@@ -0,0 +1,308 @@
+"use client"
+
+import type {
+  MenubarCheckboxItemProps,
+  MenubarContentProps,
+  MenubarGroupProps,
+  MenubarItemProps,
+  MenubarLabelProps,
+  MenubarMenuProps,
+  MenubarPortalProps,
+  MenubarProps,
+  MenubarRadioGroupProps,
+  MenubarRadioItemProps,
+  MenubarSeparatorProps,
+  MenubarShortcutProps,
+  MenubarSubContentProps,
+  MenubarSubProps,
+  MenubarSubTriggerProps,
+  MenubarTriggerProps,
+} from "./Menubar.types"
+
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "../../../lib/utils"
+import {
+  menubarCheckboxItemVariants,
+  menubarContentVariants,
+  menubarIndicatorWrapperVariants,
+  menubarItemVariants,
+  menubarLabelVariants,
+  menubarRadioItemVariants,
+  menubarSeparatorVariants,
+  menubarShortcutVariants,
+  menubarSubContentVariants,
+  menubarSubTriggerVariants,
+  menubarTriggerVariants,
+  menubarVariants,
+} from "./Menubar.variants"
+
+/**
+ * Menubar - A horizontal menu bar for application navigation.
+ *
+ * Built on top of Radix UI Menubar primitive with additional styling.
+ * Provides a desktop-style menu bar with dropdown menus.
+ *
+ * @example
+ * <Menubar>
+ *   <MenubarMenu>
+ *     <MenubarTrigger>File</MenubarTrigger>
+ *     <MenubarContent>
+ *       <MenubarItem>New</MenubarItem>
+ *       <MenubarItem>Open</MenubarItem>
+ *     </MenubarContent>
+ *   </MenubarMenu>
+ * </Menubar>
+ */
+function Menubar({ className, ...props }: MenubarProps) {
+  return (
+    <MenubarPrimitive.Root
+      className={cn(menubarVariants(), className)}
+      data-slot="menubar"
+      {...props}
+    />
+  )
+}
+
+/**
+ * MenubarMenu - Container for a single menu within the menubar.
+ */
+function MenubarMenu({ ...props }: MenubarMenuProps) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+/**
+ * MenubarGroup - Groups related menu items together.
+ */
+function MenubarGroup({ ...props }: MenubarGroupProps) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+/**
+ * MenubarPortal - Renders menubar content in a portal.
+ */
+function MenubarPortal({ ...props }: MenubarPortalProps) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+/**
+ * MenubarRadioGroup - Groups radio items together.
+ */
+function MenubarRadioGroup({ ...props }: MenubarRadioGroupProps) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+/**
+ * MenubarTrigger - Button that opens a menu in the menubar.
+ */
+function MenubarTrigger({ className, ...props }: MenubarTriggerProps) {
+  return (
+    <MenubarPrimitive.Trigger
+      className={cn(menubarTriggerVariants(), className)}
+      data-slot="menubar-trigger"
+      {...props}
+    />
+  )
+}
+
+/**
+ * MenubarContent - Main content container for a menu.
+ */
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: MenubarContentProps) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(menubarContentVariants(), className)}
+        data-slot="menubar-content"
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+/**
+ * MenubarItem - An interactive menu item.
+ *
+ * Supports inset layout and destructive variant.
+ */
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenubarItemProps) {
+  return (
+    <MenubarPrimitive.Item
+      className={cn(menubarItemVariants({ inset, variant }), className)}
+      data-inset={inset}
+      data-slot="menubar-item"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+/**
+ * MenubarCheckboxItem - A menu item that can be checked/unchecked.
+ */
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: MenubarCheckboxItemProps) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      checked={checked ?? false}
+      className={cn(menubarCheckboxItemVariants(), className)}
+      data-slot="menubar-checkbox-item"
+      {...props}
+    >
+      <span className={cn(menubarIndicatorWrapperVariants())}>
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+/**
+ * MenubarRadioItem - A radio menu item within a radio group.
+ */
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: MenubarRadioItemProps) {
+  return (
+    <MenubarPrimitive.RadioItem
+      className={cn(menubarRadioItemVariants(), className)}
+      data-slot="menubar-radio-item"
+      {...props}
+    >
+      <span className={cn(menubarIndicatorWrapperVariants())}>
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+/**
+ * MenubarLabel - A non-interactive label for menu sections.
+ */
+function MenubarLabel({ className, inset, ...props }: MenubarLabelProps) {
+  return (
+    <MenubarPrimitive.Label
+      className={cn(menubarLabelVariants({ inset }), className)}
+      data-inset={inset}
+      data-slot="menubar-label"
+      {...props}
+    />
+  )
+}
+
+/**
+ * MenubarSeparator - A visual separator between menu sections.
+ */
+function MenubarSeparator({ className, ...props }: MenubarSeparatorProps) {
+  return (
+    <MenubarPrimitive.Separator
+      className={cn(menubarSeparatorVariants(), className)}
+      data-slot="menubar-separator"
+      {...props}
+    />
+  )
+}
+
+/**
+ * MenubarShortcut - Displays keyboard shortcut hints.
+ */
+function MenubarShortcut({ className, ...props }: MenubarShortcutProps) {
+  return (
+    <span
+      className={cn(menubarShortcutVariants(), className)}
+      data-slot="menubar-shortcut"
+      {...props}
+    />
+  )
+}
+
+/**
+ * MenubarSub - Container for nested submenus.
+ */
+function MenubarSub({ ...props }: MenubarSubProps) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+/**
+ * MenubarSubTrigger - Trigger for opening a submenu.
+ *
+ * Includes a chevron icon indicator.
+ */
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenubarSubTriggerProps) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      className={cn(menubarSubTriggerVariants({ inset }), className)}
+      data-inset={inset}
+      data-slot="menubar-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+/**
+ * MenubarSubContent - Content container for submenus.
+ */
+function MenubarSubContent({ className, ...props }: MenubarSubContentProps) {
+  return (
+    <MenubarPrimitive.SubContent
+      className={cn(menubarSubContentVariants(), className)}
+      data-slot="menubar-sub-content"
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+}

package/src/components/navigation/Menubar/Menubar.types.ts

@@ -0,0 +1,104 @@
+import type * as MenubarPrimitive from "@radix-ui/react-menubar"
+import type { ComponentProps } from "react"
+
+/**
+ * Menubar root props
+ */
+export interface MenubarProps
+  extends ComponentProps<typeof MenubarPrimitive.Root> {}
+
+/**
+ * MenubarMenu props
+ */
+export interface MenubarMenuProps
+  extends ComponentProps<typeof MenubarPrimitive.Menu> {}
+
+/**
+ * MenubarGroup props
+ */
+export interface MenubarGroupProps
+  extends ComponentProps<typeof MenubarPrimitive.Group> {}
+
+/**
+ * MenubarPortal props
+ */
+export interface MenubarPortalProps
+  extends ComponentProps<typeof MenubarPrimitive.Portal> {}
+
+/**
+ * MenubarRadioGroup props
+ */
+export interface MenubarRadioGroupProps
+  extends ComponentProps<typeof MenubarPrimitive.RadioGroup> {}
+
+/**
+ * MenubarTrigger props
+ */
+export interface MenubarTriggerProps
+  extends ComponentProps<typeof MenubarPrimitive.Trigger> {}
+
+/**
+ * MenubarContent props
+ */
+export interface MenubarContentProps
+  extends ComponentProps<typeof MenubarPrimitive.Content> {}
+
+/**
+ * MenubarItem props
+ */
+export interface MenubarItemProps
+  extends ComponentProps<typeof MenubarPrimitive.Item> {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}
+
+/**
+ * MenubarCheckboxItem props
+ */
+export interface MenubarCheckboxItemProps
+  extends ComponentProps<typeof MenubarPrimitive.CheckboxItem> {}
+
+/**
+ * MenubarRadioItem props
+ */
+export interface MenubarRadioItemProps
+  extends ComponentProps<typeof MenubarPrimitive.RadioItem> {}
+
+/**
+ * MenubarLabel props
+ */
+export interface MenubarLabelProps
+  extends ComponentProps<typeof MenubarPrimitive.Label> {
+  inset?: boolean
+}
+
+/**
+ * MenubarSeparator props
+ */
+export interface MenubarSeparatorProps
+  extends ComponentProps<typeof MenubarPrimitive.Separator> {}
+
+/**
+ * MenubarShortcut props
+ */
+export interface MenubarShortcutProps extends ComponentProps<"span"> {}
+
+/**
+ * MenubarSub props
+ */
+export interface MenubarSubProps
+  extends ComponentProps<typeof MenubarPrimitive.Sub> {}
+
+/**
+ * MenubarSubTrigger props
+ */
+export interface MenubarSubTriggerProps
+  extends ComponentProps<typeof MenubarPrimitive.SubTrigger> {
+  inset?: boolean
+}
+
+/**
+ * MenubarSubContent props
+ */
+export interface MenubarSubContentProps
+  extends ComponentProps<typeof MenubarPrimitive.SubContent> {}

package/src/components/navigation/Menubar/Menubar.variants.ts

@@ -0,0 +1,182 @@
+// Menubar/Menubar.variants.ts
+import { cva, type VariantProps } from "class-variance-authority"
+
+/* eslint-disable sonarjs/no-duplicate-string -- Tailwind class combinations naturally repeat in variant definitions */
+
+/**
+ * Common focus state styles
+ */
+const FOCUS_ACCENT_STYLES = "focus:bg-accent focus:text-accent-foreground"
+
+/**
+ * Shared animation and transition styles for menu content
+ */
+const menuContentBase = [
+  "bg-popover text-popover-foreground",
+  "z-[var(--menubar-content-z-index)] overflow-hidden rounded-[var(--menubar-content-radius)] border-[var(--menubar-content-border-width)] p-[var(--menubar-content-padding)]",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2",
+  "data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2",
+  "data-[side=top]:slide-in-from-bottom-2",
+]
+
+/**
+ * Shared base styles for interactive menu items
+ */
+const menuItemBase = [
+  "relative flex cursor-default items-center rounded-[var(--menubar-item-radius)] text-[length:var(--menubar-item-text-size)] outline-hidden select-none",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--menubar-item-icon-size)]",
+]
+
+/**
+ * Menubar root variant styles
+ */
+export const menubarVariants = cva([
+  "bg-background flex h-[var(--menubar-root-height)] items-center gap-[var(--menubar-root-gap)] rounded-[var(--menubar-root-radius)] border-[var(--menubar-root-border-width)] p-[var(--menubar-root-padding)] shadow-[var(--menubar-root-shadow)]",
+])
+
+/**
+ * MenubarTrigger variant styles
+ */
+export const menubarTriggerVariants = cva([
+  FOCUS_ACCENT_STYLES,
+  "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+  "flex items-center rounded-[var(--menubar-trigger-radius)] px-[var(--menubar-trigger-padding-x)] py-[var(--menubar-trigger-padding-y)] text-[length:var(--menubar-trigger-text-size)] font-medium outline-hidden select-none",
+])
+
+/**
+ * MenubarContent variant styles
+ */
+export const menubarContentVariants = cva([
+  ...menuContentBase,
+  "min-w-[var(--menubar-content-min-width)] shadow-md",
+  "origin-(--radix-menubar-content-transform-origin)",
+])
+
+/**
+ * MenubarSubContent variant styles
+ */
+export const menubarSubContentVariants = cva([
+  ...menuContentBase,
+  "min-w-[var(--menubar-content-sub-min-width)] shadow-lg",
+  "origin-(--radix-menubar-content-transform-origin)",
+])
+
+/**
+ * MenubarItem variant styles
+ */
+export const menubarItemVariants = cva(
+  [
+    ...menuItemBase,
+    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+    "px-[var(--menubar-item-padding-x)] py-[var(--menubar-item-padding-y)] gap-[var(--menubar-item-gap)]",
+  ],
+  {
+    variants: {
+      inset: {
+        true: "pl-[var(--menubar-item-inset-padding-left)]",
+        false: "",
+      },
+      variant: {
+        default: "focus:bg-accent focus:text-accent-foreground",
+        destructive: [
+          "text-destructive",
+          "focus:bg-destructive/10 dark:focus:bg-destructive/20",
+          "focus:text-destructive",
+          "*:[svg]:!text-destructive",
+        ],
+      },
+    },
+    defaultVariants: {
+      inset: false,
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * MenubarSubTrigger variant styles
+ */
+export const menubarSubTriggerVariants = cva(
+  [
+    "focus:bg-accent focus:text-accent-foreground",
+    "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+    "flex cursor-default items-center rounded-[var(--menubar-item-radius)] px-[var(--menubar-item-padding-x)] py-[var(--menubar-item-padding-y)] text-[length:var(--menubar-item-text-size)] outline-none select-none",
+  ],
+  {
+    variants: {
+      inset: {
+        true: "pl-[var(--menubar-item-inset-padding-left)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      inset: false,
+    },
+  }
+)
+
+/**
+ * MenubarCheckboxItem variant styles
+ */
+export const menubarCheckboxItemVariants = cva([
+  ...menuItemBase,
+  "focus:bg-accent focus:text-accent-foreground",
+  "py-[var(--menubar-item-padding-y)] pr-[var(--menubar-item-padding-x)] pl-[var(--menubar-item-inset-padding-left)] gap-[var(--menubar-item-gap)] rounded-[var(--menubar-checkbox-radius)]",
+])
+
+/**
+ * MenubarRadioItem variant styles
+ */
+export const menubarRadioItemVariants = cva([
+  ...menuItemBase,
+  "focus:bg-accent focus:text-accent-foreground",
+  "py-[var(--menubar-item-padding-y)] pr-[var(--menubar-item-padding-x)] pl-[var(--menubar-item-inset-padding-left)] gap-[var(--menubar-item-gap)] rounded-[var(--menubar-radio-radius)]",
+])
+
+/**
+ * MenubarLabel variant styles
+ */
+export const menubarLabelVariants = cva(
+  ["px-[var(--menubar-item-padding-x)] py-[var(--menubar-item-padding-y)] text-[length:var(--menubar-item-text-size)] font-medium"],
+  {
+    variants: {
+      inset: {
+        true: "pl-[var(--menubar-item-inset-padding-left)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      inset: false,
+    },
+  }
+)
+
+/**
+ * MenubarSeparator variant styles
+ */
+export const menubarSeparatorVariants = cva(["bg-border -mx-[var(--menubar-separator-margin-x)] my-[var(--menubar-separator-margin-y)] h-[var(--menubar-separator-height)]"])
+
+/**
+ * MenubarShortcut variant styles
+ */
+export const menubarShortcutVariants = cva([
+  "text-muted-foreground ml-auto text-[length:var(--menubar-shortcut-text-size)] tracking-widest",
+])
+
+/**
+ * Item indicator wrapper styles
+ */
+export const menubarIndicatorWrapperVariants = cva([
+  "pointer-events-none absolute left-[var(--menubar-indicator-left)] flex size-[var(--menubar-indicator-size)] items-center justify-center",
+])
+
+export type MenubarItemVariantProps = VariantProps<typeof menubarItemVariants>
+export type MenubarSubTriggerVariantProps = VariantProps<
+  typeof menubarSubTriggerVariants
+>
+export type MenubarLabelVariantProps = VariantProps<typeof menubarLabelVariants>