open-index/open-npm huggingface dataset:
npm package: @sagecurator/ui
Description: Shared UI component library for the Sagecurator product suite
Latest version: 0.1.0

# @sagecurator/ui

Shared UI component library for the Sagecurator product suite. Built with React 19, Tailwind CSS 4, and powered by [@sagewai/tokens](https://www.npmjs.com/package/@sagewai/tokens) design system.

## Install

```bash
pnpm add @sagecurator/ui
```

## Usage

Add to your Next.js config:

```js
// next.config.js
module.exports = {
  transpilePackages: ['@sagecurator/ui'],
};
```

Import the global styles in your CSS:

```css
@import "@sagecurator/ui/src/globals.css";
@source "../../node_modules/@sagecurator/ui/src";
```

Use components:

```tsx
import { Button, Card, FormField, TextInput } from '@sagecurator/ui';

export default function MyPage() {
  return (
    <Card>
      <FormField label="Name">
        <TextInput value="" onChange={() => {}} />
      </FormField>
      <Button>Submit</Button>
    </Card>
  );
}
```

## Components

- **Layout**: `PageLayout`, `Card`, `FormCard`, `SidebarProvider`, `SidebarShell`
- **Forms**: `FormField`, `TextInput`, `TextArea`, `Select`, `Toggle`, `Button`
- **Feedback**: `ToastProvider`, `useToast`, `ErrorAlert`, `LoadingSpinner`, `Skeleton`
- **Navigation**: `NavHeader`, `Tabs`, `DropdownMenu`
- **Data**: `Table`, `Badge`, `StatusDot`
- **Overlay**: `Dialog`, `ConfirmDialog`, `Tooltip`
- **Display**: `EmptyState`, `ResponseCard`, `ChatBubble`, `ChatPanel`
- **Theme**: `ThemeToggle`, `APP_THEMES`

## License

MIT
npm package: @sagemodeninja/color-scheme-provider
Description: A library for managing and tracking preferred color schemes in web applications, with automatic detection, customization options, and subscription-based notifications.
Author: Gary Antier
Latest version: 2.0.0

# Color Scheme Provider

A library for managing and tracking preferred color schemes in web applications, with automatic detection, customization options, and subscription-based notifications.

## Documentation

See the [wiki](https://github.com/sagemodeninja/color-scheme-provider/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/color-scheme-provider) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## v2.* Breaking Changes

### ColorSchemeProvider Members
+ Deprecated `preferredColorScheme` and `colorScheme` properties.
    - Subscribers are notified and given a `scheme` parameter with a value equivalent to the `colorScheme` property.
    - Use asynchronous `update` function to update schemes, this is equivalent to setting a value to `preferredColorScheme`.
+ Renamed `subscribeNotification` to `subscribe`.
+ Callback for `subscribe` now has a `scheme` parameter.

### Behavior
+ Subscribing will now trigger an initial callback with the latest scheme value as a parameter.
+ The `subscribe`, `toggle` and the new `update` functions is now asynchronous.

## Installation

From within your project, run:

`npm i @sagemodeninja/color-scheme-provider`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/color-scheme-provider.git
cd color-scheme-provider
```

Install the necessary dependencies:

```
npm install
```

Run a local demo:

```
npm start
```
npm package: @sagemodeninja/custom-component
Description: Custom web components
Author: Gary Antier
Latest version: 2.0.6

# Custom Components

Custom web components.

## Documentation

See the [wiki](https://github.com/sagemodeninja/custom-component/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/custom-component) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## Installation

From within your project, run:

`npm i @sagemodeninja/custom-component`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/custom-component.git
cd custom-component
```

Install the necessary dependencies:

```
npm install
```

Run a local demo:

```
npm start
```
npm package: @sagemodeninja/dashboard-kit
Description: Dashboard Kit
Author: Gary Antier
Latest version: 0.1.0

# Dashboard Kit

Dashboard Kit.

## Getting Started

1. Make sure that [Node.js](https://nodejs.org/) is installed on your machine.

2. Install required dependencies:

```cli
npm install
```

3. Run the demo:

```cli 
npm start
```

4. View demo by visiting http://localhost:3004/.
npm package: @sagemodeninja/design-token-provider
Description: Manage design tokens in your web applications.
Author: Gary Antier
Latest version: 1.0.0

# Design Token Provider

Manage design tokens in your web applications. Design tokens are variables that represent visual properties such as colors, typography, spacing, etc., allowing for consistent theming and easy customization.

## Documentation

See the [wiki](https://github.com/sagemodeninja/design-token-provider/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/design-token-provider) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## Installation

From within your project, run:

`npm i @sagemodeninja/design-token-provider`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/design-token-provider.git
cd design-token-provider
```

Install the necessary dependencies:

```
npm install
```

Run a local demo:

```
npm start
```
npm package: @sagemodeninja/fluent-command-bar-component
Description: Web component implementation of Windows 11's Command Bar.
Author: Gary Antier
Latest version: 2.0.2

# Fluent Command Bar Component

Web component implementation of Windows 11's Command Bar.

## Documentation

See the [wiki](https://github.com/sagemodeninja/fluent-command-bar-component/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/fluent/command-bar) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## Installation

From within your project, run:

`npm i @sagemodeninja/fluent-command-bar-component`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/fluent-command-bar-component.git
cd fluent-command-bar-component
```

Install the necessary dependencies:

```
npm install
```

Run a local demo:

```
npm start
```
npm package: @sagemodeninja/fluent-icon-element-component
Description: Web component implementation of Windows 11's Icon Element.
Author: Gary Antier
Latest version: 1.2.3

# Fluent Icon Element Component

Web component implementation of Windows 11's Icon Element.

## Documentation

See the [wiki](https://github.com/sagemodeninja/fluent-icon-element-component/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/fluent/icon) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## Installation

From within your project, run:

`npm i @sagemodeninja/fluent-icon-element-component`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/fluent-icon-element-component.git
cd fluent-icon-element-component
```

Install the necessary dependencies:

```
npm install
```

Run a local demo:

```
npm start
```
npm package: @sagemodeninja/fluent-navigation-view-component
Description: Web component implementation of Windows 11's Navigation View
Author: Gary Antier
Latest version: 3.0.0-beta.3

# Fluent Navigation View Component

Web component implementation of Windows 11's Navigation View.

## Documentation

See the [wiki](https://github.com/sagemodeninja/fluent-navigation-view-component/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/fluent/navigation) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## Installation

From within your project, run:

`npm i @sagemodeninja/fluent-navigation-view-component`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/fluent-navigation-view-component.git
cd fluent-navigation-view-component
```

Install the necessary dependencies:

```
npm install
```

Build the project:

```
npm run build
```

Run a local demo:

```
npm start
```
npm package: @sagemodeninja/person-picture-component
Description: Web component implementation of Windows 11's Command Bar.
Author: Gary Antier
Latest version: 1.0.1

# Person Picture Component

Web component implementation of Windows 11's Command Bar.

## Documentation

See the [wiki](https://github.com/sagemodeninja/person-picture-component/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/web-components/person-picture) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## Installation

From within your project, run:

`npm i @sagemodeninja/person-picture-component`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/person-picture-component.git
cd person-picture-component
```

Install the necessary dependencies:

```
npm install
```

Run a local demo:

```
npm start
```
npm package: @sagemodeninja/side-panel-component
Author: Gary Antier
Latest version: 1.0.1

# Side Panel Component



## Documentation

See the [wiki](https://github.com/sagemodeninja/side-panel-component/wiki) for guides on how to use the components.\
Or, see the [demo site](https://dev.garyantier.com/web-components/side-panel) for examples and demos.

<!-- TODO: Add wiki/documentation. -->

## Installation

From within your project, run:

`npm i @sagemodeninja/side-panel-component`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for more information.

### Set up

Initialize repo:

```cli
git clone https://github.com/sagemodeninja/side-panel-component.git
cd side-panel-component
```

Install the necessary dependencies:

```
npm install
```

Run a local demo:

```
npm start
```