open-index/open-npm huggingface dataset:
npm package: @fluig-bruno.freitas/meu-modulo-compartilhado
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.
Latest version: 0.0.0

# MeuModuloCompartilhado

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @fluix-ui/core
Description: Core logic for Fluix UI components. Framework-agnostic state machines, primitives, and APIs.
Latest version: 0.0.9

# @fluix-ui/core

Core logic for Fluix UI components.

This package contains framework-agnostic primitives, state machines, and the imperative `fluix` API used by all adapters.

## Install

```bash
npm install @fluix-ui/core
```

## Highlights

- Toast state machine and API
- Notch machine and adapter-ready config types
- Shared primitives (store, spring, dismiss)
- Type-safe exports for adapters and consumers
- **Theme plugin system** — `"light"`, `"dark"`, or any custom string

## Theming

The `theme` option accepts any string, not just `"light"` or `"dark"`. Built-in themes (`light`, `dark`) work out of the box. Custom themes are pure CSS — no JS configuration needed.

```ts
fluix.success({ title: "Saved!", theme: "midnight" });
```

The SVG background color is derived from the CSS variable `--fluix-surface-contrast`, so custom themes control it entirely through CSS. You can still override it per-toast with the `fill` option.

See `@fluix-ui/css` for how to create custom themes.

## Docs

- Official docs: https://fluix.ivanlopezdev.es
- Source code: https://github.com/ivanlhz/fluix
npm package: @fluix-ui/css
Description: Shared styles for Fluix UI components. Data-attribute selectors, animations, and theming.
Latest version: 0.0.9

# @fluix-ui/css

Shared CSS for Fluix UI components.

Uses the Fluix data-attribute contract (`data-fluix-*`) and provides animations, variables, and toast styles.

## Install

```bash
npm install @fluix-ui/css
```

## Usage

```ts
// Full bundle (includes light + dark themes)
import "@fluix-ui/css";
```

### Individual imports

```ts
import "@fluix-ui/css/variables";
import "@fluix-ui/css/animations";
import "@fluix-ui/css/toast";
import "@fluix-ui/css/notch";
import "@fluix-ui/css/themes/dark"; // dark theme only
```

## Theming

Fluix ships with `light` (default) and `dark` themes. You can also create custom themes — it's just CSS.

### Built-in themes

The `light` theme variables are defined on `[data-fluix-toast]` as defaults. The `dark` theme is in `themes/dark.css` and is included in the main bundle.

### Creating a custom theme

Define CSS custom properties scoped to your theme name via `[data-theme="<name>"]`:

```css
/* midnight-theme.css */
[data-fluix-toast][data-theme="midnight"] {
  --fluix-text: oklch(0.90 0.02 260);
  --fluix-text-muted: oklch(0.65 0.02 260);
  --fluix-surface-contrast: #0a0e1a;
}
```

Then import it and use the theme name:

```ts
import "./midnight-theme.css";

fluix.success({ title: "Saved!", theme: "midnight" });
```

### CSS variables reference

| Variable | Description | Light default | Dark default |
|---|---|---|---|
| `--fluix-text` | Primary text color | `oklch(0.26 0 0)` | `oklch(0.93 0 0)` |
| `--fluix-text-muted` | Secondary/description text | `oklch(0.54 0 0)` | `oklch(0.74 0 0)` |
| `--fluix-surface-contrast` | Toast background (SVG fill) | `#ffffff` | `#141416` |

## Docs

- Official docs: https://fluix.ivanlopezdev.es
- Source code: https://github.com/ivanlhz/fluix
npm package: @fluix-ui/solid
Description: Solid.js adapter for Fluix UI components.
Latest version: 0.0.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @fluix-ui/solid

Solid adapter for Fluix UI components.

## Install

```bash
npm install @fluix-ui/solid @fluix-ui/css
```

## Usage

```ts
import { fluix } from "@fluix-ui/solid";
import "@fluix-ui/css";
```

### Custom themes

Pass any theme name — themes are pure CSS. See `@fluix-ui/css` for details.

```ts
fluix.success({ title: "Done", theme: "midnight" });
```

## Docs

- Official docs: https://fluix.ivanlopezdev.es
- Source code: https://github.com/ivanlhz/fluix
npm package: @fluix-ui/svelte
Description: Svelte 5 adapter for Fluix UI components.
Latest version: 0.0.9

# @fluix-ui/svelte

Svelte 5 adapter for Fluix UI components.

## Install

```bash
npm install @fluix-ui/svelte @fluix-ui/css
```

## What this package includes

- `Toaster` + `fluix` imperative API for toast notifications.
- `Notch` for adaptive floating island interactions.
- `Menu` + `MenuItem` for animated navigation.
- `createFluixToasts` for direct access to the toast machine store.

## Quick start (Toasts)

```svelte
<script lang="ts">
import { Toaster, fluix } from "@fluix-ui/svelte";
import "@fluix-ui/css";
</script>

<Toaster config={{ position: "top-right", layout: "stack" }} />

<button
  type="button"
  onclick={() =>
    fluix.success({
      title: "Saved",
      description: "Your changes were stored.",
    })}
>
  Save
</button>
```

### Promise toasts

```ts
await fluix.promise(saveUser(), {
  loading: { title: "Saving..." },
  success: (data) => ({
    title: "Saved",
    description: `User ${data.name} updated`,
  }),
  error: (err) => ({
    title: "Failed",
    description: err instanceof Error ? err.message : "Unexpected error",
  }),
});
```

## Notch

`Notch` uses snippets for collapsed (`pill`) and expanded (`content`) UI.

```svelte
<script lang="ts">
  import { Notch } from "@fluix-ui/svelte";
</script>

<Notch position="top-center" trigger="click" theme="dark">
  {#snippet pill()}
    <span>Now</span>
  {/snippet}

  {#snippet content()}
    <div style="display:flex;gap:8px;">
      <button type="button">Prev</button>
      <button type="button">Play</button>
      <button type="button">Next</button>
    </div>
  {/snippet}
</Notch>
```

## Menu

Use `Menu` with `MenuItem` in uncontrolled mode (`defaultActiveId`) or controlled mode (`activeId` + `onActiveChange`).

```svelte
<script lang="ts">
  import { Menu, MenuItem } from "@fluix-ui/svelte";
</script>

<Menu defaultActiveId="home" variant="pill" orientation="horizontal" theme="dark">
  <MenuItem id="home">Home</MenuItem>
  <MenuItem id="projects">Projects</MenuItem>
  <MenuItem id="settings">Settings</MenuItem>
</Menu>
```

### Custom indicator fill

Override the indicator color with the `fill` prop:

```svelte
<Menu defaultActiveId="home" fill="#6366f1">
  <MenuItem id="home">Home</MenuItem>
</Menu>
```

## Theming

Pass any theme name — themes are pure CSS. See `@fluix-ui/css` for details.

```ts
fluix.success({ title: "Done", theme: "midnight" });
```

## Exports

```ts
import { Toaster, fluix, Notch, Menu, MenuItem, createFluixToasts } from "@fluix-ui/svelte";
import type {
  ToasterProps,
  NotchProps,
  MenuProps,
  MenuItemProps,
  MenuOrientation,
  MenuVariant,
  MenuTheme,
  FluixToastOptions,
  FluixToasterConfig,
} from "@fluix-ui/svelte";
```

## Docs

- Official docs: https://fluix.ivanlopezdev.es
- Source code: https://github.com/ivanlhz/fluix
npm package: @fluix-ui/vanilla
Description: Vanilla JS adapter for Fluix UI components. Zero framework dependencies.
Latest version: 0.0.9

# @fluix-ui/vanilla

Vanilla JS adapter for Fluix UI components.

## Install

```bash
npm install @fluix-ui/vanilla @fluix-ui/css
```

## How imports work in Vanilla JS

### Option A: npm + bundler (Vite/Webpack/Rollup)

Use standard ESM imports in your source files:

```ts
import { createToaster, fluix } from "@fluix-ui/vanilla";
import "@fluix-ui/css";
```

### Option B: browser without bundler (CDN + global)

The IIFE build exposes a global `window.Fluix`.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluix-ui/css/dist/fluix.css" />
<script src="https://cdn.jsdelivr.net/npm/@fluix-ui/vanilla/dist/index.global.js"></script>
<script>
  const { createToaster, fluix, createNotch, createMenu } = window.Fluix;
  createToaster({ position: "top-right" });
  fluix.success({ title: "Loaded" });
</script>
```

## Quick start (Toasts)

```ts
import { createToaster, fluix } from "@fluix-ui/vanilla";
import "@fluix-ui/css";

const toaster = createToaster({ position: "top-right", layout: "stack" });

document.querySelector("#save-btn")?.addEventListener("click", () => {
  fluix.success({
    title: "Saved",
    description: "Your changes were stored.",
  });
});
```

### Promise toasts

```ts
await fluix.promise(saveUser(), {
  loading: { title: "Saving..." },
  success: (data) => ({
    title: "Saved",
    description: `User ${data.name} updated`,
  }),
  error: (err) => ({
    title: "Failed",
    description: err instanceof Error ? err.message : "Unexpected error",
  }),
});
```

## Notch

```ts
import { createNotch } from "@fluix-ui/vanilla";

const container = document.querySelector("#notch-root");
if (!container) throw new Error("Missing #notch-root");

const notch = createNotch(container, {
  position: "top-center",
  trigger: "click",
  theme: "dark",
  pill: "Now",
  content: "Now playing: Fluix Theme",
});

notch.open();
```

## Menu

```ts
import { createMenu } from "@fluix-ui/vanilla";

const container = document.querySelector("#menu-root");
if (!container) throw new Error("Missing #menu-root");

const menu = createMenu(container, {
  activeId: "home",
  orientation: "horizontal",
  variant: "pill",
  theme: "dark",
  fill: "#6366f1", // custom indicator color
  items: [
    { id: "home", label: "Home" },
    { id: "projects", label: "Projects" },
    { id: "settings", label: "Settings" },
  ],
});
```

## Theming

Pass any theme name — themes are pure CSS. See `@fluix-ui/css` for details.

```ts
fluix.success({ title: "Done", theme: "midnight" });
```

## Exports

```ts
import { createToaster, createNotch, createMenu, fluix } from "@fluix-ui/vanilla";
import type {
  NotchOptions,
  MenuOptions,
  MenuInstance,
  MenuItemConfig,
  FluixToastOptions,
  FluixToasterConfig,
} from "@fluix-ui/vanilla";
```

## Docs

- Official docs: https://fluix.ivanlopezdev.es
- Source code: https://github.com/ivanlhz/fluix
npm package: @fluix-ui/vue
Description: Vue 3 adapter for Fluix UI components.
Latest version: 0.0.9

# @fluix-ui/vue

Vue 3 adapter for Fluix UI components.

## Install

```bash
npm install @fluix-ui/vue @fluix-ui/css
```

## What this package includes

- `Toaster` + `fluix` imperative API for toast notifications.
- `Notch` for adaptive floating island interactions.
- `MenuRoot` + `MenuItem` for animated navigation.
- `useFluixToasts` for direct access to the toast machine store.

## Quick start (Toasts)

```vue
<script setup lang="ts">
import { Toaster, fluix } from "@fluix-ui/vue";
import "@fluix-ui/css";
</script>

<template>
  <Toaster :config="{ position: 'top-right', layout: 'stack' }" />

  <button
    type="button"
    @click="
      fluix.success({
        title: 'Saved',
        description: 'Your changes were stored.',
      })
    "
  >
    Save
  </button>
</template>
```

### Promise toasts

```ts
await fluix.promise(saveUser(), {
  loading: { title: "Saving..." },
  success: (data) => ({
    title: "Saved",
    description: `User ${data.name} updated`,
  }),
  error: (err) => ({
    title: "Failed",
    description: err instanceof Error ? err.message : "Unexpected error",
  }),
});
```

## Notch

`Notch` uses slots: default slot for collapsed pill content and `content` slot for expanded content.

```vue
<script setup lang="ts">
import { Notch } from "@fluix-ui/vue";
</script>

<template>
  <Notch position="top-center" trigger="click" theme="dark">
    <template #pill>
      <span>Now</span>
    </template>

    <template #content>
      <div style="display:flex;gap:8px;">
        <button type="button">Prev</button>
        <button type="button">Play</button>
        <button type="button">Next</button>
      </div>
    </template>
  </Notch>
</template>
```

## Menu

Use `MenuRoot` in uncontrolled mode (`defaultActiveId`) or controlled mode (`activeId` + `onActiveChange`).

```vue
<script setup lang="ts">
import { MenuRoot, MenuItem } from "@fluix-ui/vue";
</script>

<template>
  <MenuRoot defaultActiveId="home" variant="pill" orientation="horizontal" theme="dark">
    <MenuItem id="home">Home</MenuItem>
    <MenuItem id="projects">Projects</MenuItem>
    <MenuItem id="settings">Settings</MenuItem>
  </MenuRoot>
</template>
```

### Custom indicator fill

Override the indicator color with the `fill` prop:

```vue
<template>
  <MenuRoot defaultActiveId="home" fill="#6366f1">
    <MenuItem id="home">Home</MenuItem>
  </MenuRoot>
</template>
```

## Theming

Pass any theme name — themes are pure CSS. See `@fluix-ui/css` for details.

```ts
fluix.success({ title: "Done", theme: "midnight" });
```

## Exports

```ts
import { Toaster, fluix, Notch, MenuRoot, MenuItem, useFluixToasts } from "@fluix-ui/vue";
import type {
  ToasterProps,
  MenuOrientation,
  MenuVariant,
  MenuTheme,
  NotchPosition,
  NotchTrigger,
  NotchTheme,
  FluixToastOptions,
  FluixToasterConfig,
} from "@fluix-ui/vue";
```

## Docs

- Official docs: https://fluix.ivanlopezdev.es
- Source code: https://github.com/ivanlhz/fluix