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

@zag-js/anatomy

Package Overview
Dependencies
Maintainers
1
Versions
685
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/anatomy

  • 0.0.0-dev-20230202104422
  • Source
  • npm
  • Socket score

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

Keywords

FAQs

Package last updated on 02 Feb 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc