open-index/open-npm huggingface dataset:
npm package: @malga/data-table
Latest version: 1.0.0

# @malga/data-table



## Instalação

Para instalar o pacote, utilize:

```sh
pnpm add @malga/data-table
```

ou com Yarn:

```sh
yarn add @malga/data-table
```

ou com npm:

```sh
npm install @malga/data-table
```

## Uso

Importe e utilize o componente dentro do seu projeto React:

```tsx
import { DataTable, DataTableColumn } from "@malga/data-table";

function App() {

  const [pagination, setPagination] = useState({
    currentPage: 1,
    itemsPerPage: 10,
    totalPages: 10,
    totalItems: 100,
    itemCount: 10,
  })

  interface Data {
    id: string
    name: string
  }

  const data = [
    { id: "12", name: "John Doe" }, 
    { id: "13", name: "Jane Doe" },
  ]

  const columns: DataTableColumn = [
    { header: "ID", accessorKey: "id" },
    { header: "Name", accessorKey: "name" },
  ]

  return (
    <DataTable>
      <DataTable.Content data={data} columns={columns} />
      <DataTable.Pagination pagination={pagination}>
        <DataTable.PaginationGroup justifyContent="space-between">
          <DataTable.ItemsPerPage
            handleItemsPerPageChange={(value) => {
              setPagination((pagination) => ({...pagination, itemsPerPage: value}))
            }}
            itemsPerPageOptions={[10, 20, 30]}
          />
          <DataTable.PaginationCount />
        </DataTable.PaginationGroup>

        <DataTable.PaginationGroup justifyContent="flex-end">
          <DataTable.PaginationIndicator 
            onPageChange={(page) => setPagination((prev) => ({ ...prev, currentPage: page }))}
          />
          <DataTable.PaginationControls
            onFirstPage={() => setPagination((prev) => ({ ...prev, currentPage: 1 }))}
            onLastPage={() => setPagination((prev) => ({ ...prev, currentPage: prev.totalPages }))}
            onNextPage={() => setPagination((prev) => ({ ...prev, currentPage: prev.currentPage + 1 }))}
            onPreviousPage={() => setPagination((prev) => ({ ...prev, currentPage: prev.currentPage - 1 }))}
          />
        </DataTable.PaginationGroup>
      </DataTable.Pagination>
    </DataTable>
  )
}
```
npm package: @malga/theme
Description: Pacote de tokens de design utilizado no design system da Malga. Contém definições de cores, espaçamentos, tipografia e demais variáveis de estilo.
Latest version: 1.0.0

# @malga/theme

Pacote de tokens de design utilizado no design system da Malga. Contém definições de cores, espaçamentos, tipografia e demais variáveis de estilo.

## Instalação

Para instalar o pacote, utilize:

```sh
pnpm add @malga/theme
```

ou com Yarn:

```sh
yarn add @malga/theme
```

ou com npm:

```sh
npm install @malga/theme
```

## Uso

O pacote exporta os tokens do tema para uso em aplicações. Exemplo de importação:

```tsx
import { theme, colors } from "@malga/theme";

console.log(theme); // Exibe os tokens do tema
console.log(colors); // Exibe apenas os tokens de cores
```
npm package: @malga/typography
Latest version: 1.0.0

# @malga/typography



## Instalação

Para instalar o pacote, utilize:

```sh
pnpm add @malga/typography
```

ou com Yarn:

```sh
yarn add @malga/typography
```

ou com npm:

```sh
npm install @malga/typography
```

## Uso

Importe e utilize o componente dentro do seu projeto React:

```tsx
import { Typography } from '@malga/typography'

function MyComponent() {
  return (
    <div>
      {/* Heading example */}
      <Typography variant="h1" color="brandMalGreen500">
        Welcome to Malga
      </Typography>

      {/* Body text example */}
      <Typography variant="body1" color="brandMalBlack500">
        This is a regular paragraph text using the body1 variant.
      </Typography>

      {/* Subtitle example */}
      <Typography variant="subtitle1" color="secondaryMalBlue500">
        This is a subtitle with a different color
      </Typography>

      {/* Using as a different HTML element */}
      <Typography variant="h2" component="h2" color="brandMalPink500">
        This will render as an h2 element
      </Typography>
    </div>
  )
}
```