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

Navigation Components

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

Navigation components provide UI elements for moving between pages and sections including buttons, links, breadcrumbs, pagination, and step indicators.

Capabilities

Button Component

Button component with variants and sizes.

import { Button, IconButton, ButtonGroup, CloseButton, ButtonPropsProvider } from "@chakra-ui/react";

interface ButtonProps extends HTMLChakraProps<"button"> {
  variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  colorPalette?: string;
  loading?: boolean;
  loadingText?: string;
  spinner?: React.ReactNode;
  spinnerPlacement?: "start" | "end";
  disabled?: boolean;
}

const Button: ChakraComponent<"button", ButtonProps>;
const ButtonPropsProvider: React.FC<{ value: ButtonProps; children: React.ReactNode }>;

interface IconButtonProps extends ButtonProps {
  "aria-label": string;
}

const IconButton: ChakraComponent<"button", IconButtonProps>;

interface ButtonGroupProps extends HTMLChakraProps<"div"> {
  attached?: boolean;
  orientation?: "horizontal" | "vertical";
}

const ButtonGroup: ChakraComponent<"div", ButtonGroupProps>;

interface CloseButtonProps extends ButtonProps {}

const CloseButton: ChakraComponent<"button", CloseButtonProps>;

Usage:

<Button variant="solid" colorPalette="blue" size="md">
  Click me
</Button>

<IconButton aria-label="Search" icon={<SearchIcon />} />

<ButtonGroup attached>
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</ButtonGroup>

Link Component

Link component with external link support and composable overlays.

import { Link, LinkBox, LinkOverlay, LinkPropsProvider } from "@chakra-ui/react";

interface LinkProps extends HTMLChakraProps<"a"> {
  variant?: "underline" | "plain";
}

const Link: ChakraComponent<"a", LinkProps>;
const LinkPropsProvider: React.FC<{ value: LinkProps; children: React.ReactNode }>;

interface LinkBoxProps extends HTMLChakraProps<"div"> {}

const LinkBox: ChakraComponent<"div", LinkBoxProps>;

interface LinkOverlayProps extends HTMLChakraProps<"a"> {
  external?: boolean;
}

const LinkOverlay: ChakraComponent<"a", LinkOverlayProps>;

Usage:

<Link href="/about" variant="underline">
  About Page
</Link>

<LinkBox>
  <Heading size="md">
    <LinkOverlay href="/article">Article Title</LinkOverlay>
  </Heading>
  <Text>Article description...</Text>
</LinkBox>

Breadcrumb Component

Breadcrumb navigation component.

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

namespace Breadcrumb {
  export const Root: ChakraComponent<"nav", {
    separator?: React.ReactNode;
  }>;
  export const List: ChakraComponent<"ol">;
  export const Item: ChakraComponent<"li">;
  export const Link: ChakraComponent<"a", {
    currentPage?: boolean;
  }>;
  export const CurrentLink: ChakraComponent<"span">;
  export const Separator: ChakraComponent<"span">;
  export const Ellipsis: ChakraComponent<"span">;
}

Usage:

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
      <Breadcrumb.Separator>/</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
      <Breadcrumb.Separator>/</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.CurrentLink>Current Page</Breadcrumb.CurrentLink>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Pagination Component

Pagination component for navigating through pages.

import { Pagination, usePagination, usePaginationContext } from "@chakra-ui/react";

interface PaginationRootProps {
  page?: number;
  defaultPage?: number;
  count: number;
  pageSize?: number;
  siblingCount?: number;
  type?: "button" | "link";
  onPageChange?: (details: { page: number }) => void;
  children?: React.ReactNode;
}

namespace Pagination {
  export const Root: React.FC<PaginationRootProps>;
  export const RootProvider: React.FC<PaginationRootProps>;
  export const PrevTrigger: ChakraComponent<"button", {
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const NextTrigger: ChakraComponent<"button", {
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const Items: React.FC<{
    render?: (page: PaginationPage) => React.ReactNode;
    children?: React.ReactNode;
  }>;
  export const Item: ChakraComponent<"button", {
    type: "page" | "ellipsis";
    value: number;
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const Ellipsis: ChakraComponent<"div">;
  export const PageText: ChakraComponent<"span">;
}

interface UsePaginationProps {
  page?: number;
  defaultPage?: number;
  count: number;
  pageSize?: number;
  siblingCount?: number;
  onPageChange?: (details: { page: number }) => void;
}

interface UsePaginationReturn {
  page: number;
  pages: PaginationPage[];
  pageSize: number;
  totalPages: number;
  previousPage: () => void;
  nextPage: () => void;
  setPage: (page: number) => void;
}

interface PaginationPage {
  type: "page" | "ellipsis";
  value: number;
}

function usePagination(props: UsePaginationProps): UsePaginationReturn;
function usePaginationContext(): PaginationContext;

Usage:

<Pagination.Root count={100} pageSize={10}>
  <Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
  <Pagination.Items />
  <Pagination.NextTrigger>Next</Pagination.NextTrigger>
</Pagination.Root>

Steps Component

Step-by-step navigation indicator.

import { Steps, useSteps, useStepsContext, useStepsItemContext } from "@chakra-ui/react";

interface StepsRootProps {
  step?: number;
  defaultStep?: number;
  count: number;
  orientation?: "horizontal" | "vertical";
  linear?: boolean;
  onStepChange?: (details: { step: number }) => void;
  onStepComplete?: (details: { step: number }) => void;
  children?: React.ReactNode;
}

namespace Steps {
  export const Root: React.FC<StepsRootProps>;
  export const RootProvider: React.FC<StepsRootProps>;
  export const List: ChakraComponent<"div", {
    variant?: "solid" | "subtle";
    size?: "sm" | "md" | "lg";
  }>;
  export const Item: React.FC<{
    index: number;
    children?: React.ReactNode;
  }>;
  export const Trigger: ChakraComponent<"button">;
  export const Indicator: ChakraComponent<"div">;
  export const Number: ChakraComponent<"div">;
  export const Title: ChakraComponent<"div">;
  export const Description: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    index: number;
  }>;
  export const CompletedContent: ChakraComponent<"div">;
  export const NextTrigger: ChakraComponent<"button">;
  export const PrevTrigger: ChakraComponent<"button">;
  export const Status: ChakraComponent<"div">;
}

interface UseStepsProps {
  step?: number;
  defaultStep?: number;
  count: number;
  linear?: boolean;
  onStepChange?: (details: { step: number }) => void;
}

interface UseStepsReturn {
  step: number;
  count: number;
  nextStep: () => void;
  prevStep: () => void;
  setStep: (step: number) => void;
  getItemProps: (props: { index: number }) => any;
}

function useSteps(props: UseStepsProps): UseStepsReturn;
function useStepsContext(): StepsContext;
function useStepsItemContext(): StepsItemContext;

Usage:

<Steps.Root count={3} defaultStep={0}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 1</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={1}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 2</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={2}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 3</Steps.Title>
      </Steps.Trigger>
    </Steps.Item>
  </Steps.List>
  <Steps.Content index={0}>Content for step 1</Steps.Content>
  <Steps.Content index={1}>Content for step 2</Steps.Content>
  <Steps.Content index={2}>Content for step 3</Steps.Content>
</Steps.Root>

SkipNav Component

Skip navigation link for accessibility.

import { SkipNavLink, SkipNavContent } from "@chakra-ui/react";

interface SkipNavLinkProps extends HTMLChakraProps<"a"> {
  children?: React.ReactNode;
}

const SkipNavLink: ChakraComponent<"a", SkipNavLinkProps>;

interface SkipNavContentProps extends HTMLChakraProps<"div"> {
  id?: string;
}

const SkipNavContent: ChakraComponent<"div", SkipNavContentProps>;

Usage:

// At the top of your page
<SkipNavLink>Skip to content</SkipNavLink>

// Before your main content
<SkipNavContent id="main-content" />
<main>Your page content</main>

Types

interface PaginationContext extends UsePaginationReturn {}

interface StepsContext extends UseStepsReturn {}

interface StepsItemContext {
  index: number;
  current: boolean;
  complete: boolean;
  incomplete: boolean;
}

Install with Tessl CLI