open-index/open-npm huggingface dataset:
npm package: @oxygen-ui/logger
Description: Logger for Oxygen UI projects
Author: WSO2
Latest version: 2.4.6

<p align="center" style="color: #343a40">
  <h1 align="center">@oxygen-ui/logger</h1>
</p>
<p align="center" style="font-size: 1.2rem;">Simple logger package for Oxygen UI.</p>

<div align="center">
  <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@oxygen-ui/logger">
  <img alt="npm" src="https://img.shields.io/npm/dw/@oxygen-ui/logger">
  <a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
</div>

## Installation

To install `@oxygen-ui/logger`, run the following command:

```sh
# With npm
npm install @oxygen-ui/logger

# With pnpm
pnpm add @oxygen-ui/logger

# With yarn
yarn add @oxygen-ui/logger
```

## Usage

Here's an example of how to use `@oxygen-ui/logger`:

```js
const { logger } = require('@oxygen-ui/logger');

logger.log('======  🧱 Started Building Primitives 🧱  ======');
logger.success(pkg.name, `🏆 Successfully wrote the transformations.`);
logger.info(pkg.name, '💭 Processing the design tokens');
logger.warn(`wrote ${file} with ${count} exports`);
logger.error(logMessageOne, logMessageTwo);
```

## API

### logger.error(...args: Array<any>): void

Logs an error message to the console. Accepts any number of arguments.

### logger.info(...args: Array<any>): void

Logs an info message to the console. Accepts any number of arguments.

### logger.log(...args: Array<any>): void

Logs a message to the console. Accepts any number of arguments.

### logger.success(...args: Array<any>): void

Logs a success message to the console. Accepts any number of arguments.

### logger.warn(...args: Array<any>): void

Logs a warning message to the console. Accepts any number of arguments.

## Contributing

Want to report a bug, contribute some code, or improve the documentation?

Excellent! Read up on our [guidelines for contributing](../../CONTRIBUTING.md) to get started.

## License

Licenses this source under the Apache License, Version 2.0 [LICENSE](../../LICENSE), You may not use this file except in compliance with the License.
npm package: @oxygen-ui/primitives
Description: Low level building blocks of the Oxygen Design System
Author: WSO2
Latest version: 2.4.6

<p align="center" style="color: #343a40">
  <h1 align="center">@oxygen-ui/primitives</h1>
</p>
<p align="center" style="font-size: 1.2rem;">Contains common design primitives such as design tokens, fonts, and icons for Oxygen UI.</p>

<div align="center">
  <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@oxygen-ui/primitives">
  <img alt="npm" src="https://img.shields.io/npm/dw/@oxygen-ui/primitives">
  <a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
</div>

## Installation

To install `@oxygen-ui/primitives`, run the following command:

```sh
# With npm
npm install @oxygen-ui/primitives

# With pnpm
pnpm add @oxygen-ui/primitives

# With yarn
yarn add @oxygen-ui/primitives
```

## Usage

Here's an example of how to use the `@oxygen-ui/primitives` package:

### Design Tokens

You can import the design tokens by referencing the `@oxygen-ui/primitives/dist/design-tokens` directory. For example:

```js
import tokens from '@oxygen-ui/primitives/dist/design-tokens/web/oxygen/es/tokens';

export const Theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          main: tokens.OxygenColorsPrimaryDefault,
        },
      },
    }
  }
}
```

### Icons

To use the icons, you can import the generated JSON data from `@oxygen-ui/primitives/dist/icons/data.json`. For example:

```js
const oxygenIcons = require('@oxygen-ui/primitives/dist/icons/data.json');
```

> **Note**
> These icons are exported in a low level agnostic manner and are not meant to be used directly in your application.
> Instead, you should use the framework specific wrappers such as `@oxygen-ui/react-icons`.
> New libraries like `@oxygen-ui/vue-icons` or `@oxygen-ui/icon-font` could be written in the future by using the exported JSON data.

### API
`@oxygen-ui/primitives` does not export any APIs as of now, but instead provides a set of low level components for use in Oxygen UI.

## Contributing

Want to report a bug, contribute some code, or improve the documentation?

Excellent! Read up on our [guidelines for contributing](../../CONTRIBUTING.md) to get started.

## License

Licenses this source under the Apache License, Version 2.0 [LICENSE](../../LICENSE), You may not use this file except in compliance with the License.
npm package: @oxygen-ui/react-icons
Description: The SVG icons from primitives exported as React components.
Author: WSO2
Latest version: 2.4.6

<p align="center" style="color: #343a40">
  <h1 align="center">@oxygen-ui/react-icons</h1>
</p>
<p align="center" style="font-size: 1.2rem;">React components for Oxygen UI icons.</p>
<div align="center">
  <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@oxygen-ui/react-icons">
  <img alt="npm" src="https://img.shields.io/npm/dw/@oxygen-ui/react-icons">
  <a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
</div>

## Installation

```bash
# With npm
npm install @oxygen-ui/react-icons

# With pnpm
pnpm add @oxygen-ui/react-icons

# With yarn
yarn add @oxygen-ui/react-icons
```

## Usage

To use icons from `@oxygen-ui/react-icons`, simply import the desired icon as a React component and use it in your code:

```jsx
import { HomeIcon } from '@oxygen-ui/react-icons';

function CustomHomeIcon() {
  return <HomeIcon fill="#FFFFFF" size={16} />;
}
```

## API

### Icon Components

The `@oxygen-ui/react-icons` package exports all the available icons as React components, which can be used in your app as shown in the example above. The available icons are:

- `HomeIcon`
- `ChevronLeftIcon`
- `ChevronRightIcon`
- ... and more!

> View all available icons at https://wso2.github.io/oxygen-ui/react/?path=/docs/icons-icons-%F0%9F%9A%A7--page.

Each icon component accepts the following props:

- `aria-label`: The aria label to be used for the icon.
- `tabIndex`: The tab index to be used for the icon.
- `verticalAlign`: The vertical alignment to be used for the icon. This prop is optional and defaults to 'text-bottom'.
- `className`: The class name to be applied to the icon. This prop is optional.
- `fill`: The color to be used to fill the icon. This prop is optional.
- `size`: The size of the icon. This prop is optional.
- ... and all the other accepted props for the `svg` element.

## Contributing

Want to report a bug, contribute some code, or improve the documentation?

Excellent! Read up on our [guidelines for contributing](../../CONTRIBUTING.md) to get started.

## License

Licenses this source under the Apache License, Version 2.0 [LICENSE](../../LICENSE), You may not use this file except in compliance with the License.