open-index/open-npm huggingface dataset:
npm package: @hetrojivadiya/ds-button
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.0.
Latest version: 0.0.1

# DsButton

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build ds-button
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/ds-button
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @hettipower/auth-ui
Description: Reusable animated auth UI (Login, Register, Forgot, Reset) for React + NestJS backends
Latest version: 1.0.3

# @hettipower/auth-ui-react

Reusable, animated auth UI for React apps. Plug into your NestJS backend.

## Install

```bash
npm i @hettipower/auth-ui-react framer-motion react-hook-form zod
# Tailwind setup in host app is required
````

Add Tailwind to your app (if you haven't already). Ensure your app processes the library CSS:

```js
// tailwind.config.js in host app
module.exports = {
  content: [
    './index.html',
    './src/**/*.{ts,tsx}',
    './node_modules/@hettipower/auth-ui-react/dist/**/*.{js,ts,tsx}',
  ],
}
```

## Quick Start

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  AuthUIProvider,
  ThemeProvider,
  ToastProvider,
  AuthShell,
} from '@hettipower/auth-ui-react'

const config = {
  apiBaseUrl: 'http://localhost:3000',
  routes: {
    login: '/auth/login',
    register: '/auth/register',
    forgotPassword: '/auth/forgot-password',
    resetPassword: '/auth/reset-password',
  },
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider>
      <AuthUIProvider config={config}>
        <ToastProvider>
          <AuthShell />
        </ToastProvider>
      </AuthUIProvider>
    </ThemeProvider>
  </React.StrictMode>
)
```

### Listen for Login Event (optional)

```ts
window.addEventListener('auth:login', (e: any) => {
  const { access_token } = e.detail
  // Store in memory or hand off to your app
  console.log('Logged in! token:', access_token)
})
```

## Theming

* Dark/light toggle included (class-based). Host app can also control `document.documentElement.classList`.

## Security Notes

* Prefer httpOnly cookies on the backend for JWTs. The UI does not persist tokens.

## ✅ Notes

- Forms use **React Hook Form + Zod** with instant validation.
- **Framer Motion** handles transitions and micro‑interactions.
- API client is minimal and configurable; works perfectly with the NestJS backend I built earlier.
- You can export individual forms or the all‑in‑one `<AuthShell/>`.

```