tessl/npm-chakra-ui--react

Comprehensive React component library for building accessible, responsive user interfaces with 109+ pre-built components, design tokens, and type-safe styling system

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Overlay Components

Name: tessl/npm-chakra-ui--react
Author: tessl

Overlay components provide layered UI elements including modals, drawers, popovers, tooltips, and menus that appear above the main content.

Capabilities

Dialog Component

Modal dialog component for focused interactions.

import { Dialog, useDialog, useDialogContext } from "@chakra-ui/react";

interface DialogRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  modal?: boolean;
  closeOnEscape?: boolean;
  closeOnInteractOutside?: boolean;
  preventScroll?: boolean;
  role?: "dialog" | "alertdialog";
  onOpenChange?: (details: { open: boolean }) => void;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onInteractOutside?: (event: Event) => void;
  children?: React.ReactNode;
}

namespace Dialog {
  export const Root: React.FC<DialogRootProps>;
  export const RootProvider: React.FC<DialogRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Backdrop: ChakraComponent<"div">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Header: ChakraComponent<"div">;
  export const Body: ChakraComponent<"div">;
  export const Footer: ChakraComponent<"div">;
  export const Title: ChakraComponent<"h2">;
  export const Description: ChakraComponent<"p">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const ActionTrigger: ChakraComponent<"button">;
}

function useDialog(props: UseDialogProps): UseDialogReturn;
function useDialogContext(): DialogContext;

Usage:

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Header>
        <Dialog.Title>Dialog Title</Dialog.Title>
      </Dialog.Header>
      <Dialog.Body>Dialog content goes here</Dialog.Body>
      <Dialog.Footer>
        <Dialog.CloseTrigger>Cancel</Dialog.CloseTrigger>
        <Dialog.ActionTrigger>Confirm</Dialog.ActionTrigger>
      </Dialog.Footer>
      <Dialog.CloseTrigger />
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Drawer Component

Side panel drawer component.

import { Drawer, useDrawer, useDrawerContext } from "@chakra-ui/react";

interface DrawerRootProps extends DialogRootProps {
  placement?: "start" | "end" | "top" | "bottom";
}

namespace Drawer {
  export const Root: React.FC<DrawerRootProps>;
  export const RootProvider: React.FC<DrawerRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Backdrop: ChakraComponent<"div">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Header: ChakraComponent<"div">;
  export const Body: ChakraComponent<"div">;
  export const Footer: ChakraComponent<"div">;
  export const Title: ChakraComponent<"h2">;
  export const Description: ChakraComponent<"p">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const ActionTrigger: ChakraComponent<"button">;
}

function useDrawer(props: UseDialogProps): UseDialogReturn;
function useDrawerContext(): DialogContext;

Popover Component

Popover overlay component for contextual information.

import { Popover, usePopover, usePopoverContext } from "@chakra-ui/react";

interface PopoverRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  autoFocus?: boolean;
  modal?: boolean;
  closeOnEscape?: boolean;
  closeOnInteractOutside?: boolean;
  portalled?: boolean;
  positioning?: PositioningOptions;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Popover {
  export const Root: React.FC<PopoverRootProps>;
  export const RootProvider: React.FC<PopoverRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Anchor: ChakraComponent<"div">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    portalled?: boolean;
  }>;
  export const Header: ChakraComponent<"div">;
  export const Body: ChakraComponent<"div">;
  export const Footer: ChakraComponent<"div">;
  export const Title: ChakraComponent<"h3">;
  export const Description: ChakraComponent<"p">;
  export const CloseTrigger: ChakraComponent<"button">;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function usePopover(props: UsePopoverProps): UsePopoverReturn;
function usePopoverContext(): PopoverContext;

Tooltip Component

Tooltip overlay for additional context on hover.

import { Tooltip, useTooltip, useTooltipContext } from "@chakra-ui/react";

interface TooltipRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  openDelay?: number;
  closeDelay?: number;
  closeOnEscape?: boolean;
  closeOnPointerDown?: boolean;
  interactive?: boolean;
  disabled?: boolean;
  positioning?: PositioningOptions;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Tooltip {
  export const Root: React.FC<TooltipRootProps>;
  export const RootProvider: React.FC<TooltipRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    portalled?: boolean;
  }>;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function useTooltip(props: UseTooltipProps): UseTooltipReturn;
function useTooltipContext(): TooltipContext;

Usage:

<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>Tooltip content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Menu Component

Dropdown menu component for actions and navigation.

import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@chakra-ui/react";

interface MenuRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  closeOnSelect?: boolean;
  loop?: boolean;
  positioning?: PositioningOptions;
  onSelect?: (details: { value: string }) => void;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Menu {
  export const Root: React.FC<MenuRootProps>;
  export const RootProvider: React.FC<MenuRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const TriggerItem: ChakraComponent<"div">;
  export const ContextTrigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    portalled?: boolean;
  }>;
  export const Item: ChakraComponent<"div", {
    value?: string;
    disabled?: boolean;
    closeOnSelect?: boolean;
  }>;
  export const ItemText: ChakraComponent<"div">;
  export const ItemCommand: ChakraComponent<"div">;
  export const ItemIndicator: ChakraComponent<"div">;
  export const ItemGroup: ChakraComponent<"div">;
  export const ItemGroupLabel: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"hr">;
  export const CheckboxItem: ChakraComponent<"div", {
    value: string;
    checked?: boolean;
    onCheckedChange?: (details: { checked: boolean }) => void;
  }>;
  export const RadioItemGroup: React.FC<{
    value?: string;
    onValueChange?: (details: { value: string }) => void;
    children?: React.ReactNode;
  }>;
  export const RadioItem: ChakraComponent<"div", { value: string }>;
  export const Indicator: ChakraComponent<"div">;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function useMenu(props: UseMenuProps): UseMenuReturn;
function useMenuContext(): MenuContext;
function useMenuItemContext(): MenuItemContext;

HoverCard Component

Hover-triggered card overlay for rich content.

import { HoverCard, useHoverCard, useHoverCardContext } from "@chakra-ui/react";

interface HoverCardRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  openDelay?: number;
  closeDelay?: number;
  positioning?: PositioningOptions;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace HoverCard {
  export const Root: React.FC<HoverCardRootProps>;
  export const RootProvider: React.FC<HoverCardRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Arrow: ChakraComponent<"div">;
  export const ArrowTip: ChakraComponent<"div">;
}

function useHoverCard(props: UseHoverCardProps): UseHoverCardReturn;
function useHoverCardContext(): HoverCardContext;

ActionBar Component

Floating action bar for contextual actions.

import { ActionBar, useActionBar, useActionBarContext } from "@chakra-ui/react";

interface ActionBarRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace ActionBar {
  export const Root: React.FC<ActionBarRootProps>;
  export const RootProvider: React.FC<ActionBarRootProps>;
  export const SelectionTrigger: ChakraComponent<"button">;
  export const Positioner: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"div">;
  export const CloseTrigger: ChakraComponent<"button">;
}

function useActionBar(props: any): any;
function useActionBarContext(): any;

Portal Component

Renders children into a portal (document.body by default).

import { Portal } from "@chakra-ui/react";

interface PortalProps {
  children: React.ReactNode;
  container?: HTMLElement;
  disabled?: boolean;
}

const Portal: React.FC<PortalProps>;

Types

interface UseDialogProps {
  open?: boolean;
  defaultOpen?: boolean;
  modal?: boolean;
  onOpenChange?: (details: { open: boolean }) => void;
}

interface UseDialogReturn {
  open: boolean;
  setOpen: (open: boolean) => void;
  getTriggerProps: () => any;
  getBackdropProps: () => any;
  getContentProps: () => any;
  getCloseTriggerProps: () => any;
}

interface DialogContext extends UseDialogReturn {}

interface PositioningOptions {
  placement?: Placement;
  strategy?: "absolute" | "fixed";
  offset?: { mainAxis?: number; crossAxis?: number };
  flip?: boolean;
  slide?: boolean;
  overlap?: boolean;
  sameWidth?: boolean;
  fitViewport?: boolean;
}

type Placement =
  | "top"
  | "top-start"
  | "top-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end"
  | "right"
  | "right-start"
  | "right-end";

Install with Tessl CLI