@codefast/ui 0.0.8 → 0.0.10

package/src/menubar.tsx

@@ -1,11 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { cn } from "./utils";
 
@@ -13,53 +9,55 @@ import { cn } from "./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
  * -------------------------------------------------------------------------- */
 
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  MenubarPrimitive.MenubarProps
->(({ className, ...props }, ref) => (
+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,
-    )}
+    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
  * -------------------------------------------------------------------------- */
 
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  MenubarPrimitive.MenubarTriggerProps
->(({ className, ...props }, ref) => (
+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(
@@ -69,66 +67,71 @@ const MenubarTrigger = React.forwardRef<
     {...props}
   />
 ));
+
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarSubTrigger
  * -------------------------------------------------------------------------- */
 
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  MenubarPrimitive.MenubarSubTriggerProps & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...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;
+type MenubarSubTriggerElement = React.ElementRef<typeof MenubarPrimitive.SubTrigger>;
 
-/* -----------------------------------------------------------------------------
- * Component: MenubarSubContent
- * -------------------------------------------------------------------------- */
+interface MenubarSubTriggerProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> {
+  inset?: boolean;
+}
 
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  MenubarPrimitive.MenubarSubContentProps
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Portal>
-    <MenubarPrimitive.SubContent
+const MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(
+  ({ className, inset, children, ...props }, ref) => (
+    <MenubarPrimitive.SubTrigger
       ref={ref}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 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-0 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-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+        "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}
-    />
-  </MenubarPrimitive.Portal>
-));
+    >
+      {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-0 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-0 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-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  ),
+);
+
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarContent
  * -------------------------------------------------------------------------- */
 
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  MenubarPrimitive.MenubarContentProps
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref,
-  ) => (
+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}
@@ -144,18 +147,20 @@ const MenubarContent = React.forwardRef<
     </MenubarPrimitive.Portal>
   ),
 );
+
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarItem
  * -------------------------------------------------------------------------- */
 
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  MenubarPrimitive.MenubarItemProps & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+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(
@@ -166,116 +171,111 @@ const MenubarItem = React.forwardRef<
     {...props}
   />
 ));
+
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarCheckboxItem
  * -------------------------------------------------------------------------- */
 
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  MenubarPrimitive.MenubarCheckboxItemProps
->(({ className, children, 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>
-));
+type MenubarCheckboxItemElement = React.ElementRef<typeof MenubarPrimitive.CheckboxItem>;
+type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>;
+
+const MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(
+  ({ className, children, 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
  * -------------------------------------------------------------------------- */
 
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  MenubarPrimitive.MenubarRadioItemProps
->(({ className, children, ...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>
-));
+type MenubarRadioItemElement = React.ElementRef<typeof MenubarPrimitive.RadioItem>;
+type MenubarRadioItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>;
+
+const MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(
+  ({ className, children, ...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
  * -------------------------------------------------------------------------- */
 
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  MenubarPrimitive.MenubarLabelProps & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+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,
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
     {...props}
   />
 ));
+
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarSeparator
  * -------------------------------------------------------------------------- */
 
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
+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
  * -------------------------------------------------------------------------- */
 
-function MenubarShortcut({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
+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} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -298,4 +298,19 @@ export {
   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,
 };