@cryptlex/web-components 5.2.0 → 5.3.0-alpha01

package/lib/components/ui/menu.tsx

@@ -1,168 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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} />
-	)
-}