open-index/open-npm huggingface dataset:
npm package: @talixo-ds/address
Description: ```bash npm install @talixo-ds/address ```
Latest version: 2.0.1

# @talixo-ds/address

## Installation

```bash
npm install @talixo-ds/address
```

## Importing

```javascript
import { Address } from "@talixo-ds/address";
```

## Usage example

```jsx
<Address
	description="Kraków"
	iata="KRK"
	icon={<LocalAirport />}
	name="J. Paul II International Airport Krakow-Balice"
/>
```
npm package: @talixo-ds/carousel
Description: ```bash npm install @talixo-ds/carousel ```
Latest version: 2.0.1

# @talixo-ds/carousel

## Installation

```bash
npm install @talixo-ds/carousel
```

## Importing

```javascript
import { Carousel } from "@talixo-ds/carousel";
```

## Usage example

```jsx
<Carousel carouselOptions={{ slidesToScroll: 2 }} arrows>
	<Box
		sx={{
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			minHeight: "100px",
			backgroundColor: (theme) => theme.palette.grey[200],
			p: 2
		}}
	>
		1
	</Box>
	<Box
		sx={{
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			minHeight: "100px",
			backgroundColor: (theme) => theme.palette.grey[200],
			p: 2
		}}
	>
		2
	</Box>
	<Box
		sx={{
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			minHeight: "100px",
			backgroundColor: (theme) => theme.palette.grey[200],
			p: 2
		}}
	>
		3
	</Box>
	<Box
		sx={{
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			minHeight: "100px",
			backgroundColor: (theme) => theme.palette.grey[200],
			p: 2
		}}
	>
		4
	</Box>
	<Box
		sx={{
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			minHeight: "100px",
			backgroundColor: (theme) => theme.palette.grey[200],
			p: 2
		}}
	>
		5
	</Box>
	<Box
		sx={{
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			minHeight: "100px",
			backgroundColor: (theme) => theme.palette.grey[200],
			p: 2
		}}
	>
		6
	</Box>
</Carousel>
```
npm package: @talixo-ds/chat
Description: ```bash npm install @talixo-ds/chat ```
Latest version: 1.0.1

# @talixo-ds/chat

## Installation

```bash
npm install @talixo-ds/chat
```

## Importing

```javascript
import { Chat } from "@talixo-ds/chat";
```

## Usage example

```jsx
<Chat
	authToken={() => Promise.resolve("")}
	settings={{
		apiKey: "",
		projectId: "",
		appId: ""
	}}
	referenceCode=""
	headerContent={<Box>Chat with someone</Box>}
/>
```
npm package: @talixo-ds/data-table
Description: ```bash npm install @talixo-ds/data-table ```
Latest version: 2.0.1

# @talixo-ds/data-table

## Installation

```bash
npm install @talixo-ds/data-table
```

## Importing

```javascript
import { DataTable } from "@talixo-ds/data-table";
```

## Usage example

```jsx
<DataTable columns={columns} data={data} />
```
npm package: @talixo-ds/masked-input
Description: ```bash npm install @talixo-ds/masked-input ```
Latest version: 2.0.1

# @talixo-ds/masked-input

## Installation

```bash
npm install @talixo-ds/masked-input
```

## Importing

```javascript
import { MaskedInput } from "@talixo-ds/masked-input";
```

## Usage example

```jsx
<MaskedInput
	mask={
		value ? (
			<Box
				sx={{
					padding: 3,
					border: "1px solid black",
					borderRadius: 2
				}}
			>
				{value}
			</Box>
		) : undefined
	}
>
	<TextInput value={value} onChange={(e) => setValue(e.target.value)} />
</MaskedInput>
```
npm package: @talixo-ds/modal
Description: ```bash npm install @talixo-ds/modal ```
Latest version: 3.0.1

# @talixo-ds/modal

## Installation

```bash
npm install @talixo-ds/modal
```

## Importing

```javascript
import { Modal } from "@talixo-ds/modal";
```

## Usage

### CSS Import

```javascript
import "@talixo-ds/modal/index.css";
```

### Component

```jsx
<Modal
	open={open}
	onClose={() => setOpen(false)}
	variant="info"
	onSubmit={() => null}
>
	<div>Modal content</div>
</Modal>
```
npm package: @talixo-ds/next-booking-theme
Description: ```bash npm install @talixo-ds/next-booking-theme ```
Latest version: 2.0.1

# @talixo-ds/next-booking-theme

## Installation

```bash
npm install @talixo-ds/next-booking-theme
```

## Importing

```javascript
import { NextBookingTheme } from "@talixo-ds/next-booking-theme";
```

## Usage

```jsx
<ThemeProvider theme={NextBookingTheme}>...</ThemeProvider>
```
npm package: @talixo-ds/next-dashboard-theme
Description: ```bash npm install @talixo-ds/next-dashboard-theme ```
Latest version: 2.0.1

# @talixo-ds/next-dashboard-theme

## Installation

```bash
npm install @talixo-ds/next-dashboard-theme
```

## Importing

```javascript
import { NextDashboardTheme } from "@talixo-ds/next-dashboard-theme";
```

## Usage

```jsx
<ThemeProvider theme={NextDashboardTheme}>...</ThemeProvider>
```
npm package: @talixo-ds/next-frontend-theme
Description: ```bash npm install @talixo-ds/next-frontend-theme ```
Latest version: 2.0.1

# @talixo-ds/next-frontend-theme

## Installation

```bash
npm install @talixo-ds/next-frontend-theme
```

## Importing

```javascript
import { NextFrontendTheme } from "@talixo-ds/next-frontend-theme";
```

## Usage

```jsx
<ThemeProvider theme={NextFrontendTheme}>...</ThemeProvider>
```
npm package: @talixo-ds/options-input
Description: ```bash npm install @talixo-ds/options-input ```
Latest version: 3.0.1

# @talixo-ds/options-input

## Installation

```bash
npm install @talixo-ds/options-input
```

## Importing

```javascript
import { OptionsInput } from "@talixo-ds/options-input";
```

## Usage

### CSS Import

```javascript
import "@talixo-ds/options-input/index.css";
```

### Component

```jsx
<OptionsInput options={options} />
```
npm package: @talixo-ds/range-date-picker
Description: ```bash npm install @talixo-ds/range-date-picker ```
Latest version: 3.0.1

# @talixo-ds/range-date-picker

## Installation

```bash
npm install @talixo-ds/range-date-picker
```

## Importing

```javascript
import { RangeDatePicker } from "@talixo-ds/range-date-picker";
```

## Usage

### CSS Import

```javascript
import "@talixo-ds/range-date-picker/index.css";
```

### Component

```jsx
<RangeDatePicker />
```
npm package: @talixo-ds/sidebar
Description: ```bash npm install @talixo-ds/sidebar ```
Latest version: 2.0.1

# @talixo-ds/sidebar

## Installation

```bash
npm install @talixo-ds/sidebar
```

## Importing

```javascript
import { Sidebar } from "@talixo-ds/sidebar";
```

## Usage

```jsx
<Sidebar
	items={[
		{ label: "Dashboard", icon: "ArrowBack", onClick: () => {} },
		{ label: "QA Tickets", icon: "LiveHelp", onClick: () => {} },
		{
			label: "Pickup Instructions",
			icon: "Map",
			onClick: () => {},
			active: true
		},
		{ label: "Refunds", icon: "LocalAtm", onClick: () => {} },
		{ label: "Ops TV", icon: "LiveTv", onClick: () => {} },
		{ label: "Rain", customIconPath: rain, onClick: () => {} },
		{ label: "Magnify", customIconPath: magnify, onClick: () => {} }
	]}
	collapsedOnDefault={true}
	onToggle={() => {}}
	className="sidebar"
	data-testid="sidebar"
/>
```
npm package: @talixo-ds/switch
Description: ```bash npm install @talixo-ds/switch ```
Latest version: 3.0.1

# @talixo-ds/switch

## Installation

```bash
npm install @talixo-ds/switch
```

## Importing

```javascript
import { Switch } from "@talixo-ds/switch";
```

## Usage

### CSS import

```javascript
import "@talixo-ds/switch/index.css";
```

### Usage

```jsx
<Switch id="test" />
```
npm package: @talixo-ds/text-input
Description: ```bash npm install @talixo-ds/text-input ```
Latest version: 2.0.1

# @talixo-ds/text-input

## Installation

```bash
npm install @talixo-ds/text-input
```

## Importing

```javascript
import { TextInput } from "@talixo-ds/text-input";
```

## Usage example

```jsx
<TextInput label="Example label" />
```
npm package: @talixo-ds/utils
Description: ```bash npm install @talixo-ds/utils ```
Latest version: 2.0.1

# @talixo-ds/utils

## Installation

```bash
npm install @talixo-ds/utils
```

## Importing

```javascript
import { useFirebase } from "@talixo-ds/utils";
```

## Usage

### Firebase

```javascript
import { useFirebase } from "@talixo-ds/utils";

const { db, auth } = useFirebase();
```

### Firebase utils

```javascript
import { handleFirebaseError, getCollectionPath } from "@talixo-ds/utils";

const error = handleFirebaseError(new Error("test"));
const path = getCollectionPath("users.{{userId}}.orders", [["userId", "123"]]);
```
npm package: @talixo-ds/vite-manifest-formatter
Description: Reformats Vite manifest files to match Talixo's expected structure
Latest version: 2.0.2

# @talixo-ds/vite-manifest-formatter

Reformats Vite manifest files to match Talixo's expected structure by removing hash suffixes and using clean filenames as keys.

## Installation

```bash
npm install --save-dev @talixo-ds/vite-manifest-formatter
```

## Usage

### Command Line Interface

```bash
# Basic usage (looks for ./dist/asset-manifest.json)
npx format-manifest

# Custom path
npx format-manifest ./build/manifest.json

# With backup and verbose output
npx format-manifest --backup --verbose

# Show help
npx format-manifest --help
```

### Package.json Script Integration

```json
{
	"scripts": {
		"format-manifest": "format-manifest",
		"build": "vite build && format-manifest"
	}
}
```

### Programmatic Usage

```typescript
import {
	reformatManifest,
	processManifest
} from "@talixo-ds/vite-manifest-formatter";
import type {
	ViteManifest,
	TalixoManifest
} from "@talixo-ds/vite-manifest-formatter";

// Process existing file
processManifest("./dist/asset-manifest.json", {
	backup: true,
	verbose: true
});

// Transform manifest object
const manifest: ViteManifest = {
	/* your Vite manifest */
};
const reformatted: TalixoManifest = reformatManifest(manifest);
```

## API Reference

### Types

```typescript
interface ViteManifestEntry {
	file: string;
	src: string;
	isEntry?: boolean;
	imports?: string[];
	css?: string[];
}

interface ViteManifest {
	[key: string]: ViteManifestEntry;
}

interface TalixoManifest {
	[key: string]: string;
}

interface ProcessOptions {
	outputPath?: string;
	backup?: boolean;
	verbose?: boolean;
}
```

### Functions

#### `reformatManifest(manifest: ViteManifest): TalixoManifest`

Transforms manifest object structure from Vite format to Talixo format.

**Parameters:**

- `manifest` - The original Vite manifest object

**Returns:** Reformatted manifest in Talixo format

#### `processManifest(path: string, options?: ProcessOptions): TalixoManifest`

Processes manifest file at given path and writes the reformatted version.

**Parameters:**

- `path` - Path to the manifest file
- `options` - Processing options
  - `outputPath` - Output file path (defaults to input path)
  - `backup` - Create backup file (default: false)
  - `verbose` - Enable verbose logging (default: false)

**Returns:** The reformatted manifest object

## Input/Output Example

**Input (Vite manifest):**

```json
{
	"src/index.tsx": {
		"file": "main-a1b2c3d4.js",
		"src": "src/index.tsx",
		"isEntry": true
	},
	"src/styles/main.css": {
		"file": "main-e5f6g7h8.css",
		"src": "src/styles/main.css"
	}
}
```

**Output (Talixo format):**

```json
{
	"main.js": "main-a1b2c3d4.js",
	"main.css": "main-e5f6g7h8.css"
}
```

## Development

### Building

```bash
npm run build
```

### Testing

```bash
npm test
```

### Running Tests in Watch Mode

```bash
npm run test
```

## License

MIT