open-index/open-npm huggingface dataset:
npm package: @lumaui/angular
Description: Angular components for Luma UI - Neo-Minimal design system
Author: Luma UI Team
Latest version: 0.4.4

# @lumaui/angular

Angular components for **Luma UI** - a Neo-Minimal design system built with calm, intentional simplicity.

## Features

- Neo-Minimal design philosophy
- Dark theme support out of the box
- Type-safe variants with class-variance-authority
- Angular 19+ standalone components
- Tailwind CSS v4 compatible
- Fully customizable via CSS tokens

## Prerequisites

Tailwind CSS v4 must be installed in your Angular project.

Follow the official guide: **[Tailwind CSS Angular Installation](https://tailwindcss.com/docs/installation/framework-guides/angular)**

## Installation

```bash
npm install @lumaui/angular
```

> `@lumaui/tokens` and `@lumaui/core` are installed automatically as dependencies.

## Setup

Add to your `styles.css`:

```css
/* Import Luma design tokens (light theme + component classes) */
@import '@lumaui/tokens/build/luma.css';

/* Optional: Dark theme support */
@import '@lumaui/tokens/build/luma-dark.css';
```

**That's it!** The `luma.css` file includes everything needed:

- ✅ Tailwind CSS v4 base
- ✅ Design tokens (@theme block with 45 tokens)
- ✅ Component class manifest (@source directive)
- ✅ Automatic class discovery (99 component classes)

**Alternative (convenience bundle):**

```css
/* Single import for both light and dark themes */
@import '@lumaui/tokens/build/luma-complete.css';
```

---

**Verify it works:**

After setting up, check your compiled CSS includes component classes:

```bash
# Build your Angular app
ng build

# Check for Luma component classes in output
grep -o "bg-primary" dist/your-app/browser/styles*.css
# Expected: Multiple matches (bg-primary, hover:bg-primary/90, etc.)
```

If you see the classes, setup is correct! ✅

## Usage

```typescript
import {
  ButtonDirective,
  CardComponent,
  CardTitleDirective,
} from '@lumaui/angular';

@Component({
  imports: [ButtonDirective, CardComponent, CardTitleDirective],
  template: `
    <button lumaButton lmVariant="primary" lmSize="md">Click me</button>

    <luma-card lmVariant="default">
      <h3 lumaCardTitle>Card Title</h3>
    </luma-card>
  `,
})
export class MyComponent {}
```

## Documentation

For complete documentation, component reference, customization guide, and interactive examples:

**[Luma UI Documentation](https://lumaui.github.io/luma-ui/)**

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT
npm package: @lumaui/core
Description: Core variants and types for Luma UI - framework-agnostic CVA definitions
Author: Luma UI Team
Latest version: 0.4.4

# @lumaui/core

Core variants and types for **Luma UI** - framework-agnostic CVA definitions for the Neo-Minimal design system.

## Overview

This package contains the variant definitions used by Luma UI components. It uses [class-variance-authority (CVA)](https://cva.style/) for type-safe variant management.

## Installation

```bash
npm install @lumaui/core class-variance-authority
```

> **Note:** Most users should install `@lumaui/angular` instead, which includes this package as a peer dependency.

## Usage

```typescript
import {
  buttonVariants,
  type ButtonVariant,
  type ButtonSize,
} from '@lumaui/core';

// Generate class string for a button
const classes = buttonVariants({
  variant: 'primary',
  size: 'md',
});
// Returns: "inline-flex items-center justify-center ... lm-bg-button-primary ..."
```

## Exports

### Button Variants

```typescript
import {
  buttonVariants,
  type ButtonVariant, // 'primary' | 'outline' | 'ghost' | 'danger'
  type ButtonSize, // 'sm' | 'md' | 'lg' | 'full'
  type ButtonVariants, // Full variant props type
} from '@lumaui/core';
```

### Card Variants

```typescript
import {
  cardVariants,
  cardContentVariants,
  cardTitleVariants,
  cardDescriptionVariants,
  type CardVariant, // 'default' | 'shadow' | 'nested' | 'preview'
  type CardTitleSize, // 'small' | 'medium' | 'large'
  type CardDescriptionSize, // 'small' | 'medium' | 'large'
} from '@lumaui/core';
```

### Types

```typescript
import {
  type Size, // 'sm' | 'md' | 'lg'
  type SizeWithFull, // 'sm' | 'md' | 'lg' | 'full'
  type InteractiveVariant, // 'primary' | 'outline' | 'ghost' | 'danger'
} from '@lumaui/core/types';
```

## Building Custom Components

You can use the variants to build components in any framework:

```typescript
// React example
import { buttonVariants } from '@lumaui/core';

function Button({ variant, size, children }) {
  return (
    <button className={buttonVariants({ variant, size })}>
      {children}
    </button>
  );
}
```

## Design Tokens

The generated classes reference CSS custom properties from `@lumaui/tokens`. Make sure to import the token styles in your application:

```css
@import '@lumaui/tokens/styles.css';
```

## License

MIT
npm package: @lumberyard/chipper
Description: A minimalistic state-management tool for your megalomaniac React needs
Author: Mat Sas
Latest version: 1.1.1

# Chipper

A minimalistic state-management tool for your megalomaniac React needs.

**Note:** Chipper is a work in progress

### Wat?

- minimal setup
- written with TS
- no excess re-renders
- react and react-native friendly
- [immer](https://immerjs.github.io/immer/docs/introduction) is used somewhere inside (easier that way)
- you can access state from outside of React components
- built-in capabilities for handling status of async functions

### How?

In the terminal

```javascript
yarn add @lumberyard/chipper
// or
npm install @lumberyard/chipper
```

In the code

```javascript
import Chipper, { useChip } from "@lumberyard/chipper";

Chipper.loadChips([
  ["user", { uid: "12345", name: "piglet" }],
  ["theme", { dark: true, color: "pink" }],
]);

const MyComponent = () => {
  const { data, status, set } = useChip('user');

  set((user) => {
    user.name = 'pooh';
  });

  return (...)
}
```

And that's pretty much it. Congratulations, you just spent 10 seconds setting up your global state. Time well spent, now go, procrastinate some more

## What now?

### [Chipper demo](https://codesandbox.io/s/chipper-demo-tgi65)

### [READ ON](https://github.com/MatulaDesign/lumberyard-chipper/blob/main/HELLO.md)

[Click here](https://github.com/MatulaDesign/lumberyard-chipper/blob/main/example.md) for more elaborate example or [click here](https://github.com/MatulaDesign/lumberyard-chipper/blob/main/CHIPPER.md) to read the docs