open-index/open-npm huggingface dataset:
npm package: @nuragic/pickers
Description: React components, that implements material design pickers for material-ui v4
Author: Dmitriy Kovalenko
Latest version: 4.0.0-alpha.12.globalavl.4

<p align="center">
  <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="200" src="https://material-ui-pickers.dev/static/meta-image.png" alt="Material-ui-pickers logo"></a></p>
</p>

<h1 align="center">Material-UI pickers</h1>

<div align="center">

Accessible, customizable, delightful date & time pickers for [@material-ui/core](https://material-ui.com/)

[![npm package](https://img.shields.io/npm/v/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
[![npm download](https://img.shields.io/npm/dm/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
[![codecov](https://codecov.io/gh/mui-org/material-ui-pickers/branch/next/graph/badge.svg)](https://codecov.io/gh/mui-org/material-ui-pickers)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@material-ui/pickers)](https://bundlephobia.com/result?p=@material-ui/pickers@latest)
[![CircleCI](https://circleci.com/gh/mui-org/material-ui-pickers.svg?style=svg)](https://circleci.com/gh/mui-org/material-ui-pickers)
[![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/qow28y/runs)
[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/mui-org/material-ui-pickers)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

</div>

## This project is not longer supported 

See [#2157](https://github.com/mui-org/material-ui-pickers/issues/2157) for more details

### Installation

Note that this package requires `@material-ui/core` **v4**. It will not work with the old v3. Please read the [migration guide](https://material-ui-pickers.dev/guides/upgrading-to-v3) if you are updating from v2

```sh
// via npm
npm i @material-ui/pickers

// via yarn
yarn add @material-ui/pickers
```

### Getting started

[Here is instruction](https://material-ui-pickers.dev/getting-started/installation#peer-library) of how to get started with `@material-ui/pickers`.

## Documentation

Check out the [documentation website](https://material-ui-pickers.dev/)

### Recently updated?

Changelog available [here](https://github.com/mui-org/material-ui-pickers/releases)

### Contributing

For information about how to contribute, see the [CONTRIBUTING](https://github.com/mui-org/material-ui-pickers/blob/master/CONTRIBUTING.md) file.

### LICENSE

The project is licensed under the terms of [MIT license](https://github.com/mui-org/material-ui-pickers/blob/master/LICENSE)
npm package: @nuraly/themes
Description: Theme collection for Nuraly Hybrid UI Library
Author: Nuraly
Latest version: 0.1.1

# @nuraly/themes

A comprehensive theme collection for the Nuraly Hybrid UI Library, providing consistent design system variables and styling across different design frameworks.

## Available Themes

- **Carbon** - Based on IBM Carbon Design System
- **Polaris** - Based on Shopify Polaris Design System  
- **Default** - Nuraly's own default theme

## Installation

```bash
npm install @nuraly/themes
```

## Usage

### CSS Import

Import individual themes directly:

```css
/* Import a specific theme */
@import '@nuraly/themes/carbon';
@import '@nuraly/themes/polaris';
@import '@nuraly/themes/default';
```

### JavaScript/TypeScript

```javascript
import { applyTheme, themes } from '@nuraly/themes';

// Apply a theme programmatically
applyTheme('carbon', 'light'); // or 'dark'
applyTheme('polaris', 'dark');

// Get current theme
const currentTheme = getCurrentTheme();

// Available themes
console.log(themes); // { carbon: 'carbon', polaris: 'polaris', default: 'default' }
```

### HTML Data Attributes

Themes are applied via `data-theme` attributes:

```html
<!-- Carbon light theme -->
<html data-theme="carbon-light">

<!-- Carbon dark theme -->
<html data-theme="carbon-dark">

<!-- Polaris light theme -->
<html data-theme="polaris-light">

<!-- Default theme -->
<html data-theme="default-light">
```

## Theme Structure

Each theme provides consistent CSS custom properties for:

### Typography
- Font families, weights, and sizes
- Line heights and letter spacing
- Responsive typography scales

### Colors
- Primary, secondary, success, warning, error palettes
- Background and surface colors
- Text and icon colors
- Border and divider colors
- Both light and dark variants

### Spacing
- Consistent spacing scale
- Component-specific spacing
- Layout margins and padding

### Elevation & Effects
- Box shadow levels
- Border radius values
- Opacity scales
- Transition timings

### Component Variables
- Button-specific variables
- Form control styling
- Navigation elements
- Card and surface styling

## Building from Source

If you need to customize or rebuild the themes:

```bash
# Install dependencies
npm install

# Build all themes
npm run build

# Build and watch for changes
npm run dev

# Clean build directory
npm run clean
```

## Theme Customization

Each theme is built from modular CSS files that can be customized:

```
themes/
├── carbon/
│   ├── theme.css          # Main variables
│   ├── index.css          # Component imports
│   └── button/
│       ├── index.css      # Button theme index
│       ├── light.css      # Light variant
│       └── dark.css       # Dark variant
├── polaris/
│   └── ...
└── default/
    └── ...
```

## Contributing

When adding new themes or modifying existing ones:

1. Follow the established CSS custom property naming convention
2. Ensure both light and dark variants are provided
3. Test across all supported components
4. Run the build process to generate bundled files
5. Update documentation and examples

## License

MIT License - see LICENSE file for details.