Globals

Our package exports a set of global types and props that are used throughout components and can be useful during development. They are all exported from the @prismane/core entry.

Global Types

PrismaneBreakpoints

PrismaneBreakpoints is a type that is used to provide a predefined set of sizes for our components.

type PrismaneBreakpoints = "xs" | "sm" | "base" | "md" | "lg";

PrismaneShades

PrismaneShades is a type that is used to provide a predefined set of shades for every color in our color pallete.

type PrismaneShades = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

PrismaneColors

PrismaneColors is a type that is used to provide a predefined set of colors that is used in our color pallete.

type PrismaneColors =
  | "primary"
  | "base"
  | "slate"
  | "gray"
  | "coal"
  | "sepia"
  | "red"
  | "orange"
  | "copper"
  | "yellow"
  | "lime"
  | "green"
  | "emerald"
  | "teal"
  | "cyan"
  | "diamond"
  | "blue"
  | "amethyst"
  | "violet"
  | "purple"
  | "magenta"
  | "pink"
  | "ruby";

PrismaneAnimations

PrismaneAnimations is a type that is used to provide a predefined set of animations each of which is a valid prop to the Animation component.

type PrismaneAnimations =
  | "fade"
  | "scale"
  | "scale-y"
  | "scale-x"
  | "skew-up"
  | "skew-down"
  | "rotate-left"
  | "rotate-right"
  | "slide-down"
  | "slide-up"
  | "slide-left"
  | "slide-right"
  | "roll"
  | "pulse"
  | "shake"
  | "bounce"
  | "flip";

PrismanePositions

PrismanePositions is a type that is used to provide a predefined set of positions each of which is a valid value to every size prop of our components.

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

PrismaneTransitions

PrismaneTransitions is a type that is used to provide a predefined set of transitions each of which is a valid value to the transition prop of our Transition component.

type PrismaneTransitions =
  | "all"
  | "colors"
  | "opacity"
  | "shadow"
  | "transform";

PrismaneFieldComponent

PrismaneFieldComponent is a type that is used to provide a set of props to each of our field components.

interface PrismaneFieldComponent {
  name?: string;
  id?: string;
  error?: string | null;
  label?: string;
  value?: string | number;
  defaultValue?: string | number;
  size?: PrismaneBreakpoints;
  variant?: "outlined" | "filled" | "underlined" | "unstyled";
  addons?: React.ReactNode;
}

Global Constants

PRISMANE_COLORS

A constant that contains all of Prismane's pre-baked colors.

import { PRISMANE_COLORS } from "@prismane/core";

PRISMANE_DEFAULT_COLORS_MAP

A constant that contains a map of Prismane's color names, meaning that it does not include primary or base colors.

import { PRISMANE_DEFAULT_COLORS_MAP } from "@prismane/core";

PRISMANE_COLORS_MAP

A constant that extends the PRISMANE_DEFAULT_COLORS_MAP and adds the values of primary and base.

import { PRISMANE_COLORS_MAP } from "@prismane/core";

PRISMANE_SHADES_MAP

A map of all of Prismane's color shades.

import { PRISMANE_SHADES_MAP } from "@prismane/core";

Go BackInstallation

Up NextVersatile Components