open-index/open-npm huggingface dataset:
npm package: @solid-antd/icons
Description: Ant Design Icons for Solid
Author: wuzhitao
Latest version: 0.1.5

<h1 align="center">
Ant Design Icons for Solid
</h1>

## Install

```bash
npm install @solid-antd/icons
```

## Basic Usage

First, you should add the icons that you need into the library.

```js
import { DollarCircleOutlined } from '@solid-antd/icons'
```

After that, you can use antd icons in your Solid components as simply as this:

```jsx
<DollarCircleOutlined />
```

## Build project

```bash
npm run dev
npm run build:lib
npm run release
```
npm package: @solid-aria/collection
Description: Primitives for dealing with collection of items.
Author: Fabien Marie-Louise
Latest version: 0.2.0

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Collection" alt="Solid Aria - Collection">
</p>

# @solid-aria/collection

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/collection?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/collection)
[![version](https://img.shields.io/npm/v/@solid-aria/collection?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/collection)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Primitives for dealing with collection of items.

## Installation

```bash
npm install @solid-aria/collection
# or
yarn add @solid-aria/collection
# or
pnpm add @solid-aria/collection
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/i18n
Description: Primitives for dealing with locale and layout direction.
Author: Fabien Marie-Louise
Latest version: 0.2.0

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=I18n" alt="Solid Aria - I18n">
</p>

# @solid-aria/i18n

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/i18n?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/i18n)
[![version](https://img.shields.io/npm/v/@solid-aria/i18n?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/i18n)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Primitives for dealing with locale and layout direction.

- [`I18nProvider`](#I18nProvider) - Provides the locale for the application to all child components.
- [`useLocale`](#useLocale) - Returns the current locale and layout direction.

## Installation

```bash
npm install @solid-aria/i18n
# or
yarn add @solid-aria/i18n
# or
pnpm add @solid-aria/i18n
```

## `I18nProvider`

`I18nProvider` allows you to override the default locale as determined by the browser/system setting with a locale defined by your application (e.g. application setting). This should be done by wrapping your entire application in the provider, which will be cause all child elements to receive the new locale information via `useLocale`.

### How to use it

```tsx
import { I18nProvider } from "@solid-aria/i18n";

function App() {
  return (
    <I18nProvider locale="fr-FR">
      <YourApp />
    </I18nProvider>
  );
}
```

## `useLocale`

`useLocale` allows components to access the current locale and interface layout direction. By default, this is automatically detected based on the browser or system language, but it can be overridden by using the `I18nProvider` at the root of your app.

`useLocale` should be used in the root of your app to define the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes so that the browser knows which language and direction the user interface should be rendered in.

### How to use it

```tsx
import { useLocale } from "@solid-aria/i18n";

function App() {
  const locale = useLocale();

  return (
    <div lang={locale().locale} dir={locale().direction}>
      {/* your app here */}
    </div>
  );
}
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/label
Description: Primitives that provides the accessibility implementation for labels and their associated elements.
Author: Fabien Marie-Louise
Latest version: 0.1.4

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Label" alt="Solid Aria - Label">
</p>

# @solid-aria/label

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/label?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/label)
[![version](https://img.shields.io/npm/v/@solid-aria/label?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/label)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Labels provide context for user inputs.

## Installation

```bash
npm install @solid-aria/label
# or
yarn add @solid-aria/label
# or
pnpm add @solid-aria/label
```

## `createLabel`

Provides the accessibility implementation for labels and their associated elements. It associates a label with a field and automatically handles creating an id for the field and associates the label with it.

### How to use it

```tsx
import { AriaLabelProps, createLabel } from "@solid-aria/label";

interface ColorFieldProps extends AriaLabelProps {
  // your component specific props
}

function ColorField(props: ColorFieldProps) {
  const { labelProps, fieldProps } = createLabel(props);

  return (
    <>
      <label {...labelProps}>{props.label}</label>
      <select {...fieldProps}>
        <option>Indigo</option>
        <option>Maroon</option>
        <option>Chartreuse</option>
      </select>
    </>
  );
}

function App() {
  return <ColorField label="Favorite color" />;
}
```

By default, `createLabel` assumes that the label is a native HTML label element. However, if you are labeling a non-native form element, be sure to use an element other than a `<label>` and set the `labelElementType` prop appropriately.

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/list
Description: Primitives for managing list collections.
Author: Fabien Marie-Louise
Latest version: 0.1.4

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=List" alt="Solid Aria - List">
</p>

# @solid-aria/list

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/list?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/list)
[![version](https://img.shields.io/npm/v/@solid-aria/list?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/list)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Primitives for managing list collections.

## Installation

```bash
npm install @solid-aria/list
# or
yarn add @solid-aria/list
# or
pnpm add @solid-aria/list
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/primitives
Description: A library of high-quality primitives that help you build accessible user interfaces with SolidJS.
Author: Fabien Marie-Louise
Latest version: 0.4.0

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Primitives" alt="Solid Aria - Primitives">
</p>

# @solid-aria/primitives

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/primitives?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/primitives)
[![version](https://img.shields.io/npm/v/@solid-aria/primitives?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/primitives)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

A library of high-quality primitives that help you build accessible user interfaces with SolidJS. `@solid-aria/primitives` export all Solid Aria primitives in a single convenient package.

## Installation

```bash
npm install @solid-aria/primitives
# or
yarn add @solid-aria/primitives
# or
pnpm add @solid-aria/primitives
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/selection
Description: Primitives for managing selection in collections.
Author: Fabien Marie-Louise
Latest version: 0.1.5

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Selection" alt="Solid Aria - Selection">
</p>

# @solid-aria/selection

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/selection?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/selection)
[![version](https://img.shields.io/npm/v/@solid-aria/selection?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/selection)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Primitives for managing selection in collections.

## Installation

```bash
npm install @solid-aria/selection
# or
yarn add @solid-aria/selection
# or
pnpm add @solid-aria/selection
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/separator
Description: Primitives for building accessible separator component.
Author: Fabien Marie-Louise
Latest version: 0.0.2

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Separator" alt="Solid Aria - Separator">
</p>

# @solid-aria/separator

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/separator?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/separator)
[![version](https://img.shields.io/npm/v/@solid-aria/separator?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/separator)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.

- [`createSeparator`](#createseparator) - Provides the accessibility implementation for a separator.

## Installation

```bash
npm install @solid-aria/separator
# or
yarn add @solid-aria/separator
# or
pnpm add @solid-aria/separator
```

## `createSeparator`

### Features

Horizontal separators can be built with the HTML `<hr>` element. However, there is no HTML element for a vertical separator. `createSeparator` helps achieve accessible separators that can be styled as needed.

- Support for horizontal and vertical orientation
- Support for HTML `<hr>` element or a custom element type

### How to use it

This example shows how create both a horizontal and a vertical oriented separator.

```tsx
import { AriaSeparatorProps, createSeparator } from "@solid-aria/separator";

function Separator(props: AriaSeparatorProps) {
  const { separatorProps } = createSeparator(props);

  return (
    <div
      {...separatorProps}
      style={{
        background: "gray",
        width: props.orientation === "vertical" ? "1px" : "100%",
        height: props.orientation === "vertical" ? "100%" : "1px",
        margin: props.orientation === "vertical" ? "0 5px" : "5px 0"
      }}
    />
  );
}

function App() {
  return (
    <>
      <div style={{ display: "flex", "flex-direction": "column" }}>
        Content above
        <Separator />
        Content below
      </div>
      <div
        style={{
          display: "flex",
          "flex-direction": "row",
          "margin-top": "20px",
          height: "40px",
          "align-items": "center"
        }}
      >
        Content left
        <Separator orientation="vertical" />
        Content right
      </div>
    </>
  );
}
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/toggle
Description: Primitives for building toggle components like checkboxes and switches.
Author: Fabien Marie-Louise
Latest version: 0.1.3

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Toggle" alt="Solid Aria - Toggle">
</p>

# @solid-aria/toggle

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/toggle?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/toggle)
[![version](https://img.shields.io/npm/v/@solid-aria/toggle?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/toggle)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Primitives for building toggle components like checkboxes and switches.

## Installation

```bash
npm install @solid-aria/toggle
# or
yarn add @solid-aria/toggle
# or
pnpm add @solid-aria/toggle
```

## `createToggleState`

Provides state management for toggle components like checkboxes and switches.

### How to use it

See the docs of [createCheckbox](../checkbox) for an example of `createToggleState`.

## `createToggle`

Handles interactions for toggle elements, e.g. Checkboxes and Switches.

### How to use it

See the docs of [createCheckbox](../checkbox) for an example of `createToggle`.

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/tree
Description: Primitives for managing tree-like collections.
Author: Fabien Marie-Louise
Latest version: 0.1.4

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Tree" alt="Solid Aria - Tree">
</p>

# @solid-aria/tree

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/tree?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/tree)
[![version](https://img.shields.io/npm/v/@solid-aria/tree?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/tree)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Primitives for managing tree-like collections.

## Installation

```bash
npm install @solid-aria/tree
# or
yarn add @solid-aria/tree
# or
pnpm add @solid-aria/tree
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/types
Description: A collection of type definitions, for building Solid Aria primitives.
Author: Fabien Marie-Louise
Latest version: 0.1.4

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Types" alt="Solid Aria - Types">
</p>

# @solid-aria/types

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/types?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/types)
[![version](https://img.shields.io/npm/v/@solid-aria/types?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/types)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Solid Aria Types is a support and helper package for a number of primitives in our library. Please free to augment or centralize useful type definitions in this package for sharing.

## Installation

```bash
npm install @solid-aria/types
# or
yarn add @solid-aria/types
# or
pnpm add @solid-aria/types
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/utils
Description: A collection of utility types and functions, for building Solid Aria primitives.
Author: Fabien Marie-Louise
Latest version: 0.2.1

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Utils" alt="Solid Aria - Utils">
</p>

# @solid-aria/utils

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/utils?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/utils)
[![version](https://img.shields.io/npm/v/@solid-aria/utils?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/utils)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Solid Aria Utilities is a support and helper package for a number of primitives in our library. Please free to augment or centralize useful utilities and methods in this package for sharing.

## Installation

```bash
npm install @solid-aria/utils
# or
yarn add @solid-aria/utils
# or
pnpm add @solid-aria/utils
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-aria/visually-hidden
Description: Primitives for creating visually hidden element that is still visible to assistive technology.
Author: Fabien Marie-Louise
Latest version: 0.1.3

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Visually%20Hidden" alt="Solid Aria - Visually Hidden">
</p>

# @solid-aria/visually-hidden

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/visually-hidden?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/visually-hidden)
[![version](https://img.shields.io/npm/v/@solid-aria/visually-hidden?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/visually-hidden)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Visually hidden is a common technique for hidding an element visually, while keeping it visible to screen readers and other assistive technology. This would typically be used when you want to take advantage of the behavior and semantics of a native element like a checkbox or radio button, but replace it with a custom styled element visually.

## Installation

```bash
npm install @solid-aria/visually-hidden
# or
yarn add @solid-aria/visually-hidden
# or
pnpm add @solid-aria/visually-hidden
```

## `createVisuallyHidden`

Provides props for an element that hides its children visually, but keeps content visible to assistive technology.

### How to use it

```jsx
import { createVisuallyHidden } from "@solid-aria/visually-hidden";

function Example() {
  const { visuallyHiddenProps } = createVisuallyHidden();

  return <div {...visuallyHiddenProps}>I am hidden</div>;
}
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
npm package: @solid-auth/client
Description: Client Adapter For SOlid Auth
Author: OrJDev
Latest version: 0.0.1

# Solid Auth

This is a solid client adapter for solid-auth, this will allow you to access the current logged in user in from client side.

## Installation

```bash
npm install @solid-auth/client
```

## Creating A Client

```ts
// utils/auth.ts
import { createSolidAuthClient } from "@solid-auth/core";
import { adaptAuthClient } from "@solid-auth/client";
import { sessionStorage } from "./auth"; // where your cookie session storage is located

type MyUser = {...}
const baseURL = "https://example.com";
export const authClient = createSolidAuthClient(baseURL);
export const adpAuthClient = adaptAuthClient<MyUser>(authClient, sessionStorage); // magic
```

## Wrapping Your App

```tsx
// root.tsx
import { adpAuthClient } from "./utils/auth";
{...}

export default function Root() {
  {...}
  return (
    <Html lang="en">
      <Head>
        <Title>Create JD App</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
      {/* the provider of the auth */}
        <adpAuthClient.Provider>
            <Suspense>
              <ErrorBoundary>
                <Routes>
                  <FileRoutes />
                </Routes>
              </ErrorBoundary>
            </Suspense>
        </adpAuthClient.Provider>
        <Scripts />
      </Body>
    </Html>
  );
}
```

## Using the session

```tsx
//components/NavBar.tsx
import { Show, type Component } from "solid-js";
import { adpAuthClient } from "~/utils/auth";

const NavBar: Component = () => {
  const session = adpAuthClient.useSession();
  return (
    <nav class="w-full h-12 px-12  bg-slate-300 flex gap-2 items-center">
      <Show
        when={session().user}
        keyed
        fallback={<p class="font-bold text-lg text-gray-500">Not Logged In</p>}
      >
        {(user) => (
          <>
            <Show when={user.avatar} keyed>
              {(avatar) => <img src={avatar} class="w-10 h-10 rounded-full" />}
            </Show>
            <p class="text-white text-lg font-bold">{user.displayName}</p>
          </>
        )}
      </Show>
    </nav>
  );
};

export default NavBar;
```
npm package: @solid-cli/core
Description: A CLI for Solid
Author: Thomas Beer & Rahul Batra
Latest version: 0.0.26

# @solid-cli/core

The main package for the SolidJS CLI tool.

## Installation

Run the following command to install the CLI tool globally:

```bash
npm i -g @solid-cli/core
```

## Usage

For a full list of commands and how to use them, you can invoke the help command like so:

```bash
solid --help
```

Which should print this:

```bash
solid <subcommand>

where <subcommand> can be one of:

- add - Can add and install integrations: `solid add unocss`.
- docs
- new - Creates a new solid project
- set
- start - Commands specific to solid start
- playground

For more help, try running `solid <subcommand> --help`
```

## Documentation

Visit our [official documentation](https://solid-cli.netlify.app/)

## Support

Reach out to us on the official [SolidJS discord](https://discord.gg/solidjs)

## Contributing

If you would like to contribute or keep up to date with the package, come join the effort over on [our GitHub](https://github.com/solidjs-community/solid-cli)
npm package: @solid-cli/create
Description: Create Solid apps with low configuration
Author: Thomas Beer
Latest version: 0.7.0

# @solid-cli/create

A library for easily initialising Solid projects

## Usage

### Initialising a Vanilla project

```ts
import { createVanilla } from "@solid-cli/create";
createVanilla({ template: "ts", destination: "./ts" });
```

### Initialising a Start project

```ts
import { createStart } from "@solid-cli/create";
createStart({ template: "basic", destination: "./basic" });
```

### Initialising a Library project

```ts
import { createLibrary } from "@solid-cli/create";
createLibrary({ destination: "./library-project" });
```
npm package: @solid-cli/create-solid
Description: A stripped down Solid CLI just for creating new projects
Author: Thomas Beer & Rahul Batra
Latest version: 0.0.19

# @solid-cli/create-solid

A minimal version of the [main CLI](https://www.npmjs.com/package/@solid-cli/core) just for creating new projects.

Invoked with the `create-solid` command
npm package: @solid-design-system/eslint-plugin
Description: ESLint custom rules for the Solid Design System component library
Author: Union Investment
Latest version: 1.0.2

# @solid-design-system/eslint-plugin

## Overview

This package is a custom ESLint plugin designed to extend linting capabilities in your project. It provides custom ESLint rules to the Solid Design System component library, helping to enforce coding standards and catch potential issues when working with the library.

## Installation

```bash
npm install --save-dev @solid-design-system/eslint-plugin
```

or with Yarn:

```bash
yarn add --dev @solid-design-system/eslint-plugin
```

## Configuration

### Minimal configuration

```js
import sds from '@solid-design-system/eslint-plugin';

export default [
  {
    ...sds.configs.recommended,
    files: ['**/*.{html,jsx}']
  }
];
```

### Recommended rules with some customization

```js
import sds from '@solid-design-system/eslint-plugin';

export default [
  {
    ...sds.configs.recommended,
    files: ['**/*.{html,jsx}'],
    rules: {
      ...sds.configs.recommended.rules, // Must be defined. If not, all recommended rules will be lost
      '@solid-design-system/required-sd-icon-label': 'error'
    }
  }
];
```

## Adding New Rules

1. Create a new file for the rule under the `src/rules` directory.
2. Implement the rule logic and export it.
3. Update the `index.ts` file in `src/rules` to include the new rule.
4. Add corresponding documentation under `docs/rules/`.
5. Create necessary tests to cover both valid and invalid scenarios.

## Testing

Run the tests to verify rule behavior:

```bash
npm test
```
npm package: @solid-design-system/styles
Description: Solid Design System: Styles
Author: Union Investment
Latest version: 6.13.0

<div className="flex gap-2">
  ![MIT License](https://img.shields.io/badge/License-MIT-green.svg)
  ![NPM Version](https://img.shields.io/npm/v/%40solid-design-system%2Fstyles)
</div>

# @solid-design-system/styles

This package provides easy to use standalone helper classes.
npm package: @solid-devtools/babel-plugin
Description: Babel plugin for transforming SolidJS code in development to enchance solid-devtools usage.
Author: Damian Tarnawski
Latest version: 0.3.1
Deprecated: Package moved to @solid-devtools/transform

<a href="https://github.com/thetarnav/solid-devtools/tree/main/packages/babel-plugin#readme" target="_blank">
  <p>
    <img width="100%" src="https://assets.solidjs.com/banner?type=Devtools&background=tiles&project=Babel Plugin" alt="Solid Devtools Babel Plugin">
  </p>
</a>

# @solid-devtools/babel-plugin

Babel plugin for transforming SolidJS code in development to enchance solid-devtools usage.

## Getting Started

### Installation

```bash
npm i @solid-devtools/babel-plugin
# or
yarn add @solid-devtools/babel-plugin
# or
pnpm i @solid-devtools/babel-plugin
```

### Setup

```ts
// vite.config.ts

import { defineConfig } from "vite"
import solidPlugin from "vite-plugin-solid"
import { devtoolsPlugin } from "@solid-devtools/babel-plugin"

export default defineConfig({
  plugins: [devtoolsPlugin(), solidPlugin()],
})
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md).
npm package: @solid-devtools/frontend
Description: <a href="https://github.com/thetarnav/solid-devtools/tree/main/packages/frontend#readme" target="_blank">   <p>     <img width="100%" src="https://assets.solidjs.com/banner?type=Devtools&background=tiles&project=Frontend" alt="Solid Devtools Frontend">   
Author: Damian Tarnawski
Latest version: 0.15.4

<a href="https://github.com/thetarnav/solid-devtools/tree/main/packages/frontend#readme" target="_blank">
  <p>
    <img width="100%" src="https://assets.solidjs.com/banner?type=Devtools&background=tiles&project=Frontend" alt="Solid Devtools Frontend">
  </p>
</a>

# @solid-devtools/frontend

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![version](https://img.shields.io/npm/v/@solid-devtools/frontend?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/frontend)
[![npm](https://img.shields.io/npm/dw/@solid-devtools/frontend?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/frontend)

The frontend of the devtools extension as a npm package, so it can be embedded in different projects.

## Getting started

### Installation

```bash
npm i @solid-devtools/frontend
# or
yarn add @solid-devtools/frontend
# or
pnpm add @solid-devtools/frontend
```

### The debugger

The [debugger](https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger#readme) package is what you should use to get information out of the reactivity graph of an app you want to debug and display on the devtools.

You can communicate with it using it's plugin API. For reference, see the [main](https://github.com/thetarnav/solid-devtools/tree/main/packages/main/src) package, which contains the code to communicate with the debugger from the devtools extension through a chrome postMessage API.

### The controller

The devtools frontend is controlled with a `Controller` API. It provides a set of methods to trigger actions, and a way to get events from the devtools frontend.

```ts
const controller = new Controller({
  onDevtoolsLocatorStateChange(enabled) {
    console.log(enabled)
  },
  onHighlightElementChange(data) {
    console.log(data)
  },
  onInspectNode(data) {
    console.log(data)
  },
  onInspectValue(data) {
    console.log(data)
  },
})
```

This package is continuously under development, so the API is still not well defined. So instead of focusing on the API, the usage examples should show how you can embed this package in different context.

- [Chrome Extension](https://github.com/thetarnav/solid-devtools/blob/main/extension/src/App.tsx) - The extension is communicating with the [debugger](https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger#readme) using the [main](https://github.com/thetarnav/solid-devtools/tree/main/packages/main/src) npm package.

- [Overlay component](https://github.com/thetarnav/solid-devtools/blob/main/packages/overlay/src/controller.ts)

## Changelog

See [CHANGELOG.md](./CHANGELOG.md).
npm package: @solid-devtools/overlay
Description: On-page Devtools Overlay for SolidJS Applications.
Author: Damian Tarnawski
Latest version: 0.33.5

<a href="https://github.com/thetarnav/solid-devtools/tree/main/packages/overlay#readme" target="_blank">
  <p>
    <img width="100%" src="https://assets.solidjs.com/banner?type=Devtools&background=tiles&project=Devtools%20Overlay" alt="Solid Devtools Overlay">
  </p>
</a>

# @solid-devtools/overlay

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![version](https://img.shields.io/npm/v/@solid-devtools/overlay?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/overlay)
[![npm](https://img.shields.io/npm/dw/@solid-devtools/overlay?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/overlay)

An on-page devtools overlay for debugging SolidJS Applications without a chrome extension.

Simply add the Overlay component to your app and get access to a powerful, in-browser devtools experience during development. _(It will be removed in production)_

## Try it online!

A couple of deployed demo websites where you can see the Overlay in action:

- [Sandbox Website](https://thetarnav.github.io/solid-devtools) - [Source code](https://github.com/thetarnav/solid-devtools/tree/main/examples/sandbox)

## Getting started

### Installation

```bash
npm i @solid-devtools/overlay
# or
yarn add @solid-devtools/overlay
# or
pnpm add @solid-devtools/overlay
```

### Attach the overlay

Simply place the overlay component in the client entry file.

```tsx
import { attachDevtoolsOverlay } from '@solid-devtools/overlay'

attachDevtoolsOverlay()

// or with some options

attachDevtoolsOverlay({
  defaultOpen: true, // or alwaysOpen
  noPadding: true,
})
```

Don't worry about wrapping it with a `isDev` guard, the Overlay takes care of that for you. It should be excluded from production builds automatically.

### Enabling the autoname

Enabling the autoname setting is optional, but can display name of SolidJS's reactive state in overlay.

To enable it you need to add it to plugins array in your `.vite.config.ts` file:

```ts
// vite.config.ts

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import devtools from 'solid-devtools/vite'

export default defineConfig({
  plugins: [
    devtools({
      autoname: true,
    }),
    solid(),
  ],
})
```

[**See vite plugin**](https://github.com/thetarnav/solid-devtools/blob/main/packages/main/src/vite/vite.ts)

## Changelog

See [CHANGELOG.md](./CHANGELOG.md).
npm package: @solid-foundation/primitive-button
Description: A primitive button component for Solid Foundation - a simple wrapper around native HTML button with accessibility features
Author: Olle Lukowski
Latest version: 0.1.0

# Solid Foundation Button Primitive

A primitive button component for Solid Foundation.
A very simple wrapper around a native HTML `button` element, with some extra props for convenience and consistent accessibility.

## Installation

```bash
pnpm add @solid-foundation/primitive-button
```

## Usage

```tsx
import { Button } from '@solid-foundation/primitive-button'

function App() {
  return <Button>Click me!</Button>
}
```

## Props

### `as`

The element or component to render as. Defaults to `button`.

### `disabled`

Whether the button is disabled. Defaults to `false`.

### `loading`

Whether the button is in a loading state. Defaults to `false`.

### `loadingText`

Screen reader text for loading state. Defaults to `Loading...`.

### `variant`

Button variant for semantic meaning. Defaults to `primary`.

### `size`

Button size. Defaults to `md`.
npm package: @solid-foundation/primitives
Description: A collection of primitives for Solid Foundation - reusable UI primitives built with SolidJS
Author: Olle Lukowski
Latest version: 0.1.0

# Solid Foundation Primitives

A collection of primitives for Solid Foundation.

## Installation

```bash
pnpm add @solid-foundation/primitives
```

## Usage

```tsx
import { Button } from '@solid-foundation/primitives'

function App() {
  return <Button>Click me!</Button>
}
```
npm package: @solid-gadgets/components
Description: A SolidJS component library.
Latest version: 0.1.0

# Solid-gadgets components

Here are some practical solid components that you can use in your daily projects.
Your may also find its corresponding web-component~

You can see the [demos](https://s-elo.github.io/solid-gadgets/) here as well.

- [Resizable Splitter](./src/ResizableLayout/README.md)
npm package: @solid-hooks/dollar
Description: object style solid.js primitives
Author: subframe7536
Latest version: 0.1.0

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=@solid-hooks/atom&background=tiles&project=%20" alt="@solid-hooks/atom">
</p>

# @solid-hooks/dollar

object style solid.js primitives

## Install

```shell
npm i @solid-hooks/atom
```
```shell
yarn add @solid-hooks/atom
```
```shell
pnpm add @solid-hooks/atom
```

## Usage

### `$`

object wrapper for `createSignal`

```ts
import { $ } from '@solid-hooks/atom'

const data = $(0)

console.log(data()) // 0
console.log(data.$set(1)) // set value
```

### `$$`

`untrack` alias

### `$memo`

object wrapper for `createMemo`

```ts
import { $, $memo } from '@solid-hooks/atom'

const test = $('test')
const memo = $memo(() => `value: ${test()}`, { value: 'test' })
```

### `$store`

object wrapper for `createStore`

```ts
import { $store } from '@solid-hooks/atom'

const store = $store({ test: { deep: 1 } })

store() // { test: { deep: 1 } }
store.$set('test', 'deep', 2) // set value
```

### `$resource`

object wrapper for `createResource`

```ts
import { $, $resource } from '@solid-hooks/atom'

const fetcher = (source: string) => Promise.resolve(`${source} data`)
const source = $('source')
const data = $resource(source, fetcher, {
  initialValue: 'test'
})

data() // 'test'
data.loading // true
data.state // pending

await Promise.resolve()

data() // 'source data'
data.loading // false
data.state // ready

data.$mutate()
data.$refetch()
```

### `$effect`

normal effect, alias for `createEffect`

### `$effectRendered`

run effect after rendered, be able to access DOM, alias for `createRenderEffect`

### `$effectInstant`

run effect instantly, alias for `createComputed`

### `$deferred`

defer update notification until browser idle, alias for `createDeferred`

### `$selector`

object wrapper for `createSelector`

```tsx
import { For } from 'solid-js'
import { $selector } from '@solid-hooks/atom'

const activeId = $selector(0)
activeId.$set(1)

return (
  <For each={list()}>
    {item => (
      <li classList={{ active: activeId.$bind(item.id) }}>
        {item.name}
      </li>
    )}
  </For>
)
```
npm package: @solid-hooks/drag
Description: drag hooks for solid.js
Author: subframe7536
Latest version: 0.1.0

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=@solid-hooks/drag&background=tiles&project=%20" alt="@solid-hooks/drag">
</p>

# @solid-hooks/drag

drag hooks for solid.js

## Install

```shell
npm i @solid-hooks/drag
```
```shell
yarn add @solid-hooks/drag
```
```shell
pnpm add @solid-hooks/drag
```

## Usage

### `useDrag`

make element draggable

```tsx
import { createSignal } from 'solid-js'
import { useDrag } from '@solid-hooks/drag'

export default function App() {
  const [el, setEl] = createSignal<HTMLElement>()
  const [handleEl, setHandleEl] = createSignal<HTMLElement>()

  const {
    position,
    resetPosition,
    enable,
    disable,
    isDragging,
    isDraggable,
  } = useDrag(el, {
    initialPosition: { x: 500, y: 80 },
    addStyle: true, // auto update el's left and top
    handleEl,
  })
  return (
    <>
      <div
        ref={setEl}
        style={{ position: 'fixed' }}
      >
        I am at {Math.round(position().x)}, {Math.round(position().y)}
        <div
          ref={setHandleEl}
          style={{ position: 'fixed' }}
        >
          drag me
        </div>
      </div>
      <div>is draggable: {'' + isDraggable()}</div>
      <div>is dragging: {'' + isDragging()}</div>
      <div>
        <button onClick={enable}>enable</button>
        <button onClick={disable}>disable</button>
        <button onClick={resetPosition}>reset position</button>
      </div>
    </>
  )
}
```

## License

MIT
npm package: @solid-integrations/html2canvas
Description: An integration with html2canvas
Author: Thomas Beer
Latest version: 0.0.200

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=html2canvas" alt="Solid Primitives html2canvas">
</p>

# @solid-integrations/html2canvas

[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-integrations/html2canvas?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-integrations/html2canvas)
[![version](https://img.shields.io/npm/v/@solid-integrations/html2canvas?style=for-the-badge)](https://www.npmjs.com/package/@solid-integrations/html2canvas)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

An integration for html2canvas, which contains the following functions:

- [`makeScreenshotURL`](#makescreenshoturl) - Makes an object URL to an image of the given html element.
- [`createScreenshotURL`](#createscreenshoturl) - Creates a resource

## Installation

```bash
npm install @solid-integrations/html2canvas
# or
yarn add @solid-integrations/html2canvas
# or
pnpm add @solid-integrations/html2canvas
```

## How to use it

## `makeScreenshotURL`

```ts
const imgURL: string = makeScreenshotURL(document.getElementById("root"));
```

## `createScreenshotURL`

```ts
const imgURL: Resource<string> = createScreenshotURL(document.getElementById("root"));
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-integrations/prettier
Description: An integration with prettier to format code
Author: Thomas Beer
Latest version: 0.0.200

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=prettier" alt="Solid Primitives prettier">
</p>

# @solid-integrations/prettier

[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-integrations/prettier?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-integrations/prettier)
[![version](https://img.shields.io/npm/v/@solid-integrations/prettier?style=for-the-badge)](https://www.npmjs.com/package/@solid-integrations/prettier)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

A sample primitive that is made up for templating with the following options:

`createFormatted` - Provides a reactive resource - giving the prettier formatted version of the code provided.

## Installation

```bash
npm install @solid-integrations/prettier
# or
yarn add @solid-integrations/prettier
# or
pnpm add @solid-integrations/prettier
```

## How to use it

```ts
const [code, setCode] = createSignal(
  `function terriblyFormatted(     ){      console.log("This code is terribly formatted")}`,
);
const formattedCode = createFormatted(code);
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)
npm package: @solid-integrations/qrcode-generator
Description: An integration with qrcode-generator
Author: Thomas Beer
Latest version: 0.0.100

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=qrcode-generator" alt="Solid Primitives qrcode-generator">
</p>

# @solid-integrations/qrcode-generator

[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-integrations/qrcode-generator?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-integrations/qrcode-generator)
[![version](https://img.shields.io/npm/v/@solid-integrations/qrcode-generator?style=for-the-badge)](https://www.npmjs.com/package/@solid-integrations/qrcode-generator)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

An integration with [`qrcode-generator`](https://www.npmjs.com/package/qrcode-generator) for generating qr code data URLs:

- [`makeQRCode`](#makeqrcode) - Generates a QR Code Data URL.
- [`createQRCode`](#createqrcode) - Generates a memo containing the Data URL.

## Installation

```bash
npm install @solid-integrations/qrcode-generator
# or
yarn add @solid-integrations/qrcode-generator
# or
pnpm add @solid-integrations/qrcode-generator
```

## How to use it

## `makeQRCode`

Synchronously generates a data URL for a QR Code containing the given string

```ts
const qrCode = makeQRCode("Hello World");
```

## `createQRCode`

Returns a memo with the data URL for a QR Code

```ts
const [str, setStr] = createSignal("");
const qrCode = createQRCode(str); //The value of qrCode will reactively update when `str` changes.
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)