@etus/ui 0.1.1 → 0.1.2

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -1,305 +0,0 @@
-"use client"
-
-import type {
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuContentProps,
-  DropdownMenuGroupProps,
-  DropdownMenuItemProps,
-  DropdownMenuLabelProps,
-  DropdownMenuPortalProps,
-  DropdownMenuProps,
-  DropdownMenuRadioGroupProps,
-  DropdownMenuRadioItemProps,
-  DropdownMenuSeparatorProps,
-  DropdownMenuShortcutProps,
-  DropdownMenuSubContentProps,
-  DropdownMenuSubProps,
-  DropdownMenuSubTriggerProps,
-  DropdownMenuTriggerProps,
-} from "./DropdownMenu.types"
-
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "../../../lib/utils"
-import {
-  dropdownMenuCheckboxItemVariants,
-  dropdownMenuContentVariants,
-  dropdownMenuIndicatorWrapperVariants,
-  dropdownMenuItemVariants,
-  dropdownMenuLabelVariants,
-  dropdownMenuRadioItemVariants,
-  dropdownMenuSeparatorVariants,
-  dropdownMenuShortcutVariants,
-  dropdownMenuSubContentVariants,
-  dropdownMenuSubTriggerVariants,
-} from "./DropdownMenu.variants"
-
-/**
- * DropdownMenu - A menu that appears when triggered by a button or other element.
- *
- * Built on top of Radix UI DropdownMenu primitive with additional styling.
- *
- * @example
- * <DropdownMenu>
- *   <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Item 1</DropdownMenuItem>
- *     <DropdownMenuItem>Item 2</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- */
-function DropdownMenu({ ...props }: DropdownMenuProps) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-/**
- * DropdownMenuPortal - Renders dropdown menu content in a portal.
- */
-function DropdownMenuPortal({ ...props }: DropdownMenuPortalProps) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-/**
- * DropdownMenuTrigger - Button that opens the dropdown menu.
- */
-function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-/**
- * DropdownMenuContent - Main content container for the dropdown menu.
- */
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: DropdownMenuContentProps) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        className={cn(dropdownMenuContentVariants(), className)}
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-/**
- * DropdownMenuGroup - Groups related menu items together.
- */
-function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-/**
- * DropdownMenuItem - An interactive menu item.
- *
- * Supports inset layout and destructive variant.
- */
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: DropdownMenuItemProps) {
-  return (
-    <DropdownMenuPrimitive.Item
-      className={cn(dropdownMenuItemVariants({ inset, variant }), className)}
-      data-inset={inset}
-      data-slot="dropdown-menu-item"
-      data-variant={variant}
-      {...props}
-    />
-  )
-}
-
-/**
- * DropdownMenuCheckboxItem - A menu item that can be checked/unchecked.
- */
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: DropdownMenuCheckboxItemProps) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      checked={checked ?? false}
-      className={cn(dropdownMenuCheckboxItemVariants(), className)}
-      data-slot="dropdown-menu-checkbox-item"
-      {...props}
-    >
-      <span className={cn(dropdownMenuIndicatorWrapperVariants())}>
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-/**
- * DropdownMenuRadioGroup - Groups radio items together.
- */
-function DropdownMenuRadioGroup({ ...props }: DropdownMenuRadioGroupProps) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-/**
- * DropdownMenuRadioItem - A radio menu item within a radio group.
- */
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: DropdownMenuRadioItemProps) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      className={cn(dropdownMenuRadioItemVariants(), className)}
-      data-slot="dropdown-menu-radio-item"
-      {...props}
-    >
-      <span className={cn(dropdownMenuIndicatorWrapperVariants())}>
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-/**
- * DropdownMenuLabel - A non-interactive label for menu sections.
- */
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: DropdownMenuLabelProps) {
-  return (
-    <DropdownMenuPrimitive.Label
-      className={cn(dropdownMenuLabelVariants({ inset }), className)}
-      data-inset={inset}
-      data-slot="dropdown-menu-label"
-      {...props}
-    />
-  )
-}
-
-/**
- * DropdownMenuSeparator - A visual separator between menu sections.
- */
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: DropdownMenuSeparatorProps) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      className={cn(dropdownMenuSeparatorVariants(), className)}
-      data-slot="dropdown-menu-separator"
-      {...props}
-    />
-  )
-}
-
-/**
- * DropdownMenuShortcut - Displays keyboard shortcut hints.
- */
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: DropdownMenuShortcutProps) {
-  return (
-    <span
-      className={cn(dropdownMenuShortcutVariants(), className)}
-      data-slot="dropdown-menu-shortcut"
-      {...props}
-    />
-  )
-}
-
-/**
- * DropdownMenuSub - Container for nested submenus.
- */
-function DropdownMenuSub({ ...props }: DropdownMenuSubProps) {
-  return (
-    <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-  )
-}
-
-/**
- * DropdownMenuSubTrigger - Trigger for opening a submenu.
- *
- * Includes a chevron icon indicator.
- */
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: DropdownMenuSubTriggerProps) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      className={cn(dropdownMenuSubTriggerVariants({ inset }), className)}
-      data-inset={inset}
-      data-slot="dropdown-menu-sub-trigger"
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-/**
- * DropdownMenuSubContent - Content container for submenus.
- */
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: DropdownMenuSubContentProps) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      className={cn(dropdownMenuSubContentVariants(), className)}
-      data-slot="dropdown-menu-sub-content"
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-}

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

@@ -1,98 +0,0 @@
-import type * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import type { ComponentProps } from "react"
-
-/**
- * DropdownMenu root props
- */
-export interface DropdownMenuProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Root> {}
-
-/**
- * DropdownMenuPortal props
- */
-export interface DropdownMenuPortalProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Portal> {}
-
-/**
- * DropdownMenuTrigger props
- */
-export interface DropdownMenuTriggerProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Trigger> {}
-
-/**
- * DropdownMenuContent props
- */
-export interface DropdownMenuContentProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Content> {}
-
-/**
- * DropdownMenuGroup props
- */
-export interface DropdownMenuGroupProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Group> {}
-
-/**
- * DropdownMenuItem props
- */
-export interface DropdownMenuItemProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Item> {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}
-
-/**
- * DropdownMenuCheckboxItem props
- */
-export interface DropdownMenuCheckboxItemProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> {}
-
-/**
- * DropdownMenuRadioGroup props
- */
-export interface DropdownMenuRadioGroupProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.RadioGroup> {}
-
-/**
- * DropdownMenuRadioItem props
- */
-export interface DropdownMenuRadioItemProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.RadioItem> {}
-
-/**
- * DropdownMenuLabel props
- */
-export interface DropdownMenuLabelProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Label> {
-  inset?: boolean
-}
-
-/**
- * DropdownMenuSeparator props
- */
-export interface DropdownMenuSeparatorProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Separator> {}
-
-/**
- * DropdownMenuShortcut props
- */
-export interface DropdownMenuShortcutProps extends ComponentProps<"span"> {}
-
-/**
- * DropdownMenuSub props
- */
-export interface DropdownMenuSubProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.Sub> {}
-
-/**
- * DropdownMenuSubTrigger props
- */
-export interface DropdownMenuSubTriggerProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> {
-  inset?: boolean
-}
-
-/**
- * DropdownMenuSubContent props
- */
-export interface DropdownMenuSubContentProps
-  extends ComponentProps<typeof DropdownMenuPrimitive.SubContent> {}

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

@@ -1,168 +0,0 @@
-// DropdownMenu/DropdownMenu.variants.ts
-import { cva, type VariantProps } from "class-variance-authority"
-
-/**
- * Shared animation and transition styles for menu content
- */
-const menuContentBase = [
-  "bg-popover text-popover-foreground",
-  "z-[var(--dropdown-menu-content-z-index)] min-w-[var(--dropdown-menu-content-min-width)] overflow-hidden rounded-[var(--dropdown-menu-content-radius)] border-[var(--dropdown-menu-content-border-width)] p-[var(--dropdown-menu-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(--dropdown-menu-item-radius)] text-[length:var(--dropdown-menu-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(--dropdown-menu-item-icon-size)]",
-]
-
-/**
- * DropdownMenuContent variant styles
- */
-export const dropdownMenuContentVariants = cva([
-  ...menuContentBase,
-  "shadow-md",
-  "max-h-(--radix-dropdown-menu-content-available-height)",
-  "origin-(--radix-dropdown-menu-content-transform-origin)",
-  "overflow-x-hidden overflow-y-auto",
-])
-
-/**
- * DropdownMenuSubContent variant styles
- */
-export const dropdownMenuSubContentVariants = cva([
-  ...menuContentBase,
-  "shadow-lg",
-  "origin-(--radix-dropdown-menu-content-transform-origin)",
-])
-
-/**
- * DropdownMenuItem variant styles
- */
-export const dropdownMenuItemVariants = cva(
-  [
-    ...menuItemBase,
-    "[&_svg:not([class*='text-'])]:text-muted-foreground",
-    "px-[var(--dropdown-menu-item-padding-x)] py-[var(--dropdown-menu-item-padding-y)] gap-[var(--dropdown-menu-item-gap)]",
-  ],
-  {
-    variants: {
-      inset: {
-        true: "pl-[var(--dropdown-menu-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",
-    },
-  }
-)
-
-/**
- * DropdownMenuSubTrigger variant styles
- */
-export const dropdownMenuSubTriggerVariants = cva(
-  [
-    ...menuItemBase,
-    "focus:bg-accent focus:text-accent-foreground",
-    "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-    "[&_svg:not([class*='text-'])]:text-muted-foreground",
-    "px-[var(--dropdown-menu-item-padding-x)] py-[var(--dropdown-menu-item-padding-y)] gap-[var(--dropdown-menu-item-gap)]",
-  ],
-  {
-    variants: {
-      inset: {
-        true: "pl-[var(--dropdown-menu-item-inset-padding-left)]",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      inset: false,
-    },
-  }
-)
-
-/**
- * DropdownMenuCheckboxItem variant styles
- */
-export const dropdownMenuCheckboxItemVariants = cva([
-  ...menuItemBase,
-  "focus:bg-accent focus:text-accent-foreground",
-  "py-[var(--dropdown-menu-item-padding-y)] pr-[var(--dropdown-menu-item-padding-x)] pl-[var(--dropdown-menu-item-inset-padding-left)] gap-[var(--dropdown-menu-item-gap)]",
-])
-
-/**
- * DropdownMenuRadioItem variant styles
- */
-export const dropdownMenuRadioItemVariants = cva([
-  ...menuItemBase,
-  "focus:bg-accent focus:text-accent-foreground",
-  "py-[var(--dropdown-menu-item-padding-y)] pr-[var(--dropdown-menu-item-padding-x)] pl-[var(--dropdown-menu-item-inset-padding-left)] gap-[var(--dropdown-menu-item-gap)]",
-])
-
-/**
- * DropdownMenuLabel variant styles
- */
-export const dropdownMenuLabelVariants = cva(
-  ["px-[var(--dropdown-menu-item-padding-x)] py-[var(--dropdown-menu-item-padding-y)] text-[length:var(--dropdown-menu-item-text-size)] font-medium"],
-  {
-    variants: {
-      inset: {
-        true: "pl-[var(--dropdown-menu-item-inset-padding-left)]",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      inset: false,
-    },
-  }
-)
-
-/**
- * DropdownMenuSeparator variant styles
- */
-export const dropdownMenuSeparatorVariants = cva(["bg-border -mx-[var(--dropdown-menu-separator-margin-x)] my-[var(--dropdown-menu-separator-margin-y)] h-[var(--dropdown-menu-separator-height)]"])
-
-/**
- * DropdownMenuShortcut variant styles
- */
-export const dropdownMenuShortcutVariants = cva([
-  "text-muted-foreground ml-auto text-[length:var(--dropdown-menu-shortcut-text-size)] tracking-widest",
-])
-
-/**
- * Item indicator wrapper styles
- */
-export const dropdownMenuIndicatorWrapperVariants = cva([
-  "pointer-events-none absolute left-[var(--dropdown-menu-indicator-left)] flex size-[var(--dropdown-menu-indicator-size)] items-center justify-center",
-])
-
-export type DropdownMenuItemVariantProps = VariantProps<
-  typeof dropdownMenuItemVariants
->
-export type DropdownMenuSubTriggerVariantProps = VariantProps<
-  typeof dropdownMenuSubTriggerVariants
->
-export type DropdownMenuLabelVariantProps = VariantProps<
-  typeof dropdownMenuLabelVariants
->
-