Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@zag-js/anatomy

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/anatomy


Version published
Weekly downloads
179K
increased by1.35%
Maintainers
1
Weekly downloads
 
Created

What is @zag-js/anatomy?

@zag-js/anatomy is a utility library for creating and managing component anatomy in a consistent and reusable way. It helps in defining the structure and parts of a component, making it easier to manage and style complex UI components.

What are @zag-js/anatomy's main functionalities?

Define Component Anatomy

This feature allows you to define the different parts of a component. In this example, a button component is defined with root, icon, and label parts.

const { defineParts } = require('@zag-js/anatomy');

const buttonAnatomy = defineParts({
  root: 'button',
  icon: 'button__icon',
  label: 'button__label'
});

console.log(buttonAnatomy.parts); // { root: 'button', icon: 'button__icon', label: 'button__label' }

Get Part Selectors

This feature allows you to get the CSS selectors for each part of the component. This is useful for styling the component parts consistently.

const { defineParts } = require('@zag-js/anatomy');

const buttonAnatomy = defineParts({
  root: 'button',
  icon: 'button__icon',
  label: 'button__label'
});

const selectors = buttonAnatomy.selectors;
console.log(selectors.root); // .button
console.log(selectors.icon); // .button__icon
console.log(selectors.label); // .button__label

Extend Component Anatomy

This feature allows you to extend an existing component anatomy with additional parts. In this example, the button anatomy is extended to include an iconWrapper part.

const { defineParts } = require('@zag-js/anatomy');

const buttonAnatomy = defineParts({
  root: 'button',
  icon: 'button__icon',
  label: 'button__label'
});

const iconButtonAnatomy = buttonAnatomy.extend({
  iconWrapper: 'button__icon-wrapper'
});

console.log(iconButtonAnatomy.parts); // { root: 'button', icon: 'button__icon', label: 'button__label', iconWrapper: 'button__icon-wrapper' }

Other packages similar to @zag-js/anatomy

FAQs

Package last updated on 28 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts