0.1.0 • Published 1 year ago

pandacss-preset-react-aria-components v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Downloads Contributors Forks Stargazers Issues MIT License

🐼 PandaCSS preset for React Aria Components

A 🐼 PandaCSS preset for React Aria Components inspired by the React Aria Components TailwindCSS plugin

Installation

npm install --save-dev pandacss-preset-react-aria-components
pnpm add -D pandacss-preset-react-aria-components
yarn add -D pandacss-preset-react-aria-components
bun add -D pandacss-preset-react-aria-components

Usage

Add the preset to your PandaCSS configuration (panda.config.ts)

// file: panda.config.ts
import { defineConfig } from "@pandacss/dev";

// Import the preset. The name can be anything you want
import { RACPreset } from "pandacss-preset-react-aria-components";

export default defineConfig({
  presets: [
    RACPreset(),
    // Re-add the panda presets if you want to keep
    // the default keyframes, breakpoints, tokens
    // and textStyles provided by PandaCSS
    "@pandacss/dev/presets",
  ],
});

Now you get access access to all new conditions provided by the plugin. It does not override any existing conditions but alters the default to be more specific for "React Aria" components.

// file: Tooltip.tsx
import { Tooltip as RACTooltip, OverlayArrow, type TooltipProps } from "react-aria-components";
import { css } from "../../styled-system/css";

const styles = css({
  bgColor: "slate.700",
  _placementBottom: {
    backgroundColor: "slate.700",
  },
  _placementTop: {
    backgroundColor: "slate.700",
  },
  _groupPressed: {
    backgroundColor: "slate.800",
  },
});

export function Tooltip({ children, ...props }: TooltipProps) {
  return (
    <RACTooltip data-group {...props} offset={10} className={styles}>
      <OverlayArrow>
        <svg
          width={8}
          height={8}
          viewBox="0 0 8 8"
          className={css({
            fill: "slate.700",
            _dark: { fill: "slate.600", stroke: "white/10" },
            stroke: "gray.800",
          })}
        >
          <path d="M0 0 L4 4 L8 0" />
        </svg>
      </OverlayArrow>
      {children}
    </RACTooltip>
  );
}

Attributions