@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/ui/menu.tsx

@@ -0,0 +1,168 @@
+import { VariantProps } from "class-variance-authority"
+import * as React from "react"
+import {
+  Header as AriaHeader,
+  Keyboard as AriaKeyboard,
+  Menu as AriaMenu,
+  MenuItem as AriaMenuItem,
+  MenuItemProps as AriaMenuItemProps,
+  MenuProps as AriaMenuProps,
+  MenuTrigger as AriaMenuTrigger,
+  MenuTriggerProps as AriaMenuTriggerProps,
+  Separator as AriaSeparator,
+  SeparatorProps as AriaSeparatorProps,
+  SubmenuTrigger as AriaSubmenuTrigger,
+  composeRenderProps,
+  PopoverProps,
+} from "react-aria-components"
+
+import { cn } from "lib/utils/primitives"
+
+import { Check, ChevronRight, Dot } from "lucide-react"
+import { SelectPopover } from "../inputs/select"
+import { Button, buttonVariants } from "./button"
+import { ListBoxCollection } from "./list-box"
+
+export const MenuTrigger = AriaMenuTrigger
+export const MenuSubTrigger = AriaSubmenuTrigger
+export const MenuCollection = ListBoxCollection
+
+export function MenuPopover({ className, ...props }: PopoverProps) {
+  return (
+    <SelectPopover
+      className={composeRenderProps(className, (className) =>
+        cn(className)
+      )}
+      {...props}
+    />
+  )
+}
+
+export function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {
+  return (
+    <AriaMenu
+      className={cn(
+        "overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
+        className
+      )}
+      escapeKeyBehavior="none"
+      {...props}
+    />
+  )
+}
+
+export function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <AriaMenuItem
+      textValue={
+        props.textValue || (typeof children === "string" ? children : undefined)
+      }
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-colors",
+          /* Disabled */
+          "disabled-muted",
+          /* Focused */
+          "data-[focused]:bg-accent data-[focused]:text-accent-foreground ",
+          /* Selection Mode */
+          "data-[selection-mode]:pl-input",
+          className
+        )
+      )}
+      {...props}
+    >
+      {composeRenderProps(children, (children, renderProps) => (
+        <>
+          <span className="absolute left-2 flex size-icon items-center justify-center">
+            {renderProps.isSelected && (
+              <>
+                {renderProps.selectionMode == "single" && (
+                  <Dot className="size-icon fill-current" />
+                )}
+                {renderProps.selectionMode == "multiple" && (
+                  <Check className="size-icon" />
+                )}
+              </>
+            )}
+          </span>
+
+          {children}
+
+          {renderProps.hasSubmenu && <ChevronRight className="ml-auto size-icon" />}
+        </>
+      ))}
+    </AriaMenuItem>
+  )
+}
+
+interface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {
+  inset?: boolean
+  separator?: boolean
+}
+
+export function MenuHeader({
+  className,
+  inset,
+  separator = true,
+  ...props
+}: MenuHeaderProps) {
+  return (
+    <AriaHeader
+      className={cn(
+        "px-3 py-1.5 text-sm font-semibold",
+        inset && "pl-input",
+        separator && "-mx-1 mb-1 border-b border-b-border pb-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function MenuSeparator({ className, ...props }: AriaSeparatorProps) {
+  return (
+    <AriaSeparator
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export function MenuKeyboard({
+  className,
+  ...props
+}: React.ComponentProps<typeof AriaKeyboard>) {
+  return (
+    <AriaKeyboard
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+interface MenuProps<T>
+  extends AriaMenuProps<T>,
+  VariantProps<typeof buttonVariants>,
+  Omit<AriaMenuTriggerProps, "children"> {
+  label?: React.ReactNode
+  isDisabled?: boolean
+}
+// TODO name this better
+export function EasyMenu<T extends object>({
+  label,
+  children,
+  variant,
+  isDisabled,
+  size,
+  ...props
+}: MenuProps<T>) {
+  return (
+    <MenuTrigger {...props}>
+      <Button isDisabled={isDisabled} type="button" variant={variant} size={size}>
+        {label}
+      </Button>
+      <MenuPopover className="overflow-auto">
+        <Menu {...props}>{children}</Menu>
+      </MenuPopover>
+    </MenuTrigger>
+  )
+}

package/lib/components/ui/popover.tsx

@@ -0,0 +1,37 @@
+import {
+	Dialog as AriaDialog,
+	DialogProps as AriaDialogProps,
+	DialogTrigger as AriaDialogTrigger,
+	Popover as AriaPopover,
+	PopoverProps as AriaPopoverProps,
+	composeRenderProps,
+} from "react-aria-components"
+
+import { cn } from "lib/utils/primitives"
+
+export const PopoverTrigger = AriaDialogTrigger
+
+export const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (
+	<AriaPopover
+		offset={offset}
+		className={composeRenderProps(className, (className) =>
+			cn(
+				"z-50 border bg-popover text-popover-foreground outline-none max-w-lg",
+				/* Entering */
+				"data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95",
+				/* Exiting */
+				"data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95",
+				/* Placement */
+				"data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",
+				className
+			)
+		)}
+		{...props}
+	/>
+)
+
+export function PopoverDialog({ className, ...props }: AriaDialogProps) {
+	return (
+		<AriaDialog className={cn("p-icon outline-0", className)} {...props} />
+	)
+}