or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-teste-ui--system

Chakra UI system primitives providing styled API for atomic, theme-aware component styling

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@teste-ui/system@2.2.x

To install, run

npx @tessl/cli install tessl/npm-teste-ui--system@2.2.0

Teste UI System

Chakra UI system primitives providing a styled API for creating atomic, theme-aware component styling. This package enables creating customizable, theme-aware React components with style props and theming capabilities.

Package Information

Package Name: @teste-ui/system
Package Type: npm
Language: TypeScript
Installation: npm install @teste-ui/system or yarn add @teste-ui/system

Core Imports

import { chakra, styled, useTheme, ThemeProvider } from "@teste-ui/system";

For CommonJS:

const { chakra, styled, useTheme, ThemeProvider } = require("@teste-ui/system");

Basic Usage

import { chakra, ThemeProvider } from "@teste-ui/system";

// Create enhanced JSX elements with style props
function App() {
  return (
    <ThemeProvider theme={theme}>
      <chakra.button 
        bg="green.200" 
        _hover={{ bg: "green.300" }}
        px={4}
        py={2}
      >
        Click me
      </chakra.button>
      
      <chakra.h1 fontSize="lg" color="blue.500">
        Heading
      </chakra.h1>
      
      {/* Create custom styled components */}
      <chakra.div 
        as="section"
        bg="gray.50"
        p={6}
        borderRadius="md"
      >
        Content area
      </chakra.div>
    </ThemeProvider>
  );
}

Architecture

The system is built around several key components:

Chakra Factory: The chakra function creates enhanced JSX elements with style props
Styled System: Integration with style props for responsive, theme-aware styling
Theme Provider: Context for theme and color mode management
Style Configuration: Component theming system with variants, sizes, and color schemes
TypeScript Integration: Full type safety for style props and component composition

Capabilities

Chakra Factory

Create enhanced JSX elements that accept style props and theme-aware styling.

declare const chakra: ChakraFactory & HTMLChakraComponents;

type ChakraFactory = {
  <T extends As, P = {}>(component: T, options?: ChakraStyledOptions): ChakraComponent<T, P>;
};

type HTMLChakraComponents = {
  [Tag in DOMElements]: ChakraComponent<Tag, {}>;
};

Styled Component Creation

Create custom styled components with theme awareness and style props.

function styled<T extends As, P = {}>(
  component: T, 
  options?: ChakraStyledOptions
): ChakraComponent<T, P>;

interface ChakraStyledOptions extends Dict {
  shouldForwardProp?(prop: string): boolean;
  label?: string;
  baseStyle?: SystemStyleObject | ((props: StyleResolverProps) => SystemStyleObject);
}

Theme Provider

Provides theme context and CSS custom properties for the application.

function ThemeProvider(props: ThemeProviderProps): JSX.Element;

interface ThemeProviderProps extends EmotionThemeProviderProps {
  cssVarsRoot?: string;
}

function useTheme<T extends object = Dict>(): WithCSSVar<T>;

Style Configuration Hooks

Hooks for applying component theming with variants, sizes, and color schemes.

function useStyleConfig(
  themeKey: string, 
  props?: ThemingProps & Dict
): CSSObject;

function useMultiStyleConfig(
  themeKey: string, 
  props?: ThemingProps & Dict
): Record<string, CSSObject>;

Theme Hooks

Access theme values and color mode functionality.

function useChakra<T extends Dict = Dict>(): {
  theme: T;
  colorMode: ColorMode;
  toggleColorMode: () => void;
  setColorMode: (value: any) => void;
};

function useToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string, 
  token: T, 
  fallback?: T
): T;

Styles Context

Create and manage component-specific style contexts.

function createStylesContext(componentName: string): [
  React.Provider<Dict<CSSObject>>, 
  () => Dict<CSSObject>, 
  React.Context<Dict<CSSObject>>
];

Forward Ref Utility

Enhanced forwardRef with proper TypeScript support for polymorphic components.

function forwardRef<Props extends object, Component extends As>(
  component: React.ForwardRefRenderFunction<
    any, 
    RightJoinProps<PropsOf<Component>, Props> & { as?: As; }
  >
): ComponentWithAs<Component, Props>;

Types

interface ChakraProps extends SystemProps {
  /** Used to truncate text at a specific number of lines */
  noOfLines?: ResponsiveValue<number>;
  /** Used for internal css management */
  __css?: SystemStyleObject;
  /** Used to pass theme-aware style props */
  sx?: SystemStyleObject;
  /** The emotion's css style object */
  css?: Interpolation<{}>;
}

interface ThemingProps<ThemeComponent extends string = any> {
  variant?: ResponsiveValue<string>;
  size?: ResponsiveValue<string>;
  colorScheme?: ThemeTypings["colorSchemes"];
  orientation?: "vertical" | "horizontal";
  styleConfig?: Dict;
}

type As<Props = any> = React.ElementType<Props>;

type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
  as?: As;
};

interface ChakraComponent<T extends As, P = {}> 
  extends ComponentWithAs<T, ChakraProps & P> {}

type HTMLChakraProps<T extends As> = Omit<PropsOf<T>, "ref" | keyof StyleProps> & 
  ChakraProps & { as?: As; };

Re-exported APIs

This package also re-exports functionality from related packages:

@teste-ui/color-mode: Color mode utilities and hooks
@teste-ui/styled-system: Style props and responsive utilities
@emotion/react: keyframes and Interpolation types